@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

package/dist/cjs/components/chart/area-chart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_area_chart_style = require("./area-chart.style.cjs");
 const require_cartesian_chart = require("./cartesian-chart.cjs");
@@ -13,11 +14,12 @@ const { PropsContext: AreaChartPropsContext, usePropsContext: useAreaChartPropsC
 * @see https://yamada-ui.com/docs/components/area-chart
 */
 const AreaChart = withContext(({ children, series = [], ...rest }) => {
+	const components = (0, react.useMemo)(() => [{
+		component: require_cartesian_chart.ChartArea,
+		fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartArea, { ...props }, index))
+	}], [series]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.CartesianChart, {
-		components: (0, react.useMemo)(() => [{
-			component: require_cartesian_chart.ChartArea,
-			fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartArea, { ...props }, index))
-		}], [series]),
+		components,
 		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.AreaChart, { ...props }),
 		...rest,
 		children

package/dist/cjs/components/chart/area-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.cjs","names":["createComponent","areaChartStyle","CartesianChart","ChartArea","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<AreaChartStyle> {\n  /***\n   * If provided, generate areas based on series.\n   */\n  series?: ChartAreaProps<Y>[]\n}\n\nconst {\n  PropsContext: AreaChartPropsContext,\n  usePropsContext: useAreaChartPropsContext,\n  withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n  \"area-chart\",\n  areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n  <Y extends Dict>({ children, series = [], ...rest }: AreaChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartArea,\n          fallback: series.map((props, index) => (\n            <ChartArea key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalAreaChart {...props} />}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACEA,yBAAAA,gBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,aACN,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA8B;CAazE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,gBAAD;EACE,aAAA,GAAA,MAAA,QAAA,OAbI,CACJ;GACE,WAAWC,wBAAAA;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,WAAD,EAAuB,GAAI,MAAQ,GAAnB,KAAmB,CACpC;EACH,CACF,GACA,CAAC,MAAM,CAKgB;EACrB,SAAS,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,WAAD,EAAmB,GAAI,MAAQ,CAAA;EAClD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}
+{"version":3,"file":"area-chart.cjs","names":["createComponent","areaChartStyle","useMemo","ChartArea","CartesianChart","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<AreaChartStyle> {\n  /***\n   * If provided, generate areas based on series.\n   */\n  series?: ChartAreaProps<Y>[]\n}\n\nconst {\n  PropsContext: AreaChartPropsContext,\n  usePropsContext: useAreaChartPropsContext,\n  withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n  \"area-chart\",\n  areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n  <Y extends Dict>({ children, series = [], ...rest }: AreaChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartArea,\n          fallback: series.map((props, index) => (\n            <ChartArea key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalAreaChart {...props} />}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;AAuBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACEA,yBAAAA,gBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,aACN,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA8B;CACzE,MAAM,cAAA,GAAaC,MAAAA,QAAAA,OACX,CACJ;EACE,WAAWC,wBAAAA;EACX,UAAU,OAAO,KAAK,OAAO,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,WAAD,EAAuB,GAAI,MAAQ,GAAnB,KAAmB,CACpC;CACH,CACF,GACA,CAAC,MAAM,CACT;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,gBAAD;EACc;EACZ,SAAS,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,WAAD,EAAmB,GAAI,MAAQ,CAAA;EAClD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}

package/dist/cjs/components/chart/bar-chart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_bar_chart_style = require("./bar-chart.style.cjs");
 const require_cartesian_chart = require("./cartesian-chart.cjs");
@@ -13,11 +14,12 @@ const { PropsContext: BarChartPropsContext, usePropsContext: useBarChartPropsCon
 * @see https://yamada-ui.com/docs/components/bar-chart
 */
 const BarChart = withContext(({ children, series = [], ...rest }) => {
+	const components = (0, react.useMemo)(() => [{
+		component: require_cartesian_chart.ChartBar,
+		fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartBar, { ...props }, index))
+	}], [series]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.CartesianChart, {
-		components: (0, react.useMemo)(() => [{
-			component: require_cartesian_chart.ChartBar,
-			fallback: series.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cartesian_chart.ChartBar, { ...props }, index))
-		}], [series]),
+		components,
 		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.BarChart, { ...props }),
 		...rest,
 		children

package/dist/cjs/components/chart/bar-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.cjs","names":["createComponent","barChartStyle","CartesianChart","ChartBar","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({ children, series = [], ...rest }: BarChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalBarChart {...props} />}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;AAuBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEA,yBAAAA,gBAA8C,aAAaC,wBAAAA,aAAa;;;;;;AAS5E,MAAa,WAAW,aACL,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA6B;CAaxE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,gBAAD;EACE,aAAA,GAAA,MAAA,QAAA,OAbI,CACJ;GACE,WAAWC,wBAAAA;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CACnC;EACH,CACF,GACA,CAAC,MAAM,CAKgB;EACrB,SAAS,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,UAAD,EAAkB,GAAI,MAAQ,CAAA;EACjD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}
+{"version":3,"file":"bar-chart.cjs","names":["createComponent","barChartStyle","useMemo","ChartBar","CartesianChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({ children, series = [], ...rest }: BarChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalBarChart {...props} />}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;AAuBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACEA,yBAAAA,gBAA8C,aAAaC,wBAAAA,aAAa;;;;;;AAS5E,MAAa,WAAW,aACL,EAAE,UAAU,SAAS,CAAC,GAAG,GAAG,WAA6B;CACxE,MAAM,cAAA,GAAaC,MAAAA,QAAAA,OACX,CACJ;EACE,WAAWC,wBAAAA;EACX,UAAU,OAAO,KAAK,OAAO,UAC3B,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,UAAD,EAAsB,GAAI,MAAQ,GAAnB,KAAmB,CACnC;CACH,CACF,GACA,CAAC,MAAM,CACT;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,gBAAD;EACc;EACZ,SAAS,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,SAAAA,UAAD,EAAkB,GAAI,MAAQ,CAAA;EACjD,GAAI;EAEH;CACa,CAAA;AAEpB,CACF,CAAC,CAAC"}

package/dist/cjs/components/chart/cartesian-chart.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_var = require("../../core/system/var.cjs");
 const require_system_provider = require("../../core/system/system-provider.cjs");
@@ -150,31 +151,32 @@ const ChartXAxis = withContext((props) => {
 		tickLineProps.css,
 		css
 	]);
-	const { getRootProps, getXAxisProps } = require_use_cartesian_chart.useChartXAxis({
-		label: (0, react.useMemo)(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getRootProps, getXAxisProps } = require_use_cartesian_chart.useChartXAxis({
+		label,
 		tick,
 		tickLine,
 		...rest
@@ -234,31 +236,32 @@ const ChartYAxis = withContext((props) => {
 		tickLineProps.css,
 		css
 	]);
-	const { getRootProps, getYAxisProps } = require_use_cartesian_chart.useChartYAxis({
-		label: (0, react.useMemo)(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getRootProps, getYAxisProps } = require_use_cartesian_chart.useChartYAxis({
+		label,
 		tick,
 		tickLine,
 		...rest
@@ -320,55 +323,57 @@ const ChartLine = withContext((props) => {
 		css,
 		color
 	]);
+	const activeDot = (0, react.useMemo)(() => {
+		if (!activeDotProp) return activeDotProp;
+		const className = (0, require_utils_index.utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
+			fill: color,
+			stroke: color
+		}));
+		if ((0, require_utils_index.utils_exports.isFunction)(activeDotProp)) return (props) => activeDotProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(activeDotProp)) return (0, react.cloneElement)(activeDotProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(activeDotProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(activeDotProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		activeDotProp,
+		activeDotProps.className,
+		activeDotProps.css,
+		css,
+		color
+	]);
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
 	const { getLineProps, getRootProps } = require_use_cartesian_chart.useChartLine({
-		activeDot: (0, react.useMemo)(() => {
-			if (!activeDotProp) return activeDotProp;
-			const className = (0, require_utils_index.utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
-				fill: color,
-				stroke: color
-			}));
-			if ((0, require_utils_index.utils_exports.isFunction)(activeDotProp)) return (props) => activeDotProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(activeDotProp)) return (0, react.cloneElement)(activeDotProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(activeDotProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(activeDotProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			activeDotProp,
-			activeDotProps.className,
-			activeDotProps.css,
-			css,
-			color
-		]),
+		activeDot,
 		dataKey,
 		dot,
-		label: (0, react.useMemo)(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		label,
 		stroke,
 		...rest
 	});
@@ -518,30 +523,31 @@ const ChartBar = withContext((props) => {
 	const fill = JSON.stringify(color);
 	const labelProps = useSlotComponentProps({}, "labelList");
 	const css = (0, react.useMemo)(() => require_use_css.getCSS(system, theme), [system, theme]);
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
+			};
+		} else return { className };
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
 	const { getBarProps, getRootProps } = require_use_cartesian_chart.useChartBar({
 		dataKey,
 		fill,
-		label: (0, react.useMemo)(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return { className };
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		label,
 		...rest
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.path, {
@@ -563,31 +569,32 @@ const ChartReferenceLine = withContext((props) => {
 	const { theme } = require_theme_provider.useTheme();
 	const labelProps = useSlotComponentProps({}, "referenceLineLabel");
 	const css = (0, react.useMemo)(() => require_use_css.getCSS(system, theme), [system, theme]);
-	const { getReferenceLineProps, getRootProps } = require_use_cartesian_chart.useChartReferenceLine({
-		label: (0, react.useMemo)(() => {
-			if (!labelProp) return labelProp;
-			const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
-			if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
-				...props,
-				className: (0, require_utils_index.utils_exports.cx)(className, props.className)
-			});
-			else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
-			else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
-				const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
-				return {
-					...omittedProps,
-					className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
-				};
-			} else return {
-				className,
-				children: labelProp
+	const label = (0, react.useMemo)(() => {
+		if (!labelProp) return labelProp;
+		const className = (0, require_utils_index.utils_exports.cx)(labelProps.className, css(labelProps.css));
+		if ((0, require_utils_index.utils_exports.isFunction)(labelProp)) return (props) => labelProp({
+			...props,
+			className: (0, require_utils_index.utils_exports.cx)(className, props.className)
+		});
+		else if ((0, react.isValidElement)(labelProp)) return (0, react.cloneElement)(labelProp, { className });
+		else if ((0, require_utils_index.utils_exports.isObject)(labelProp)) {
+			const [omittedProps, styleProps] = (0, require_utils_index.utils_exports.splitObject)(labelProp, shouldForwardProp);
+			return {
+				...omittedProps,
+				className: (0, require_utils_index.utils_exports.cx)(className, omittedProps.className, css(styleProps))
 			};
-		}, [
-			labelProp,
-			labelProps.className,
-			labelProps.css,
-			css
-		]),
+		} else return {
+			className,
+			children: labelProp
+		};
+	}, [
+		labelProp,
+		labelProps.className,
+		labelProps.css,
+		css
+	]);
+	const { getReferenceLineProps, getRootProps } = require_use_cartesian_chart.useChartReferenceLine({
+		label,
 		...rest
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.line, {