@yamada-ui/charts 2.0.0-next-20240820160301 → 2.0.0-next-20240908154823

package/README.md

@@ -3,19 +3,13 @@
 ## Installation
 
 ```sh
-$ pnpm add @yamada-ui/charts
-```
-
-or
-
-```sh
-$ yarn add @yamada-ui/charts
-```
-
-or
-
-```sh
-$ npm install @yamada-ui/charts
+pnpm add @yamada-ui/charts
+# or
+yarn add @yamada-ui/charts
+# or
+npm install @yamada-ui/charts
+# or
+bun add @yamada-ui/charts
 ```
 
 ## Contribution

package/dist/area-chart-split.js

@@ -24,14 +24,16 @@ __export(area_chart_split_exports, {
   AreaSplit: () => AreaSplit
 });
 module.exports = __toCommonJS(area_chart_split_exports);
+var import_core = require("@yamada-ui/core");
 var import_jsx_runtime = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = (0, import_core.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: (0, import_core.getVar)(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -39,7 +41,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: (0, import_core.getVar)(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )

package/dist/area-chart-split.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["export type AreaSplitProps = {\n  offset: number\n  id?: string\n  fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor=\"var(--ui-area-split-0)\"\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n      <stop\n        offset={offset}\n        stopColor=\"var(--ui-area-split-1)\"\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n    </linearGradient>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI;AAFG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,SACE,6CAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["import { getVar, useTheme } from \"@yamada-ui/core\"\n\nexport type AreaSplitProps = {\n  offset: number\n  id?: string\n  fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n  const { theme } = useTheme()\n\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-0`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-1`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n    </linearGradient>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAY7B;AAJG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,QAAM,EAAE,MAAM,QAAI,sBAAS;AAE3B,SACE,6CAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,oBAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,oBAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}

package/dist/area-chart-split.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   AreaSplit
-} from "./chunk-PNE3JG54.mjs";
+} from "./chunk-MGTMKKSH.mjs";
 export {
   AreaSplit
 };

package/dist/area-chart.d.mts

@@ -15,7 +15,6 @@ import './area-chart-gradient.mjs';
 import 'react/jsx-runtime';
 import './area-chart-split.mjs';
 import './chart.types.mjs';
-import './rechart-properties.mjs';
 
 type AreaChartOptions = {
     /**
@@ -35,7 +34,7 @@ type AreaChartProps = HTMLUIProps<"div"> & ThemeProps<"AreaChart"> & AreaChartOp
 /**
  * `AreaChart` is a component for drawing area charts to compare multiple sets of data.
  *
- * @see Docs https://yamada-ui.com/components/feedback/area-chart
+ * @see Docs https://yamada-ui.com/components/data-display/area-chart
  */
 declare const AreaChart: _yamada_ui_core.Component<"div", AreaChartProps>;
 

package/dist/area-chart.d.ts

@@ -15,7 +15,6 @@ import './area-chart-gradient.js';
 import 'react/jsx-runtime';
 import './area-chart-split.js';
 import './chart.types.js';
-import './rechart-properties.js';
 
 type AreaChartOptions = {
     /**
@@ -35,7 +34,7 @@ type AreaChartProps = HTMLUIProps<"div"> & ThemeProps<"AreaChart"> & AreaChartOp
 /**
  * `AreaChart` is a component for drawing area charts to compare multiple sets of data.
  *
- * @see Docs https://yamada-ui.com/components/feedback/area-chart
+ * @see Docs https://yamada-ui.com/components/data-display/area-chart
  */
 declare const AreaChart: _yamada_ui_core.Component<"div", AreaChartProps>;
 

package/dist/area-chart.js

@@ -24,7 +24,7 @@ __export(area_chart_exports, {
   AreaChart: () => AreaChart
 });
 module.exports = __toCommonJS(area_chart_exports);
-var import_core10 = require("@yamada-ui/core");
+var import_core11 = require("@yamada-ui/core");
 var import_utils11 = require("@yamada-ui/utils");
 var import_react8 = require("react");
 var import_recharts = require("recharts");
@@ -48,14 +48,16 @@ var AreaGradient = ({
 };
 
 // src/area-chart-split.tsx
+var import_core = require("@yamada-ui/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = (0, import_core.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: (0, import_core.getVar)(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -63,7 +65,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: (0, import_core.getVar)(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )
@@ -71,20 +73,20 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
 };
 
 // src/chart-legend.tsx
-var import_core3 = require("@yamada-ui/core");
+var import_core4 = require("@yamada-ui/core");
 var import_utils3 = require("@yamada-ui/utils");
 
 // src/use-chart.ts
-var import_core2 = require("@yamada-ui/core");
+var import_core3 = require("@yamada-ui/core");
 var import_utils2 = require("@yamada-ui/utils");
 var import_react = require("react");
 
 // src/chart-utils.ts
-var import_core = require("@yamada-ui/core");
+var import_core2 = require("@yamada-ui/core");
 var import_utils = require("@yamada-ui/utils");
 var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
   ...styles.map(
-    (style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
+    (style) => (0, import_utils.isString)(style) ? style : (0, import_core2.getCSS)(style)(theme)
   )
 );
 var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
@@ -336,7 +338,7 @@ var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
   errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in "<LineChart />" or "<BarChart />" etc.`
 });
 var useChart = ({ containerProps = {} }) => {
-  const { theme } = (0, import_core2.useTheme)();
+  const { theme } = (0, import_core3.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps([
     containerProps,
     containerProperties
@@ -369,13 +371,13 @@ var useTooltip = ({} = {}) => {
 
 // src/chart-legend.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChartLegend = (0, import_core3.forwardRef)(
+var ChartLegend = (0, import_core4.forwardRef)(
   ({ className, payload = [], onHighlight, ...rest }, ref) => {
     const { styles } = useLegend();
     const items = payload.map(({ dataKey, value: valueProp, color }, index) => {
       const value = dataKey != null ? dataKey : valueProp;
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        import_core3.ui.div,
+        import_core4.ui.div,
         {
           className: "ui-chart__legend-item",
           onMouseEnter: () => onHighlight(value),
@@ -383,21 +385,21 @@ var ChartLegend = (0, import_core3.forwardRef)(
           __css: styles.legendItem,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_core3.ui.div,
+              import_core4.ui.div,
               {
                 className: "ui-chart__legend-swatch",
                 background: color,
                 __css: styles.legendSwatch
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: value })
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core4.ui.span, { className: "ui-chart__legend-label", children: value })
           ]
         },
         `legend-${index}`
       );
     });
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_core3.ui.div,
+      import_core4.ui.div,
       {
         ref,
         className: (0, import_utils3.cx)("ui-chart__legend", className),
@@ -410,24 +412,32 @@ var ChartLegend = (0, import_core3.forwardRef)(
 );
 
 // src/chart-tooltip.tsx
-var import_core4 = require("@yamada-ui/core");
+var import_core5 = require("@yamada-ui/core");
 var import_utils4 = require("@yamada-ui/utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ChartTooltip = (0, import_core4.forwardRef)(
+var ChartTooltip = (0, import_core5.forwardRef)(
   ({
     label,
+    dataKey = "value",
     className,
     payload = [],
     valueFormatter,
     labelFormatter,
     unit,
+    isRadialChart,
     ...rest
   }, ref) => {
     var _a;
     const { styles } = useTooltip();
     const items = payload.map(
-      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
+      ({
+        color: colorProp,
+        name: nameProp,
+        [dataKey]: valueProp,
+        payload: payload2
+      } = {}, index) => {
         var _a2;
+        const name = isRadialChart ? payload2 == null ? void 0 : payload2.name : nameProp;
         const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
         let value;
         if ((0, import_utils4.isArray)(valueProp)) {
@@ -439,13 +449,13 @@ var ChartTooltip = (0, import_core4.forwardRef)(
           value = (_a2 = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a2 : valueProp;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_core4.ui.div,
+          import_core5.ui.div,
           {
             className: "ui-chart__tooltip-item",
             __css: styles.tooltipItem,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core4.ui.div,
+                import_core5.ui.div,
                 {
                   className: "ui-chart__tooltip-swatch",
                   background: color,
@@ -453,7 +463,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core4.ui.span,
+                import_core5.ui.span,
                 {
                   className: "ui-chart__tooltip-label",
                   __css: styles.tooltipLabel,
@@ -461,7 +471,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                import_core4.ui.span,
+                import_core5.ui.span,
                 {
                   className: "ui-chart__tooltip-value",
                   __css: styles.tooltipValue,
@@ -478,15 +488,15 @@ var ChartTooltip = (0, import_core4.forwardRef)(
       }
     );
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      import_core4.ui.div,
+      import_core5.ui.div,
       {
         ref,
         className: (0, import_utils4.cx)("ui-chart__tooltip", className),
         __css: styles.tooltip,
         ...rest,
         children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
+          label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: (_a = labelFormatter == null ? void 0 : labelFormatter(label)) != null ? _a : label }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core5.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
         ]
       }
     );
@@ -494,7 +504,7 @@ var ChartTooltip = (0, import_core4.forwardRef)(
 );
 
 // src/use-area-chart.ts
-var import_core5 = require("@yamada-ui/core");
+var import_core6 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_react2 = require("react");
 var useAreaChart = ({
@@ -520,7 +530,7 @@ var useAreaChart = ({
 }) => {
   var _a;
   const uuid = (0, import_react2.useId)();
-  const { theme } = (0, import_core5.useTheme)();
+  const { theme } = (0, import_core6.useTheme)();
   const [highlightedArea, setHighlightedArea] = (0, import_react2.useState)(null);
   const splitId = `${uuid}-split`;
   const stacked = type === "stacked" || type === "percent";
@@ -535,7 +545,6 @@ var useAreaChart = ({
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = (0, import_react2.useMemo)(
     () => series.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `area-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -544,7 +553,6 @@ var useAreaChart = ({
   );
   const areaSplitColors = (0, import_react2.useMemo)(
     () => splitColors.map((color, index) => ({
-      __prefix: "ui",
       name: `area-split-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -553,7 +561,6 @@ var useAreaChart = ({
   );
   const referenceLineColors = (0, import_react2.useMemo)(
     () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
       name: `reference-line-${index}`,
       token: "colors",
       value: color != null ? color : "transparent"
@@ -565,9 +572,10 @@ var useAreaChart = ({
       ...areaColors,
       ...areaSplitColors,
       ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+      { name: "fill-opacity", value: fillOpacity }
     ];
   }, [areaColors, areaSplitColors, referenceLineColors, fillOpacity]);
+  const fillOpacityVar = (0, import_react2.useMemo)(() => (0, import_core6.getVar)("fill-opacity")(theme), [theme]);
   const [chartProps, areaChartClassName] = (0, import_react2.useMemo)(
     () => {
       var _a2;
@@ -635,7 +643,7 @@ var useAreaChart = ({
         ...computedProps
       } = props;
       const id = `${uuid}-${dataKey}`;
-      const color = `var(--ui-area-${index})`;
+      const color = (0, import_core6.getVar)(`area-${index}`)(theme);
       const dimmed = shouldHighlight && highlightedArea !== dataKey;
       const computedDimArea = { ...dimAreaProps, ...dimArea2 };
       const resolvedProps = {
@@ -751,10 +759,10 @@ var useAreaChart = ({
     (props = {}) => ({
       id: splitId,
       offset: splitOffset != null ? splitOffset : defaultSplitOffset,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [defaultSplitOffset, splitId, splitOffset]
+    [defaultSplitOffset, splitId, splitOffset, fillOpacityVar]
   );
   const getAreaProps = (0, import_react2.useCallback)(
     ({ index, className: classNameProp, ...props }, ref = null) => {
@@ -801,10 +809,10 @@ var useAreaChart = ({
   const getAreaGradientProps = (0, import_react2.useCallback)(
     (props = {}) => ({
       withGradient,
-      fillOpacity: "var(--ui-fill-opacity)",
+      fillOpacity: fillOpacityVar,
       ...props
     }),
-    [withGradient]
+    [withGradient, fillOpacityVar]
   );
   return {
     getAreaChartProps,
@@ -817,7 +825,7 @@ var useAreaChart = ({
 };
 
 // src/use-chart-axis.ts
-var import_core6 = require("@yamada-ui/core");
+var import_core7 = require("@yamada-ui/core");
 var import_utils6 = require("@yamada-ui/utils");
 var import_react3 = require("react");
 var useChartAxis = ({
@@ -837,7 +845,7 @@ var useChartAxis = ({
   ...rest
 }) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_core6.useTheme)();
+  const { theme } = (0, import_core7.useTheme)();
   const xAxisKey = (0, import_react3.useMemo)(
     () => layoutType === "vertical" ? { type: "number" } : { dataKey },
     [dataKey, layoutType]
@@ -958,7 +966,7 @@ var valueToPercent = (value) => {
 };
 
 // src/use-chart-grid.ts
-var import_core7 = require("@yamada-ui/core");
+var import_core8 = require("@yamada-ui/core");
 var import_utils7 = require("@yamada-ui/utils");
 var import_react4 = require("react");
 var useChartGrid = ({
@@ -967,7 +975,7 @@ var useChartGrid = ({
   strokeDasharray = "5 5",
   styles
 }) => {
-  const { theme } = (0, import_core7.useTheme)();
+  const { theme } = (0, import_core8.useTheme)();
   const [reChartsProps, propClassName] = getComponentProps(
     [gridProps, gridProperties],
     styles.grid
@@ -1012,22 +1020,22 @@ var useChartLegend = ({
 };
 
 // src/use-chart-reference-line.ts
-var import_core8 = require("@yamada-ui/core");
+var import_core9 = require("@yamada-ui/core");
 var import_utils9 = require("@yamada-ui/utils");
 var import_react6 = require("react");
 var useChartReferenceLine = ({
   referenceLineProps = [],
   styles
 }) => {
-  const { theme } = (0, import_core8.useTheme)();
-  const styleClassName = (0, import_core8.getCSS)(styles.referenceLine)(theme);
+  const { theme } = (0, import_core9.useTheme)();
+  const styleClassName = (0, import_core9.getCSS)(styles.referenceLine)(theme);
   const propList = (0, import_react6.useMemo)(
     () => referenceLineProps.map((props, index) => {
       const [{ label: labelProp, ...rest }, propClassName] = getComponentProps(
         [props, referenceLineProperties],
         styleClassName
       )(theme);
-      const color = `var(--ui-reference-line-${index})`;
+      const color = (0, import_core9.getVar)(`reference-line-${index}`)(theme);
       const label = {
         value: labelProp,
         fill: color,
@@ -1056,7 +1064,7 @@ var useChartReferenceLine = ({
 };
 
 // src/use-chart-tooltip.ts
-var import_core9 = require("@yamada-ui/core");
+var import_core10 = require("@yamada-ui/core");
 var import_utils10 = require("@yamada-ui/utils");
 var import_react7 = require("react");
 var useChartTooltip = ({
@@ -1064,7 +1072,7 @@ var useChartTooltip = ({
   tooltipAnimationDuration = 0,
   styles
 }) => {
-  const { theme } = (0, import_core9.useTheme)();
+  const { theme } = (0, import_core10.useTheme)();
   const { cursor, ...rest } = _tooltipProps;
   const cursorClassName = (0, import_react7.useMemo)(
     () => getClassName({ ...styles.cursor, ...cursor })(theme),
@@ -1092,8 +1100,8 @@ var useChartTooltip = ({
 
 // src/area-chart.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("AreaChart", props);
+var AreaChart = (0, import_core11.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core11.useMultiComponentStyle)("AreaChart", props);
   const {
     className,
     series,
@@ -1138,7 +1146,7 @@ var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
     splitOffset,
     syncId,
     ...rest
-  } = (0, import_core10.omitThemeProps)(mergedProps);
+  } = (0, import_core11.omitThemeProps)(mergedProps);
   const {
     getAreaChartProps,
     getAreaSplitProps,
@@ -1238,12 +1246,11 @@ var AreaChart = (0, import_core10.forwardRef)((props, ref) => {
     [getReferenceLineProps, referenceLineProps]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core10.ui.div,
+    import_core11.ui.div,
     {
       ref,
       className: (0, import_utils11.cx)("ui-area-chart", className),
-      var: areaVars,
-      __css: { ...styles.container },
+      __css: { maxW: "full", vars: areaVars, ...styles.container },
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_recharts.ResponsiveContainer,