@pareto-engineering/design-system 5.1.3 → 5.2.1

package/dist/cjs/a/Charts/AreaChart/AreaChart.js

@@ -57,6 +57,7 @@ const AreaChart = _ref => {
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+    key: id,
     colorsArray: colors,
     yKeysArray: yKeys,
     capitalizedLegend: capitalizedLegend

package/dist/cjs/a/Charts/BarChart/BarChart.js

@@ -49,6 +49,7 @@ const BarChart = _ref => {
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+    key: id,
     colorsArray: selectedYLabels.map(item => item.color),
     yKeysArray: selectedYLabels.map(item => item.label),
     capitalizedLegend: capitalizedLegend

package/dist/cjs/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -40,9 +40,13 @@ const CustomLegend = _ref => {
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "text"
-  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("div", {
+    className: "sub-title-percentage-container"
+  }, /*#__PURE__*/React.createElement("span", {
     className: "sub-title"
-  }, getLegendItemSubtitle(key)))));
+  }, getLegendItemSubtitle(key)), key.percentage && /*#__PURE__*/React.createElement("span", {
+    className: "percentage-title"
+  }, `${key.percentage}%`)))));
 };
 CustomLegend.propTypes = {
   /**

package/dist/cjs/a/Charts/Common/CustomLegend/styles.scss

@@ -24,7 +24,6 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
       min-width: fit-content;
 
       .item {
-        box-shadow: $default-box-shadow;
         padding-top: $default-padding;
       }
     }
@@ -55,12 +54,21 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
         }
       }
 
+
+
       .sub-title {
         color: var(--heading);
         display: flex;
         font-size: calc($default-text-font-size * 1.2);
         font-weight: 500;
-        justify-content: flex-end;
+        justify-content: flex-start;
+        margin-left: 1rem;
+      }
+
+      .percentage-title {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+        justify-content: flex-start;
       }
     }
   }

package/dist/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -23,7 +23,8 @@ const CustomTooltipContent = _ref => {
     isDateValue,
     active,
     payload,
-    label
+    label,
+    isPieChart
   } = _ref;
   const formatLabelValue = value => {
     if (isTimeFormat) {
@@ -35,21 +36,47 @@ const CustomTooltipContent = _ref => {
     }
     return value;
   };
-  if (active && payload && payload.length) {
-    const newPayload = payload.filter(item => item.name !== 'bounds');
-    return /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "label"
-    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+  const renderContent = entry => {
+    if (isPieChart) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
+        className: "pie-chart-label"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "status"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "dot",
+        style: {
+          backgroundColor: entry?.payload?.color
+        }
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color,
+          textTransform: 'capitalize'
+        }
+      }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+        className: "value"
+      }, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
+        className: "percentage-title"
+      }, `${entry?.payload?.percentage}%`)));
+    }
+    return /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`)));
+    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`);
+  };
+  if (active && payload && payload?.length) {
+    const newPayload = payload.filter(item => item?.name !== 'bounds');
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "label"
+    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => renderContent(entry)));
   }
   return null;
 };
@@ -87,11 +114,16 @@ CustomTooltipContent.propTypes = {
   /**
    *The label value which is active now, usually calculated internally.
    */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  /**
+   * Flag on whether the chart is a pie chart or not
+   */
+  isPieChart: _propTypes.default.bool
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
   isDateValue: true,
-  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
+  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE,
+  isPieChart: false
 };
 var _default = exports.default = CustomTooltipContent;

package/dist/cjs/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -5,6 +5,9 @@ $default-padding: 1rem;
 $default-text-font-size: calc(var(--s-1) * 1rem);
 $default-border-radius: .25rem;
 $default-border-line-width: .0625rem;
+$default-legend-dot-width: .5rem;
+$default-legend-dot-height: .5rem;
+$default-legend-dot-margin-right: .3125rem;
 
 .#{bem.$base} {
   &.custom-tooltip-content {
@@ -20,3 +23,4 @@ $default-border-line-width: .0625rem;
     }
   }
 }
+

package/dist/cjs/a/Charts/PieChart/PieChart.js

@@ -62,9 +62,27 @@ const PieChart = _ref => {
     strokeWidth: 0
   }))), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      isDateValue: false
+      isDateValue: false,
+      isPieChart: true
     })
-  }))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    style: {}
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "-1.2em",
+    fontSize: "14",
+    fill: "grey"
+  }, "Total"), /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "1.2em",
+    fill: "var(--heading)",
+    fontSize: "22"
+  }, `${total}`)))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+    key: id,
     colorsArray: colors,
     yKeysArray: formattedData,
     capitalizedLegend: true,
@@ -93,7 +111,7 @@ PieChart.defaultProps = {
   className: undefined,
   width: '100%',
   height: 300,
-  innerRadius: '0%',
+  innerRadius: '50%',
   outerRadius: '100%'
 };
 var _default = exports.default = PieChart;

