@mantine/charts 7.6.0-alpha.1 → 7.6.1

package/lib/LineChart/LineChart.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DotProps, LineChart as ReChartsLineChart } from 'recharts';
+import { DotProps, LineProps, LineChart as ReChartsLineChart } from 'recharts';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
 import { ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltipStylesNames } from '../ChartTooltip';
@@ -33,6 +33,10 @@ export interface LineChartProps extends BoxProps, GridChartBaseProps, StylesApiP
     lineChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsLineChart>;
     /** Determines whether points with `null` values should be connected, `true` by default */
     connectNulls?: boolean;
+    /** Additional components that are rendered inside recharts `AreaChart` component */
+    children?: React.ReactNode;
+    /** Props passed down to recharts `Area` component */
+    lineProps?: ((series: LineChartSeries) => Partial<Omit<LineProps, 'ref'>>) | Partial<Omit<LineProps, 'ref'>>;
 }
 export type LineChartFactory = Factory<{
     props: LineChartProps;

package/lib/PieChart/PieChart.d.ts

@@ -47,6 +47,8 @@ export interface PieChartProps extends BoxProps, StylesApiProps<PieChartFactory>
     pieChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsPieChart>;
     /** Controls labels position relative to the segment, `'outside'` by default */
     labelsPosition?: 'inside' | 'outside';
+    /** Type of labels to display, `'value'` by default */
+    labelsType?: 'value' | 'percent';
     /** A function to format values inside the tooltip */
     valueFormatter?: (value: number) => string;
 }

package/lib/RadarChart/RadarChart.d.ts

@@ -38,6 +38,8 @@ export interface RadarChartProps extends BoxProps, StylesApiProps<RadarChartFact
     polarAngleAxisProps?: Omit<PolarAngleAxisProps, 'ref'>;
     /** Props passed down to recharts PolarRadiusAxis component */
     polarRadiusAxisProps?: Omit<PolarRadiusAxisProps, 'ref'>;
+    /** Additional components that are rendered inside recharts `RadarChart` component */
+    children?: React.ReactNode;
 }
 export type RadarChartFactory = Factory<{
     props: RadarChartProps;

package/lib/index.d.mts

@@ -1,10 +1,10 @@
-export * from './ChartTooltip';
-export * from './ChartLegend';
-export * from './AreaChart';
-export * from './BarChart';
-export * from './LineChart';
-export * from './Sparkline';
-export * from './DonutChart';
-export * from './PieChart';
-export * from './RadarChart';
+export * from './ChartTooltip/index.js';
+export * from './ChartLegend/index.js';
+export * from './AreaChart/index.js';
+export * from './BarChart/index.js';
+export * from './LineChart/index.js';
+export * from './Sparkline/index.js';
+export * from './DonutChart/index.js';
+export * from './PieChart/index.js';
+export * from './RadarChart/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -1,10 +1,10 @@
-export * from './ChartTooltip';
-export * from './ChartLegend';
-export * from './AreaChart';
-export * from './BarChart';
-export * from './LineChart';
-export * from './Sparkline';
-export * from './DonutChart';
-export * from './PieChart';
-export * from './RadarChart';
+export * from './ChartTooltip/index.js';
+export * from './ChartLegend/index.js';
+export * from './AreaChart/index.js';
+export * from './BarChart/index.js';
+export * from './LineChart/index.js';
+export * from './Sparkline/index.js';
+export * from './DonutChart/index.js';
+export * from './PieChart/index.js';
+export * from './RadarChart/index.js';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.6.0-alpha.1",
+  "version": "7.6.1",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,15 +35,15 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.6.0-alpha.1",
-    "@mantine/hooks": "7.6.0-alpha.1",
+    "@mantine/core": "7.6.1",
+    "@mantine/hooks": "7.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"
   },
   "devDependencies": {
-    "@mantine-tests/core": "1.0.1",
-    "@mantine/core": "7.6.0-alpha.1",
-    "@mantine/hooks": "7.6.0-alpha.1"
+    "@mantine-tests/core": "1.1.0",
+    "@mantine/core": "7.6.1",
+    "@mantine/hooks": "7.6.1"
   }
 }

package/styles.css

