@mantine/core 7.6.0 → 7.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (241) hide show
  1. package/cjs/components/ActionIcon/ActionIcon.cjs +3 -1
  2. package/cjs/components/ActionIcon/ActionIcon.cjs.map +1 -1
  3. package/cjs/components/ActionIcon/ActionIcon.module.css.cjs +1 -1
  4. package/cjs/components/Autocomplete/Autocomplete.cjs +2 -1
  5. package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
  6. package/cjs/components/Button/Button.cjs +11 -2
  7. package/cjs/components/Button/Button.cjs.map +1 -1
  8. package/cjs/components/Button/Button.module.css.cjs +1 -1
  9. package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs +5 -2
  10. package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map +1 -1
  11. package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs +2 -1
  12. package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map +1 -1
  13. package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs +5 -2
  14. package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map +1 -1
  15. package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs +5 -3
  16. package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
  17. package/cjs/components/InlineInput/InlineInput.cjs +21 -1
  18. package/cjs/components/InlineInput/InlineInput.cjs.map +1 -1
  19. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs +1 -1
  20. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs.map +1 -1
  21. package/cjs/components/ModalBase/ModalBaseContent.cjs +0 -6
  22. package/cjs/components/ModalBase/ModalBaseContent.cjs.map +1 -1
  23. package/cjs/components/ModalBase/use-modal.cjs +10 -5
  24. package/cjs/components/ModalBase/use-modal.cjs.map +1 -1
  25. package/cjs/components/MultiSelect/MultiSelect.cjs +2 -2
  26. package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
  27. package/cjs/components/PinInput/PinInput.cjs +5 -0
  28. package/cjs/components/PinInput/PinInput.cjs.map +1 -1
  29. package/cjs/components/SegmentedControl/SegmentedControl.cjs +1 -1
  30. package/cjs/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
  31. package/cjs/components/Select/Select.cjs +2 -1
  32. package/cjs/components/Select/Select.cjs.map +1 -1
  33. package/cjs/components/Switch/Switch.cjs +4 -2
  34. package/cjs/components/Switch/Switch.cjs.map +1 -1
  35. package/cjs/components/TagsInput/TagsInput.cjs +2 -2
  36. package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
  37. package/cjs/components/Transition/use-transition.cjs +18 -10
  38. package/cjs/components/Transition/use-transition.cjs.map +1 -1
  39. package/esm/components/ActionIcon/ActionIcon.mjs +3 -1
  40. package/esm/components/ActionIcon/ActionIcon.mjs.map +1 -1
  41. package/esm/components/ActionIcon/ActionIcon.module.css.mjs +1 -1
  42. package/esm/components/Autocomplete/Autocomplete.mjs +2 -1
  43. package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
  44. package/esm/components/Button/Button.mjs +11 -2
  45. package/esm/components/Button/Button.mjs.map +1 -1
  46. package/esm/components/Button/Button.module.css.mjs +1 -1
  47. package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs +5 -2
  48. package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs.map +1 -1
  49. package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs +2 -1
  50. package/esm/components/Combobox/ComboboxSearch/ComboboxSearch.mjs.map +1 -1
  51. package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs +5 -2
  52. package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map +1 -1
  53. package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs +5 -3
  54. package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
  55. package/esm/components/InlineInput/InlineInput.mjs +21 -1
  56. package/esm/components/InlineInput/InlineInput.mjs.map +1 -1
  57. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs +1 -1
  58. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs.map +1 -1
  59. package/esm/components/ModalBase/ModalBaseContent.mjs +0 -6
  60. package/esm/components/ModalBase/ModalBaseContent.mjs.map +1 -1
  61. package/esm/components/ModalBase/use-modal.mjs +10 -5
  62. package/esm/components/ModalBase/use-modal.mjs.map +1 -1
  63. package/esm/components/MultiSelect/MultiSelect.mjs +2 -2
  64. package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
  65. package/esm/components/PinInput/PinInput.mjs +5 -0
  66. package/esm/components/PinInput/PinInput.mjs.map +1 -1
  67. package/esm/components/SegmentedControl/SegmentedControl.mjs +1 -1
  68. package/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  69. package/esm/components/Select/Select.mjs +2 -1
  70. package/esm/components/Select/Select.mjs.map +1 -1
  71. package/esm/components/Switch/Switch.mjs +4 -2
  72. package/esm/components/Switch/Switch.mjs.map +1 -1
  73. package/esm/components/TagsInput/TagsInput.mjs +2 -2
  74. package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
  75. package/esm/components/Transition/use-transition.mjs +18 -10
  76. package/esm/components/Transition/use-transition.mjs.map +1 -1
  77. package/lib/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.d.ts +2 -0
  78. package/lib/components/Combobox/ComboboxTarget/ComboboxTarget.d.ts +2 -0
  79. package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts +6 -3
  80. package/lib/components/InlineInput/InlineInput.d.ts +2 -0
  81. package/package.json +4 -4
  82. package/styles/Accordion.css +185 -1
  83. package/styles/Accordion.layer.css +186 -0
  84. package/styles/ActionIcon.css +157 -1
  85. package/styles/ActionIcon.layer.css +158 -0
  86. package/styles/Affix.css +8 -1
  87. package/styles/Affix.layer.css +9 -1
  88. package/styles/Alert.css +82 -1
  89. package/styles/Alert.layer.css +83 -1
  90. package/styles/Anchor.css +29 -1
  91. package/styles/Anchor.layer.css +30 -1
  92. package/styles/AppShell.css +121 -1
  93. package/styles/AppShell.layer.css +122 -1
  94. package/styles/AspectRatio.css +33 -1
  95. package/styles/AspectRatio.layer.css +34 -1
  96. package/styles/Avatar.css +68 -1
  97. package/styles/Avatar.layer.css +69 -1
  98. package/styles/BackgroundImage.css +9 -1
  99. package/styles/BackgroundImage.layer.css +10 -1
  100. package/styles/Badge.css +107 -1
  101. package/styles/Badge.layer.css +108 -1
  102. package/styles/Blockquote.css +41 -1
  103. package/styles/Blockquote.layer.css +42 -1
  104. package/styles/Breadcrumbs.css +26 -1
  105. package/styles/Breadcrumbs.layer.css +27 -1
  106. package/styles/Burger.css +67 -1
  107. package/styles/Burger.layer.css +68 -1
  108. package/styles/Button.css +224 -1
  109. package/styles/Button.layer.css +225 -1
  110. package/styles/Card.css +54 -1
  111. package/styles/Card.layer.css +55 -1
  112. package/styles/Center.css +9 -1
  113. package/styles/Center.layer.css +10 -1
  114. package/styles/Checkbox.css +115 -1
  115. package/styles/Checkbox.layer.css +116 -1
  116. package/styles/Chip.css +207 -1
  117. package/styles/Chip.layer.css +208 -1
  118. package/styles/CloseButton.css +52 -1
  119. package/styles/CloseButton.layer.css +53 -1
  120. package/styles/Code.css +23 -1
  121. package/styles/Code.layer.css +24 -1
  122. package/styles/ColorInput.css +21 -1
  123. package/styles/ColorInput.layer.css +22 -1
  124. package/styles/ColorPicker.css +156 -1
  125. package/styles/ColorPicker.layer.css +157 -1
  126. package/styles/ColorSwatch.css +70 -1
  127. package/styles/ColorSwatch.layer.css +71 -1
  128. package/styles/Combobox.css +199 -1
  129. package/styles/Combobox.layer.css +200 -1
  130. package/styles/Container.css +16 -1
  131. package/styles/Container.layer.css +17 -1
  132. package/styles/Dialog.css +19 -1
  133. package/styles/Dialog.layer.css +20 -1
  134. package/styles/Divider.css +62 -1
  135. package/styles/Divider.layer.css +63 -1
  136. package/styles/Drawer.css +28 -1
  137. package/styles/Drawer.layer.css +29 -1
  138. package/styles/Fieldset.css +49 -1
  139. package/styles/Fieldset.layer.css +50 -1
  140. package/styles/Flex.css +3 -1
  141. package/styles/Flex.layer.css +4 -1
  142. package/styles/Grid.css +30 -1
  143. package/styles/Grid.layer.css +31 -1
  144. package/styles/Group.css +13 -1
  145. package/styles/Group.layer.css +14 -1
  146. package/styles/Image.css +7 -1
  147. package/styles/Image.layer.css +8 -1
  148. package/styles/Indicator.css +64 -1
  149. package/styles/Indicator.layer.css +65 -1
  150. package/styles/InlineInput.css +68 -1
  151. package/styles/InlineInput.layer.css +69 -1
  152. package/styles/Input.css +298 -3
  153. package/styles/Input.layer.css +299 -3
  154. package/styles/Kbd.css +37 -1
  155. package/styles/Kbd.layer.css +38 -1
  156. package/styles/List.css +49 -1
  157. package/styles/List.layer.css +50 -1
  158. package/styles/Loader.css +114 -1
  159. package/styles/Loader.layer.css +115 -1
  160. package/styles/LoadingOverlay.css +18 -1
  161. package/styles/LoadingOverlay.layer.css +19 -1
  162. package/styles/Mark.css +11 -1
  163. package/styles/Mark.layer.css +12 -1
  164. package/styles/Menu.css +68 -1
  165. package/styles/Menu.layer.css +69 -1
  166. package/styles/Modal.css +56 -1
  167. package/styles/Modal.layer.css +57 -0
  168. package/styles/ModalBase.css +47 -1
  169. package/styles/ModalBase.layer.css +48 -1
  170. package/styles/NavLink.css +118 -1
  171. package/styles/NavLink.layer.css +119 -1
  172. package/styles/Notification.css +135 -1
  173. package/styles/Notification.layer.css +136 -1
  174. package/styles/NumberInput.css +89 -1
  175. package/styles/NumberInput.layer.css +90 -0
  176. package/styles/Overlay.css +19 -1
  177. package/styles/Overlay.layer.css +20 -0
  178. package/styles/Pagination.css +96 -1
  179. package/styles/Pagination.layer.css +97 -0
  180. package/styles/Paper.css +20 -1
  181. package/styles/Paper.layer.css +21 -0
  182. package/styles/PasswordInput.css +58 -1
  183. package/styles/PasswordInput.layer.css +59 -0
  184. package/styles/Pill.css +114 -1
  185. package/styles/Pill.layer.css +115 -0
  186. package/styles/PillsInput.css +45 -1
  187. package/styles/PillsInput.layer.css +46 -0
  188. package/styles/PinInput.css +13 -1
  189. package/styles/PinInput.layer.css +14 -0
  190. package/styles/Popover.css +27 -1
  191. package/styles/Popover.layer.css +28 -0
  192. package/styles/Progress.css +87 -1
  193. package/styles/Progress.layer.css +88 -0
  194. package/styles/Radio.css +121 -1
  195. package/styles/Radio.layer.css +122 -0
  196. package/styles/Rating.css +82 -1
  197. package/styles/Rating.layer.css +83 -0
  198. package/styles/RingProgress.css +34 -1
  199. package/styles/RingProgress.layer.css +35 -0
  200. package/styles/ScrollArea.css +154 -1
  201. package/styles/ScrollArea.layer.css +155 -0
  202. package/styles/SegmentedControl.css +220 -1
  203. package/styles/SegmentedControl.layer.css +221 -0
  204. package/styles/SimpleGrid.css +5 -1
  205. package/styles/SimpleGrid.layer.css +6 -0
  206. package/styles/Skeleton.css +50 -1
  207. package/styles/Skeleton.layer.css +51 -0
  208. package/styles/Slider.css +217 -1
  209. package/styles/Slider.layer.css +218 -0
  210. package/styles/Spoiler.css +21 -1
  211. package/styles/Spoiler.layer.css +22 -0
  212. package/styles/Stack.css +7 -1
  213. package/styles/Stack.layer.css +8 -0
  214. package/styles/Stepper.css +228 -1
  215. package/styles/Stepper.layer.css +229 -0
  216. package/styles/Switch.css +171 -1
  217. package/styles/Switch.layer.css +172 -0
  218. package/styles/Table.css +109 -1
  219. package/styles/Table.layer.css +110 -0
  220. package/styles/Tabs.css +398 -1
  221. package/styles/Tabs.layer.css +399 -0
  222. package/styles/Text.css +51 -1
  223. package/styles/Text.layer.css +52 -0
  224. package/styles/ThemeIcon.css +24 -1
  225. package/styles/ThemeIcon.layer.css +25 -0
  226. package/styles/Timeline.css +173 -1
  227. package/styles/Timeline.layer.css +174 -0
  228. package/styles/Title.css +16 -1
  229. package/styles/Title.layer.css +17 -0
  230. package/styles/Tooltip.css +30 -1
  231. package/styles/Tooltip.layer.css +31 -0
  232. package/styles/TypographyStylesProvider.css +205 -1
  233. package/styles/TypographyStylesProvider.layer.css +206 -0
  234. package/styles/UnstyledButton.css +17 -1
  235. package/styles/UnstyledButton.layer.css +18 -0
  236. package/styles/VisuallyHidden.css +11 -1
  237. package/styles/VisuallyHidden.layer.css +12 -0
  238. package/styles/global.css +584 -1
  239. package/styles/global.layer.css +585 -0
  240. package/styles.css +6947 -3
  241. package/styles.layer.css +6948 -3
