@redsift/charts 9.3.3 → 9.4.0

package/index.js

@@ -1,4 +1,4 @@
-import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scalePoint, arc, pie, min, extent, descending, scaleSqrt, max } from 'd3';
+import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scalePoint, extent, scaleTime, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
 import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, useId, Text, Number as Number$1, baseStyling, baseContainer, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext } from 'react';
@@ -77,8 +77,8 @@ const getColorScale = (theme, domain, isEmpty) => {
   } else if (typeof theme === 'string') {
     d3colors = scaleOrdinal().domain(domain).range(scheme[theme]).unknown(monochrome);
   } else if (typeof theme === 'object') {
-    if (Object.keys(theme).includes('success') && Object.keys(theme).includes('danger') && Object.keys(theme).includes('warning')) {
-      d3colors = scaleOrdinal().domain([theme.success, theme.warning, theme.danger, ...(theme.neutral ? [theme.neutral] : [])]).range([successDangerScheme.success, successDangerScheme.warning, successDangerScheme.danger, ...(theme.neutral ? [successDangerScheme.neutral] : [])]).unknown(monochrome);
+    if (Object.keys(theme).includes('success') || Object.keys(theme).includes('danger') || Object.keys(theme).includes('warning')) {
+      d3colors = scaleOrdinal().domain([...(theme.success ? [theme.success] : []), ...(theme.warning ? [theme.warning] : []), ...(theme.danger ? [theme.danger] : []), ...(theme.neutral ? [theme.neutral] : [])]).range([...(theme.success ? [successDangerScheme.success] : []), ...(theme.warning ? [successDangerScheme.warning] : []), ...(theme.danger ? [successDangerScheme.danger] : []), ...(theme.neutral ? [successDangerScheme.neutral] : [])]).unknown(monochrome);
     } else {
       d3colors = scaleOrdinal().domain(Object.keys(theme)).range(Object.values(theme)).unknown(monochrome);
     }
@@ -92,7 +92,7 @@ const useColor = _ref => {
     theme,
     category
   } = _ref;
-  const colorScale = useMemo(() => getColorScale(theme, data.map(d => d[category])), [theme]);
+  const colorScale = useMemo(() => getColorScale(theme, data.map(d => typeof category === 'string' ? d[category] : category(d))), [theme]);
   return colorScale;
 };
 
@@ -274,13 +274,15 @@ const TooltipVariant = {
   none: 'none',
   label: 'label',
   value: 'value',
-  percent: 'percent'
+  percent: 'percent',
+  custom: 'custom'
 };
 /** LEGEND */
 const LabelVariant = {
   label: 'label',
   value: 'value',
-  percent: 'percent'
+  percent: 'percent',
+  custom: 'custom'
 };
 
 const ChartSize = {
@@ -315,7 +317,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
  */
 const StyledDataPoint = styled(it.g)``;
 
-const _excluded$k = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
+const _excluded$p = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipVariant"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -329,7 +331,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       role,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const text = labelDecorator ? labelDecorator(data, {
@@ -439,10 +441,10 @@ const config = (() => ({
   immediate: false
 }))();
 
-const _excluded$j = ["className", "createArc", "hasStroke", "previousData"];
-const COMPONENT_NAME$a = 'Arc';
-const CLASSNAME$a = 'redsift-arc';
-const DEFAULT_PROPS$a = {
+const _excluded$o = ["className", "createArc", "hasStroke", "previousData"];
+const COMPONENT_NAME$c = 'Arc';
+const CLASSNAME$c = 'redsift-arc';
+const DEFAULT_PROPS$c = {
   color: monochrome,
   index: 0,
   previousData: {
@@ -471,7 +473,7 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
       hasStroke,
       previousData
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const interpolator = interpolate(previousData, data);
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
@@ -495,19 +497,19 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
     fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
   }));
 });
-Arc.className = CLASSNAME$a;
-Arc.defaultProps = DEFAULT_PROPS$a;
-Arc.displayName = COMPONENT_NAME$a;
+Arc.className = CLASSNAME$c;
+Arc.defaultProps = DEFAULT_PROPS$c;
+Arc.displayName = COMPONENT_NAME$c;
 
 /**
  * Component style.
  */
 const StyledArcs = styled.g``;
 