@@ -1 +1,192 @@
-.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}
+.m-e4d36c9b {
+  min-width: calc(12.5rem * var(--mantine-scale));
+  background-color: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-md);
+  border-radius: var(--mantine-radius-default);
+}
+
+  :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+}
+
+.m-7f4bcb19 {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-md);
+  font-weight: 500;
+  color: var(--mantine-color-bright);
+}
+
+.m-3de554dd {
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  padding-top: 0;
+}
+
+.m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
+    padding-top: var(--mantine-spacing-sm);
+  }
+
+.m-3de8964e {
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  justify-content: space-between;
+}
+
+.m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
+    margin-top: calc(var(--mantine-spacing-sm) / 2);
+  }
+
+.m-50186d10 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  margin-inline-end: var(--mantine-spacing-xl);
+}
+
+.m-501dadf9 {
+  color: var(--mantine-color-text);
+  font-size: var(--mantine-font-size-sm);
+}
+
+.m-50192318 {
+  color: var(--mantine-color-bright);
+}
+
+.m-847eaf {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+}
+
+  .m-847eaf:where([data-position='top']) {
+    padding-bottom: var(--mantine-spacing-md);
+  }
+
+  .m-847eaf:where([data-position='bottom']) {
+    padding-top: var(--mantine-spacing-md);
+  }
+
+.m-17da7e62 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.4375rem * var(--mantine-scale));
+  padding: calc(0.4375rem * var(--mantine-scale)) var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-default);
+  line-height: 1;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m-8ff56c0d {
+  font-size: var(--mantine-font-size-sm);
+  margin: 0;
+  padding: 0;
+}
+
+.m-a50f3e58 {
+  display: block;
+  width: 100%;
+}
+
+  :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
+    --chart-grid-color: rgba(173, 181, 189, 0.6);
+    --chart-cursor-fill: rgba(173, 181, 189, 0.15);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
+    --chart-cursor-fill: rgba(105, 105, 105, 0.15);
+    --chart-grid-color: rgba(105, 105, 105, 0.6);
+}
+
+  .m-a50f3e58 :where(text) {
+    font-family: var(--mantine-font-family);
+    color: var(--chart-text-color, var(--mantine-color-dimmed));
+  }
+
+.m-af9188cb {
+  height: 100%;
+  width: 100%;
+}
+
+.m-a50a48bc {
+  stroke: var(--chart-grid-color);
+}
+
+.m-a507a517 {
+  color: var(--chart-grid-color);
+}
+
+.m-a410e613 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m-a410e613 :where(*) {
+    outline: 0;
+  }
+
+.m-ddb0bfe3 {
+  fill: var(--mantine-color-text);
+  font-size: var(--mantine-font-size-sm);
+}
+
+.m-cd8943fd {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m-cd8943fd :where(*) {
+    outline: 0;
+  }
+
+.m-e3441f39 {
+  fill: var(--mantine-color-white);
+  font-size: var(--mantine-font-size-xs);
+}
+
+:where([data-mantine-color-scheme='light']) .m-1f271cf7 {
+    --chart-grid-color: rgba(173, 181, 189, 0.6);
+    --chart-text-color: var(--mantine-color-gray-7);
+}
+  :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
+    --chart-grid-color: rgba(105, 105, 105, 0.6);
+    --chart-text-color: var(--mantine-color-dark-1);
+}
+
+  .m-1f271cf7 :where(text) {
+    font-size: var(--mantine-font-size-xs);
+    fill: var(--chart-text-color, var(--mantine-color-dimmed));
+    user-select: none;
+  }
+
+.m-cf06f58c {
+  height: 100%;
+  width: 100%;
+}

package/styles.layer.css