@@ -0,0 +1,51 @@
1
+ @layer mantine {@keyframes m-299c329c {
2
+ 0%,
3
+ 100% {
4
+ opacity: 0.4;
5
+ }
6
+
7
+ 50% {
8
+ opacity: 1;
9
+ }
10
+ }
11
+
12
+ .m-18320242 {
13
+ height: var(--skeleton-height, auto);
14
+ width: var(--skeleton-width, 100%);
15
+ border-radius: var(--skeleton-radius, var(--mantine-radius-default));
16
+ position: relative;
17
+ transform: translateZ(0);
18
+ -webkit-transform: translateZ(0);
19
+ }
20
+
21
+ .m-18320242:where([data-animate])::after {
22
+ animation: m-299c329c 1500ms linear infinite;
23
+ }
24
+
25
+ .m-18320242:where([data-visible]) {
26
+ overflow: hidden;
27
+ }
28
+
29
+ .m-18320242:where([data-visible])::before {
30
+ position: absolute;
31
+ content: '';
32
+ inset: 0;
33
+ z-index: 10;
34
+ background-color: var(--mantine-color-body);
35
+ }
36
+
37
+ .m-18320242:where([data-visible])::after {
38
+ position: absolute;
39
+ content: '';
40
+ inset: 0;
41
+ z-index: 11;
42
+ }
43
+
44
+ :where([data-mantine-color-scheme='light']) .m-18320242:where([data-visible])::after {
45
+ background-color: var(--mantine-color-gray-3);
46
+ }
47
+
48
+ :where([data-mantine-color-scheme='dark']) .m-18320242:where([data-visible])::after {
49
+ background-color: var(--mantine-color-dark-4);
50
+ }
51
+ }
package/styles/Slider.css CHANGED
@@ -1 +1,217 @@
1
- .m-dd36362e{--slider-size-xs:calc(0.25rem*var(--mantine-scale));--slider-size-sm:calc(0.375rem*var(--mantine-scale));--slider-size-md:calc(0.5rem*var(--mantine-scale));--slider-size-lg:calc(0.625rem*var(--mantine-scale));--slider-size-xl:calc(0.75rem*var(--mantine-scale));--slider-size:var(--slider-size-md);--slider-radius:calc(62.5rem*var(--mantine-scale));--slider-color:var(--mantine-primary-color-filled);-webkit-tap-highlight-color:transparent;align-items:center;display:flex;flex-direction:column;height:calc(var(--slider-size)*2);outline:none;padding-inline:var(--slider-size);position:relative;touch-action:none}[data-mantine-color-scheme=light] .m-dd36362e{--slider-track-bg:var(--mantine-color-gray-2);--slider-track-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd36362e{--slider-track-bg:var(--mantine-color-dark-4);--slider-track-disabled-bg:var(--mantine-color-dark-3)}.m-c9357328{border-radius:var(--mantine-radius-sm);color:var(--mantine-color-white);font-size:var(--mantine-font-size-xs);padding:calc(var(--mantine-spacing-xs)/2);pointer-events:none;position:absolute;top:calc(-2.25rem*var(--mantine-scale));touch-action:none;user-select:none;white-space:nowrap}:where([data-mantine-color-scheme=light]) .m-c9357328{background-color:var(--mantine-color-gray-9)}:where([data-mantine-color-scheme=dark]) .m-c9357328{background-color:var(--mantine-color-dark-4)}.m-c9a9a60a{align-items:center;border:calc(.25rem*var(--mantine-scale)) solid;border-radius:var(--slider-radius);color:var(--slider-color);cursor:pointer;display:flex;height:var(--slider-thumb-size);justify-content:center;left:var(--slider-thumb-offset);outline-offset:calc(.125rem*var(--mantine-scale));position:absolute;top:50%;touch-action:none;transform:translate(-50%,-50%);transition:box-shadow .1s ease,transform .1s ease;user-select:none;width:var(--slider-thumb-size);z-index:3}:where([dir=rtl]) .m-c9a9a60a{left:auto;right:calc(var(--slider-thumb-offset) - var(--slider-thumb-size))}.m-c9a9a60a:where([data-disabled]),fieldset:disabled .m-c9a9a60a{display:none}.m-c9a9a60a:where([data-dragging]){box-shadow:var(--mantine-shadow-sm);transform:translate(-50%,-50%) scale(1.05)}:where([data-mantine-color-scheme=light]) .m-c9a9a60a{background-color:var(--mantine-color-white);border-color:var(--slider-color)}:where([data-mantine-color-scheme=dark]) .m-c9a9a60a{background-color:var(--slider-color);border-color:var(--mantine-color-white)}.m-a8645c2{align-items:center;cursor:pointer;display:flex;height:calc(var(--slider-size)*2);width:100%}.m-a8645c2:where([data-disabled]),fieldset:disabled .m-a8645c2{cursor:not-allowed}.m-c9ade57f{height:var(--slider-size);position:relative;width:100%}.m-c9ade57f:where([data-inverted]:not([data-disabled])){--track-bg:var(--slider-color)}.m-c9ade57f:where([data-inverted][data-disabled]),fieldset:disabled .m-c9ade57f:where([data-inverted]){--track-bg:var(--slider-track-disabled-bg)}.m-c9ade57f:before{background-color:var(--track-bg,var(--slider-track-bg));content:"";inset-inline:calc(var(--slider-size)*-1);z-index:0}.m-38aeed47,.m-c9ade57f:before{border-radius:var(--slider-radius);bottom:0;position:absolute;top:0}.m-38aeed47{background-color:var(--slider-color);inset-inline-start:var(--slider-bar-offset);width:var(--slider-bar-width);z-index:1}.m-38aeed47:where([data-inverted]){background-color:var(--slider-track-bg)}:where([data-mantine-color-scheme=light]) .m-38aeed47:where([data-disabled]:not([data-inverted])),:where([data-mantine-color-scheme=light]) fieldset:disabled .m-38aeed47:where(:not([data-inverted])){background-color:var(--mantine-color-gray-4)}:where([data-mantine-color-scheme=dark]) .m-38aeed47:where([data-disabled]:not([data-inverted])),:where([data-mantine-color-scheme=dark]) fieldset:disabled .m-38aeed47:where(:not([data-inverted])){background-color:var(--mantine-color-dark-3)}.m-b7b0423a{height:0;inset-inline-start:calc(var(--mark-offset) - var(--slider-size)/2);pointer-events:none;position:absolute;top:0;z-index:2}.m-dd33bc19{background-color:var(--mantine-color-white);border:calc(.125rem*var(--mantine-scale)) solid;border-radius:calc(62.5rem*var(--mantine-scale));height:var(--slider-size);pointer-events:none;transform:translateX((calc(var(--slider-size)/-2)));width:var(--slider-size)}:where([data-mantine-color-scheme=light]) .m-dd33bc19{border-color:var(--mantine-color-gray-2)}:where([data-mantine-color-scheme=dark]) .m-dd33bc19{border-color:var(--mantine-color-dark-4)}.m-dd33bc19:where([data-filled]){border-color:var(--slider-color)}[data-mantine-color-scheme=light] .m-dd33bc19:where([data-filled])[data-disabled]{border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd33bc19:where([data-filled])[data-disabled]{border-color:var(--mantine-color-dark-3)}.m-68c77a5b{cursor:pointer;font-size:var(--mantine-font-size-sm);transform:translate(calc(-50% + var(--slider-size)/2),calc(var(--mantine-spacing-xs)/2));user-select:none;white-space:nowrap}:where([data-mantine-color-scheme=light]) .m-68c77a5b{color:var(--mantine-color-gray-6)}:where([data-mantine-color-scheme=dark]) .m-68c77a5b{color:var(--mantine-color-dark-2)}
1
+ .m-dd36362e {
2
+ --slider-size-xs: calc(0.25rem * var(--mantine-scale));
3
+ --slider-size-sm: calc(0.375rem * var(--mantine-scale));
4
+ --slider-size-md: calc(0.5rem * var(--mantine-scale));
5
+ --slider-size-lg: calc(0.625rem * var(--mantine-scale));
6
+ --slider-size-xl: calc(0.75rem * var(--mantine-scale));
7
+
8
+ --slider-size: var(--slider-size-md);
9
+ --slider-radius: calc(62.5rem * var(--mantine-scale));
10
+ --slider-color: var(--mantine-primary-color-filled);
11
+
12
+ -webkit-tap-highlight-color: transparent;
13
+ outline: none;
14
+ height: calc(var(--slider-size) * 2);
15
+ padding-inline: var(--slider-size);
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ touch-action: none;
20
+ position: relative;
21
+ }
22
+
23
+ [data-mantine-color-scheme='light'] .m-dd36362e {
24
+ --slider-track-bg: var(--mantine-color-gray-2);
25
+ --slider-track-disabled-bg: var(--mantine-color-gray-4);
26
+ }
27
+
28
+ [data-mantine-color-scheme='dark'] .m-dd36362e {
29
+ --slider-track-bg: var(--mantine-color-dark-4);
30
+ --slider-track-disabled-bg: var(--mantine-color-dark-3);
31
+ }
32
+
33
+ .m-c9357328 {
34
+ position: absolute;
35
+ top: calc(-2.25rem * var(--mantine-scale));
36
+ font-size: var(--mantine-font-size-xs);
37
+ color: var(--mantine-color-white);
38
+ padding: calc(var(--mantine-spacing-xs) / 2);
39
+ border-radius: var(--mantine-radius-sm);
40
+ white-space: nowrap;
41
+ pointer-events: none;
42
+ user-select: none;
43
+ touch-action: none;
44
+ }
45
+
46
+ :where([data-mantine-color-scheme='light']) .m-c9357328 {
47
+ background-color: var(--mantine-color-gray-9);
48
+ }
49
+
50
+ :where([data-mantine-color-scheme='dark']) .m-c9357328 {
51
+ background-color: var(--mantine-color-dark-4);
52
+ }
53
+
54
+ .m-c9a9a60a {
55
+ position: absolute;
56
+ display: flex;
57
+ height: var(--slider-thumb-size);
58
+ width: var(--slider-thumb-size);
59
+ border: calc(0.25rem * var(--mantine-scale)) solid;
60
+ transform: translate(-50%, -50%);
61
+ color: var(--slider-color);
62
+ top: 50%;
63
+ cursor: pointer;
64
+ border-radius: var(--slider-radius);
65
+ align-items: center;
66
+ justify-content: center;
67
+ transition:
68
+ box-shadow 100ms ease,
69
+ transform 100ms ease;
70
+ z-index: 3;
71
+ user-select: none;
72
+ touch-action: none;
73
+ outline-offset: calc(0.125rem * var(--mantine-scale));
74
+ left: var(--slider-thumb-offset);
75
+ }
76
+
77
+ :where([dir="rtl"]) .m-c9a9a60a {
78
+ left: auto;
79
+ right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
80
+ }
81
+
82
+ fieldset:disabled .m-c9a9a60a,
83
+ .m-c9a9a60a:where([data-disabled]) {
84
+ display: none;
85
+ }
86
+
87
+ .m-c9a9a60a:where([data-dragging]) {
88
+ transform: translate(-50%, -50%) scale(1.05);
89
+ box-shadow: var(--mantine-shadow-sm);
90
+ }
91
+
92
+ :where([data-mantine-color-scheme='light']) .m-c9a9a60a {
93
+ border-color: var(--slider-color);
94
+ background-color: var(--mantine-color-white);
95
+ }
96
+
97
+ :where([data-mantine-color-scheme='dark']) .m-c9a9a60a {
98
+ border-color: var(--mantine-color-white);
99
+ background-color: var(--slider-color);
100
+ }
101
+
102
+ .m-a8645c2 {
103
+ display: flex;
104
+ align-items: center;
105
+ width: 100%;
106
+ height: calc(var(--slider-size) * 2);
107
+ cursor: pointer;
108
+ }
109
+
110
+ fieldset:disabled .m-a8645c2,
111
+ .m-a8645c2:where([data-disabled]) {
112
+ cursor: not-allowed;
113
+ }
114
+
115
+ .m-c9ade57f {
116
+ position: relative;
117
+ width: 100%;
118
+ height: var(--slider-size);
119
+ }
120
+
121
+ .m-c9ade57f:where([data-inverted]:not([data-disabled])) {
122
+ --track-bg: var(--slider-color);
123
+ }
124
+
125
+ fieldset:disabled .m-c9ade57f:where([data-inverted]),
126
+ .m-c9ade57f:where([data-inverted][data-disabled]) {
127
+ --track-bg: var(--slider-track-disabled-bg);
128
+ }
129
+
130
+ .m-c9ade57f::before {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ bottom: 0;
135
+ border-radius: var(--slider-radius);
136
+ inset-inline: calc(var(--slider-size) * -1);
137
+ background-color: var(--track-bg, var(--slider-track-bg));
138
+ z-index: 0;
139
+ }
140
+
141
+ .m-38aeed47 {
142
+ position: absolute;
143
+ z-index: 1;
144
+ top: 0;
145
+ bottom: 0;
146
+ background-color: var(--slider-color);
147
+ border-radius: var(--slider-radius);
148
+ width: var(--slider-bar-width);
149
+ inset-inline-start: var(--slider-bar-offset);
150
+ }
151
+
152
+ .m-38aeed47:where([data-inverted]) {
153
+ background-color: var(--slider-track-bg);
154
+ }
155
+
156
+ :where([data-mantine-color-scheme='light']) fieldset:disabled .m-38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='light']) .m-38aeed47:where([data-disabled]:not([data-inverted])) {
157
+ background-color: var(--mantine-color-gray-4);
158
+ }
159
+
160
+ :where([data-mantine-color-scheme='dark']) fieldset:disabled .m-38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='dark']) .m-38aeed47:where([data-disabled]:not([data-inverted])) {
161
+ background-color: var(--mantine-color-dark-3);
162
+ }
163
+
164
+ .m-b7b0423a {
165
+ position: absolute;
166
+ inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
167
+ top: 0;
168
+ z-index: 2;
169
+ height: 0;
170
+ pointer-events: none;
171
+ }
172
+
173
+ .m-dd33bc19 {
174
+ border: calc(0.125rem * var(--mantine-scale)) solid;
175
+ height: var(--slider-size);
176
+ width: var(--slider-size);
177
+ border-radius: calc(62.5rem * var(--mantine-scale));
178
+ transform: translateX((calc(var(--slider-size) / -2)));
179
+ background-color: var(--mantine-color-white);
180
+ pointer-events: none;
181
+ }
182
+
183
+ :where([data-mantine-color-scheme='light']) .m-dd33bc19 {
184
+ border-color: var(--mantine-color-gray-2);
185
+ }
186
+
187
+ :where([data-mantine-color-scheme='dark']) .m-dd33bc19 {
188
+ border-color: var(--mantine-color-dark-4);
189
+ }
190
+
191
+ .m-dd33bc19:where([data-filled]) {
192
+ border-color: var(--slider-color);
193
+ }
194
+
195
+ [data-mantine-color-scheme='light'] .m-dd33bc19:where([data-filled])[data-disabled] {
196
+ border-color: var(--mantine-color-gray-4);
197
+ }
198
+
199
+ [data-mantine-color-scheme='dark'] .m-dd33bc19:where([data-filled])[data-disabled] {
200
+ border-color: var(--mantine-color-dark-3);
201
+ }
202
+
203
+ .m-68c77a5b {
204
+ transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
205
+ font-size: var(--mantine-font-size-sm);
206
+ white-space: nowrap;
207
+ cursor: pointer;
208
+ user-select: none;
209
+ }
210
+
211
+ :where([data-mantine-color-scheme='light']) .m-68c77a5b {
212
+ color: var(--mantine-color-gray-6);
213
+ }
214
+
215
+ :where([data-mantine-color-scheme='dark']) .m-68c77a5b {
216
+ color: var(--mantine-color-dark-2);
217
+ }
@@ -0,0 +1,218 @@
1
+ @layer mantine {.m-dd36362e {
2
+ --slider-size-xs: calc(0.25rem * var(--mantine-scale));
3
+ --slider-size-sm: calc(0.375rem * var(--mantine-scale));
4
+ --slider-size-md: calc(0.5rem * var(--mantine-scale));
5
+ --slider-size-lg: calc(0.625rem * var(--mantine-scale));
6
+ --slider-size-xl: calc(0.75rem * var(--mantine-scale));
7
+
8
+ --slider-size: var(--slider-size-md);
9
+ --slider-radius: calc(62.5rem * var(--mantine-scale));
10
+ --slider-color: var(--mantine-primary-color-filled);
11
+
12
+ -webkit-tap-highlight-color: transparent;
13
+ outline: none;
14
+ height: calc(var(--slider-size) * 2);
15
+ padding-inline: var(--slider-size);
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ touch-action: none;
20
+ position: relative;
21
+ }
22
+
23
+ [data-mantine-color-scheme='light'] .m-dd36362e {
24
+ --slider-track-bg: var(--mantine-color-gray-2);
25
+ --slider-track-disabled-bg: var(--mantine-color-gray-4);
26
+ }
27
+
28
+ [data-mantine-color-scheme='dark'] .m-dd36362e {
29
+ --slider-track-bg: var(--mantine-color-dark-4);
30
+ --slider-track-disabled-bg: var(--mantine-color-dark-3);
31
+ }
32
+
33
+ .m-c9357328 {
34
+ position: absolute;
35
+ top: calc(-2.25rem * var(--mantine-scale));
36
+ font-size: var(--mantine-font-size-xs);
37
+ color: var(--mantine-color-white);
38
+ padding: calc(var(--mantine-spacing-xs) / 2);
39
+ border-radius: var(--mantine-radius-sm);
40
+ white-space: nowrap;
41
+ pointer-events: none;
42
+ user-select: none;
43
+ touch-action: none;
44
+ }
45
+
46
+ :where([data-mantine-color-scheme='light']) .m-c9357328 {
47
+ background-color: var(--mantine-color-gray-9);
48
+ }
49
+
50
+ :where([data-mantine-color-scheme='dark']) .m-c9357328 {
51
+ background-color: var(--mantine-color-dark-4);
52
+ }
53
+
54
+ .m-c9a9a60a {
55
+ position: absolute;
56
+ display: flex;
57
+ height: var(--slider-thumb-size);
58
+ width: var(--slider-thumb-size);
59
+ border: calc(0.25rem * var(--mantine-scale)) solid;
60
+ transform: translate(-50%, -50%);
61
+ color: var(--slider-color);
62
+ top: 50%;
63
+ cursor: pointer;
64
+ border-radius: var(--slider-radius);
65
+ align-items: center;
66
+ justify-content: center;
67
+ transition:
68
+ box-shadow 100ms ease,
69
+ transform 100ms ease;
70
+ z-index: 3;
71
+ user-select: none;
72
+ touch-action: none;
73
+ outline-offset: calc(0.125rem * var(--mantine-scale));
74
+ left: var(--slider-thumb-offset);
75
+ }
76
+
77
+ :where([dir="rtl"]) .m-c9a9a60a {
78
+ left: auto;
79
+ right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
80
+ }
81
+
82
+ fieldset:disabled .m-c9a9a60a,
83
+ .m-c9a9a60a:where([data-disabled]) {
84
+ display: none;
85
+ }
86
+
87
+ .m-c9a9a60a:where([data-dragging]) {
88
+ transform: translate(-50%, -50%) scale(1.05);
89
+ box-shadow: var(--mantine-shadow-sm);
90
+ }
91
+
92
+ :where([data-mantine-color-scheme='light']) .m-c9a9a60a {
93
+ border-color: var(--slider-color);
94
+ background-color: var(--mantine-color-white);
95
+ }
96
+
97
+ :where([data-mantine-color-scheme='dark']) .m-c9a9a60a {
98
+ border-color: var(--mantine-color-white);
99
+ background-color: var(--slider-color);
100
+ }
101
+
102
+ .m-a8645c2 {
103
+ display: flex;
104
+ align-items: center;
105
+ width: 100%;
106
+ height: calc(var(--slider-size) * 2);
107
+ cursor: pointer;
108
+ }
109
+
110
+ fieldset:disabled .m-a8645c2,
111
+ .m-a8645c2:where([data-disabled]) {
112
+ cursor: not-allowed;
113
+ }
114
+
115
+ .m-c9ade57f {
116
+ position: relative;
117
+ width: 100%;
118
+ height: var(--slider-size);
119
+ }
120
+
121
+ .m-c9ade57f:where([data-inverted]:not([data-disabled])) {
122
+ --track-bg: var(--slider-color);
123
+ }
124
+
125
+ fieldset:disabled .m-c9ade57f:where([data-inverted]),
126
+ .m-c9ade57f:where([data-inverted][data-disabled]) {
127
+ --track-bg: var(--slider-track-disabled-bg);
128
+ }
129
+
130
+ .m-c9ade57f::before {
131
+ content: '';
132
+ position: absolute;
133
+ top: 0;
134
+ bottom: 0;
135
+ border-radius: var(--slider-radius);
136
+ inset-inline: calc(var(--slider-size) * -1);
137
+ background-color: var(--track-bg, var(--slider-track-bg));
138
+ z-index: 0;
139
+ }
140
+
141
+ .m-38aeed47 {
142
+ position: absolute;
143
+ z-index: 1;
144
+ top: 0;
145
+ bottom: 0;
146
+ background-color: var(--slider-color);
147
+ border-radius: var(--slider-radius);
148
+ width: var(--slider-bar-width);
149
+ inset-inline-start: var(--slider-bar-offset);
150
+ }
151
+
152
+ .m-38aeed47:where([data-inverted]) {
153
+ background-color: var(--slider-track-bg);
154
+ }
155
+
156
+ :where([data-mantine-color-scheme='light']) fieldset:disabled .m-38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='light']) .m-38aeed47:where([data-disabled]:not([data-inverted])) {
157
+ background-color: var(--mantine-color-gray-4);
158
+ }
159
+
160
+ :where([data-mantine-color-scheme='dark']) fieldset:disabled .m-38aeed47:where(:not([data-inverted])), :where([data-mantine-color-scheme='dark']) .m-38aeed47:where([data-disabled]:not([data-inverted])) {
161
+ background-color: var(--mantine-color-dark-3);
162
+ }
163
+
164
+ .m-b7b0423a {
165
+ position: absolute;
166
+ inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
167
+ top: 0;
168
+ z-index: 2;
169
+ height: 0;
170
+ pointer-events: none;
171
+ }
172
+
173
+ .m-dd33bc19 {
174
+ border: calc(0.125rem * var(--mantine-scale)) solid;
175
+ height: var(--slider-size);
176
+ width: var(--slider-size);
177
+ border-radius: calc(62.5rem * var(--mantine-scale));
178
+ transform: translateX((calc(var(--slider-size) / -2)));
179
+ background-color: var(--mantine-color-white);
180
+ pointer-events: none;
181
+ }
182
+
183
+ :where([data-mantine-color-scheme='light']) .m-dd33bc19 {
184
+ border-color: var(--mantine-color-gray-2);
185
+ }
186
+
187
+ :where([data-mantine-color-scheme='dark']) .m-dd33bc19 {
188
+ border-color: var(--mantine-color-dark-4);
189
+ }
190
+
191
+ .m-dd33bc19:where([data-filled]) {
192
+ border-color: var(--slider-color);
193
+ }
194
+
195
+ [data-mantine-color-scheme='light'] .m-dd33bc19:where([data-filled])[data-disabled] {
196
+ border-color: var(--mantine-color-gray-4);
197
+ }
198
+
199
+ [data-mantine-color-scheme='dark'] .m-dd33bc19:where([data-filled])[data-disabled] {
200
+ border-color: var(--mantine-color-dark-3);
201
+ }
202
+
203
+ .m-68c77a5b {
204
+ transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
205
+ font-size: var(--mantine-font-size-sm);
206
+ white-space: nowrap;
207
+ cursor: pointer;
208
+ user-select: none;
209
+ }
210
+
211
+ :where([data-mantine-color-scheme='light']) .m-68c77a5b {
212
+ color: var(--mantine-color-gray-6);
213
+ }
214
+
215
+ :where([data-mantine-color-scheme='dark']) .m-68c77a5b {
216
+ color: var(--mantine-color-dark-2);
217
+ }
218
+ }
@@ -1 +1,21 @@
1
- .m-559cce2d{position:relative}.m-559cce2d:where([data-has-spoiler]){margin-bottom:calc(1.5rem*var(--mantine-scale))}.m-b912df4e{display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--spoiler-transition-duration,.2s) ease}.m-b9131032{height:calc(1.5rem*var(--mantine-scale));inset-inline-start:0;position:absolute;top:100%}
1
+ .m-559cce2d {
2
+ position: relative;
3
+ }
4
+
5
+ .m-559cce2d:where([data-has-spoiler]) {
6
+ margin-bottom: calc(1.5rem * var(--mantine-scale));
7
+ }
8
+
9
+ .m-b912df4e {
10
+ display: flex;
11
+ flex-direction: column;
12
+ overflow: hidden;
13
+ transition: max-height var(--spoiler-transition-duration, 200ms) ease;
14
+ }
15
+
16
+ .m-b9131032 {
17
+ position: absolute;
18
+ inset-inline-start: 0;
19
+ top: 100%;
20
+ height: calc(1.5rem * var(--mantine-scale));
21
+ }
@@ -0,0 +1,22 @@
1
+ @layer mantine {.m-559cce2d {
2
+ position: relative;
3
+ }
4
+
5
+ .m-559cce2d:where([data-has-spoiler]) {
6
+ margin-bottom: calc(1.5rem * var(--mantine-scale));
7
+ }
8
+
9
+ .m-b912df4e {
10
+ display: flex;
11
+ flex-direction: column;
12
+ overflow: hidden;
13
+ transition: max-height var(--spoiler-transition-duration, 200ms) ease;
14
+ }
15
+
16
+ .m-b9131032 {
17
+ position: absolute;
18
+ inset-inline-start: 0;
19
+ top: 100%;
20
+ height: calc(1.5rem * var(--mantine-scale));
21
+ }
22
+ }
package/styles/Stack.css CHANGED
@@ -1 +1,7 @@
1
- .m-6d731127{align-items:var(--stack-align,stretch);display:flex;flex-direction:column;gap:var(--stack-gap,var(--mantine-spacing-md));justify-content:var(--stack-justify,flex-start)}
1
+ .m-6d731127 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: var(--stack-align, stretch);
5
+ justify-content: var(--stack-justify, flex-start);
6
+ gap: var(--stack-gap, var(--mantine-spacing-md));
7
+ }
@@ -0,0 +1,8 @@
1
+ @layer mantine {.m-6d731127 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ align-items: var(--stack-align, stretch);
5
+ justify-content: var(--stack-justify, flex-start);
6
+ gap: var(--stack-gap, var(--mantine-spacing-md));
7
+ }
8
+ }