-const _excluded$i = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
-const COMPONENT_NAME$9 = 'Arcs';
-const CLASSNAME$9 = 'redsift-arcs';
-const DEFAULT_PROPS$9 = {};
+const _excluded$n = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
+const COMPONENT_NAME$b = 'Arcs';
+const CLASSNAME$b = 'redsift-arcs';
+const DEFAULT_PROPS$b = {};
 const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       arcs,
@@ -522,7 +524,7 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
       sliceProps,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
@@ -577,9 +579,9 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
     }, arcLabelDecorator ? arcLabelDecorator(arc.data) : arc.data.data.key);
   })) : null);
 });
-Arcs.className = CLASSNAME$9;
-Arcs.defaultProps = DEFAULT_PROPS$9;
-Arcs.displayName = COMPONENT_NAME$9;
+Arcs.className = CLASSNAME$b;
+Arcs.defaultProps = DEFAULT_PROPS$b;
+Arcs.displayName = COMPONENT_NAME$b;
 
 /**
  * Component variant.
@@ -638,6 +640,9 @@ const getScaleTicks = (scale, spec) => {
     if (typeof spec === 'number' && isFinite(spec) && Math.floor(spec) === spec) {
       return scale.ticks(spec);
     }
+    if (typeof spec === 'function') {
+      return scale.ticks(spec);
+    }
   }
 
   // non linear scale default
@@ -730,10 +735,10 @@ const computeTicks = _ref => {
   };
 };
 
-const _excluded$h = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "variant", "x", "y"];
-const COMPONENT_NAME$8 = 'Axis';
-const CLASSNAME$8 = 'redsift-axis';
-const DEFAULT_PROPS$8 = {
+const _excluded$m = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "variant", "x", "y"];
+const COMPONENT_NAME$a = 'Axis';
+const CLASSNAME$a = 'redsift-axis';
+const DEFAULT_PROPS$a = {
   position: AxisPosition.bottom,
   legendOffset: -32,
   legendPosition: 'end',
@@ -758,11 +763,12 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
       tickRotation,
       tickSize,
       tickValues,
+      tickFormat,
       variant,
       x,
       y
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const axis = getAxisType(position);
   const axisRef = ref || useRef();
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
@@ -878,7 +884,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
       dominantBaseline: textBaseline,
       textAnchor: textAlign,
       transform: transitionProps.textTransform
-    }, `${tick.value}`) : null);
+    }, `${tickFormat ? tickFormat(tick.value) : tick.value}`) : null);
   }) : null, variant === AxisVariant.default || variant === AxisVariant.line || variant === AxisVariant.lineTick ? /*#__PURE__*/React__default.createElement(it.line, {
     className: `${Axis.className}__line`,
     x1: 0,
@@ -887,9 +893,9 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
     y2: config.immediate ? axis === 'x' ? 0 : length : animatedProps.lineY2
   }) : null, legendNode);
 });