@@ -1 +1,193 @@
-@layer mantine {.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}:where([data-mantine-color-scheme=light]) .m-1f271cf7{--chart-grid-color:rgba(173,181,189,.6);--chart-text-color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-1f271cf7{--chart-grid-color:hsla(0,0%,41%,.6);--chart-text-color:var(--mantine-color-dark-1)}.m-1f271cf7 :where(text){fill:var(--chart-text-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);user-select:none}.m-cf06f58c{height:100%;width:100%}}
+@layer mantine {.m-e4d36c9b {
+  min-width: calc(12.5rem * var(--mantine-scale));
+  background-color: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-md);
+  border-radius: var(--mantine-radius-default);
+}
+
+  :where([data-mantine-color-scheme='light']) .m-e4d36c9b {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m-e4d36c9b {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+}
+
+.m-7f4bcb19 {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+  font-size: var(--mantine-font-size-md);
+  font-weight: 500;
+  color: var(--mantine-color-bright);
+}
+
+.m-3de554dd {
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  padding-top: 0;
+}
+
+.m-e4d36c9b:where([data-type='radial']) :where(.m-3de554dd) {
+    padding-top: var(--mantine-spacing-sm);
+  }
+
+.m-3de8964e {
+  font-size: var(--mantine-font-size-sm);
+  display: flex;
+  justify-content: space-between;
+}
+
+.m-3de8964e:where(.m-3de8964e + .m-3de8964e) {
+    margin-top: calc(var(--mantine-spacing-sm) / 2);
+  }
+
+.m-50186d10 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  margin-inline-end: var(--mantine-spacing-xl);
+}
+
+.m-501dadf9 {
+  color: var(--mantine-color-text);
+  font-size: var(--mantine-font-size-sm);
+}
+
+.m-50192318 {
+  color: var(--mantine-color-bright);
+}
+
+.m-847eaf {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+}
+
+  .m-847eaf:where([data-position='top']) {
+    padding-bottom: var(--mantine-spacing-md);
+  }
+
+  .m-847eaf:where([data-position='bottom']) {
+    padding-top: var(--mantine-spacing-md);
+  }
+
+.m-17da7e62 {
+  display: flex;
+  align-items: center;
+  gap: calc(0.4375rem * var(--mantine-scale));
+  padding: calc(0.4375rem * var(--mantine-scale)) var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-default);
+  line-height: 1;
+}
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:hover) {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:hover) {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m-17da7e62:where(:active) {
+      background-color: var(--mantine-color-gray-0);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m-17da7e62:where(:active) {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m-8ff56c0d {
+  font-size: var(--mantine-font-size-sm);
+  margin: 0;
+  padding: 0;
+}
+
+.m-a50f3e58 {
+  display: block;
+  width: 100%;
+}
+
+  :where([data-mantine-color-scheme='light']) .m-a50f3e58 {
+    --chart-grid-color: rgba(173, 181, 189, 0.6);
+    --chart-cursor-fill: rgba(173, 181, 189, 0.15);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m-a50f3e58 {
+    --chart-cursor-fill: rgba(105, 105, 105, 0.15);
+    --chart-grid-color: rgba(105, 105, 105, 0.6);
+}
+
+  .m-a50f3e58 :where(text) {
+    font-family: var(--mantine-font-family);
+    color: var(--chart-text-color, var(--mantine-color-dimmed));
+  }
+
+.m-af9188cb {
+  height: 100%;
+  width: 100%;
+}
+
+.m-a50a48bc {
+  stroke: var(--chart-grid-color);
+}
+
+.m-a507a517 {
+  color: var(--chart-grid-color);
+}
+
+.m-a410e613 {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m-a410e613 :where(*) {
+    outline: 0;
+  }
+
+.m-ddb0bfe3 {
+  fill: var(--mantine-color-text);
+  font-size: var(--mantine-font-size-sm);
+}
+
+.m-cd8943fd {
+  min-height: var(--chart-size, auto);
+  height: var(--chart-size, auto);
+  width: var(--chart-size, auto);
+  min-width: var(--chart-size, auto);
+}
+
+  .m-cd8943fd :where(*) {
+    outline: 0;
+  }
+
+.m-e3441f39 {
+  fill: var(--mantine-color-white);
+  font-size: var(--mantine-font-size-xs);
+}
+
+:where([data-mantine-color-scheme='light']) .m-1f271cf7 {
+    --chart-grid-color: rgba(173, 181, 189, 0.6);
+    --chart-text-color: var(--mantine-color-gray-7);
+}
+  :where([data-mantine-color-scheme='dark']) .m-1f271cf7 {
+    --chart-grid-color: rgba(105, 105, 105, 0.6);
+    --chart-text-color: var(--mantine-color-dark-1);
+}
+
+  .m-1f271cf7 :where(text) {
+    font-size: var(--mantine-font-size-xs);
+    fill: var(--chart-text-color, var(--mantine-color-dimmed));
+    user-select: none;
+  }
+
+.m-cf06f58c {
+  height: 100%;
+  width: 100%;
+}
+}