@yamada-ui/charts 1.1.2-dev-20240430063353 → 1.1.2-dev-20240501174240

package/dist/line-chart.js

@@ -1,1088 +0,0 @@
-"use client"
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/line-chart.tsx
-var line_chart_exports = {};
-__export(line_chart_exports, {
-  LineChart: () => LineChart
-});
-module.exports = __toCommonJS(line_chart_exports);
-var import_core10 = require("@yamada-ui/core");
-var import_utils11 = require("@yamada-ui/utils");
-var import_react8 = require("react");
-var import_recharts = require("recharts");
-
-// src/chart-legend.tsx
-var import_core3 = require("@yamada-ui/core");
-var import_utils3 = require("@yamada-ui/utils");
-
-// src/use-chart.ts
-var import_core2 = 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_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)
-  )
-);
-var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
-  const [pickedProps, omittedProps] = (0, import_utils.splitObject)(obj, keys);
-  const className = getClassName(...props, omittedProps)(theme);
-  return !isContain ? [pickedProps, className] : { ...pickedProps, className };
-};
-
-// src/rechart-properties.ts
-var lineChartProperties = [
-  "layout",
-  "syncId",
-  "syncMethod",
-  "width",
-  "height",
-  "data",
-  "margin",
-  "onClick",
-  "onMouseEnter",
-  "onMouseMove",
-  "onMouseLeave"
-];
-var referenceLineProperties = [
-  "xAxisId",
-  "yAxisId",
-  "x",
-  "y",
-  "ifOverflow",
-  "viewBox",
-  "xAxis",
-  "yAxis",
-  "label",
-  "isFront",
-  "strokeWidth",
-  "segment"
-];
-var containerProperties = [
-  "aspect",
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "debounce",
-  "onResize"
-];
-var gridProperties = [
-  "x",
-  "y",
-  "width",
-  "height",
-  "horizontal",
-  "vertical",
-  "horizontalPoints",
-  "horizontalCoordinatesGenerator",
-  "verticalPoints",
-  "verticalCoordinatesGenerator",
-  "fill",
-  "fillOpacity",
-  "strokeDasharray"
-];
-var xAxisProperties = [
-  "hide",
-  "dataKey",
-  "xAxisId",
-  "width",
-  "height",
-  "orientation",
-  "type",
-  "allowDecimals",
-  "allowDataOverflow",
-  "allowDuplicatedCategory",
-  "angle",
-  "tickCount",
-  "domain",
-  "includeHidden",
-  "interval",
-  "padding",
-  "minTickGap",
-  "axisLine",
-  "tickLine",
-  "tickSize",
-  "tickFormatter",
-  "ticks",
-  "tick",
-  "mirror",
-  "reversed",
-  "label",
-  "scale",
-  "unit",
-  "name",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave",
-  "tickMargin"
-];
-var yAxisProperties = [
-  "hide",
-  "dataKey",
-  "yAxisId",
-  "width",
-  "height",
-  "orientation",
-  "type",
-  "tickCount",
-  "domain",
-  "includeHidden",
-  "interval",
-  "padding",
-  "minTickGap",
-  "allowDecimals",
-  "allowDataOverflow",
-  "allowDuplicatedCategory",
-  "axisLine",
-  "tickLine",
-  "tickSize",
-  "tickFormatter",
-  "ticks",
-  "tick",
-  "mirror",
-  "reversed",
-  "label",
-  "scale",
-  "unit",
-  "name",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave",
-  "tickMargin"
-];
-var legendProperties = [
-  "width",
-  "height",
-  "layout",
-  "align",
-  "verticalAlign",
-  "iconSize",
-  "iconType",
-  "payload",
-  "chartWidth",
-  "chartHeight",
-  "margin",
-  "content",
-  "formatter",
-  "wrapperStyle",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave"
-];
-var tooltipProperties = [
-  "offset",
-  "filterNull",
-  "itemStyle",
-  "wrapperStyle",
-  "contentStyle",
-  "labelStyle",
-  "cursor",
-  "viewBox",
-  "allowEscapeViewBox",
-  "active",
-  "position",
-  "coordinate",
-  "payload",
-  "label",
-  "content",
-  "formatter",
-  "labelFormatter",
-  "itemSorter",
-  "isAnimationActive",
-  "animationDuration",
-  "animationEasing"
-];
-var lineProperties = [
-  "type",
-  "dataKey",
-  "xAxisId",
-  "yAxisId",
-  "legendType",
-  "dot",
-  "activeDot",
-  "label",
-  "hide",
-  "points",
-  "stroke",
-  "strokeWidth",
-  "layout",
-  "connectNulls",
-  "unit",
-  "name",
-  "isAnimationActive",
-  "animationBegin",
-  "animationDuration",
-  "animationEasing",
-  "id",
-  "onAnimationStart",
-  "onAnimationEnd",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave",
-  "strokeDasharray"
-];
-var dotProperties = [
-  "cx",
-  "cy",
-  "r",
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onMouseEnter",
-  "onMouseLeave"
-];
-
-// src/use-chart.ts
-var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
-  name: "ChartContext",
-  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 [reChartsProps, propClassName] = getComponentProps([
-    containerProps,
-    containerProperties
-  ])(theme);
-  const getContainerProps = (0, import_react.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils2.cx)("ui-chart__container", className, propClassName),
-      ...props,
-      ...reChartsProps
-    }),
-    [propClassName, reChartsProps]
-  );
-  return {
-    getContainerProps
-  };
-};
-var useLegend = ({} = {}) => {
-  const { styles } = useChartContext();
-  return {
-    styles
-  };
-};
-var useTooltip = ({} = {}) => {
-  const { styles } = useChartContext();
-  return {
-    styles
-  };
-};
-
-// src/chart-legend.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ChartLegend = (0, import_core3.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_runtime.jsxs)(
-        import_core3.ui.div,
-        {
-          className: "ui-chart__legend-item",
-          onMouseEnter: () => onHighlight(value),
-          onMouseLeave: () => onHighlight(null),
-          __css: styles.legendItem,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_core3.ui.div,
-              {
-                className: "ui-chart__legend-swatch",
-                background: color,
-                __css: styles.legendSwatch
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: value })
-          ]
-        },
-        `legend-${index}`
-      );
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core3.ui.div,
-      {
-        ref,
-        className: (0, import_utils3.cx)("ui-chart__legend", className),
-        __css: styles.legend,
-        ...rest,
-        children: items
-      }
-    );
-  }
-);
-
-// src/chart-tooltip.tsx
-var import_core4 = require("@yamada-ui/core");
-var import_utils4 = require("@yamada-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChartTooltip = (0, import_core4.forwardRef)(
-  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
-    const { styles } = useTooltip();
-    const items = payload.map(
-      ({ color: colorProp, name, value: valueProp, payload: payload2 } = {}, index) => {
-        var _a;
-        const color = colorProp != null ? colorProp : payload2 == null ? void 0 : payload2.color;
-        let value;
-        if ((0, import_utils4.isArray)(valueProp)) {
-          value = valueProp.map((value2) => {
-            var _a2;
-            return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
-          }).join(" - ");
-        } else {
-          value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          import_core4.ui.div,
-          {
-            className: "ui-chart__tooltip-item",
-            __css: styles.tooltipItem,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_core4.ui.div,
-                {
-                  className: "ui-chart__tooltip-swatch",
-                  background: color,
-                  __css: styles.tooltipSwatch
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_core4.ui.span,
-                {
-                  className: "ui-chart__tooltip-label",
-                  __css: styles.tooltipLabel,
-                  children: name
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                import_core4.ui.span,
-                {
-                  className: "ui-chart__tooltip-value",
-                  __css: styles.tooltipValue,
-                  children: [
-                    value,
-                    unit ? unit : ""
-                  ]
-                }
-              )
-            ]
-          },
-          `tooltip-payload-${index}`
-        );
-      }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_core4.ui.div,
-      {
-        ref,
-        className: (0, import_utils4.cx)("ui-chart__tooltip", className),
-        __css: styles.tooltip,
-        ...rest,
-        children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
-        ]
-      }
-    );
-  }
-);
-
-// src/use-chart-axis.ts
-var import_core5 = require("@yamada-ui/core");
-var import_utils5 = require("@yamada-ui/utils");
-var import_react2 = require("react");
-var useChartAxis = ({
-  dataKey,
-  type,
-  layoutType = "horizontal",
-  tickLine = "y",
-  gridAxis = "x",
-  withXAxis = true,
-  withYAxis = true,
-  xAxisProps: _xAxisProps = {},
-  yAxisProps: _yAxisProps = {},
-  unit,
-  valueFormatter,
-  styles
-}) => {
-  const { theme } = (0, import_core5.useTheme)();
-  const xAxisKey = (0, import_react2.useMemo)(
-    () => layoutType === "vertical" ? { type: "number" } : { dataKey },
-    [dataKey, layoutType]
-  );
-  const yAxisKey = (0, import_react2.useMemo)(
-    () => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
-    [dataKey, layoutType]
-  );
-  const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
-  const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
-  const getTickLine = (withTickLine) => withTickLine ? { stroke: "currentColor" } : false;
-  const xTickLine = getTickLine(withXTickLine);
-  const yTickLine = getTickLine(withYTickLine);
-  const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
-  const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
-  const [xAxisReChartsProps, xAxisClassName] = getComponentProps(
-    [_xAxisProps, xAxisProperties],
-    styles.xAxis
-  )(theme);
-  const [yAxisReChartsProps, yAxisClassName] = getComponentProps(
-    [_yAxisProps, yAxisProperties],
-    styles.yAxis
-  )(theme);
-  const getXAxisProps = (0, import_react2.useCallback)(
-    ({ className, ...props } = {}) => ({
-      className: (0, import_utils5.cx)(className, xAxisClassName),
-      hide: !withXAxis,
-      ...xAxisKey,
-      tick: {
-        transform: "translate(0, 10)",
-        fill: "currentColor"
-      },
-      stroke: "",
-      interval: "preserveStartEnd",
-      tickLine: xTickLine,
-      minTickGap: 5,
-      tickFormatter: xAxisTickFormatter,
-      ...props,
-      ...xAxisReChartsProps
-    }),
-    [
-      xAxisClassName,
-      withXAxis,
-      xAxisKey,
-      xTickLine,
-      xAxisTickFormatter,
-      xAxisReChartsProps
-    ]
-  );
-  const getYAxisProps = (0, import_react2.useCallback)(
-    ({ className, ...props } = {}) => ({
-      className: (0, import_utils5.cx)(className, yAxisClassName),
-      hide: !withYAxis,
-      axisLine: false,
-      ...yAxisKey,
-      tickLine: yTickLine,
-      tick: {
-        transform: "translate(-10, 0)",
-        fill: "currentColor"
-      },
-      allowDecimals: true,
-      unit,
-      tickFormatter: yAxisTickFormatter,
-      ...props,
-      ...yAxisReChartsProps
-    }),
-    [
-      yAxisClassName,
-      withYAxis,
-      yAxisKey,
-      yTickLine,
-      unit,
-      yAxisTickFormatter,
-      yAxisReChartsProps
-    ]
-  );
-  return { getXAxisProps, getYAxisProps };
-};
-var valueToPercent = (value) => {
-  return `${(value * 100).toFixed(0)}%`;
-};
-
-// src/use-chart-grid.ts
-var import_core6 = require("@yamada-ui/core");
-var import_utils6 = require("@yamada-ui/utils");
-var import_react3 = require("react");
-var useChartGrid = ({
-  gridProps = {},
-  gridAxis = "x",
-  strokeDasharray = "5 5",
-  styles
-}) => {
-  const { theme } = (0, import_core6.useTheme)();
-  const [reChartsProps, propClassName] = getComponentProps(
-    [gridProps, gridProperties],
-    styles.grid
-  )(theme);
-  const getGridProps = (0, import_react3.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils6.cx)("ui-chart__grid", className, propClassName),
-      strokeDasharray,
-      vertical: gridAxis === "y" || gridAxis === "xy",
-      horizontal: gridAxis === "x" || gridAxis === "xy",
-      ...props,
-      ...reChartsProps
-    }),
-    [propClassName, strokeDasharray, gridAxis, reChartsProps]
-  );
-  return { getGridProps };
-};
-
-// src/use-chart-legend.ts
-var import_utils7 = require("@yamada-ui/utils");
-var import_react4 = require("react");
-var useChartLegend = ({
-  legendProps: _legendProps = {}
-}) => {
-  const [rest, legendProps] = (0, import_utils7.splitObject)(
-    _legendProps,
-    legendProperties
-  );
-  const getLegendProps = (0, import_react4.useCallback)(
-    (props, ref = null) => {
-      return {
-        ref,
-        verticalAlign: "top",
-        ...props,
-        ...rest
-      };
-    },
-    [rest]
-  );
-  return { legendProps, getLegendProps };
-};
-
-// src/use-chart-reference-line.ts
-var import_core7 = require("@yamada-ui/core");
-var import_utils8 = require("@yamada-ui/utils");
-var import_react5 = require("react");
-var useChartReferenceLine = ({
-  referenceLineProps = [],
-  styles
-}) => {
-  const { theme } = (0, import_core7.useTheme)();
-  const styleClassName = (0, import_core7.getCSS)(styles.referenceLine)(theme);
-  const propList = (0, import_react5.useMemo)(
-    () => referenceLineProps.map((props, index) => {
-      const [{ label: labelProp, ...rest }, propClassName] = getComponentProps(
-        [props, referenceLineProperties],
-        styleClassName
-      )(theme);
-      const color = `var(--ui-reference-line-${index})`;
-      const label = {
-        value: labelProp,
-        fill: color,
-        position: "insideBottomLeft",
-        ...(0, import_utils8.isObject)(labelProp) ? labelProp : {}
-      };
-      return { propClassName, color, label, ...rest };
-    }),
-    [referenceLineProps, styleClassName, theme]
-  );
-  const getReferenceLineProps = (0, import_react5.useCallback)(
-    ({ index, className, ...props }, ref = null) => {
-      const { propClassName, color, label, ...rest } = propList[index];
-      return {
-        ref,
-        className: (0, import_utils8.cx)(className, propClassName),
-        stroke: color,
-        label,
-        ...props,
-        ...rest
-      };
-    },
-    [propList]
-  );
-  return { getReferenceLineProps };
-};
-
-// src/use-chart-tooltip.ts
-var import_core8 = require("@yamada-ui/core");
-var import_utils9 = require("@yamada-ui/utils");
-var import_react6 = require("react");
-var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
-  tooltipAnimationDuration = 0,
-  styles
-}) => {
-  const { theme } = (0, import_core8.useTheme)();
-  const { cursor, ...rest } = _tooltipProps;
-  const cursorClassName = (0, import_react6.useMemo)(
-    () => getClassName({ ...styles.cursor, ...cursor })(theme),
-    [cursor, styles.cursor, theme]
-  );
-  const [tooltipProps, tooltipUIProps] = (0, import_utils9.splitObject)(
-    rest,
-    tooltipProperties
-  );
-  const getTooltipProps = (0, import_react6.useCallback)(
-    (props, ref = null) => ({
-      ref,
-      animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
-      cursor: {
-        className: (0, import_utils9.cx)("ui-chart__cursor", cursorClassName)
-      },
-      ...props,
-      ...tooltipProps
-    }),
-    [cursorClassName, tooltipAnimationDuration, tooltipProps]
-  );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
-};
-
-// src/use-line-chart.ts
-var import_core9 = require("@yamada-ui/core");
-var import_utils10 = require("@yamada-ui/utils");
-var import_react7 = require("react");
-var useLineChart = ({
-  data,
-  series,
-  layoutType = "horizontal",
-  withDots = true,
-  withActiveDots = true,
-  curveType = "monotone",
-  strokeWidth = 2,
-  connectNulls = true,
-  referenceLineProps,
-  fillOpacity = 1,
-  syncId,
-  styles,
-  ...rest
-}) => {
-  var _a;
-  const { theme } = (0, import_core9.useTheme)();
-  const [highlightedArea, setHighlightedArea] = (0, import_react7.useState)(null);
-  const shouldHighlight = highlightedArea !== null;
-  const {
-    dot = {},
-    activeDot = {},
-    dimDot,
-    dimLine,
-    ...computedLineProps
-  } = (_a = rest.lineProps) != null ? _a : {};
-  const lineColors = (0, import_react7.useMemo)(
-    () => series.map(({ color }, index) => ({
-      __prefix: "ui",
-      name: `line-${index}`,
-      token: "colors",
-      value: color != null ? color : "transparent"
-    })),
-    [series]
-  );
-  const referenceLineColors = (0, import_react7.useMemo)(
-    () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
-      __prefix: "ui",
-      name: `reference-line-${index}`,
-      token: "colors",
-      value: color != null ? color : "transparent"
-    })) : [],
-    [referenceLineProps]
-  );
-  const lineVars = (0, import_react7.useMemo)(
-    () => [
-      ...lineColors,
-      ...referenceLineColors,
-      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
-    ],
-    [fillOpacity, lineColors, referenceLineColors]
-  );
-  const [chartProps, lineChartClassName] = (0, import_react7.useMemo)(
-    () => {
-      var _a2;
-      return getComponentProps(
-        [(_a2 = rest.chartProps) != null ? _a2 : {}, lineChartProperties],
-        styles.chart
-      )(theme);
-    },
-    [rest.chartProps, styles.chart, theme]
-  );
-  const [lineProps, lineClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedLineProps = {
-      fillOpacity: "var(--ui-fill-opacity)",
-      strokeOpacity: "var(--ui-fill-opacity)",
-      ...computedLineProps
-    };
-    return getComponentProps(
-      [resolvedLineProps, lineProperties],
-      styles.line
-    )(theme);
-  }, [computedLineProps, styles.line, theme]);
-  const [dimLineProps, dimLineClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine };
-    return getComponentProps([resolvedDimLine, lineProperties])(
-      theme
-    );
-  }, [dimLine, theme]);
-  const [dotProps, dotClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...dot };
-    return getComponentProps(
-      [resolvedDot, dotProperties],
-      styles.dot
-    )(theme);
-  }, [dot, styles.dot, theme]);
-  const [activeDotProps, activeDotClassName] = (0, import_react7.useMemo)(
-    () => getComponentProps(
-      [activeDot, dotProperties],
-      styles.activeDot
-    )(theme),
-    [activeDot, styles.activeDot, theme]
-  );
-  const [dimDotProps, dimDotClassName] = (0, import_react7.useMemo)(() => {
-    const resolvedDimDot = {
-      fillOpacity: 0,
-      strokeOpacity: 0,
-      ...dimDot
-    };
-    return getComponentProps([resolvedDimDot, dotProperties])(
-      theme
-    );
-  }, [dimDot, theme]);
-  const linePropList = (0, import_react7.useMemo)(
-    () => series.map((props, index) => {
-      const {
-        dataKey,
-        dot: dot2 = {},
-        activeDot: activeDot2 = {},
-        dimDot: dimDot2 = {},
-        dimLine: dimLine2 = {},
-        ...computedProps
-      } = props;
-      const color = `var(--ui-line-${index})`;
-      const dimmed = shouldHighlight && highlightedArea !== dataKey;
-      const computedDimLine = { ...dimLineProps, ...dimLine2 };
-      const resolvedProps = {
-        ...lineProps,
-        ...computedProps,
-        ...dimmed ? computedDimLine : {}
-      };
-      const rest2 = getComponentProps(
-        [resolvedProps, lineProperties],
-        lineClassName,
-        dimmed ? dimLineClassName : void 0
-      )(theme, true);
-      let resolvedActiveDot;
-      if (withActiveDots) {
-        const computedActiveDot = { ...activeDotProps, ...activeDot2 };
-        const [rest3, className] = getComponentProps(
-          [computedActiveDot, dotProperties],
-          activeDotClassName
-        )(theme);
-        resolvedActiveDot = {
-          className: (0, import_utils10.cx)("ui-line-chart__active-dot", className),
-          fill: color,
-          stroke: color,
-          r: 4,
-          ...rest3
-        };
-      } else {
-        resolvedActiveDot = false;
-      }
-      let resolvedDot;
-      if (withDots) {
-        const computedDimDot = { ...dimDotProps, ...dimDot2 };
-        const computedDot = {
-          ...dotProps,
-          ...dot2,
-          ...dimmed ? computedDimDot : {}
-        };
-        const [rest3, className] = getComponentProps(
-          [computedDot, dotProperties],
-          dotClassName,
-          dimmed ? dimDotClassName : void 0
-        )(theme);
-        resolvedDot = {
-          className: (0, import_utils10.cx)("ui-line-chart__dot", className),
-          fill: color,
-          ...rest3
-        };
-      } else {
-        resolvedDot = false;
-      }
-      return {
-        ...rest2,
-        color,
-        dataKey,
-        activeDot: resolvedActiveDot,
-        dot: resolvedDot
-      };
-    }),
-    [
-      series,
-      shouldHighlight,
-      highlightedArea,
-      dimLineProps,
-      lineProps,
-      lineClassName,
-      dimLineClassName,
-      theme,
-      withActiveDots,
-      withDots,
-      activeDotProps,
-      activeDotClassName,
-      dimDotProps,
-      dotProps,
-      dotClassName,
-      dimDotClassName
-    ]
-  );
-  const getLineChartProps = (0, import_react7.useCallback)(
-    ({ className, ...props } = {}, ref = null) => ({
-      ref,
-      className: (0, import_utils10.cx)(className, lineChartClassName),
-      data,
-      layout: layoutType,
-      syncId,
-      ...props,
-      ...chartProps
-    }),
-    [data, layoutType, syncId, lineChartClassName, chartProps]
-  );
-  const getLineProps = (0, import_react7.useCallback)(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { color, className, dataKey, activeDot: activeDot2, dot: dot2, ...rest2 } = linePropList[index];
-      return {
-        ref,
-        className: (0, import_utils10.cx)(classNameProp, className),
-        activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey,
-        type: curveType,
-        dataKey,
-        fill: color,
-        strokeWidth,
-        stroke: color,
-        isAnimationActive: false,
-        connectNulls,
-        ...props,
-        ...rest2
-      };
-    },
-    [connectNulls, curveType, linePropList, strokeWidth]
-  );
-  return {
-    getLineProps,
-    getLineChartProps,
-    lineVars,
-    setHighlightedArea
-  };
-};
-
-// src/line-chart.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var LineChart = (0, import_core10.forwardRef)((props, ref) => {
-  const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("LineChart", props);
-  const {
-    className,
-    containerProps,
-    gridProps,
-    gridAxis,
-    strokeDasharray,
-    dataKey,
-    type,
-    layoutType,
-    tickLine,
-    withXAxis,
-    withYAxis,
-    xAxisProps,
-    yAxisProps,
-    unit,
-    valueFormatter,
-    referenceLineProps,
-    tooltipProps,
-    tooltipAnimationDuration,
-    legendProps,
-    withLegend = false,
-    withTooltip = true,
-    series,
-    data,
-    chartProps,
-    lineProps,
-    withDots,
-    withActiveDots,
-    curveType,
-    strokeWidth,
-    connectNulls,
-    fillOpacity,
-    syncId,
-    ...rest
-  } = (0, import_core10.omitThemeProps)(mergedProps);
-  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
-    layoutType,
-    series,
-    referenceLineProps,
-    data,
-    chartProps,
-    lineProps,
-    withDots,
-    withActiveDots,
-    curveType,
-    strokeWidth,
-    connectNulls,
-    fillOpacity,
-    syncId,
-    styles
-  });
-  const { getContainerProps } = useChart({ containerProps });
-  const { getXAxisProps, getYAxisProps } = useChartAxis({
-    dataKey,
-    type,
-    layoutType,
-    tickLine,
-    gridAxis,
-    withXAxis,
-    withYAxis,
-    xAxisProps,
-    yAxisProps,
-    unit,
-    valueFormatter,
-    styles
-  });
-  const { getReferenceLineProps } = useChartReferenceLine({
-    referenceLineProps,
-    styles
-  });
-  const { getGridProps } = useChartGrid({
-    gridProps,
-    gridAxis,
-    strokeDasharray,
-    styles
-  });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
-    tooltipAnimationDuration,
-    styles
-  });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
-    legendProps
-  });
-  const lines = (0, import_react8.useMemo)(
-    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_recharts.Line,
-      {
-        ...getLineProps({ index, className: "ui-line-chart__line" })
-      },
-      `line-${dataKey2}`
-    )),
-    [getLineProps, series]
-  );
-  const referenceLinesItems = (0, import_react8.useMemo)(
-    () => referenceLineProps == null ? void 0 : referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_recharts.ReferenceLine,
-      {
-        ...getReferenceLineProps({
-          index,
-          className: "ui-line-chart__reference-line"
-        })
-      },
-      `referenceLine-${index}`
-    )),
-    [getReferenceLineProps, referenceLineProps]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_core10.ui.div,
-    {
-      ref,
-      className: (0, import_utils11.cx)("ui-line-chart", className),
-      var: lineVars,
-      __css: { maxW: "full", ...styles.container },
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_recharts.ResponsiveContainer,
-        {
-          ...getContainerProps({ className: "ui-line-chart__container" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            import_recharts.LineChart,
-            {
-              ...getLineChartProps({ className: "ui-line-chart__chart" }),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.CartesianGrid,
-                  {
-                    ...getGridProps({ className: "ui-line-chart__grid" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.XAxis, { ...getXAxisProps({ className: "ui-line-chart__x-axis" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.YAxis, { ...getYAxisProps({ className: "ui-line-chart__y-axis" }) }),
-                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.Legend,
-                  {
-                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      ChartLegend,
-                      {
-                        className: "ui-line-chart__legend",
-                        payload,
-                        onHighlight: setHighlightedArea,
-                        ...computedLegendProps
-                      }
-                    ),
-                    ...getLegendProps()
-                  }
-                ) : null,
-                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  import_recharts.Tooltip,
-                  {
-                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      ChartTooltip,
-                      {
-                        className: "ui-line-chart__tooltip",
-                        label,
-                        payload,
-                        valueFormatter,
-                        unit,
-                        ...computedTooltipProps
-                      }
-                    ),
-                    ...getTooltipProps()
-                  }
-                ) : null,
-                lines,
-                referenceLinesItems
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) });
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LineChart
-});
-//# sourceMappingURL=line-chart.js.map