@mantine/core 8.3.3 → 8.3.5

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 (197) hide show
  1. package/cjs/components/Alert/Alert.cjs +2 -2
  2. package/cjs/components/Alert/Alert.cjs.map +1 -1
  3. package/cjs/components/Checkbox/Checkbox.cjs +6 -1
  4. package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
  5. package/cjs/components/Input/InputClearSection/InputClearSection.cjs +1 -1
  6. package/cjs/components/Input/InputClearSection/InputClearSection.cjs.map +1 -1
  7. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs +0 -1
  8. package/cjs/components/Transition/get-transition-styles/get-transition-styles.cjs.map +1 -1
  9. package/esm/components/Alert/Alert.mjs +2 -2
  10. package/esm/components/Alert/Alert.mjs.map +1 -1
  11. package/esm/components/Checkbox/Checkbox.mjs +6 -1
  12. package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
  13. package/esm/components/Input/InputClearSection/InputClearSection.mjs +1 -1
  14. package/esm/components/Input/InputClearSection/InputClearSection.mjs.map +1 -1
  15. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs +0 -1
  16. package/esm/components/Transition/get-transition-styles/get-transition-styles.mjs.map +1 -1
  17. package/package.json +2 -2
  18. package/styles/Accordion.css +178 -0
  19. package/styles/Accordion.layer.css +179 -0
  20. package/styles/ActionIcon.css +188 -0
  21. package/styles/ActionIcon.layer.css +189 -0
  22. package/styles/Affix.css +8 -0
  23. package/styles/Affix.layer.css +9 -0
  24. package/styles/Alert.css +82 -0
  25. package/styles/Alert.layer.css +83 -0
  26. package/styles/Anchor.css +56 -0
  27. package/styles/Anchor.layer.css +57 -0
  28. package/styles/AngleSlider.css +106 -0
  29. package/styles/AngleSlider.layer.css +107 -0
  30. package/styles/AppShell.css +127 -0
  31. package/styles/AppShell.layer.css +128 -0
  32. package/styles/AspectRatio.css +13 -0
  33. package/styles/AspectRatio.layer.css +14 -0
  34. package/styles/Avatar.css +68 -0
  35. package/styles/Avatar.layer.css +69 -0
  36. package/styles/BackgroundImage.css +9 -0
  37. package/styles/BackgroundImage.layer.css +10 -0
  38. package/styles/Badge.css +127 -0
  39. package/styles/Badge.layer.css +128 -0
  40. package/styles/Blockquote.css +41 -0
  41. package/styles/Blockquote.layer.css +42 -0
  42. package/styles/Breadcrumbs.css +27 -0
  43. package/styles/Breadcrumbs.layer.css +28 -0
  44. package/styles/Burger.css +68 -0
  45. package/styles/Burger.layer.css +69 -0
  46. package/styles/Button.css +261 -0
  47. package/styles/Button.layer.css +262 -0
  48. package/styles/Card.css +54 -0
  49. package/styles/Card.layer.css +55 -0
  50. package/styles/Center.css +9 -0
  51. package/styles/Center.layer.css +10 -0
  52. package/styles/Checkbox.css +110 -0
  53. package/styles/Checkbox.layer.css +111 -0
  54. package/styles/CheckboxCard.css +24 -0
  55. package/styles/CheckboxCard.layer.css +25 -0
  56. package/styles/CheckboxIndicator.css +97 -0
  57. package/styles/CheckboxIndicator.layer.css +98 -0
  58. package/styles/Chip.css +199 -0
  59. package/styles/Chip.layer.css +200 -0
  60. package/styles/CloseButton.css +58 -0
  61. package/styles/CloseButton.layer.css +59 -0
  62. package/styles/Code.css +21 -0
  63. package/styles/Code.layer.css +22 -0
  64. package/styles/ColorInput.css +21 -0
  65. package/styles/ColorInput.layer.css +22 -0
  66. package/styles/ColorPicker.css +160 -0
  67. package/styles/ColorPicker.layer.css +161 -0
  68. package/styles/ColorSwatch.css +71 -0
  69. package/styles/ColorSwatch.layer.css +72 -0
  70. package/styles/Combobox.css +210 -0
  71. package/styles/Combobox.layer.css +211 -0
  72. package/styles/Container.css +37 -0
  73. package/styles/Container.layer.css +38 -0
  74. package/styles/Dialog.css +19 -0
  75. package/styles/Dialog.layer.css +20 -0
  76. package/styles/Divider.css +62 -0
  77. package/styles/Divider.layer.css +63 -0
  78. package/styles/Drawer.css +33 -0
  79. package/styles/Drawer.layer.css +34 -0
  80. package/styles/Fieldset.css +49 -0
  81. package/styles/Fieldset.layer.css +50 -0
  82. package/styles/Flex.css +3 -0
  83. package/styles/Flex.layer.css +4 -0
  84. package/styles/FloatingIndicator.css +20 -0
  85. package/styles/FloatingIndicator.layer.css +21 -0
  86. package/styles/Grid.css +34 -0
  87. package/styles/Grid.layer.css +35 -0
  88. package/styles/Group.css +13 -0
  89. package/styles/Group.layer.css +14 -0
  90. package/styles/Image.css +6 -0
  91. package/styles/Image.layer.css +7 -0
  92. package/styles/Indicator.css +64 -0
  93. package/styles/Indicator.layer.css +65 -0
  94. package/styles/InlineInput.css +66 -0
  95. package/styles/InlineInput.layer.css +67 -0
  96. package/styles/Input.css +333 -0
  97. package/styles/Input.layer.css +334 -0
  98. package/styles/Kbd.css +31 -0
  99. package/styles/Kbd.layer.css +32 -0
  100. package/styles/List.css +51 -0
  101. package/styles/List.layer.css +52 -0
  102. package/styles/Loader.css +114 -0
  103. package/styles/Loader.layer.css +115 -0
  104. package/styles/LoadingOverlay.css +18 -0
  105. package/styles/LoadingOverlay.layer.css +19 -0
  106. package/styles/Mark.css +11 -0
  107. package/styles/Mark.layer.css +12 -0
  108. package/styles/Menu.css +80 -0
  109. package/styles/Menu.layer.css +81 -0
  110. package/styles/Modal.css +61 -0
  111. package/styles/Modal.layer.css +62 -0
  112. package/styles/ModalBase.css +56 -0
  113. package/styles/ModalBase.layer.css +57 -0
  114. package/styles/NavLink.css +118 -0
  115. package/styles/NavLink.layer.css +119 -0
  116. package/styles/Notification.css +131 -0
  117. package/styles/Notification.layer.css +132 -0
  118. package/styles/NumberInput.css +81 -0
  119. package/styles/NumberInput.layer.css +82 -0
  120. package/styles/Overlay.css +19 -0
  121. package/styles/Overlay.layer.css +20 -0
  122. package/styles/Pagination.css +96 -0
  123. package/styles/Pagination.layer.css +97 -0
  124. package/styles/Paper.css +24 -0
  125. package/styles/Paper.layer.css +25 -0
  126. package/styles/PasswordInput.css +62 -0
  127. package/styles/PasswordInput.layer.css +63 -0
  128. package/styles/Pill.css +117 -0
  129. package/styles/Pill.layer.css +118 -0
  130. package/styles/PillsInput.css +45 -0
  131. package/styles/PillsInput.layer.css +46 -0
  132. package/styles/PinInput.css +13 -0
  133. package/styles/PinInput.layer.css +14 -0
  134. package/styles/Popover.css +36 -0
  135. package/styles/Popover.layer.css +37 -0
  136. package/styles/Progress.css +142 -0
  137. package/styles/Progress.layer.css +143 -0
  138. package/styles/Radio.css +109 -0
  139. package/styles/Radio.layer.css +110 -0
  140. package/styles/RadioCard.css +24 -0
  141. package/styles/RadioCard.layer.css +25 -0
  142. package/styles/RadioIndicator.css +91 -0
  143. package/styles/RadioIndicator.layer.css +92 -0
  144. package/styles/Rating.css +82 -0
  145. package/styles/Rating.layer.css +83 -0
  146. package/styles/RingProgress.css +39 -0
  147. package/styles/RingProgress.layer.css +40 -0
  148. package/styles/ScrollArea.css +189 -0
  149. package/styles/ScrollArea.layer.css +190 -0
  150. package/styles/SegmentedControl.css +224 -0
  151. package/styles/SegmentedControl.layer.css +225 -0
  152. package/styles/SemiCircleProgress.css +56 -0
  153. package/styles/SemiCircleProgress.layer.css +57 -0
  154. package/styles/SimpleGrid.css +9 -0
  155. package/styles/SimpleGrid.layer.css +10 -0
  156. package/styles/Skeleton.css +50 -0
  157. package/styles/Skeleton.layer.css +51 -0
  158. package/styles/Slider.css +209 -0
  159. package/styles/Slider.layer.css +210 -0
  160. package/styles/Spoiler.css +21 -0
  161. package/styles/Spoiler.layer.css +22 -0
  162. package/styles/Stack.css +7 -0
  163. package/styles/Stack.layer.css +8 -0
  164. package/styles/Stepper.css +204 -0
  165. package/styles/Stepper.layer.css +205 -0
  166. package/styles/Switch.css +172 -0
  167. package/styles/Switch.layer.css +173 -0
  168. package/styles/Table.css +159 -0
  169. package/styles/Table.layer.css +160 -0
  170. package/styles/TableOfContents.css +38 -0
  171. package/styles/TableOfContents.layer.css +39 -0
  172. package/styles/Tabs.css +368 -0
  173. package/styles/Tabs.layer.css +369 -0
  174. package/styles/Text.css +51 -0
  175. package/styles/Text.layer.css +52 -0
  176. package/styles/ThemeIcon.css +24 -0
  177. package/styles/ThemeIcon.layer.css +25 -0
  178. package/styles/Timeline.css +173 -0
  179. package/styles/Timeline.layer.css +174 -0
  180. package/styles/Title.css +16 -0
  181. package/styles/Title.layer.css +17 -0
  182. package/styles/Tooltip.css +34 -0
  183. package/styles/Tooltip.layer.css +35 -0
  184. package/styles/Tree.css +36 -0
  185. package/styles/Tree.layer.css +37 -0
  186. package/styles/Typography.css +209 -0
  187. package/styles/Typography.layer.css +210 -0
  188. package/styles/UnstyledButton.css +17 -0
  189. package/styles/UnstyledButton.layer.css +18 -0
  190. package/styles/VisuallyHidden.css +11 -0
  191. package/styles/VisuallyHidden.layer.css +12 -0
  192. package/styles/baseline.css +40 -0
  193. package/styles/baseline.layer.css +41 -0
  194. package/styles/default-css-variables.css +519 -0
  195. package/styles/default-css-variables.layer.css +520 -0
  196. package/styles/global.css +40 -0
  197. package/styles/global.layer.css +41 -0