-Axis.className = CLASSNAME$8;
-Axis.defaultProps = DEFAULT_PROPS$8;
-Axis.displayName = COMPONENT_NAME$8;
+Axis.className = CLASSNAME$a;
+Axis.defaultProps = DEFAULT_PROPS$a;
+Axis.displayName = COMPONENT_NAME$a;
 
 /**
  * Component variant.
@@ -956,10 +962,10 @@ const StyledBar = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$g = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "width"];
-const COMPONENT_NAME$7 = 'Bar';
-const CLASSNAME$7 = 'redsift-bar';
-const DEFAULT_PROPS$7 = {
+const _excluded$l = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "width"];
+const COMPONENT_NAME$9 = 'Bar';
+const CLASSNAME$9 = 'redsift-bar';
+const DEFAULT_PROPS$9 = {
   color: monochrome,
   index: 0,
   gap: 5,
@@ -995,7 +1001,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       scale,
       width
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
   const text = labelDecorator ? labelDecorator(data, {
     index,
@@ -1035,9 +1041,9 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": true
   }, text) : null);
 });
-Bar.className = CLASSNAME$7;
-Bar.defaultProps = DEFAULT_PROPS$7;
-Bar.displayName = COMPONENT_NAME$7;
+Bar.className = CLASSNAME$9;
+Bar.defaultProps = DEFAULT_PROPS$9;
+Bar.displayName = COMPONENT_NAME$9;
 
 var reset$1 = "Reset";
 var enUS = {
@@ -1089,10 +1095,10 @@ const StyledChartContainerCaption = styled.p`
   margin: 8px;
 `;
 
-const _excluded$f = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
-const COMPONENT_NAME$6 = 'ChartContainer';
-const CLASSNAME$6 = 'redsift-chart-container';
-const DEFAULT_PROPS$6 = {};
+const _excluded$k = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
+const COMPONENT_NAME$8 = 'ChartContainer';
+const CLASSNAME$8 = 'redsift-chart-container';
+const DEFAULT_PROPS$8 = {};
 const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       'aria-label': propsAriaLabel,
@@ -1106,7 +1112,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       onReset
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   warnIfNoAccessibleLabelFound(props, [title]);
@@ -1140,9 +1146,9 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${ChartContainer.className}__description`
   }, description) : null));
 });
-ChartContainer.className = CLASSNAME$6;
-ChartContainer.defaultProps = DEFAULT_PROPS$6;
-ChartContainer.displayName = COMPONENT_NAME$6;
+ChartContainer.className = CLASSNAME$8;
+ChartContainer.defaultProps = DEFAULT_PROPS$8;
+ChartContainer.displayName = COMPONENT_NAME$8;
 
 /**
  * Component style.
@@ -1187,7 +1193,7 @@ const StyledBarChartEmptyText = styled.div`
   }
 `;
 
-const sizeToDimension$2 = size => {
+const sizeToDimension$3 = size => {
   if (typeof size !== 'string') {
     return size;
   }
@@ -1214,7 +1220,7 @@ const sizeToDimension$2 = size => {
   }
 };
 
-const _excluded$e = ["className", "emptyComponent", "size", "localeText"];
+const _excluded$j = ["className", "emptyComponent", "size", "localeText"];
 const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -1222,8 +1228,8 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$e);
-  const chartDimensions = sizeToDimension$2(size);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+  const chartDimensions = sizeToDimension$3(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
   const margins = {
@@ -1259,19 +1265,19 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$d = ["className"];
+const _excluded$i = ["className"];
 const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
   }), "Loading...");
 });
 
-const _excluded$c = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1290,7 +1296,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
   const cache = useRef();
   const {
     data,
@@ -1305,7 +1311,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     cache.current = data;
   });
   const isHorizontal = orientation === BarOrientation.horizontal;
-  const chartDimensions = sizeToDimension$2(size);
+  const chartDimensions = sizeToDimension$3(size);
   const width = chartDimensions.width;
   const height = chartDimensions.height;
   const margins = {
@@ -1394,10 +1400,10 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$b = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
-const COMPONENT_NAME$5 = 'BarChart';
-const CLASSNAME$5 = 'redsift-barchart';
-const DEFAULT_PROPS$5 = {
+const _excluded$g = ["areXLabelsRotated", "caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
+const COMPONENT_NAME$7 = 'BarChart';
+const CLASSNAME$7 = 'redsift-barchart';
+const DEFAULT_PROPS$7 = {
   isBarSelected: () => true,
   orientation: BarOrientation.horizontal,
   others: true,
@@ -1428,7 +1434,7 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   if (propsData === undefined || propsData === null) {
@@ -1469,22 +1475,42 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }));
 });
-BarChart.className = CLASSNAME$5;
-BarChart.defaultProps = DEFAULT_PROPS$5;
-BarChart.displayName = COMPONENT_NAME$5;
+BarChart.className = CLASSNAME$7;
+BarChart.defaultProps = DEFAULT_PROPS$7;
+BarChart.displayName = COMPONENT_NAME$7;
+
+/**
+ * Component's variant.
+ */
+const DotVariant = {
+  plain: 'plain',
+  hollow: 'hollow'
+};
+
+/**
+ * Component props.
+ */
 
 /**
  * Component style.
  */
 const StyledDot = styled(DataPoint)`
-  circle {
-    fill-opacity: 0.7;
-  }
-
   ${_ref => {
   let {
-    $clickable
+    $variant
   } = _ref;
+  return css`
+    circle {
+      fill-opacity: ${$variant === DotVariant.hollow ? 1 : 0.7};
+    }
+  `;
+}}
+
+
+  ${_ref2 => {
+  let {
+    $clickable
+  } = _ref2;
   return $clickable ? css`
           cursor: pointer;
 
