@mantine/charts 7.7.0 → 7.7.2

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 (27) hide show
  1. package/cjs/AreaChart/AreaChart.cjs +0 -1
  2. package/cjs/AreaChart/AreaChart.cjs.map +1 -1
  3. package/cjs/BarChart/BarChart.cjs +0 -1
  4. package/cjs/BarChart/BarChart.cjs.map +1 -1
  5. package/cjs/ChartLegend/ChartLegend.module.css.cjs +1 -1
  6. package/cjs/ChartTooltip/ChartTooltip.module.css.cjs +1 -1
  7. package/cjs/DonutChart/DonutChart.module.css.cjs +1 -1
  8. package/cjs/LineChart/LineChart.cjs +0 -1
  9. package/cjs/LineChart/LineChart.cjs.map +1 -1
  10. package/cjs/PieChart/PieChart.module.css.cjs +1 -1
  11. package/cjs/RadarChart/RadarChart.module.css.cjs +1 -1
  12. package/cjs/grid-chart.module.css.cjs +1 -1
  13. package/esm/AreaChart/AreaChart.mjs +0 -1
  14. package/esm/AreaChart/AreaChart.mjs.map +1 -1
  15. package/esm/BarChart/BarChart.mjs +0 -1
  16. package/esm/BarChart/BarChart.mjs.map +1 -1
  17. package/esm/ChartLegend/ChartLegend.module.css.mjs +1 -1
  18. package/esm/ChartTooltip/ChartTooltip.module.css.mjs +1 -1
  19. package/esm/DonutChart/DonutChart.module.css.mjs +1 -1
  20. package/esm/LineChart/LineChart.mjs +0 -1
  21. package/esm/LineChart/LineChart.mjs.map +1 -1
  22. package/esm/PieChart/PieChart.module.css.mjs +1 -1
  23. package/esm/RadarChart/RadarChart.module.css.mjs +1 -1
  24. package/esm/grid-chart.module.css.mjs +1 -1
  25. package/package.json +5 -5
  26. package/styles.css +43 -39
  27. package/styles.layer.css +43 -39