package/dist/cjs/a/Charts/PieChart/styles.scss

@@ -3,7 +3,11 @@
 $default-margin: 1rem;
 $default-padding: 1rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$soft-box-shadow: 0 .25rem 1rem var(--soft-shadow);
 $default-text-font-size: calc(var(--s-1) * 1rem);
+$default-legend-dot-width: .75rem;
+$default-legend-dot-height: .75rem;
+$default-legend-dot-margin-right: .3125rem;
 
 .#{bem.$base} {
   &.pie-chart {
@@ -13,6 +17,90 @@ $default-text-font-size: calc(var(--s-1) * 1rem);
     margin: $default-margin 0;
     padding: $default-padding;
 
+    .custom-legend {
+      .item {
+        padding-top: 0;
+      }
+
+      .title .dot {
+        height: $default-legend-dot-height;
+        width: $default-legend-dot-width;
+      }
+
+      .title .text {
+        font-size: calc($default-text-font-size * 1.5);
+      }
+
+      .sub-title-percentage-container {
+        align-items: center;
+        display: flex;
+        gap: .8rem;
+        margin-left: .5rem;
+        width: fit-content;
+      }
+
+      .sub-title-percentage-container .sub-title {
+        font-size: calc($default-text-font-size * 1.25);
+      }
+
+      .sub-title-percentage-container .percentage-title {
+        font-size: calc($default-text-font-size * 1);
+      }
+    }
+
+    .custom-tooltip-content {
+      box-shadow: $soft-box-shadow;
+
+      p {
+        color: var(--hard-paragraph);
+        font-size: calc($default-text-font-size * .8);
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .pie-chart-label {
+        align-items: center;
+        display: flex;
+        gap: 1.25rem;
+        justify-content: flex-start;
+
+        .status {
+          align-items: center;
+          display: flex;
+          gap: .1rem;
+        }
+
+        .label {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .value {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .percentage-title {
+          color: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 300;
+          text-transform: capitalize;
+        }
+      }
+    }
+
     .chart-header {
       align-items: center;
       display: flex;

package/dist/cjs/a/HamburgerButton/styles.scss

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
+@use "sass:list";
 
 /*
 $hamburger-padding-x           : 15px !default;
@@ -22,17 +24,157 @@ $hamburger-hover-filter       : opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 */
 
-$hamburgers-types:(
-  squeeze
-);
-$hamburger-layer-color         : var(--x);
-$hamburger-padding-x           : .5em;
-$hamburger-padding-y           : .5em;
+// Define the variables to be used with the hamburgers library
+$hamburger-types: (squeeze);
+$hamburger-layer-color: var(--x);
+$hamburger-padding-x: .5em;
+$hamburger-padding-y: .5em;
 
-// Open the following file for the template
+// Additional hamburger variables with defaults
+$hamburger-layer-width: 40px !default;
+$hamburger-layer-height: 4px !default;
+$hamburger-layer-spacing: 6px !default;
+$hamburger-layer-border-radius: 4px !default;
+$hamburger-hover-opacity: .7 !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+// Base Hamburger Styles
+// ==================================================
+.hamburger {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+
+  // Normalize (<button>)
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  text-transform: none;
+  transition-duration: .15s;
+
+  transition-property: opacity, filter;
+  transition-timing-function: linear;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.hamburger-box {
+  display: inline-block;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  position: relative;
+  width: $hamburger-layer-width;
+}
+
+.hamburger-inner {
+  display: block;
+  margin-top: math.div($hamburger-layer-height, -2);
+  top: 50%;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    height: $hamburger-layer-height;
+    position: absolute;
+    transition-duration: .15s;
+    transition-property: transform;
+    transition-timing-function: ease;
+    width: $hamburger-layer-width;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}
+
+// Squeeze Type
+// ==================================================
+
+@if list.index($hamburger-types, squeeze) {
+  /*
+    * Squeeze
+    */
+  .hamburger-squeeze {
+    .hamburger-inner {
+      transition-duration: .1s;
+      transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+
+      &::before {
+        transition: top .1s .12s ease,
+          opacity .1s ease;
+      }
+
+      &::after {
+        transition: bottom .1s .12s ease,
+          transform .1s cubic-bezier(.55, .055, .675, .19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: .12s;
+        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+        &::before {
+          opacity: 0;
+          top: 0;
+          transition: top .1s ease,
+            opacity .1s .12s ease;
+        }
 
-@import "hamburgers/_sass/hamburgers/hamburgers";
-@import "hamburgers/_sass/hamburgers/types/squeeze";
+        &::after {
+          bottom: 0;
+          transform: rotate(-90deg);
+          transition: bottom .1s ease,
+            transform .1s .12s cubic-bezier(.215, .61, .355, 1);
+        }
+      }
+    }
+  }
+}
 
 /*
 .#{bem.$base}.hamburger-button{

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -44,7 +44,10 @@ const XMLEditor = _ref => {
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_state.Prec.highest(_view.keymap.of([{
+        key: 'Enter',
+        run: view => (0, _commands.insertNewlineAndIndent)(view)
+      }])), _view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), _view.EditorView.focusChangeEffect.of((state, focused) => {

package/dist/cjs/f/fields/EditorInput/EditorInput.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
+var _lexical = require("lexical");
 var _formik = require("formik");
 var _LexicalComposer = require("@lexical/react/LexicalComposer");
 var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
@@ -68,7 +69,8 @@ const EditorInput = _ref2 => {
     disabled,
     showDebugger,
     setEditorState,
-    setPlainTextKey
+    setPlainTextKey,
+    validate
     // ...otherProps
   } = _ref2;
   const [field,,] = (0, _formik.useField)(name);
@@ -115,6 +117,11 @@ const EditorInput = _ref2 => {
   };
   const onChange = state => {
     setFieldValue(name, JSON.stringify(state));
+    validate?.(state.read(() => {
+      const root = (0, _lexical.$getRoot)();
+      const textContent = root.getTextContent();
+      return textContent;
+    }));
   };
   const initialConfig = {
     nameSpace: name,

package/dist/es/a/Charts/AreaChart/AreaChart.js

@@ -47,6 +47,7 @@ const AreaChart = ({
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(CustomLegend, {
+    key: id,
     colorsArray: colors,
     yKeysArray: yKeys,
     capitalizedLegend: capitalizedLegend

package/dist/es/a/Charts/BarChart/BarChart.js

@@ -40,6 +40,7 @@ const BarChart = ({
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(CustomLegend, {
+    key: id,
     colorsArray: selectedYLabels.map(item => item.color),
     yKeysArray: selectedYLabels.map(item => item.label),
     capitalizedLegend: capitalizedLegend

package/dist/es/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -29,9 +29,13 @@ const CustomLegend = ({
   }
 }), /*#__PURE__*/React.createElement("span", {
   className: "text"
-}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("div", {
+  className: "sub-title-percentage-container"
+}, /*#__PURE__*/React.createElement("span", {
   className: "sub-title"
-}, getLegendItemSubtitle(key)))));
+}, getLegendItemSubtitle(key)), key.percentage && /*#__PURE__*/React.createElement("span", {
+  className: "percentage-title"
+}, `${key.percentage}%`)))));
 CustomLegend.propTypes = {
   /**
    * The id of the dropdown component.

package/dist/es/a/Charts/Common/CustomLegend/styles.scss

@@ -24,7 +24,6 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
       min-width: fit-content;
 
       .item {
-        box-shadow: $default-box-shadow;
         padding-top: $default-padding;
       }
     }
@@ -55,12 +54,21 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
         }
       }
 
+
+
       .sub-title {
         color: var(--heading);
         display: flex;
         font-size: calc($default-text-font-size * 1.2);
         font-weight: 500;
-        justify-content: flex-end;
+        justify-content: flex-start;
+        margin-left: 1rem;
+      }
+
+      .percentage-title {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+        justify-content: flex-start;
       }
     }
   }

package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -13,7 +13,8 @@ const CustomTooltipContent = ({
   isDateValue,
   active,
   payload,
-  label
+  label,
+  isPieChart
 }) => {
   const formatLabelValue = value => {
     if (isTimeFormat) {
@@ -25,21 +26,47 @@ const CustomTooltipContent = ({
     }
     return value;
   };
-  if (active && payload && payload.length) {
-    const newPayload = payload.filter(item => item.name !== 'bounds');
-    return /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "label"
-    }, isDateValue ? formatDate(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+  const renderContent = entry => {
+    if (isPieChart) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
+        className: "pie-chart-label"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "status"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "dot",
+        style: {
+          backgroundColor: entry?.payload?.color
+        }
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color,
+          textTransform: 'capitalize'
+        }
+      }, `${snakeCaseToTitleCase(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+        className: "value"
+      }, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
+        className: "percentage-title"
+      }, `${entry?.payload?.percentage}%`)));
+    }
+    return /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`)));
+    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`);
+  };
+  if (active && payload && payload?.length) {
+    const newPayload = payload.filter(item => item?.name !== 'bounds');
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "label"
+    }, isDateValue ? formatDate(label, dateFormat) : label), newPayload.map(entry => renderContent(entry)));
   }
   return null;
 };
@@ -77,11 +104,16 @@ CustomTooltipContent.propTypes = {
   /**
    *The label value which is active now, usually calculated internally.
    */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  /**
+   * Flag on whether the chart is a pie chart or not
+   */
+  isPieChart: PropTypes.bool
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
   isDateValue: true,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE
+  dateFormat: DATE_FORMATS.HUMAN_READABLE,
+  isPieChart: false
 };
 export default CustomTooltipContent;