@@ -1505,15 +1531,16 @@ const StyledDot = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$a = ["className", "scaleX", "scaleY"];
-const COMPONENT_NAME$4 = 'Dot';
-const CLASSNAME$4 = 'redsift-dot';
-const DEFAULT_PROPS$4 = {
+const _excluded$f = ["className", "scaleX", "scaleY", "variant"];
+const COMPONENT_NAME$6 = 'Dot';
+const CLASSNAME$6 = 'redsift-dot';
+const DEFAULT_PROPS$6 = {
   color: monochrome,
   index: 0,
   labelDecorator: datum => {
     return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
-  }
+  },
+  variant: DotVariant.plain
 };
 const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -1526,25 +1553,29 @@ const Dot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
       scaleX,
-      scaleY
+      scaleY,
+      variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
   return /*#__PURE__*/React__default.createElement(StyledDot, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(Dot.className, className),
-    $clickable: Boolean(onClick)
+    $clickable: Boolean(onClick),
+    $variant: variant
   }), /*#__PURE__*/React__default.createElement("circle", {
     cx: scaleX(data.x),
     cy: scaleY(data.y),
     r: data.r,
-    fill: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color
+    fill: variant === DotVariant.hollow ? 'var(--redsift-color-neutral-white)' : isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
+    stroke: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
+    strokeWidth: variant === DotVariant.hollow ? '2' : '0'
   }));
 });
-Dot.className = CLASSNAME$4;
-Dot.defaultProps = DEFAULT_PROPS$4;
-Dot.displayName = COMPONENT_NAME$4;
+Dot.className = CLASSNAME$6;
+Dot.defaultProps = DEFAULT_PROPS$6;
+Dot.displayName = COMPONENT_NAME$6;
 
 /**
  * Component style.
@@ -1601,10 +1632,10 @@ const StyledLegendItem = styled.li`
 }}}
 `;
 
-const _excluded$9 = ["className", "color", "data", "id", "total", "variant"];
-const COMPONENT_NAME$3 = 'LegendItem';
-const CLASSNAME$3 = 'redsift-legend-item';
-const DEFAULT_PROPS$3 = {
+const _excluded$e = ["className", "color", "data", "id", "variant"];
+const COMPONENT_NAME$5 = 'LegendItem';
+const CLASSNAME$5 = 'redsift-legend-item';
+const DEFAULT_PROPS$5 = {
   color: monochrome,
   index: 0
 };
@@ -1621,10 +1652,9 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       data,
       id: propsId,
-      total,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+    forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const text = labelDecorator ? labelDecorator(data, {
@@ -1667,11 +1697,11 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "inherit"
   }), /*#__PURE__*/React__default.createElement(Text, {
     variant: "caption"
-  }, text)) : variant === LabelVariant.percent && total ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
+  }, text)) : variant === LabelVariant.percent && data.data.percent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Number$1, {
     as: "b",
     maximumFractionDigits: 2,
     type: "percent",
-    value: data.data.value / total,
+    value: data.data.percent,
     variant: "inherit"
   }), /*#__PURE__*/React__default.createElement(Text, {
     variant: "caption"
@@ -1679,15 +1709,15 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "caption"
   }, text) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, text));
 });
-LegendItem.className = CLASSNAME$3;
-LegendItem.defaultProps = DEFAULT_PROPS$3;
-LegendItem.displayName = COMPONENT_NAME$3;
+LegendItem.className = CLASSNAME$5;
+LegendItem.defaultProps = DEFAULT_PROPS$5;
+LegendItem.displayName = COMPONENT_NAME$5;
 
