@economic/taco 2.45.0-alpha.3 → 2.45.0-alpha.4

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 => {
@@ -4038,33 +4039,25 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
-  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      defaultValue: defaultId
-    } : {
-      type: 'multiple',
-      defaultValue: defaultId
+    valueProps = {
+      defaultValue: defaultId || undefined
     };
   } else {
-    valueProps = type === 'single' ? {
-      type: 'single',
-      onValueChange: onChange,
-      value: id || undefined
-    } : {
-      type: 'multiple',
+    valueProps = {
       onValueChange: onChange,
       value: id || undefined
     };
   }
+  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className
+    className: className,
+    type: type
   })));
 };
 Accordion.Item = Item;
@@ -5254,7 +5247,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus:yt-focus',
   // hide the arrow controls on input[type=number]
   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', {
     'bg-white': !props.highlighted && !readOnly,
@@ -5758,13 +5751,7 @@ const searchForString = (child, value, strategy = 'includes') => {
       }
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      const childLowerCase = child.toString().toLowerCase();
-      const valueLowerCase = String(value).toLowerCase();
-      if (strategy === 'startsWith') {
-        return childLowerCase.startsWith(valueLowerCase);
-      } else {
-        return childLowerCase.includes(valueLowerCase);
-      }
+      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
     }
   } catch {
     return false;
@@ -12130,9 +12117,10 @@ const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props,
 });
 
 const RowContext = /*#__PURE__*/React__default.createContext({
+  hideInternalColumns: false,
+  hideRowActions: false,
   isHovered: false,
-  rowIndex: -1,
-  hideRowActions: false
+  rowIndex: -1
 });
 
 /* anonymous functions will break the memoisation on each render, wrap handlers in callbacks */
@@ -12140,6 +12128,7 @@ function Row(props) {
   const {
     renderer: RowRenderer,
     cellRenderer: CellRenderer,
+    hideInternalColumns = false,
     hideRowActions = false,
     ...displayRowProps
   } = props;
@@ -12149,8 +12138,9 @@ function Row(props) {
   const contextValue = React__default.useMemo(() => ({
     isHovered,
     rowIndex: props.index,
+    hideInternalColumns,
     hideRowActions
-  }), [isHovered, props.index, hideRowActions]);
+  }), [isHovered, props.index, hideInternalColumns, hideRowActions]);
   if (props.row.original === undefined) {
     return /*#__PURE__*/React__default.createElement(SkeletonRow, Object.assign({}, props));
   }
@@ -12248,12 +12238,16 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
   // rendered output
   let style = {};
   let content = null;