@@ -0,0 +1,110 @@
1
+ @layer mantine {.m_f3f1af94 {
2
+ --radio-size-xs: 16px;
3
+ --radio-size-sm: 20px;
4
+ --radio-size-md: 24px;
5
+ --radio-size-lg: 30px;
6
+ --radio-size-xl: 36px;
7
+ --radio-size: var(--radio-size-sm);
8
+
9
+ --radio-icon-size-xs: 6px;
10
+ --radio-icon-size-sm: 8px;
11
+ --radio-icon-size-md: 10px;
12
+ --radio-icon-size-lg: 14px;
13
+ --radio-icon-size-xl: 16px;
14
+ --radio-icon-size: var(--radio-icon-size-sm);
15
+ --radio-icon-color: var(--mantine-color-white);
16
+ }
17
+
18
+ .m_89c4f5e4 {
19
+ position: relative;
20
+ width: var(--radio-size);
21
+ height: var(--radio-size);
22
+ order: 1;
23
+ }
24
+
25
+ .m_89c4f5e4:where([data-label-position='left']) {
26
+ order: 2;
27
+ }
28
+
29
+ .m_f3ed6b2b {
30
+ color: var(--radio-icon-color);
31
+ opacity: var(--radio-icon-opacity, 0);
32
+ transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
33
+ transition:
34
+ opacity 100ms ease,
35
+ transform 200ms ease;
36
+ pointer-events: none;
37
+ width: var(--radio-icon-size);
38
+ height: var(--radio-icon-size);
39
+ position: absolute;
40
+ top: calc(50% - var(--radio-icon-size) / 2);
41
+ left: calc(50% - var(--radio-icon-size) / 2);
42
+ }
43
+
44
+ .m_8a3dbb89 {
45
+ border: 1px solid;
46
+ position: relative;
47
+ appearance: none;
48
+ width: var(--radio-size);
49
+ height: var(--radio-size);
50
+ border-radius: var(--radio-radius, var(--radio-size));
51
+ margin: 0;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ transition-property: background-color, border-color;
56
+ transition-timing-function: ease;
57
+ transition-duration: 100ms;
58
+ cursor: var(--mantine-cursor-type);
59
+ -webkit-tap-highlight-color: transparent;
60
+ }
61
+
62
+ :where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
63
+ background-color: var(--mantine-color-white);
64
+ border-color: var(--mantine-color-gray-4);
65
+ }
66
+
67
+ :where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
68
+ background-color: var(--mantine-color-dark-6);
69
+ border-color: var(--mantine-color-dark-4);
70
+ }
71
+
72
+ .m_8a3dbb89:checked {
73
+ background-color: var(--radio-color, var(--mantine-primary-color-filled));
74
+ border-color: var(--radio-color, var(--mantine-primary-color-filled));
75
+ }
76
+
77
+ .m_8a3dbb89:checked + .m_f3ed6b2b {
78
+ --radio-icon-opacity: 1;
79
+ --radio-icon-transform: scale(1);
80
+ }
81
+
82
+ .m_8a3dbb89:disabled {
83
+ cursor: not-allowed;
84
+ background-color: var(--mantine-color-disabled);
85
+ border-color: var(--mantine-color-disabled-border);
86
+ }
87
+
88
+ .m_8a3dbb89:disabled + .m_f3ed6b2b {
89
+ --radio-icon-color: var(--mantine-color-disabled-color);
90
+ }
91
+
92
+ .m_8a3dbb89:where([data-error]) {
93
+ border-color: var(--mantine-color-error);
94
+ }
95
+
96
+ .m_1bfe9d39 + .m_f3ed6b2b {
97
+ --radio-icon-color: var(--radio-color);
98
+ }
99
+
100
+ .m_1bfe9d39:checked:not(:disabled) {
101
+ background-color: transparent;
102
+ border-color: var(--radio-color);
103
+ }
104
+
105
+ .m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
106
+ --radio-icon-color: var(--radio-color);
107
+ --radio-icon-opacity: 1;
108
+ --radio-icon-transform: none;
109
+ }
110
+ }
@@ -0,0 +1,24 @@
1
+ .m_9dc8ae12 {
2
+ --card-radius: var(--mantine-radius-default);
3
+
4
+ display: block;
5
+ width: 100%;
6
+ border-radius: var(--card-radius);
7
+ cursor: pointer;
8
+ }
9
+
10
+ .m_9dc8ae12 :where(*) {
11
+ cursor: inherit;
12
+ }
13
+
14
+ .m_9dc8ae12:where([data-with-border]) {
15
+ border: 1px solid transparent;
16
+ }
17
+
18
+ :where([data-mantine-color-scheme='light']) .m_9dc8ae12:where([data-with-border]) {
19
+ border-color: var(--mantine-color-gray-3);
20
+ }
21
+
22
+ :where([data-mantine-color-scheme='dark']) .m_9dc8ae12:where([data-with-border]) {
23
+ border-color: var(--mantine-color-dark-4);
24
+ }
@@ -0,0 +1,25 @@
1
+ @layer mantine {.m_9dc8ae12 {
2
+ --card-radius: var(--mantine-radius-default);
3
+
4
+ display: block;
5
+ width: 100%;
6
+ border-radius: var(--card-radius);
7
+ cursor: pointer;
8
+ }
9
+
10
+ .m_9dc8ae12 :where(*) {
11
+ cursor: inherit;
12
+ }
13
+
14
+ .m_9dc8ae12:where([data-with-border]) {
15
+ border: 1px solid transparent;
16
+ }
17
+
18
+ :where([data-mantine-color-scheme='light']) .m_9dc8ae12:where([data-with-border]) {
19
+ border-color: var(--mantine-color-gray-3);
20
+ }
21
+
22
+ :where([data-mantine-color-scheme='dark']) .m_9dc8ae12:where([data-with-border]) {
23
+ border-color: var(--mantine-color-dark-4);
24
+ }
25
+ }
@@ -0,0 +1,91 @@
1
+ .m_717d7ff6 {
2
+ --radio-size-xs: 16px;
3
+ --radio-size-sm: 20px;
4
+ --radio-size-md: 24px;
5
+ --radio-size-lg: 30px;
6
+ --radio-size-xl: 36px;
7
+
8
+ --radio-icon-size-xs: 6px;
9
+ --radio-icon-size-sm: 8px;
10
+ --radio-icon-size-md: 10px;
11
+ --radio-icon-size-lg: 14px;
12
+ --radio-icon-size-xl: 16px;
13
+
14
+ --radio-icon-size: var(--radio-icon-size-sm);
15
+ --radio-size: var(--radio-size-sm);
16
+ --radio-color: var(--mantine-primary-color-filled);
17
+ --radio-icon-color: var(--mantine-color-white);
18
+
19
+ position: relative;
20
+ border: 1px solid transparent;
21
+ width: var(--radio-size);
22
+ min-width: var(--radio-size);
23
+ height: var(--radio-size);
24
+ min-height: var(--radio-size);
25
+ border-radius: var(--radio-radius, 10000px);
26
+ transition:
27
+ border-color 100ms ease,
28
+ background-color 100ms ease;
29
+ cursor: var(--mantine-cursor-type);
30
+ -webkit-tap-highlight-color: transparent;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ }
35
+
36
+ :where([data-mantine-color-scheme='light']) .m_717d7ff6 {
37
+ background-color: var(--mantine-color-white);
38
+ border-color: var(--mantine-color-gray-4);
39
+ }
40
+
41
+ :where([data-mantine-color-scheme='dark']) .m_717d7ff6 {
42
+ background-color: var(--mantine-color-dark-6);
43
+ border-color: var(--mantine-color-dark-4);
44
+ }
45
+
46
+ .m_717d7ff6[data-indeterminate],
47
+ .m_717d7ff6[data-checked] {
48
+ background-color: var(--radio-color);
49
+ border-color: var(--radio-color);
50
+ }
51
+
52
+ .m_717d7ff6[data-indeterminate] > .m_3e4da632, .m_717d7ff6[data-checked] > .m_3e4da632 {
53
+ opacity: 1;
54
+ transform: none;
55
+ color: var(--radio-icon-color);
56
+ }
57
+
58
+ .m_717d7ff6[data-disabled] {
59
+ cursor: not-allowed;
60
+ background-color: var(--mantine-color-disabled);
61
+ border-color: var(--mantine-color-disabled-border);
62
+ }
63
+
64
+ .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
65
+ color: var(--mantine-color-disabled-color);
66
+ }
67
+
68
+ .m_2980836c[data-indeterminate]:not([data-disabled]),
69
+ .m_2980836c[data-checked]:not([data-disabled]) {
70
+ background-color: transparent;
71
+ border-color: var(--radio-color);
72
+ }
73
+
74
+ .m_2980836c[data-indeterminate]:not([data-disabled]) > .m_3e4da632, .m_2980836c[data-checked]:not([data-disabled]) > .m_3e4da632 {
75
+ color: var(--radio-color);
76
+ opacity: 1;
77
+ transform: none;
78
+ }
79
+
80
+ .m_3e4da632 {
81
+ display: block;
82
+ width: var(--radio-icon-size);
83
+ height: var(--radio-icon-size);
84
+ color: transparent;
85
+ pointer-events: none;
86
+ transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
87
+ opacity: 1;
88
+ transition:
89
+ transform 100ms ease,
90
+ opacity 100ms ease;
91
+ }
@@ -0,0 +1,92 @@
1
+ @layer mantine {.m_717d7ff6 {
2
+ --radio-size-xs: 16px;
3
+ --radio-size-sm: 20px;
4
+ --radio-size-md: 24px;
5
+ --radio-size-lg: 30px;
6
+ --radio-size-xl: 36px;
7
+
8
+ --radio-icon-size-xs: 6px;
9
+ --radio-icon-size-sm: 8px;
10
+ --radio-icon-size-md: 10px;
11
+ --radio-icon-size-lg: 14px;
12
+ --radio-icon-size-xl: 16px;
13
+
14
+ --radio-icon-size: var(--radio-icon-size-sm);
15
+ --radio-size: var(--radio-size-sm);
16
+ --radio-color: var(--mantine-primary-color-filled);
17
+ --radio-icon-color: var(--mantine-color-white);
18
+
19
+ position: relative;
20
+ border: 1px solid transparent;
21
+ width: var(--radio-size);
22
+ min-width: var(--radio-size);
23
+ height: var(--radio-size);
24
+ min-height: var(--radio-size);
25
+ border-radius: var(--radio-radius, 10000px);
26
+ transition:
27
+ border-color 100ms ease,
28
+ background-color 100ms ease;
29
+ cursor: var(--mantine-cursor-type);
30
+ -webkit-tap-highlight-color: transparent;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ }
35
+
36
+ :where([data-mantine-color-scheme='light']) .m_717d7ff6 {
37
+ background-color: var(--mantine-color-white);
38
+ border-color: var(--mantine-color-gray-4);
39
+ }
40
+
41
+ :where([data-mantine-color-scheme='dark']) .m_717d7ff6 {
42
+ background-color: var(--mantine-color-dark-6);
43
+ border-color: var(--mantine-color-dark-4);
44
+ }
45
+
46
+ .m_717d7ff6[data-indeterminate],
47
+ .m_717d7ff6[data-checked] {
48
+ background-color: var(--radio-color);
49
+ border-color: var(--radio-color);
50
+ }
51
+
52
+ .m_717d7ff6[data-indeterminate] > .m_3e4da632, .m_717d7ff6[data-checked] > .m_3e4da632 {
53
+ opacity: 1;
54
+ transform: none;
55
+ color: var(--radio-icon-color);
56
+ }
57
+
58
+ .m_717d7ff6[data-disabled] {
59
+ cursor: not-allowed;
60
+ background-color: var(--mantine-color-disabled);
61
+ border-color: var(--mantine-color-disabled-border);
62
+ }
63
+
64
+ .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
65
+ color: var(--mantine-color-disabled-color);
66
+ }
67
+
68
+ .m_2980836c[data-indeterminate]:not([data-disabled]),
69
+ .m_2980836c[data-checked]:not([data-disabled]) {
70
+ background-color: transparent;
71
+ border-color: var(--radio-color);
72
+ }
73
+
74
+ .m_2980836c[data-indeterminate]:not([data-disabled]) > .m_3e4da632, .m_2980836c[data-checked]:not([data-disabled]) > .m_3e4da632 {
75
+ color: var(--radio-color);
76
+ opacity: 1;
77
+ transform: none;
78
+ }
79
+
80
+ .m_3e4da632 {
81
+ display: block;
82
+ width: var(--radio-icon-size);
83
+ height: var(--radio-icon-size);
84
+ color: transparent;
85
+ pointer-events: none;
86
+ transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
87
+ opacity: 1;
88
+ transition:
89
+ transform 100ms ease,
90
+ opacity 100ms ease;
91
+ }
92
+ }
@@ -0,0 +1,82 @@
1
+ .m_f8d312f2 {
2
+ --rating-size-xs: 14px;
3
+ --rating-size-sm: 18px;
4
+ --rating-size-md: 20px;
5
+ --rating-size-lg: 28px;
6
+ --rating-size-xl: 32px;
7
+
8
+ display: flex;
9
+ width: max-content;
10
+ }
11
+
12
+ .m_f8d312f2:where(:has(input:disabled)) {
13
+ pointer-events: none;
14
+ }
15
+
16
+ .m_61734bb7 {
17
+ position: relative;
18
+ transition: transform 100ms ease;
19
+ }
20
+
21
+ .m_61734bb7:where([data-active]) {
22
+ z-index: 1;
23
+ transform: scale(1.1);
24
+ }
25
+
26
+ .m_5662a89a {
27
+ width: var(--rating-size);
28
+ height: var(--rating-size);
29
+ display: block;
30
+ }
31
+
32
+ :where([data-mantine-color-scheme='light']) .m_5662a89a {
33
+ fill: var(--mantine-color-gray-3);
34
+ stroke: var(--mantine-color-gray-3);
35
+ }
36
+
37
+ :where([data-mantine-color-scheme='dark']) .m_5662a89a {
38
+ fill: var(--mantine-color-dark-3);
39
+ stroke: var(--mantine-color-dark-3);
40
+ }
41
+
42
+ .m_5662a89a:where([data-filled]) {
43
+ fill: var(--rating-color);
44
+ stroke: var(--rating-color);
45
+ }
46
+
47
+ .m_211007ba {
48
+ height: 0;
49
+ width: 0;
50
+ position: absolute;
51
+ overflow: hidden;
52
+ white-space: nowrap;
53
+ opacity: 0;
54
+ -webkit-tap-highlight-color: transparent;
55
+ }
56
+
57
+ .m_211007ba:focus-visible + label {
58
+ outline: 2px solid var(--mantine-primary-color-filled);
59
+ outline-offset: 2px;
60
+ }
61
+
62
+ .m_21342ee4 {
63
+ display: block;
64
+ cursor: pointer;
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ z-index: var(--rating-item-z-index, 0);
69
+ -webkit-tap-highlight-color: transparent;
70
+ }
71
+
72
+ .m_21342ee4:where([data-read-only]) {
73
+ cursor: default;
74
+ }
75
+
76
+ .m_21342ee4:where(:last-of-type) {
77
+ position: relative;
78
+ }
79
+
80
+ .m_fae05d6a {
81
+ clip-path: var(--rating-symbol-clip-path);
82
+ }
@@ -0,0 +1,83 @@
1
+ @layer mantine {.m_f8d312f2 {
2
+ --rating-size-xs: 14px;
3
+ --rating-size-sm: 18px;
4
+ --rating-size-md: 20px;
5
+ --rating-size-lg: 28px;
6
+ --rating-size-xl: 32px;
7
+
8
+ display: flex;
9
+ width: max-content;
10
+ }
11
+
12
+ .m_f8d312f2:where(:has(input:disabled)) {
13
+ pointer-events: none;
14
+ }
15
+
16
+ .m_61734bb7 {
17
+ position: relative;
18
+ transition: transform 100ms ease;
19
+ }
20
+
21
+ .m_61734bb7:where([data-active]) {
22
+ z-index: 1;
23
+ transform: scale(1.1);
24
+ }
25
+
26
+ .m_5662a89a {
27
+ width: var(--rating-size);
28
+ height: var(--rating-size);
29
+ display: block;
30
+ }
31
+
32
+ :where([data-mantine-color-scheme='light']) .m_5662a89a {
33
+ fill: var(--mantine-color-gray-3);
34
+ stroke: var(--mantine-color-gray-3);
35
+ }
36
+
37
+ :where([data-mantine-color-scheme='dark']) .m_5662a89a {
38
+ fill: var(--mantine-color-dark-3);
39
+ stroke: var(--mantine-color-dark-3);
40
+ }
41
+
42
+ .m_5662a89a:where([data-filled]) {
43
+ fill: var(--rating-color);
44
+ stroke: var(--rating-color);
45
+ }
46
+
47
+ .m_211007ba {
48
+ height: 0;
49
+ width: 0;
50
+ position: absolute;
51
+ overflow: hidden;
52
+ white-space: nowrap;
53
+ opacity: 0;
54
+ -webkit-tap-highlight-color: transparent;
55
+ }
56
+
57
+ .m_211007ba:focus-visible + label {
58
+ outline: 2px solid var(--mantine-primary-color-filled);
59
+ outline-offset: 2px;
60
+ }
61
+
62
+ .m_21342ee4 {
63
+ display: block;
64
+ cursor: pointer;
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ z-index: var(--rating-item-z-index, 0);
69
+ -webkit-tap-highlight-color: transparent;
70
+ }
71
+
72
+ .m_21342ee4:where([data-read-only]) {
73
+ cursor: default;
74
+ }
75
+
76
+ .m_21342ee4:where(:last-of-type) {
77
+ position: relative;
78
+ }
79
+
80
+ .m_fae05d6a {
81
+ clip-path: var(--rating-symbol-clip-path);
82
+ }
83
+ }
@@ -0,0 +1,39 @@
1
+ .m_b32e4812 {
2
+ position: relative;
3
+ width: var(--rp-size);
4
+ height: var(--rp-size);
5
+ min-width: var(--rp-size);
6
+ min-height: var(--rp-size);
7
+ --rp-transition-duration: 0ms;
8
+ }
9
+
10
+ .m_d43b5134 {
11
+ width: var(--rp-size);
12
+ height: var(--rp-size);
13
+ min-width: var(--rp-size);
14
+ min-height: var(--rp-size);
15
+ transform: rotate(-90deg);
16
+ }
17
+
18
+ .m_b1ca1fbf {
19
+ stroke: var(--curve-color, var(--rp-curve-root-color));
20
+ transition:
21
+ stroke-dashoffset var(--rp-transition-duration) ease,
22
+ stroke-dasharray var(--rp-transition-duration) ease,
23
+ stroke var(--rp-transition-duration);
24
+ }
25
+
26
+ [data-mantine-color-scheme='light'] .m_b1ca1fbf {
27
+ --rp-curve-root-color: var(--mantine-color-gray-2);
28
+ }
29
+
30
+ [data-mantine-color-scheme='dark'] .m_b1ca1fbf {
31
+ --rp-curve-root-color: var(--mantine-color-dark-4);
32
+ }
33
+
34
+ .m_b23f9dc4 {
35
+ position: absolute;
36
+ top: 50%;
37
+ transform: translateY(-50%);
38
+ inset-inline: var(--rp-label-offset);
39
+ }
@@ -0,0 +1,40 @@
1
+ @layer mantine {.m_b32e4812 {
2
+ position: relative;
3
+ width: var(--rp-size);
4
+ height: var(--rp-size);
5
+ min-width: var(--rp-size);
6
+ min-height: var(--rp-size);
7
+ --rp-transition-duration: 0ms;
8
+ }
9
+
10
+ .m_d43b5134 {
11
+ width: var(--rp-size);
12
+ height: var(--rp-size);
13
+ min-width: var(--rp-size);
14
+ min-height: var(--rp-size);
15
+ transform: rotate(-90deg);
16
+ }
17
+
18
+ .m_b1ca1fbf {
19
+ stroke: var(--curve-color, var(--rp-curve-root-color));
20
+ transition:
21
+ stroke-dashoffset var(--rp-transition-duration) ease,
22
+ stroke-dasharray var(--rp-transition-duration) ease,
23
+ stroke var(--rp-transition-duration);
24
+ }
25
+
26
+ [data-mantine-color-scheme='light'] .m_b1ca1fbf {
27
+ --rp-curve-root-color: var(--mantine-color-gray-2);
28
+ }
29
+
30
+ [data-mantine-color-scheme='dark'] .m_b1ca1fbf {
31
+ --rp-curve-root-color: var(--mantine-color-dark-4);
32
+ }
33
+
34
+ .m_b23f9dc4 {
35
+ position: absolute;
36
+ top: 50%;
37
+ transform: translateY(-50%);
38
+ inset-inline: var(--rp-label-offset);
39
+ }
40
+ }