-const _excluded$8 = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
+const _excluded$d = ["className", "data", "isLegendItemSelected", "labelDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
   _excluded2 = ["color"];
-const COMPONENT_NAME$2 = 'Legend';
-const CLASSNAME$2 = 'redsift-chart-legend';
-const DEFAULT_PROPS$2 = {
+const COMPONENT_NAME$4 = 'Legend';
+const CLASSNAME$4 = 'redsift-chart-legend';
+const DEFAULT_PROPS$4 = {
   isLegendItemSelected: () => true,
   variant: LabelVariant.label
 };
@@ -1702,23 +1732,25 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
       variant,
       width
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
   const total = sum(data, d => d.value);
   return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
     className: classNames(Legend.className, className),
     ref: ref,
     $width: width
   }), data.map((_ref, index) => {
+    var _datum$percent;
     let {
         color
       } = _ref,
       datum = _objectWithoutProperties(_ref, _excluded2);
     return /*#__PURE__*/React__default.createElement(LegendItem, {
       data: {
-        data: datum
+        data: _objectSpread2(_objectSpread2({}, datum), {}, {
+          percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
+        })
       },
       color: color,
-      total: total,
       variant: variant,
       index: index,
       isSelected: Boolean(isLegendItemSelected({
@@ -1731,9 +1763,507 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }));
 });
-Legend.className = CLASSNAME$2;
-Legend.defaultProps = DEFAULT_PROPS$2;
-Legend.displayName = COMPONENT_NAME$2;
+Legend.className = CLASSNAME$4;
+Legend.defaultProps = DEFAULT_PROPS$4;
+Legend.displayName = COMPONENT_NAME$4;
+
+/**
+ * Component style.
+ */
+const StyledLine = styled('g')``;
+
+const _excluded$c = ["className", "createLine", "previousData"];
+const COMPONENT_NAME$3 = 'Line';
+const CLASSNAME$3 = 'redsift-line';
+const DEFAULT_PROPS$3 = {
+  color: monochrome,
+  previousData: []
+};
+const Line = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    color,
+    data,
+    isSelected: propsIsSelected,
+    role
+  } = props;
+  const {
+      className,
+      createLine,
+      previousData
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+  const interpolator = interpolate(previousData, data);
+  const isSelectable = role === 'option';
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+    to: async next => {
+      await next({
+        t: 1
+      });
+    },
+    from: {
+      t: 0
+    }
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledLine, _extends({}, forwardedProps, {
+    ref: ref,
+    className: classNames(Line.className, className)
+  }), /*#__PURE__*/React__default.createElement(it.path, {
+    d: config.immediate ? createLine(data) : animatedProps.t.to(t => createLine(interpolator(t))),
+    fill: "none",
+    stroke: isDeselected ? 'var(--redsift-color-neutral-lightgrey)' : color,
+    strokeWidth: 2
+  }));
+});
+Line.className = CLASSNAME$3;
+Line.defaultProps = DEFAULT_PROPS$3;
+Line.displayName = COMPONENT_NAME$3;
+
+/**
+ * Component's labels variant.
+ */
+const LineChartLabelVariant = {
+  none: 'none',
+  externalLabel: 'externalLabel',
+  externalLabelValue: 'externalLabelValue',
+  externalLabelPercent: 'externalLabelPercent'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledLineChart = styled(ChartContainer)``;
+const StyledLineChartEmptyText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  > * {
+    max-width: ${_ref => {
+  let {
+    $maxWidth
+  } = _ref;
+  return $maxWidth;
+}}px;
+  }
+
+  > span {
+    font-family: var(--redsift-typography-font-family-poppins);
+    color: var(--redsift-color-neutral-black);
+    font-size: ${_ref2 => {
+  let {
+    $textSize
+  } = _ref2;
+  return $textSize;
+}}px;
+    line-height: ${_ref3 => {
+  let {
+    $textSize
+  } = _ref3;
+  return $textSize;
+}}px;
+  }
+`;
+
+const _excluded$b = ["className"];
+const LoadingLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), "Loading...");
+});
+
+const sizeToDimension$2 = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case ChartSize.small:
+      return {
+        width: 600,
+        height: 300,
+        fontSize: 30
+      };
+    case ChartSize.medium:
+    default:
+      return {
+        width: 750,
+        height: 375,
+        fontSize: 34
+      };
+    case ChartSize.large:
+      return {
+        width: 900,
+        height: 450,
+        fontSize: 38
+      };
+  }
+};
+const statsBy = arr => {
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    if (!prev[curr.key[1]]) {
+      prev[curr.key[1]] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[curr.key[1]] = {
+        value: prev[curr.key[1]].value + curr.value,
+        min: Math.min(prev[curr.key[1]].min, curr.value),
+        max: Math.max(prev[curr.key[1]].max, curr.value),
+        values: [...prev[curr.key[1]].values, curr.value]
+      };
+    }
+    return prev;
+  }, {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key].value,
+    min: counts[key].min,
+    max: counts[key].max,
+    values: counts[key].values,
+    first: counts[key].values[0],
+    last: counts[key].values[counts[key].values.length - 1],
+    trending: {
+      overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
+    }
+  })).sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
+};
+
+const _excluded$a = ["className", "data", "emptyComponent", "localeText", "size"];
+const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data: propsData,
+      emptyComponent,
+      localeText,
+      size
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+  const cache = useRef();
+  const data = propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const chartDimensions = sizeToDimension$2(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = {
+    top: 16,
+    left: 48,
+    right: 16,
+    bottom: 48
+  };
+  const chartWidth = width - margins.left - margins.right;
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+    className: className,
+    ref: ref
+  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledLineChartEmptyText, {
+    $maxWidth: width,
+    $textSize: chartDimensions.fontSize / 2
+  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: width - 32,
+    scale: scaleLinear().domain([]).range([0, chartWidth]),
+    x: 0,
+    y: height,
+    tickValues: 4
+  })))));
+});
+
+const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onDotClick", "size", "theme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "dateParser"];
+const isValidDate = value => {
+  const date = new Date(value);
+  return date instanceof Date && !isNaN(date) && !isNaN(Date.parse(value));
+};
+const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data: propsData,
+      dotRole,
+      id,
+      isDotSelected,
+      labelDecorator,
+      labelVariant,
+      legendProps,
+      onDotClick,
+      size,
+      theme,
+      tooltipVariant,
+      xAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat: propsXAxisTickFormat,
+      xAxisTickValues,
+      yAxisVariant,
+      yAxisPlacement,
+      dateParser
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$9);
+  const cache = useRef();
+  const xScaleType = propsData[0].key[0] instanceof Date ? 'Date' : typeof propsData[0].key[0] === 'number' ? 'number' : typeof propsData[0].key[0] === 'string' && isValidDate(propsData[0].key[0]) ? 'dateString' : typeof propsData[0].key[0] === 'string' ? 'string' : undefined;
+  const data = xScaleType === 'number' ? propsData.filter(datum => typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0])) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(datum.key[0])) : xScaleType === 'string' ? propsData.filter(datum => typeof datum.key[0] === 'string') : xScaleType === 'Date' ? propsData.filter(datum => datum.key[0] instanceof Date) : propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const svgRef = useRef();
+  const chartDimensions = sizeToDimension$2(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = {
+    top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8
+  };
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const scaleX = (() => {
+    if (xScaleType === 'number') {
+      const domain = extent(data, d => d.key[0]);
+      return scaleLinear().domain(domain).range([0, chartWidth]).nice();
+    } else if (xScaleType === 'dateString') {
+      const domain = extent(data, d => Date.parse(d.key[0]));
+      return scaleTime().domain([new Date(domain[0]), new Date(domain[1])]).range([0, chartWidth]).nice();
+    } else if (xScaleType === 'Date') {
+      const domain = extent(data, d => d.key[0].valueOf());
+      return scaleTime().domain([new Date(domain[0]), new Date(domain[1])]).range([0, chartWidth]).nice();
+    } else {
+      return scalePoint().domain(xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key[0])).range([0, chartWidth]);
+    }
+  })();
+  const scaleY = (() => {
+    const domain = extent(data, d => d.value);
+    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+  })();
+  const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
+  const hasCategory = data[0] && data[0].key.length >= 2 && data[0].key[1] !== null && data[0].key[1] !== undefined;
+  const statsByCategory = statsBy(data);
+  const colorScale = useColor({
+    data: statsByCategory,
+    theme: theme,
+    category: d => d.key
+  });
+  const circles = data.sort((a, b) => {
+    if (xScaleType === 'number') {
+      if (a.key[0] < b.key[0]) return -1;
+      if (a.key[0] > b.key[0]) return 1;
+      return 0;
+    } else if (xScaleType === 'dateString') {
+      if (Date.parse(a.key[0]) < Date.parse(b.key[0])) return -1;
+      if (Date.parse(a.key[0]) > Date.parse(b.key[0])) return 1;
+      return 0;
+    } else if (xScaleType === 'Date') {
+      if (a.key[0].valueOf() < b.key[0].valueOf()) return -1;
+      if (a.key[0].valueOf() > b.key[0].valueOf()) return 1;
+      return 0;
+    } else if (xScaleType === 'string' && xAxisTickValues && Array.isArray(xAxisTickValues)) {
+      if (xAxisTickValues.indexOf(a.key[0]) < xAxisTickValues.indexOf(b.key[0])) return -1;
+      if (xAxisTickValues.indexOf(a.key[0]) > xAxisTickValues.indexOf(b.key[0])) return 1;
+      return 0;
+    }
+    return 0;
+  }).filter(d => d.value !== null).map(d => ({
+    category: d.key[1],
+    x: xScaleType === 'dateString' ? dateParser ? dateParser(d.key[0]) : new Date(Date.parse(d.key[0])) : d.key[0],
+    y: d.value,
+    data: {
+      key: d.key,
+      value: d.value
+    },
+    points: [d]
+  }));
+  const lines = hasCategory ? Object.values(circles.reduce((prev, curr) => {
+    if (!prev[curr.category]) {
+      prev[curr.category] = [];
+    }
+    prev[curr.category].push(curr);
+    return prev;
+  }, {})) : [circles];
+  const createLine = line().x(d => scaleX(d.x)).y(d => scaleY(d.y));
+  return /*#__PURE__*/React__default.createElement(StyledLineChart, _extends({}, forwardedProps, {
+    id: id,
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    ref: svgRef,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, lines.map((line, index) => {
+    return /*#__PURE__*/React__default.createElement(Line, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(line[0].category),
+      data: line.filter(point => point.y !== null),
+      createLine: createLine,
+      key: `line _${index}`
+    });
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, circles.map((circle, index) => {
+    const scaleXDomain = scaleX.domain();
+    const scaleYDomain = scaleY.domain();
+    if (xScaleType === 'number' && (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1])) {
+      return null;
+    }
+    const to = _objectSpread2(_objectSpread2({}, circle), {}, {
+      r: 4
+    });
+    return /*#__PURE__*/React__default.createElement(Dot, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
+      data: to,
+      isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
+      key: `circle _${index}`,
+      labelDecorator: labelDecorator,
+      onClick: onDotClick,
+      role: dotRole,
+      scaleX: scaleX,
+      scaleY: scaleY,
+      tooltipVariant: tooltipVariant,
+      variant: DotVariant.hollow
+    });
+  })), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: chartHeight,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    variant: xAxisVariant,
+    tickFormat: xAxisTickFormat
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "top",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    variant: xAxisVariant,
+    tickFormat: xAxisTickFormat
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "left",
+    length: chartHeight,
+    scale: scaleY,
+    x: 0,
+    y: chartHeight,
+    tickValues: 8,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "right",
+    length: chartHeight,
+    scale: scaleY,
+    x: chartWidth,
+    y: chartHeight,
+    tickValues: 8,
+    variant: yAxisVariant
+  }) : null))), hasCategory && labelVariant !== LineChartLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+    data: statsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
+    })),
+    variant: labelVariant === LineChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === LineChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label
+  }, legendProps)) : null);
+});
+
+const _excluded$8 = ["className", "data", "dotRole", "emptyComponent", "id", "isDotSelected", "labelVariant", "localeText", "onDotClick", "size", "theme", "tooltipVariant"];
+const COMPONENT_NAME$2 = 'LineChart';
+const CLASSNAME$2 = 'redsift-line-chart';
+const DEFAULT_PROPS$2 = {
+  labelVariant: LineChartLabelVariant.externalLabel,
+  localeText: {
+    emptyChartText: 'No Data'
+  },
+  size: ChartSize.medium,
+  theme: ColorTheme.dark,
+  tooltipVariant: TooltipVariant.none,
+  xAxisVariant: AxisVariant.default,
+  xAxisPlacement: 'bottom',
+  yAxisVariant: AxisVariant.default,
+  yAxisPlacement: 'left'
+};
+const LineChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      data: propsData,
+      dotRole,
+      emptyComponent,
+      id: propsId,
+      isDotSelected,
+      labelVariant,
+      localeText,
+      onDotClick,
+      size,
+      theme,
+      tooltipVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$8);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  if (propsData === undefined || propsData === null) {
+    return /*#__PURE__*/React__default.createElement(LoadingLineChart, _extends({
+      id: id
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyLineChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      localeText: localeText,
+      size: size
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(RenderedLineChart, _extends({
+    className: classNames(LineChart.className, className),
+    data: propsData,
+    dotRole: dotRole,
+    id: id,
+    isDotSelected: isDotSelected,
+    labelVariant: labelVariant,
+    localeText: localeText,
+    onDotClick: onDotClick,
+    size: size,
+    theme: theme,
+    tooltipVariant: tooltipVariant
+  }, forwardedProps, {
+    ref: ref
+  }));
+});
+LineChart.className = CLASSNAME$2;
+LineChart.defaultProps = DEFAULT_PROPS$2;
+LineChart.displayName = COMPONENT_NAME$2;
 
 /**
  * Component variant.
@@ -2744,5 +3274,5 @@ ScatterPlot.className = CLASSNAME;
 ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, LabelVariant, Legend, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, Line, LineChart, LineChartLabelVariant, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map