@economic/taco 2.46.6 → 2.46.7

package/dist/taco.cjs.development.js

@@ -48,6 +48,7 @@ var setWith = _interopDefault(require('lodash/setWith'));
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
+var Recharts = require('recharts');
 
 const AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
 const getColorByState = state => {
@@ -20462,6 +20463,796 @@ const Tour = props => {
 };
 Tour.Step = TourStep;
 
+// NOTE: this file is intentianally a js file so that it can be consumed by tailwind.config.js
+
+const THEME_COLORS = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  white: '#fff',
+  black: '#1c1c1c',
+  brand: {
+    vismaRed: '#E70641',
+    paleOrange: '#FFF5E5',
+    sunsetOrange: '#E89C2E',
+    midnightBlue: '#29283E',
+    coolBlue: '#F5F7F9'
+  },
+  grey: {
+    lightest: '#fafafa',
+    light: '#F6F6F6',
+    DEFAULT: '#EBEBEB',
+    dark: '#DDDDDD',
+    darker: '#ACACAC',
+    darkest: '#595959',
+    darkNew: '#a5a6a9',
+    50: '#fafafa',
+    100: '#F6F6F6',
+    200: '#EBEBEB',
+    300: '#DDDDDD',
+    500: '#ACACAC',
+    700: '#595959',
+    900: '#303030'
+  },
+  purple: {
+    lightest: '#585c74',
+    light: '#4b4f64',
+    DEFAULT: '#3d4153',
+    dark: '#353a48',
+    darker: '#29283e',
+    darkest: '#212032',
+    darkNew_1: '#373647',
+    darkNew_2: '#414050',
+    100: '#EEE5FF',
+    200: '#ddd1ff',
+    300: '#CBBCFE',
+    500: '#9270FA',
+    700: '#6542D1',
+    900: '#412970'
+  },
+  blue: {
+    lightest: '#DEEBFF',
+    light: '#75A0F5',
+    DEFAULT: '#4573D2',
+    dark: '#2B57B4',
+    100: '#DEEBFF',
+    200: '#AACCFF',
+    300: '#75A0F5',
+    500: '#4573D2',
+    700: '#2B57B4',
+    900: '#29283E'
+  },
+  red: {
+    lightest: '#FFDAD2',
+    light: '#E66568',
+    DEFAULT: '#CE3F42',
+    dark: '#950027',
+    100: '#FFDAD2',
+    200: '#f3a09d',
+    300: '#E66568',
+    500: '#CE3F42',
+    700: '#950027',
+    900: '#64001B'
+  },
+  green: {
+    lightest: '#cdf0e7',
+    light: '#52C7AB',
+    DEFAULT: '#08AE87',
+    dark: '#028465',
+    100: '#cdf0e7',
+    200: '#9be1ce',
+    300: '#52C7AB',
+    500: '#08AE87',
+    700: '#028465',
+    900: '#14493A'
+  },
+  yellow: {
+    lightest: '#FFF1C3',
+    light: '#FFD665',
+    DEFAULT: '#FFBD3B',
+    dark: '#e89c2e',
+    100: '#FFF1C3',
+    200: '#ffe494',
+    300: '#FFD665',
+    500: '#FFBD3B',
+    700: '#e89c2e',
+    900: '#733700'
+  },
+  pink: {
+    100: '#FFE3F7',
+    200: '#fcb9e9',
+    300: '#F98EDB',
+    500: '#E165BF',
+    700: '#CF49AA',
+    900: '#870062'
+  },
+  brown: {
+    100: '#EEE0DA',
+    200: '#DFCCC2',
+    300: '#C4AB9E',
+    500: '#93715D',
+    700: '#73503B',
+    900: '#45291F'
+  },
+  orange: {
+    100: '#FFE3BB',
+    200: '#FCCB80',
+    300: '#FAB64D',
+    500: '#F99702',
+    700: '#EF7D00',
+    900: '#4A2811'
+  }
+};
+
+const mapColor = (palette, prefix = '') => {
+  return Object.keys(palette).reduce((accum, color) => {
+    if (color === 'current') {
+      return accum;
+    } else if (typeof palette[color] === 'string') {
+      return {
+        ...accum,
+        [prefix ? color === 'DEFAULT' ? prefix : `${prefix}-${color}` : color]: palette[color]
+      };
+    } else {
+      return {
+        ...accum,
+        ...mapColor(palette[color], color)
+      };
+    }
+  }, {});
+};
+const colors = /*#__PURE__*/mapColor(THEME_COLORS);
+const getThemeColor = color => colors[color];
+
+function Legend(props) {
+  const {
+    activeIndex,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    payload,
+    layout,
+    activeItems
+  } = props;
+  const [hoverIndex, setHoverIndex] = React.useState(null);
+  const handleMouseEnter = (entry, index) => {
+    setHoverIndex(index);
+    if (activeItems[entry.dataKey]) onMouseEnter(entry, index);
+  };
+  const handleMouseLeave = () => {
+    onMouseLeave();
+    setHoverIndex(null);
+  };
+  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "transparent",
+    className: "text-grey-700"
+  }, moreButtonText));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-auto max-w-full overflow-hidden"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('mb-0 ml-0 flex justify-center', {
+      'flex-col': layout === 'vertical'
+    })
+  }, /*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "w-full items-center py-1",
+    moreButton: moreButton
+  }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement("span", {
+    key: `${entry.dataKey}-${index}`,
+    className: cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
+      'bg-grey-100 rounded': activeIndex === index
+    }),
+    onMouseEnter: () => handleMouseEnter(entry, index),
+    onMouseLeave: handleMouseLeave,
+    onClick: onClick ? () => onClick(entry) : undefined
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-700 flex items-center gap-[4px]"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
+      'border-grey-300 border !bg-white': !activeItems[entry.dataKey]
+    }),
+    style: {
+      backgroundColor: entry.color
+    }
+  }, hoverIndex === index && activeItems[entry.dataKey] && (/*#__PURE__*/React__default.createElement(Icon, {
+    name: "tick-bold",
+    className: "!h-full !w-full text-white"
+  }))), entry.value)))))));
+}
+
+const Tooltip$2 = ({
+  active,
+  formatter,
+  payload,
+  style,
+  singlePieDonutChart
+}) => {
+  const getColor = entry => {
+    var _ref, _entry$color;
+    if (singlePieDonutChart) {
+      // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+      // and one with multiple pies.
+      return getThemeColor(entry.payload.color);
+    }
+    return (_ref = (_entry$color = entry.color) !== null && _entry$color !== void 0 ? _entry$color : entry.payload.fill) !== null && _ref !== void 0 ? _ref : 'blue-500';
+  };
+  if (active && payload && payload.length) {
+    return /*#__PURE__*/React__default.createElement("dl", {
+      className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
+      style: style
+    }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${entry.name}-${index}`
+    }, /*#__PURE__*/React__default.createElement("dt", {
+      className: "text-grey-700 mb-0 flex items-center gap-1 font-normal"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-px h-2.5 w-2.5 rounded-sm",
+      style: {
+        background: getColor(entry)
+      }
+    }),
+    // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
+    // and one with multiple pies.
+    singlePieDonutChart ? entry.payload.label : entry.name), /*#__PURE__*/React__default.createElement("dd", {
+      className: "mb-0 text-right font-bold text-black "
+    }, formatter ? formatter(entry.value) : entry.value)))));
+  }
+  return null;
+};
+
+const getCartesianGridProps = () => ({
+  vertical: false
+});
+const getXAxisProps = props => ({
+  axisLine: false,
+  dataKey: props.accessor,
+  fontSize: 12,
+  scale: props.xAxisScale,
+  tickLine: false,
+  tickFormatter: props.xAxisTickFormat
+});
+const getYAxisProps = props => ({
+  axisLine: false,
+  fontSize: 12,
+  scale: props.yAxisScale,
+  tickLine: false,
+  tickFormatter: props.yAxisTickFormat
+});
+const getLegendProps = props => ({
+  content: /*#__PURE__*/React__default.createElement(Legend, Object.assign({}, props))
+});
+const getTooltipProps = (props = undefined) => ({
+  content: /*#__PURE__*/React__default.createElement(Tooltip$2, Object.assign({}, props)),
+  wrapperStyle: {
+    outline: 'none'
+  }
+});
+
+// A hacky fix for EC-50037 to make sure that Chart doesn't resize when it is inside a Card.
+const ResponsiveContainer = props => (/*#__PURE__*/React__default.createElement(Recharts.ResponsiveContainer, Object.assign({
+  className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]"
+}, props)));
+
+const Area = _ => null;
+const AreaChart = function AreaChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredArea, setHoveredArea] = React.useState(null);
+  const [activeAreas, setActiveAreas] = React.useState(() => {
+    const areas = {};
+    React__default.Children.forEach(children, child => {
+      areas[child.props.accessor] = true;
+    });
+    return areas;
+  });
+  const handleLegendClick = entry => {
+    setHoveredArea(null);
+    setActiveAreas({
+      ...activeAreas,
+      [entry.dataKey]: !activeAreas[entry.dataKey]
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.AreaChart, {
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: -25,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: entry => setHoveredArea(entry.dataKey),
+    onMouseLeave: () => setHoveredArea(null),
+    activeItems: activeAreas
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => {
+    var _child$props$color, _child$props$color2, _child$props$color3;
+    return /*#__PURE__*/React__default.createElement(Recharts.Area, {
+      activeDot: {
+        fill: getThemeColor((_child$props$color = child.props.color) !== null && _child$props$color !== void 0 ? _child$props$color : 'blue-300')
+      },
+      isAnimationActive: false,
+      dataKey: child.props.accessor,
+      dot: false,
+      fill: getThemeColor((_child$props$color2 = child.props.color) !== null && _child$props$color2 !== void 0 ? _child$props$color2 : 'grey-100'),
+      name: child.props.label,
+      strokeWidth: 2,
+      stroke: getThemeColor((_child$props$color3 = child.props.color) !== null && _child$props$color3 !== void 0 ? _child$props$color3 : 'grey-300'),
+      stackId: child.props.stackId,
+      hide: !activeAreas[child.props.accessor],
+      opacity: hoveredArea && child.props.accessor !== hoveredArea ? 0.3 : 1
+    });
+  })));
+};
+AreaChart.Area = Area;
+
+const Bar$1 = _ => null;
+const getXAxisVerticalProps = props => ({
+  ...getXAxisProps(props),
+  ...{
+    type: 'number',
+    dataKey: undefined
+  }
+});
+const getYAxisVerticalProps = props => ({
+  ...getYAxisProps(props),
+  ...{
+    dataKey: props.accessor,
+    type: 'category'
+  }
+});
+const BarChart = function BarChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    layout = 'horizontal',
+    ...props
+  } = externalProps;
+  const [activeIndex, setActiveIndex] = React__default.useState(undefined);
+  const [hoveredBar, setHoveredBar] = React.useState(null);
+  const [activeBars, setActiveBars] = React.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  // Recharts doesn't provide a way for us to know if a stacked bar is at the top or the bottom,
+  // so we can't set proper radiuses without some "magic"
+  const stacks = {};
+  React__default.Children.forEach(children, child => {
+    if (child.props.stackId) {
+      if (!stacks[child.props.stackId]) {
+        stacks[child.props.stackId] = [child.props.accessor];
+      } else {
+        stacks[child.props.stackId].push(child.props.accessor);
+      }
+    }
+  });
+  const handleLegendClick = entry => {
+    setHoveredBar(null);
+    setActiveBars({
+      ...activeBars,
+      [entry.dataKey]: !activeBars[entry.dataKey]
+    });
+  };
+  const handleLegendHover = (entry, index) => {
+    setHoveredBar(entry.dataKey);
+    setActiveIndex(index);
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.BarChart, {
+    layout: layout,
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: layout === 'vertical' ? 0 : -25,
+      bottom: 0
+    },
+    onMouseMove: chartState => setActiveIndex(chartState.activeTooltipIndex),
+    onMouseLeave: () => setActiveIndex(undefined)
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, layout === 'vertical' ? getXAxisVerticalProps(props) : getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, layout === 'vertical' ? getYAxisVerticalProps(props) : getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: handleLegendHover,
+    onMouseLeave: () => setHoveredBar(null),
+    activeItems: activeBars
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => (/*#__PURE__*/React__default.createElement(Recharts.Bar, {
+    isAnimationActive: false,
+    barSize: 16,
+    dataKey: child.props.accessor,
+    name: child.props.label,
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(undefined),
+    fill: getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`),
+    radius: getBarRadius(stacks, child.props.accessor, child.props.stackId, activeBars),
+    stackId: child.props.stackId,
+    style: child.props.stackId ? {
+      stroke: '#fff',
+      strokeWidth: '2px'
+    } : undefined,
+    hide: !activeBars[child.props.accessor]
+  }, data.map((_, index) => (/*#__PURE__*/React__default.createElement(Recharts.Cell, {
+    key: `cell-${index}`,
+    opacity: hoveredBar && child.props.accessor !== hoveredBar || activeIndex !== undefined && activeIndex !== index ? 0.3 : 1
+  }))))))));
+};
+BarChart.Bar = Bar$1;
+const getBarRadius = (stacks, accessor, stackId, activeBars) => {
+  if (stackId && Array.isArray(stacks[stackId])) {
+    const length = stacks[stackId].length - 1;
+    const index = stacks[stackId].indexOf(accessor);
+    if (Object.entries(activeBars).filter(item => item[0] !== accessor).every(item => !item[1])) {
+      return [3, 3, 0, 0];
+    }
+    if (activeBars[stacks[stackId][index + 1]] === false) {
+      return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length - 1 ? 0 : 3, index === length - 1 ? 0 : 3];
+    }
+    if (index !== 0 && index !== length) {
+      return 0;
+    }
+    return [index === 0 ? 0 : 3, index === 0 ? 0 : 3, index === length ? 0 : 3, index === length ? 0 : 3];
+  }
+  return 3;
+};
+
+const Legend$1 = ({
+  legendPosition,
+  hoveredItem,
+  selectedItem,
+  data,
+  onClick,
+  setHoveredItem,
+  formatter,
+  total,
+  visibleItems,
+  label
+}) => {
+  const isTotalLegendSelected = selectedItem.length === data.length;
+  const isTotalLegendHovered = hoveredItem.length === data.length;
+  const handleMouseLeave = () => setHoveredItem([]);
+  const renderLegendItem = (entry, index) => {
+    const isTotal = entry === null;
+    // We can't use `isTotal` here because TypeScript is unable to infer the type when `entry` is not null.
+    const itemData = entry === null ? {
+      id: 'total',
+      label,
+      value: total,
+      color: 'grey-300'
+    } : entry;
+    const isSelected = isTotal ? isTotalLegendSelected : selectedItem.includes(itemData.id);
+    const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: isTotal ? 'total' : `${itemData.label}-${index}`,
+      className: cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {
+        'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),
+        'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right')
+      }),
+      onClick: () => onClick(isTotal ? data : itemData),
+      onMouseEnter: () => setHoveredItem(isTotal ? data.map(item => item.id) : [itemData.id]),
+      onMouseLeave: handleMouseLeave
+    }, legendPosition === 'bottom' ? (/*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center gap-1"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: cn('ml-1 h-3 w-3 rounded-sm', {
+        'border-grey-300 border !bg-white': !visibleItems[itemData.id]
+      }),
+      style: {
+        backgroundColor: getThemeColor(itemData.color)
+      }
+    }, visibleItems[itemData.id] && isHovered && (/*#__PURE__*/React__default.createElement(Icon, {
+      name: "tick-bold",
+      className: "mb-2.5 !h-full !w-full text-white"
+    }))), /*#__PURE__*/React__default.createElement("div", null, itemData.label))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      className: "ml-1 mt-1 h-9 w-2 rounded-[1px]",
+      style: {
+        backgroundColor: getThemeColor(itemData.color)
+      }
+    }), /*#__PURE__*/React__default.createElement("div", null, itemData.label, /*#__PURE__*/React__default.createElement("span", {
+      className: "-mt-1 flex w-full text-lg font-bold"
+    }, formatter ? formatter(itemData.value) : itemData.value)))));
+  };
+  const moreButton = moreButtonText => (/*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "transparent",
+    className: "text-grey-700"
+  }, moreButtonText));
+  const className = cn('flex-grow pl-4', {
+    'w-full': legendPosition === 'bottom'
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: cn('mb-0 ml-0 mt-4 flex justify-center space-y-1', legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row')
+  }, legendPosition === 'right' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderLegendItem(null), data.map(renderLegendItem))) : (/*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "w-full items-center py-1",
+    moreButton: moreButton
+  }, data.map(renderLegendItem)))));
+};
+
+const DONUT_WIDTH = 16;
+const HOVER_DONUT_WIDTH = 10;
+
+const CenteredLabel = ({
+  radius,
+  legendPosition,
+  label,
+  total,
+  formatter,
+  showLegend
+}) => {
+  const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
+  const diameter = radius * 2;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute mt-1 flex h-12 flex-col text-center",
+    style: {
+      top: `calc(${radius}px - (3rem / 2))`,
+      left: legendPosition === 'right' ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,
+      width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "w-full truncate text-lg font-bold"
+  }, formatter ? formatter(total) : total), label);
+};
+
+const ActiveShape = props => {
+  var _getThemeColor;
+  const {
+    cx,
+    cy,
+    id,
+    innerRadius,
+    onClick,
+    outerRadius = 0,
+    pieColors,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
+  return /*#__PURE__*/React__default.createElement("g", {
+    onClick: () => onClick(id),
+    className: cn({
+      'cursor-pointer': !!onClick
+    })
+  }, /*#__PURE__*/React__default.createElement(Recharts.Sector, {
+    cx: cx,
+    cy: cy,
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    fill: fill
+  }), /*#__PURE__*/React__default.createElement(Recharts.Sector, {
+    cx: cx,
+    cy: cy,
+    startAngle: startAngle,
+    endAngle: endAngle,
+    innerRadius: outerRadius + 2,
+    outerRadius: outerRadius + HOVER_DONUT_WIDTH,
+    fill: id !== undefined ? (_getThemeColor = getThemeColor(pieColors[id])) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-500') : getThemeColor('blue-500'),
+    opacity: 0.3
+  }));
+};
+
+const Segment = _ => null;
+const DonutChart = function DonutChart({
+  children,
+  formatter,
+  onClick,
+  showLegend = false,
+  legendPosition = 'bottom',
+  label
+}) {
+  const ref = React__default.useRef(null);
+  const [radius, setRadius] = React__default.useState(0);
+  const [hoveredItem, setHoveredItem] = React__default.useState([]);
+  // used for right legends
+  const [selectedItem, setSelectedItem] = React__default.useState([]);
+  // used for bottom legends
+  const [visibleItems, setVisibleItems] = React__default.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.id] = true;
+    });
+    return keys;
+  });
+  React__default.useEffect(() => {
+    if (ref.current) {
+      var _ref$current$parentEl;
+      const rect = (_ref$current$parentEl = ref.current.parentElement) === null || _ref$current$parentEl === void 0 ? void 0 : _ref$current$parentEl.getBoundingClientRect();
+      if (rect) {
+        const width = showLegend ? rect.width / 2 : rect.width;
+        const max = rect.height < width ? rect.height : width;
+        setRadius(max / 2);
+      }
+    }
+  }, [showLegend]);
+  const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut
+  const data = React__default.Children.map(children, child => ({
+    id: child.props.id,
+    color: child.props.color,
+    label: child.props.label,
+    value: child.props.value
+  }));
+  const displayedData = data.filter(child => visibleItems[child.id]);
+  const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);
+  const showTooltip = (!showLegend || legendPosition === 'bottom') && displayedData.length > 0;
+  const handleLegendClick = entry => {
+    if (legendPosition === 'bottom' && !Array.isArray(entry)) {
+      setVisibleItems({
+        ...visibleItems,
+        [entry.id]: !visibleItems[entry.id]
+      });
+    } else {
+      const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];
+      // Using slice to avoid mutation of the react state 'selectedItem'
+      const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');
+      if (onClick && !isCurrentSegmentActive) {
+        onClick(entry);
+      }
+      setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
+    }
+  };
+  const handlePieClick = React__default.useCallback(pieId => {
+    if (onClick && pieId !== undefined) {
+      const pieProps = displayedData.find(item => item.id === pieId);
+      onClick(pieProps);
+    }
+  }, [onClick, displayedData]);
+  const singlePieDonutChart = displayedData.length === 1;
+  const activeShapeColor = React__default.useMemo(() => {
+    const getSegmentColor = item => item.reduce((colors, itemId) => {
+      const visibleHoveredItem = displayedData.find(dataItem => dataItem.id === itemId);
+      if (visibleHoveredItem) {
+        colors[visibleHoveredItem.id] = visibleHoveredItem.color;
+      }
+      return colors;
+    }, {});
+    const hoveredSegmentColor = getSegmentColor(hoveredItem);
+    const selectedSegmentColor = getSegmentColor(selectedItem);
+    return legendPosition === 'bottom' || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
+  }, [hoveredItem, selectedItem, legendPosition]);
+  if (ref.current && !radius) {
+    return null;
+  }
+  const getActiveIndex = () => {
+    if (hoveredItem.length > 0) {
+      return hoveredItem.map(itemId => displayedData.findIndex(element => element.id === itemId));
+    }
+    return selectedItem.map(selectedItemId => displayedData.findIndex(element => element.id === selectedItemId));
+  };
+  const content = () => {
+    const elements = React__default.Children.toArray(children).filter(child => /*#__PURE__*/React__default.isValidElement(child) && visibleItems[child.props.id]);
+    return elements.length > 0 ? elements.map((child, index) => {
+      var _getThemeColor;
+      return /*#__PURE__*/React__default.createElement(Recharts.Cell, {
+        key: `cell-${index}`,
+        name: child.props.label,
+        fill: (_getThemeColor = getThemeColor(child.props.color)) !== null && _getThemeColor !== void 0 ? _getThemeColor : getThemeColor('blue-300')
+      });
+    }) : (/*#__PURE__*/React__default.createElement(Recharts.Cell, {
+      key: "empty-chart",
+      name: '',
+      fill: getThemeColor('grey-200')
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn('relative h-full w-full', {
+      [`flex `]: showLegend,
+      'flex-col items-center': legendPosition === 'bottom'
+    }),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(CenteredLabel, {
+    radius: radius,
+    legendPosition: legendPosition,
+    label: label,
+    total: total,
+    formatter: formatter,
+    showLegend: showLegend
+  }), /*#__PURE__*/React__default.createElement(Recharts.PieChart, {
+    data: data,
+    height: diameter,
+    width: diameter,
+    style: {
+      transform: 'rotate(90deg) scale(-1,1)'
+    }
+  }, showTooltip ? (/*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps({
+    style: {
+      transform: 'rotate(90deg) scale(-1,1)'
+    },
+    singlePieDonutChart
+  })))) : null, /*#__PURE__*/React__default.createElement(Recharts.Pie, {
+    isAnimationActive: false,
+    activeIndex: getActiveIndex(),
+    activeShape: /*#__PURE__*/React__default.createElement(ActiveShape, {
+      pieColors: activeShapeColor,
+      onClick: handlePieClick
+    }),
+    data: displayedData.length > 0 ? displayedData : [],
+    dataKey: "value",
+    innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
+    onMouseEnter: segment => displayedData.length > 0 && setHoveredItem([segment.id]),
+    onMouseLeave: () => setHoveredItem([]),
+    outerRadius: radius - HOVER_DONUT_WIDTH,
+    paddingAngle: 2,
+    // Prevents the pie group element from being focusable
+    rootTabIndex: -1
+  }, content())), showLegend && (/*#__PURE__*/React__default.createElement(Legend$1, {
+    data: data,
+    visibleItems: visibleItems,
+    onClick: handleLegendClick,
+    total: total,
+    setHoveredItem: setHoveredItem,
+    label: label,
+    legendPosition: legendPosition,
+    hoveredItem: hoveredItem,
+    selectedItem: selectedItem,
+    formatter: formatter
+  })));
+};
+DonutChart.Segment = Segment;
+
+const Line$1 = _ => null;
+const LineChart = function LineChart(externalProps) {
+  const {
+    children,
+    data,
+    formatter,
+    ...props
+  } = externalProps;
+  const [hoveredLine, setHoveredLine] = React.useState(null);
+  const [activeLines, setActiveLines] = React.useState(() => {
+    const keys = {};
+    React__default.Children.forEach(children, child => {
+      keys[child.props.accessor] = true;
+    });
+    return keys;
+  });
+  const handleLegendClick = entry => {
+    setHoveredLine(null);
+    setActiveLines({
+      ...activeLines,
+      [entry.dataKey]: !activeLines[entry.dataKey]
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ResponsiveContainer, null, /*#__PURE__*/React__default.createElement(Recharts.LineChart, {
+    data: data,
+    margin: {
+      top: 10,
+      right: 0,
+      left: -25,
+      bottom: 0
+    }
+  }, /*#__PURE__*/React__default.createElement(Recharts.CartesianGrid, Object.assign({}, getCartesianGridProps())), /*#__PURE__*/React__default.createElement(Recharts.XAxis, Object.assign({}, getXAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.YAxis, Object.assign({}, getYAxisProps(props))), /*#__PURE__*/React__default.createElement(Recharts.Legend, Object.assign({}, getLegendProps({
+    onClick: handleLegendClick,
+    onMouseEnter: entry => setHoveredLine(entry.dataKey),
+    onMouseLeave: () => setHoveredLine(null),
+    activeItems: activeLines
+  }))), /*#__PURE__*/React__default.createElement(Recharts.Tooltip, Object.assign({}, getTooltipProps(), {
+    formatter: formatter
+  })), React__default.Children.map(children, child => {
+    var _child$props$color, _child$props$color2;
+    return /*#__PURE__*/React__default.createElement(Recharts.Line, {
+      activeDot: {
+        fill: getThemeColor((_child$props$color = child.props.color) !== null && _child$props$color !== void 0 ? _child$props$color : 'blue-300')
+      },
+      dataKey: child.props.accessor,
+      isAnimationActive: false,
+      dot: false,
+      name: child.props.label,
+      stroke: getThemeColor((_child$props$color2 = child.props.color) !== null && _child$props$color2 !== void 0 ? _child$props$color2 : 'blue-300'),
+      strokeWidth: 2,
+      hide: !activeLines[child.props.accessor],
+      opacity: hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1
+    });
+  })));
+};
+LineChart.Line = Line$1;
+
 const Button$4 = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
   const {
     ...attributes
@@ -21206,10 +21997,12 @@ const useOnClickOutside = (ref, callback) => {
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AreaChart = AreaChart;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.BadgeIcon = BadgeIcon;
 exports.Banner = Banner;
+exports.BarChart = BarChart;
 exports.Base = Base;
 exports.Button = Button$1;
 exports.Calendar = Calendar$1;
@@ -21220,6 +22013,7 @@ exports.Combobox = Combobox;
 exports.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
+exports.DonutChart = DonutChart;
 exports.Drawer = Drawer;
 exports.Field = Field;
 exports.Form = Form;
@@ -21231,6 +22025,7 @@ exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Layout = Layout$1;
+exports.LineChart = LineChart;
 exports.List = List$1;
 exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;