package/styles.css CHANGED
@@ -1,65 +1,65 @@
1
- .m-e4d36c9b {
1
+ .m_e4d36c9b {
2
2
  min-width: calc(12.5rem * var(--mantine-scale));
3
3
  background-color: var(--mantine-color-body);
4
4
  box-shadow: var(--mantine-shadow-md);
5
5
  border-radius: var(--mantine-radius-default);
6
6
  }
7
7
 
8
- :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
8
+ :where([data-mantine-color-scheme='light']) .m_e4d36c9b {
9
9
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
10
10
  }
11
11
 
12
- :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
12
+ :where([data-mantine-color-scheme='dark']) .m_e4d36c9b {
13
13
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
14
14
  }
15
15
 
16
- .m-7f4bcb19 {
16
+ .m_7f4bcb19 {
17
17
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
18
18
  font-size: var(--mantine-font-size-md);
19
19
  font-weight: 500;
20
20
  color: var(--mantine-color-bright);
21
21
  }
22
22
 
23
- .m-3de554dd {
23
+ .m_3de554dd {
24
24
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
25
25
  padding-top: 0;
26
26
  }
27
27
 
28
- .m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
28
+ .m_e4d36c9b:where([data-type='radial']) :where(.m_3de554dd) {
29
29
  padding-top: var(--mantine-spacing-sm);
30
30
  }
31
31
 
32
- .m-3de8964e {
32
+ .m_3de8964e {
33
33
  font-size: var(--mantine-font-size-sm);
34
34
  display: flex;
35
35
  justify-content: space-between;
36
36
  }
37
37
 
38
- .m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
38
+ .m_3de8964e:where(.m_3de8964e + .m_3de8964e) {
39
39
  margin-top: calc(var(--mantine-spacing-sm) / 2);
40
40
  }
41
41
 
42
- .m-3de8964e[data-type='scatter'] .m-b30369b5 {
42
+ .m_3de8964e[data-type='scatter'] .m_b30369b5 {
43
43
  display: none;
44
44
  }
45
45
 
46
- .m-50186d10 {
46
+ .m_50186d10 {
47
47
  display: flex;
48
48
  align-items: center;
49
49
  gap: var(--mantine-spacing-sm);
50
50
  margin-inline-end: var(--mantine-spacing-xl);
51
51
  }
52
52
 
53
- .m-501dadf9 {
53
+ .m_501dadf9 {
54
54
  color: var(--mantine-color-text);
55
55
  font-size: var(--mantine-font-size-sm);
56
56
  }
57
57
 
58
- .m-50192318 {
58
+ .m_50192318 {
59
59
  color: var(--mantine-color-bright);
60
60
  }
61
61
 
62
- .m-847eaf {
62
+ .m_847eaf {
63
63
  display: flex;
64
64
  flex-wrap: wrap;
65
65
  align-items: center;
@@ -67,15 +67,15 @@
67
67
  height: 100%;
68
68
  }
69
69
 
70
- .m-847eaf:where([data-position='top']) {
70
+ .m_847eaf:where([data-position='top']) {
71
71
  padding-bottom: var(--mantine-spacing-md);
72
72
  }
73
73
 
74
- .m-847eaf:where([data-position='bottom']) {
74
+ .m_847eaf:where([data-position='bottom']) {
75
75
  padding-top: var(--mantine-spacing-md);
76
76
  }
77
77
 
78
- .m-17da7e62 {
78
+ .m_17da7e62 {
79
79
  display: flex;
80
80
  align-items: center;
81
81
  gap: calc(0.4375rem * var(--mantine-scale));
@@ -85,116 +85,120 @@
85
85
  }
86
86
 
87
87
  @media (hover: hover) {
88
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
88
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:hover) {
89
89
  background-color: var(--mantine-color-gray-0);
90
90
  }
91
91
 
92
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
92
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:hover) {
93
93
  background-color: var(--mantine-color-dark-5);
94
94
  }
95
95
  }
96
96
 
97
97
  @media (hover: none) {
98
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
98
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:active) {
99
99
  background-color: var(--mantine-color-gray-0);
100
100
  }
101
101
 
102
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
102
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:active) {
103
103
  background-color: var(--mantine-color-dark-5);
104
104
  }
105
105
  }
106
106
 
107
- .m-8ff56c0d {
107
+ .m_8ff56c0d {
108
108
  font-size: var(--mantine-font-size-sm);
109
109
  margin: 0;
110
110
  padding: 0;
111
111
  }
112
112
 
113
- .m-a50f3e58 {
113
+ .m_a50f3e58 {
114
114
  display: block;
115
115
  width: 100%;
116
116
  }
117
117
 
118
- :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
118
+ .m_a50f3e58 svg {
119
+ overflow: visible;
120
+ }
121
+
122
+ :where([data-mantine-color-scheme='light']) .m_a50f3e58 {
119
123
  --chart-grid-color: rgba(173, 181, 189, 0.6);
120
124
  --chart-cursor-fill: rgba(173, 181, 189, 0.15);
121
125
  }
122
126
 
123
- :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
127
+ :where([data-mantine-color-scheme='dark']) .m_a50f3e58 {
124
128
  --chart-cursor-fill: rgba(105, 105, 105, 0.15);
125
129
  --chart-grid-color: rgba(105, 105, 105, 0.6);
126
130
  }
127
131
 
128
- .m-a50f3e58 :where(text) {
132
+ .m_a50f3e58 :where(text) {
129
133
  font-family: var(--mantine-font-family);
130
134
  color: var(--chart-text-color, var(--mantine-color-dimmed));
131
135
  }
132
136
 
133
- .m-af9188cb {
137
+ .m_af9188cb {
134
138
  height: 100%;
135
139
  width: 100%;
136
140
  }
137
141
 
138
- .m-a50a48bc {
142
+ .m_a50a48bc {
139
143
  stroke: var(--chart-grid-color);
140
144
  }
141
145
 
142
- .m-a507a517 {
146
+ .m_a507a517 {
143
147
  color: var(--chart-grid-color);
144
148
  }
145
149
 
146
- .m-2293801d {
150
+ .m_2293801d {
147
151
  color: var(--chart-text-color, var(--mantine-color-dimmed));
148
152
  }
149
153
 
150
- .m-a410e613 {
154
+ .m_a410e613 {
151
155
  min-height: var(--chart-size, auto);
152
156
  height: var(--chart-size, auto);
153
157
  width: var(--chart-size, auto);
154
158
  min-width: var(--chart-size, auto);
155
159
  }
156
160
 
157
- .m-a410e613 :where(*) {
161
+ .m_a410e613 :where(*) {
158
162
  outline: 0;
159
163
  }
160
164
 
161
- .m-ddb0bfe3 {
165
+ .m_ddb0bfe3 {
162
166
  fill: var(--mantine-color-text);
163
167
  font-size: var(--mantine-font-size-sm);
164
168
  }
165
169
 
166
- .m-cd8943fd {
170
+ .m_cd8943fd {
167
171
  min-height: var(--chart-size, auto);
168
172
  height: var(--chart-size, auto);
169
173
  width: var(--chart-size, auto);
170
174
  min-width: var(--chart-size, auto);
171
175
  }
172
176
 
173
- .m-cd8943fd :where(*) {
177
+ .m_cd8943fd :where(*) {
174
178
  outline: 0;
175
179
  }
176
180
 
177
- .m-e3441f39 {
181
+ .m_e3441f39 {
178
182
  fill: var(--mantine-color-white);
179
183
  font-size: var(--mantine-font-size-xs);
180
184
  }
181
185
 
182
- :where([data-mantine-color-scheme='light']) .m-1f271cf7 {
186
+ :where([data-mantine-color-scheme='light']) .m_1f271cf7 {
183
187
  --chart-grid-color: rgba(173, 181, 189, 0.6);
184
188
  --chart-text-color: var(--mantine-color-gray-7);
185
189
  }
186
- :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
190
+ :where([data-mantine-color-scheme='dark']) .m_1f271cf7 {
187
191
  --chart-grid-color: rgba(105, 105, 105, 0.6);
188
192
  --chart-text-color: var(--mantine-color-dark-1);
189
193
  }
190
194
 
191
- .m-1f271cf7 :where(text) {
195
+ .m_1f271cf7 :where(text) {
192
196
  font-size: var(--mantine-font-size-xs);
193
197
  fill: var(--chart-text-color, var(--mantine-color-dimmed));
194
198
  user-select: none;
195
199
  }
196
200
 
197
- .m-cf06f58c {
201
+ .m_cf06f58c {
198
202
  height: 100%;
199
203
  width: 100%;
200
204
  }
package/styles.layer.css CHANGED
@@ -1,65 +1,65 @@
1
- @layer mantine {.m-e4d36c9b {
1
+ @layer mantine {.m_e4d36c9b {
2
2
  min-width: calc(12.5rem * var(--mantine-scale));
3
3
  background-color: var(--mantine-color-body);
4
4
  box-shadow: var(--mantine-shadow-md);
5
5
  border-radius: var(--mantine-radius-default);
6
6
  }
7
7
 
8
- :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
8
+ :where([data-mantine-color-scheme='light']) .m_e4d36c9b {
9
9
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
10
10
  }
11
11
 
12
- :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
12
+ :where([data-mantine-color-scheme='dark']) .m_e4d36c9b {
13
13
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
14
14
  }
15
15
 
16
- .m-7f4bcb19 {
16
+ .m_7f4bcb19 {
17
17
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
18
18
  font-size: var(--mantine-font-size-md);
19
19
  font-weight: 500;
20
20
  color: var(--mantine-color-bright);
21
21
  }
22
22
 
23
- .m-3de554dd {
23
+ .m_3de554dd {
24
24
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
25
25
  padding-top: 0;
26
26
  }
27
27
 
28
- .m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
28
+ .m_e4d36c9b:where([data-type='radial']) :where(.m_3de554dd) {
29
29
  padding-top: var(--mantine-spacing-sm);
30
30
  }
31
31
 
32
- .m-3de8964e {
32
+ .m_3de8964e {
33
33
  font-size: var(--mantine-font-size-sm);
34
34
  display: flex;
35
35
  justify-content: space-between;
36
36
  }
37
37
 
38
- .m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
38
+ .m_3de8964e:where(.m_3de8964e + .m_3de8964e) {
39
39
  margin-top: calc(var(--mantine-spacing-sm) / 2);
40
40
  }
41
41
 
42
- .m-3de8964e[data-type='scatter'] .m-b30369b5 {
42
+ .m_3de8964e[data-type='scatter'] .m_b30369b5 {
43
43
  display: none;
44
44
  }
45
45
 
46
- .m-50186d10 {
46
+ .m_50186d10 {
47
47
  display: flex;
48
48
  align-items: center;
49
49
  gap: var(--mantine-spacing-sm);
50
50
  margin-inline-end: var(--mantine-spacing-xl);
51
51
  }
52
52
 
53
- .m-501dadf9 {
53
+ .m_501dadf9 {
54
54
  color: var(--mantine-color-text);
55
55
  font-size: var(--mantine-font-size-sm);
56
56
  }
57
57
 
58
- .m-50192318 {
58
+ .m_50192318 {
59
59
  color: var(--mantine-color-bright);
60
60
  }
61
61
 
62
- .m-847eaf {
62
+ .m_847eaf {
63
63
  display: flex;
64
64
  flex-wrap: wrap;
65
65
  align-items: center;
@@ -67,15 +67,15 @@
67
67
  height: 100%;
68
68
  }
69
69
 
70
- .m-847eaf:where([data-position='top']) {
70
+ .m_847eaf:where([data-position='top']) {
71
71
  padding-bottom: var(--mantine-spacing-md);
72
72
  }
73
73
 
74
- .m-847eaf:where([data-position='bottom']) {
74
+ .m_847eaf:where([data-position='bottom']) {
75
75
  padding-top: var(--mantine-spacing-md);
76
76
  }
77
77
 
78
- .m-17da7e62 {
78
+ .m_17da7e62 {
79
79
  display: flex;
80
80
  align-items: center;
81
81
  gap: calc(0.4375rem * var(--mantine-scale));
@@ -85,116 +85,120 @@
85
85
  }
86
86
 
87
87
  @media (hover: hover) {
88
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
88
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:hover) {
89
89
  background-color: var(--mantine-color-gray-0);
90
90
  }
91
91
 
92
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
92
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:hover) {
93
93
  background-color: var(--mantine-color-dark-5);
94
94
  }
95
95
  }
96
96
 
97
97
  @media (hover: none) {
98
- :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
98
+ :where([data-mantine-color-scheme='light']) .m_17da7e62:where(:active) {
99
99
  background-color: var(--mantine-color-gray-0);
100
100
  }
101
101
 
102
- :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
102
+ :where([data-mantine-color-scheme='dark']) .m_17da7e62:where(:active) {
103
103
  background-color: var(--mantine-color-dark-5);
104
104
  }
105
105
  }
106
106
 
107
- .m-8ff56c0d {
107
+ .m_8ff56c0d {
108
108
  font-size: var(--mantine-font-size-sm);
109
109
  margin: 0;
110
110
  padding: 0;
111
111
  }
112
112
 
113
- .m-a50f3e58 {
113
+ .m_a50f3e58 {
114
114
  display: block;
115
115
  width: 100%;
116
116
  }
117
117
 
118
- :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
118
+ .m_a50f3e58 svg {
119
+ overflow: visible;
120
+ }
121
+
122
+ :where([data-mantine-color-scheme='light']) .m_a50f3e58 {
119
123
  --chart-grid-color: rgba(173, 181, 189, 0.6);
120
124
  --chart-cursor-fill: rgba(173, 181, 189, 0.15);
121
125
  }
122
126
 
123
- :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
127
+ :where([data-mantine-color-scheme='dark']) .m_a50f3e58 {
124
128
  --chart-cursor-fill: rgba(105, 105, 105, 0.15);
125
129
  --chart-grid-color: rgba(105, 105, 105, 0.6);
126
130
  }
127
131
 
128
- .m-a50f3e58 :where(text) {
132
+ .m_a50f3e58 :where(text) {
129
133
  font-family: var(--mantine-font-family);
130
134
  color: var(--chart-text-color, var(--mantine-color-dimmed));
131
135
  }
132
136
 
133
- .m-af9188cb {
137
+ .m_af9188cb {
134
138
  height: 100%;
135
139
  width: 100%;
136
140
  }
137
141
 
138
- .m-a50a48bc {
142
+ .m_a50a48bc {
139
143
  stroke: var(--chart-grid-color);
140
144
  }
141
145
 
142
- .m-a507a517 {
146
+ .m_a507a517 {
143
147
  color: var(--chart-grid-color);
144
148
  }
145
149
 
146
- .m-2293801d {
150
+ .m_2293801d {
147
151
  color: var(--chart-text-color, var(--mantine-color-dimmed));
148
152
  }
149
153
 
150
- .m-a410e613 {
154
+ .m_a410e613 {
151
155
  min-height: var(--chart-size, auto);
152
156
  height: var(--chart-size, auto);
153
157
  width: var(--chart-size, auto);
154
158
  min-width: var(--chart-size, auto);
155
159
  }
156
160
 
157
- .m-a410e613 :where(*) {
161
+ .m_a410e613 :where(*) {
158
162
  outline: 0;
159
163
  }
160
164
 
161
- .m-ddb0bfe3 {
165
+ .m_ddb0bfe3 {
162
166
  fill: var(--mantine-color-text);
163
167
  font-size: var(--mantine-font-size-sm);
164
168
  }
165
169
 
166
- .m-cd8943fd {
170
+ .m_cd8943fd {
167
171
  min-height: var(--chart-size, auto);
168
172
  height: var(--chart-size, auto);
169
173
  width: var(--chart-size, auto);
170
174
  min-width: var(--chart-size, auto);
171
175
  }
172
176
 
173
- .m-cd8943fd :where(*) {
177
+ .m_cd8943fd :where(*) {
174
178
  outline: 0;
175
179
  }
176
180
 
177
- .m-e3441f39 {
181
+ .m_e3441f39 {
178
182
  fill: var(--mantine-color-white);
179
183
  font-size: var(--mantine-font-size-xs);
180
184
  }
181
185
 
182
- :where([data-mantine-color-scheme='light']) .m-1f271cf7 {
186
+ :where([data-mantine-color-scheme='light']) .m_1f271cf7 {
183
187
  --chart-grid-color: rgba(173, 181, 189, 0.6);
184
188
  --chart-text-color: var(--mantine-color-gray-7);
185
189
  }
186
- :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
190
+ :where([data-mantine-color-scheme='dark']) .m_1f271cf7 {
187
191
  --chart-grid-color: rgba(105, 105, 105, 0.6);
188
192
  --chart-text-color: var(--mantine-color-dark-1);
189
193
  }
190
194
 
191
- .m-1f271cf7 :where(text) {
195
+ .m_1f271cf7 :where(text) {
192
196
  font-size: var(--mantine-font-size-xs);
193
197
  fill: var(--chart-text-color, var(--mantine-color-dimmed));
194
198
  user-select: none;
195
199
  }
196
200
 
197
- .m-cf06f58c {
201
+ .m_cf06f58c {
198
202
  height: 100%;
199
203
  width: 100%;
200
204
  }