-  if (rows.length) {
+  // bottom rows aren't virtualised (they're sticky) but we need to set the height
+  if (rows.length || table.getBottomRows().length) {
     style = {
       height: totalSize,
       paddingBottom,
       paddingTop
     };
+  }
+  // only render non sticky rows
+  if (rows.length) {
     content = virtualItems.map(virtualRow => {
       // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here
       if (!virtualRow) {
@@ -12411,9 +12405,9 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
     table
   } = context;
   const {
+    hideRowActions,
     isHovered,
-    rowIndex,
-    hideRowActions
+    rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
   const actions = tableMeta.rowActions.rowActions;
@@ -12453,6 +12447,12 @@ function Cell$1() {
   const {
     texts
   } = useLocalization();
+  const {
+    hideInternalColumns
+  } = React__default.useContext(RowContext);
+  if (hideInternalColumns) {
+    return null;
+  }
   return /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table.columns.drag.tooltip,
     name: "drag",
@@ -12501,7 +12501,13 @@ function Cell$2(context) {
   const {
     texts
   } = useLocalization();
+  const {
+    hideInternalColumns
+  } = React__default.useContext(RowContext);
   const tableMeta = context.table.options.meta;
+  if (hideInternalColumns) {
+    return null;
+  }
   const hasExpandedRow = (_tableMeta$rowExpansi = (_tableMeta$rowExpansi2 = tableMeta.rowExpansion).rowExpansionRenderer) === null || _tableMeta$rowExpansi === void 0 ? void 0 : _tableMeta$rowExpansi.call(_tableMeta$rowExpansi2, context.row.original);
   if (hasExpandedRow) {
     const isActiveRow = tableMeta.rowActive.rowActiveIndex === context.row.index;
@@ -12591,10 +12597,11 @@ function Cell$3(context) {
     table
   } = context;
   const {
+    hideInternalColumns,
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
-  if (table.options.enableGrouping && (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length && !row.getIsGrouped()) {
+  if (hideInternalColumns || table.options.enableGrouping && (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length && !row.getIsGrouped()) {
     return null;
   }
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
@@ -13830,9 +13837,15 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
 function EmptyStateBody(props) {
   const {
     emptyState: Placeholder,
+    isReady,
     reason,
     ...attributes
   } = props;
+  if (!isReady) {
+    return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
+      className: "!auto-rows-fr"
+    }));
+  }
   return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
     className: "!auto-rows-fr"
   }), /*#__PURE__*/React__default.createElement("tr", {
@@ -16831,7 +16844,7 @@ function Table(props) {
 }
 Table.Toolbar = TableToolbar;
 Table.Grid = TableGrid;
-function getFilterReason(table) {
+function getEmptyStateReason(table) {
   if (table.instance.getFilteredRowModel().rows.length === 0 && table.instance.getCoreRowModel().rows.length !== 0) {
     const state = table.instance.getState();
     if (table.meta.search.enableGlobalFilter && !!state.globalFilter) {
@@ -16854,7 +16867,7 @@ function TableGrid(props) {
   const handleFocus = table.meta.rowActive.rowActiveIndex === undefined ? event => {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
-  const filterReason = getFilterReason(table);
+  const emptyStateReason = getEmptyStateReason(table);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
@@ -16879,9 +16892,10 @@ function TableGrid(props) {
     key: props.id,
     header: props,
     scrollToIndex: table.renderer.scrollToIndex
-  }))))))), filterReason ? (/*#__PURE__*/React__default.createElement(EmptyStateBody, {
+  }))))))), emptyStateReason ? (/*#__PURE__*/React__default.createElement(EmptyStateBody, {
     emptyState: props.table.props.emptyState,
-    reason: filterReason
+    isReady: table.meta.server.isEnabled ? table.meta.server.isReady : true,
+    reason: emptyStateReason
   })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
@@ -18494,11 +18508,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
   // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
   const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+    if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
       lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      tableMeta.editing.saveChanges(table);
+      if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
+        tableMeta.editing.saveChanges(table);
+      }
     }
-  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
+  }, [tableMeta.rowActive.rowActiveIndex]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {
@@ -18524,9 +18540,9 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     const onClickOutside = event => {
       if (tableMeta.editing.isEditing) {
         const element = event.target;
-        const insideTable = element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
+        const isTableOrIsInsideTable = element.tagName === 'TABLE' || element.tagName === 'TBODY' || element.getAttribute('data-taco') === 'backdrop' || element.getAttribute('data-table') === 'editing-toggle' || !document.body.contains(element) || isElementInsideOrTriggeredFromContainer(element, tableRef.current);
         // users can click the white space below rows which could be inside the table, but a valid scenario to save
-        if (!insideTable || element.tagName === 'TABLE' || element.tagName === 'TBODY') {
+        if (!isTableOrIsInsideTable) {
           tableMeta.editing.saveChanges(table);
         }
       }
@@ -18677,7 +18693,7 @@ function reducer$2(state, action) {
           }
         };
       }
-    case 'createRow':
+    case 'insertTemporaryRow':
       {
         const {
           value
@@ -18964,14 +18980,14 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
       }
     });
   }
-  function createRow(data) {
+  function insertTemporaryRow(data) {
     const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${uuid.v4()}`;
     const value = {
       ...data,
       [rowIdentityAccessor]: newRowId
     };
     dispatch({
-      type: 'createRow',
+      type: 'insertTemporaryRow',
       rowId: newRowId,
       payload: {
         value
@@ -19065,12 +19081,42 @@ function usePendingChangesState(handleSave, handleChange, rowIdentityAccessor, v
     discardChanges,
     hasSaved,
     // new rows
-    createRow,
+    insertTemporaryRow,
     temporaryRows: state.temporaryRows
   };
 }
 
-function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentityAccessor, validator) {
+function useTableEditing(isEnabled = false, handleSave, handleChange, handleCreate, rowIdentityAccessor, validator) {
+  const createRow = function (table, scrollToIndex, row) {
+    try {
+      if (!handleCreate) {
+        return Promise.resolve();
+      }
+      const tableMeta = table.options.meta;
+      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
+        if (!saved) {
+          return;
+        }
+        const changeset = row !== null && row !== void 0 ? row : handleCreate();
+        try {
+          if (changeset) {
+            const rowId = pendingChangesFns.insertTemporaryRow(changeset);
+            table.getRow(rowId).pin('bottom');
+            // set the active row to the new row before toggling editing on
+            const temporaryRows = tableMeta.editing.temporaryRows;
+            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
+            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
+            toggleEditing(true, table, scrollToIndex);
+            setLastFocusedCellIndex(undefined);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   // used to switch the table into editing mode
   const [isEditing, setEditing] = React__default.useState(false);
   // used to switch the editing between "detailed" mode
@@ -19108,6 +19154,7 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, rowIdentit
     toggleEditing: isEnabled ? toggleEditing : () => undefined,
     lastFocusedCellIndex,
     setLastFocusedCellIndex,
+    createRow,
     createRowButtonRef,
     ...pendingChangesFns
   };
@@ -19784,7 +19831,7 @@ const RENDERERS$1 = {
   cell: Cell$5
 };
 function useTable3(props, ref) {
-  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.rowIdentityAccessor, props.validator);
+  const editing = useTableEditing(props.enableEditing, props.onEditingSave, props.onEditingChange, props.onEditingCreate, props.rowIdentityAccessor, props.validator);
   const creationEnabled = editing.isEnabled && !!props.onEditingCreate;
   // this gives me the performance heeby jeebies, but can't think of a better way to internalise the state
   const data = React__default.useMemo(() => {
@@ -19837,6 +19884,9 @@ function useTable3(props, ref) {
   React__default.useEffect(() => {
     if (table.ref.current) {
       table.ref.current.instance.toggleEditing = enabled => table.meta.editing.toggleEditing(enabled !== null && enabled !== void 0 ? enabled : editing => !editing, table.instance, table.renderer.scrollToIndex);
+      if (props.onEditingCreate) {
+        table.ref.current.instance.createRow = row => table.meta.editing.createRow(table.instance, table.renderer.scrollToIndex, row);
+      }
     }
   }, [table.ref.current]);
   return table;
@@ -19994,10 +20044,9 @@ function Editing(props) {
 }
 
 function CreateNewRow(props) {
-  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum, _tableRef$current2;
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
   const {
     buttonRef,
-    onEditingCreate: handleEditingCreate,
     scrollToIndex,
     table,
     tableMeta,
@@ -20010,44 +20059,16 @@ function CreateNewRow(props) {
   const temporaryRowId = (_temporaryRows$0$tabl = (_temporaryRows$ = temporaryRows[0]) === null || _temporaryRows$ === void 0 ? void 0 : _temporaryRows$[tableMeta.rowIdentityAccessor]) !== null && _temporaryRows$0$tabl !== void 0 ? _temporaryRows$0$tabl : '';
   const isDisabled = !!table.getState().globalFilter || !!((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length) || !!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId);
   const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId) === 'saving';
-  const createRow = function (row) {
+  const handleCreate = function () {
     try {
-      if (!handleEditingCreate || isDisabled) {
+      if (isDisabled) {
         return Promise.resolve();
       }
-      return Promise.resolve(tableMeta.editing.saveChanges(table)).then(function (saved) {
-        if (!saved) {
-          return;
-        }
-        const changeset = row !== null && row !== void 0 ? row : handleEditingCreate();
-        try {
-          if (changeset) {
-            const rowId = tableMeta.editing.createRow(changeset);
-            table.getRow(rowId).pin('bottom');
-            // set the active row to the new row before toggling editing on
-            const nextRowIndex = temporaryRows.length ? tableMeta.length + 1 : tableMeta.length;
-            tableMeta.rowActive.setRowActiveIndex(nextRowIndex);
-            tableMeta.editing.toggleEditing(true, table, scrollToIndex);
-            tableMeta.editing.setLastFocusedCellIndex(0);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      });
+      return Promise.resolve(tableMeta.editing.createRow(table, scrollToIndex)).then(function () {});
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // allow programmatic access to creating rows from outside the table
-  React__default.useEffect(() => {
-    var _tableRef$current;
-    if (tableRef !== null && tableRef !== void 0 && (_tableRef$current = tableRef.current) !== null && _tableRef$current !== void 0 && _tableRef$current.instance) {
-      tableRef.current.instance.createRow = createRow;
-    }
-  }, [tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.instance, createRow]);
-  const handleCreate = function () {
-    return createRow();
-  };
   const shortcut = {
     key: 'Enter',
     meta: true
@@ -20170,7 +20191,7 @@ function TemporaryRow(props) {
     className: className,
     onKeyDown: handleKeyDown,
     onKeyDownCapture: handleKeyDownCapture,
-    // Row actions should only be hidden on temporary rows when editing is turned off
+    hideInternalColumns: true,
     hideRowActions: !tableMeta.editing.isEditing
   }))));
 }
@@ -20212,7 +20233,6 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     tableRef: table3.ref
   }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
     buttonRef: table3.meta.editing.createRowButtonRef,
-    onEditingCreate: props.onEditingCreate,
     scrollToIndex: table3.renderer.scrollToIndex,
     table: table3.instance,
     tableMeta: table3.meta,
@@ -20453,6 +20473,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__default.useState(null);
+  const [activeBars, setActiveBars] = React__default.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
@@ -20725,15 +21535,13 @@ const AgreementDisplay = props => {
   }));
 };
 
-const Container$1 = ({
-  children
-}) => {
+const Container$1 = props => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
-  }), children);
+  }), props.children);
 };
 function AgreementSelector(props) {
   const {
@@ -21199,10 +22007,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;
@@ -21213,6 +22023,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;
@@ -21224,6 +22035,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;