@majoo-ui/react 1.56.3 → 1.57.0

package/index.umd.js

@@ -1334,7 +1334,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  var colors$5 = core.foundations.colors;
+  var colors$7 = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -3278,7 +3278,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$5.iconSecondary,
+      color: colors$7.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -3719,7 +3719,7 @@
       columnNumber: 7
     }
   }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3806,7 +3806,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CloseOutline, {
-      color: colors$5.iconSecondary,
+      color: colors$7.iconSecondary,
       size: "16px",
       __self: undefined,
       __source: {
@@ -7847,7 +7847,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: 16,
-      color: colors$5.iconSecondary,
+      color: colors$7.iconSecondary,
       style: {
         verticalAlign: 'middle'
       },
@@ -8381,7 +8381,7 @@
   const _excluded$e = ["size", "onChange", "css", "disabled", "withDebounce", "defaultValue"];
   var _jsxFileName$z = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
   const {
-    colors: colors$4
+    colors: colors$6
   } = core.foundations;
   const InputSearchbox = _ref => {
     var _props$value;
@@ -8457,7 +8457,7 @@
       }
     })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
       children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
-        color: colors$4.iconSecondary,
+        color: colors$6.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$z,
@@ -9363,7 +9363,7 @@
             readOnly: readOnly
           }, {
             children: jsxRuntime.jsx(icons.CaretDownOutline, {
-              color: readOnly ? colors$5.gray300 : iconColor
+              color: readOnly ? colors$7.gray300 : iconColor
             }, void 0)
           }), void 0);
         };
@@ -9575,7 +9575,7 @@
                           }, {
                             children: jsxRuntime.jsx(icons.CircleInfoOutline, {
                               size: "16px",
-                              color: colors$5.iconDisable,
+                              color: colors$7.iconDisable,
                               style: {
                                 verticalAlign: 'text-bottom'
                               }
@@ -11610,7 +11610,7 @@
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
-      color: disabled || readOnly ? colors$5.iconDisable : colors$5.iconPrimary,
+      color: disabled || readOnly ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11709,7 +11709,7 @@
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
-      color: colors$5.iconSecondary,
+      color: colors$7.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11717,7 +11717,7 @@
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$5.iconSecondary,
+      color: colors$7.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11874,7 +11874,7 @@
           columnNumber: 23
         }
       }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$5.iconDisable,
+        color: colors$7.iconDisable,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
@@ -11882,7 +11882,7 @@
           columnNumber: 27
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
-        color: colors$5.iconGreen,
+        color: colors$7.iconGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$w,
@@ -11947,7 +11947,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
       size: "16px",
-      color: colors$5.iconDisable,
+      color: colors$7.iconDisable,
       style: {
         verticalAlign: 'text-bottom'
       },
@@ -12283,7 +12283,7 @@
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CirclePlusOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -12579,7 +12579,7 @@
         }, {
           children: jsxRuntime.jsx(icons.SortingOutline, {
             size: 16,
-            color: colors$5.iconSecondary
+            color: colors$7.iconSecondary
           }, void 0)
         }), void 0)]
       }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
@@ -12809,18 +12809,18 @@
     }), void 0);
   });
 
-  var colors$3 = core.foundations.colors;
+  var colors$5 = core.foundations.colors;
   function InputOTP(props) {
     var isError = props.isError;
     var inputStyles = {
       width: 48,
       height: 48,
-      border: "1px solid ".concat(isError ? colors$3.textRed : colors$3.gray300),
+      border: "1px solid ".concat(isError ? colors$5.textRed : colors$5.gray300),
       borderRadius: 4,
       fontWeight: 600,
       fontSize: 24,
       textAlign: 'center',
-      color: colors$3.textPrimary
+      color: colors$5.textPrimary
     };
     return jsxRuntime.jsx(OTPInput__default["default"], __assign({
       inputStyles: inputStyles
@@ -13088,7 +13088,7 @@
       }, {
         children: jsxRuntime.jsx(icons.MinusOutline, {
           size: 24,
-          color: disabled || disabledDecrement ? colors$5.iconDisable : colors$5.primary500
+          color: disabled || disabledDecrement ? colors$7.iconDisable : colors$7.primary500
         }, void 0)
       }), void 0), jsxRuntime.jsx(Input$4, {
         ref: ref,
@@ -13111,7 +13111,7 @@
       }, {
         children: jsxRuntime.jsx(icons.PlusOutline, {
           size: 24,
-          color: disabled || disabledIncrement ? colors$5.iconDisable : colors$5.primary500
+          color: disabled || disabledIncrement ? colors$7.iconDisable : colors$7.primary500
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -13849,7 +13849,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -13878,7 +13878,7 @@
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$r,
@@ -13938,7 +13938,7 @@
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      color: activeTabs === value || isIconHovered ? colors$5.iconGreen : colors$5.iconDisable
+      color: activeTabs === value || isIconHovered ? colors$7.iconGreen : colors$7.iconDisable
     }), (!icon || activeTabs === value) && children)));
   };
   const TabsContent$1 = _ref4 => {
@@ -14210,7 +14210,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLeftOutline, {
-        color: colors$5.iconGreen,
+        color: colors$7.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
@@ -14240,7 +14240,7 @@
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
-        color: colors$5.iconGreen,
+        color: colors$7.iconGreen,
         __self: this,
         __source: {
           fileName: _jsxFileName$q,
@@ -17090,7 +17090,7 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
       children: /*#__PURE__*/React__default["default"].createElement(icons.TimeOutline, {
-        color: disabled ? colors$5.iconDisable : colors$5.iconPrimary,
+        color: disabled ? colors$7.iconDisable : colors$7.iconPrimary,
         __self: this,
         __source: {
           fileName: _jsxFileName$l,
@@ -18370,7 +18370,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: currentPage === 1 ? colors$5.iconDisable : colors$5.iconPrimary,
+      color: currentPage === 1 ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -18423,7 +18423,7 @@
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: currentPage === totalPages ? colors$5.iconDisable : colors$5.iconPrimary,
+      color: currentPage === totalPages ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
@@ -18578,7 +18578,7 @@
         columnNumber: 13
       }
     }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: colors$5.gray400,
+      color: colors$7.gray400,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
@@ -18816,23 +18816,23 @@
     userSelect: 'none',
     color: '$textPrimary',
     '&[data-disabled]': {
-      color: colors$5.gray400,
+      color: colors$7.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer',
-      backgroundColor: colors$5.gray100
+      backgroundColor: colors$7.gray100
     },
     '&:active': {
-      backgroundColor: colors$5.gray150
+      backgroundColor: colors$7.gray150
     },
     '&:focus': {
-      backgroundColor: colors$5.gray100
+      backgroundColor: colors$7.gray100
     }
   });
   var ContextMenuSeparator = styled('div', {
     height: 1,
-    backgroundColor: colors$5.gray150,
+    backgroundColor: colors$7.gray150,
     margin: 5
   });
 
@@ -19131,7 +19131,7 @@
                             justify: "between",
                             gap: 5,
                             css: {
-                              backgroundColor: colors$5.bgGray,
+                              backgroundColor: colors$7.bgGray,
                               padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
                               borderBottom: '1pt solid $bgBorder',
                               alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -19154,7 +19154,7 @@
                         gap: 3,
                         css: {
                           height: '40px',
-                          backgroundColor: colors$5.bgGray,
+                          backgroundColor: colors$7.bgGray,
                           paddingRight: '$spacing-04'
                         }
                       }, {
@@ -20143,7 +20143,7 @@
                           children: [leftAddOnCells.map(function (_, index) {
                             return jsxRuntime.jsx("td", {
                               style: {
-                                backgroundColor: colors$5.bgGray
+                                backgroundColor: colors$7.bgGray
                               }
                             }, index);
                           }), jsxRuntime.jsxs(React__namespace.Fragment, {
@@ -21288,7 +21288,7 @@
   });
   const StyledOverlay = styled(ADialog__namespace.Overlay, {
     zIndex: 1,
-    backgroundColor: colors$5.bgDimmer,
+    backgroundColor: colors$7.bgDimmer,
     position: 'fixed',
     inset: 0,
     '@media (prefers-reduced-motion: no-preference)': {
@@ -21321,14 +21321,14 @@
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    color: colors$5.gray900,
+    color: colors$7.gray900,
     fontSize: 17,
     fontWeight: 500
   });
   const StyledDescription$1 = styled(ADialog__namespace.Description, {
     mx: 24,
     my: 20,
-    color: colors$5.gray900,
+    color: colors$7.gray900,
     fontSize: 15,
     lineHeight: 1.5
   });
@@ -21978,17 +21978,17 @@
     position: 'relative',
     userSelect: 'none',
     '&[data-disabled]': {
-      color: colors$5.gray400,
+      color: colors$7.gray400,
       pointerEvents: 'none'
     },
     '&:hover': {
       cursor: 'pointer'
     },
     '&:active': {
-      backgroundColor: colors$5.gray150
+      backgroundColor: colors$7.gray150
     },
     '&:focus': {
-      backgroundColor: colors$5.gray100
+      backgroundColor: colors$7.gray100
     }
   };
   const StyledItem = styled(DropdownMenuPrimitive__namespace.Item, Object.assign({}, itemStyles));
@@ -22005,11 +22005,11 @@
     padding: '8px 0',
     fontSize: 12,
     lineHeight: '25px',
-    color: colors$5.gray700
+    color: colors$7.gray700
   });
   const StyledSeparator = styled(DropdownMenuPrimitive__namespace.Separator, {
     height: 1,
-    backgroundColor: colors$5.gray150,
+    backgroundColor: colors$7.gray150,
     margin: 5
   });
   const StyledItemIndicator = styled(DropdownMenuPrimitive__namespace.ItemIndicator, {
@@ -22106,7 +22106,7 @@
       color: 'white'
     },
     '[data-disabled] &': {
-      color: colors$5.gray400
+      color: colors$7.gray400
     }
   });
   const StyledDropdown = styled(Button$4, {
@@ -25895,7 +25895,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLeftOutline, {
-          color: colors$5.btnPrimary
+          color: colors$7.btnPrimary
         }, void 0)
       }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
         align: "center",
@@ -25955,7 +25955,7 @@
         buttonType: "secondary"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
-          color: colors$5.btnPrimary
+          color: colors$7.btnPrimary
         }, void 0)
       }), void 0)]
     }), void 0);
@@ -29034,7 +29034,7 @@
             marginRight: 9
           },
           size: "24",
-          color: colors$5.bgGreen,
+          color: colors$7.bgGreen,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29055,7 +29055,7 @@
             margin: '0 9px'
           },
           size: "20",
-          color: colors$5.iconSecondary,
+          color: colors$7.iconSecondary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29127,7 +29127,7 @@
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
-          color: colors$5.iconPrimary,
+          color: colors$7.iconPrimary,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
@@ -29554,10 +29554,10 @@
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
-      borderLeft: `4px solid ${colors$5.primary500} !important`
+      borderLeft: `4px solid ${colors$7.primary500} !important`
     },
     '& .active-scroll-spy .link-title': {
-      color: `${colors$5.primary500} !important`
+      color: `${colors$7.primary500} !important`
     },
     '@md': {
       display: 'unset'
@@ -29565,7 +29565,7 @@
   });
   const MobileContainer = styled(Flex$1, {
     backgroundColor: '$white',
-    border: `1px solid ${colors$5.gray150}`,
+    border: `1px solid ${colors$7.gray150}`,
     borderRadius: 8,
     padding: '8px 8px',
     width: '100%',
@@ -29692,7 +29692,7 @@
           marginLeft: '-4px !important',
           borderLeftWidth: '4px !important',
           borderLeftStyle: 'solid !important',
-          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$5.primary500 : 'transparent'} !important`,
+          borderLeftColor: `${(item === null || item === void 0 ? void 0 : item.id) === activeId ? colors$7.primary500 : 'transparent'} !important`,
           paddingLeft: '16px !important',
           minHeight: 25
         },
@@ -48238,11 +48238,11 @@
       var getColor = function getColor(state) {
         switch (state) {
           case 'error':
-            return colors$5.red400;
+            return colors$7.red400;
           case 'active':
-            return colors$5.primary500;
+            return colors$7.primary500;
           default:
-            return colors$5.gray150;
+            return colors$7.gray150;
         }
       };
       var iconProps = {
@@ -49089,7 +49089,7 @@
     }), void 0);
   };
 
-  var colors$2 = core.foundations.colors;
+  var colors$4 = core.foundations.colors;
   var ComparatorItem = function ComparatorItem(props) {
     var dataKey = props.dataKey,
       color = props.color,
@@ -49163,7 +49163,7 @@
             }
           }, {
             children: jsxRuntime.jsx(icons.CloseOutline, {
-              color: colors$2.textSecondary,
+              color: colors$4.textSecondary,
               size: 24
             }, void 0)
           }), void 0)]
@@ -49188,7 +49188,7 @@
     }), void 0);
   };
 
-  var colors$1 = core.foundations.colors;
+  var colors$3 = core.foundations.colors;
   var ComparatorController = function ComparatorController(_a) {
     var option = _a.option,
       onComparatorAdd = _a.onComparatorAdd,
@@ -49257,7 +49257,7 @@
           },
           leftIcon: jsxRuntime.jsx(icons.PlusOutline, {
             size: 24,
-            color: colors$1.primary500
+            color: colors$3.primary500
           }, void 0),
           onClick: function () {
             return handleToggle();
@@ -49582,7 +49582,7 @@
     legendData: []
   };
 
-  var colors = core.foundations.colors;
+  var colors$2 = core.foundations.colors;
   var Container$2 = styled('div', {
     '@sm': {
       overflowY: 'hidden',
@@ -49733,7 +49733,7 @@
         setFilteredData([{
           dataKey: 'novalue',
           name: 'novalue',
-          color: colors.chartYellow,
+          color: colors$2.chartYellow,
           hide: true
         }]);
         setIsComparator(false);
@@ -49758,7 +49758,7 @@
           cx: cx,
           cy: cy,
           r: 10,
-          fill: colors.white,
+          fill: colors$2.white,
           stroke: fill,
           strokeWidth: 3
         }, void 0);
@@ -49878,7 +49878,7 @@
                         cx: cx,
                         cy: cy,
                         r: 10,
-                        fill: colors.white,
+                        fill: colors$2.white,
                         stroke: fill,
                         strokeWidth: 3
                       }, void 0);
@@ -50219,7 +50219,7 @@
                         }
                       }, void 0) : jsxRuntime.jsx(icons.MinusOutline, {
                         size: 16,
-                        color: colors$5.iconDisable
+                        color: colors$7.iconDisable
                       }, void 0)
                     }, void 0)
                   }), index + indexSubRow + 'tb-cell-collapse');
@@ -50525,9 +50525,9 @@
     function getBaseColor(color) {
       switch (color) {
         case 'primary':
-          return colors$5.gray300;
+          return colors$7.gray300;
         default:
-          return colors$5.gray150;
+          return colors$7.gray150;
       }
     }
     function getSize(size) {
@@ -50690,9 +50690,9 @@
           }
         }, {
           children: [showAllTags ? jsxRuntime.jsx(icons.ChevronUpOutline, {
-            color: colors$5.iconSecondary
+            color: colors$7.iconSecondary
           }, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {
-            color: colors$5.iconSecondary
+            color: colors$7.iconSecondary
           }, void 0), jsxRuntime.jsx(Paragraph, __assign({
             css: {
               fontWeight: 600,
@@ -50718,6 +50718,522 @@
     counterLabel: 'produk dipilih'
   };
 
+  var colors$1 = core.foundations.colors;
+  var renderLegend$1 = function renderLegend(formattedData, legend, subtitle, tickFormatter) {
+    return jsxRuntime.jsxs(Box, __assign({
+      css: {
+        marginTop: '$spacing-09'
+      }
+    }, {
+      children: [subtitle && jsxRuntime.jsx(Flex$1, __assign({
+        justify: "center"
+      }, {
+        children: jsxRuntime.jsx(Heading, __assign({
+          css: {
+            marginBottom: '$spacing-06'
+          },
+          heading: "sectionTitle"
+        }, {
+          children: subtitle
+        }), void 0)
+      }), void 0), formattedData.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
+        direction: "column",
+        gap: 5
+      }, {
+        children: formattedData.map(function (data, index) {
+          var _a, _b;
+          return jsxRuntime.jsxs(Box, {
+            children: [jsxRuntime.jsxs(Flex$1, __assign({
+              justify: "between"
+            }, {
+              children: [jsxRuntime.jsxs(Flex$1, __assign({
+                align: "center"
+              }, {
+                children: [jsxRuntime.jsx(Box, {
+                  css: {
+                    backgroundColor: data.color,
+                    borderRadius: '50%',
+                    height: 12,
+                    width: 12,
+                    display: 'inline-block',
+                    marginRight: '$spacing-03'
+                  }
+                }, void 0), jsxRuntime.jsx(Box, __assign({
+                  css: {
+                    width: 120
+                  }
+                }, {
+                  children: jsxRuntime.jsx(Text$1, __assign({
+                    variant: "label",
+                    color: "secondary"
+                  }, {
+                    children: data.name
+                  }), void 0)
+                }), void 0)]
+              }), void 0), legend.showTotal && jsxRuntime.jsx(Text$1, __assign({
+                variant: "label",
+                color: "secondary"
+              }, {
+                children: tickFormatter ? tickFormatter === null || tickFormatter === void 0 ? void 0 : tickFormatter((_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total) : (_b = formattedData[index]) === null || _b === void 0 ? void 0 : _b.total
+              }), void 0)]
+            }), void 0), jsxRuntime.jsx(Separator$2, {
+              css: {
+                marginTop: '$spacing-03'
+              }
+            }, void 0)]
+          }, index);
+        })
+      }), void 0)]
+    }), void 0);
+  };
+  var DEFAULT_DATA = [{
+    name: 'none',
+    total: 0,
+    color: colors$1.chartGreen
+  }];
+  function BarChartComponent(_a) {
+    var _b, _c;
+    var css = _a.css,
+      data = _a.data,
+      legend = _a.legend,
+      title = _a.title,
+      subtitle = _a.subtitle,
+      tooltip = _a.tooltip,
+      direction = _a.direction,
+      tickFormatter = _a.tickFormatter,
+      label = _a.label,
+      yAxis = _a.yAxis;
+    var isHorizontal = direction === 'horizontal';
+    var MIN_HEIGHT = 350;
+    var MIN_WIDTH = 500;
+    var formattedData = data.length ? data : DEFAULT_DATA;
+    var CustomTooltip = function CustomTooltip(_a) {
+      var _b;
+      var _c = _a.payload,
+        payload = _c === void 0 ? {} : _c,
+        _d = _a.active,
+        active = _d === void 0 ? false : _d;
+      if (active) {
+        var _e = payload[0].payload,
+          total = _e.total,
+          name_1 = _e.name;
+        return jsxRuntime.jsxs(Box, __assign({
+          css: {
+            backgroundColor: '$textContent',
+            color: '$white',
+            borderRadius: '$sm',
+            padding: '$spacing-02',
+            flexDirection: 'column'
+          }
+        }, {
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "placeholder",
+            color: "disable",
+            css: {
+              fontSize: 11
+            }
+          }, {
+            children: name_1
+          }), void 0), jsxRuntime.jsx(Paragraph, __assign({
+            paragraph: "shortContentRegular",
+            css: {
+              color: '$white',
+              fontSize: 12
+            }
+          }, {
+            children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) ? (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) === null || _b === void 0 ? void 0 : _b.call(tooltip, total) : total
+          }), void 0)]
+        }), void 0);
+      }
+      return null;
+    };
+    return jsxRuntime.jsxs(Box, {
+      children: [title && jsxRuntime.jsx(Heading, __assign({
+        css: {
+          marginBottom: '$spacing-07'
+        },
+        heading: "sectionTitle"
+      }, {
+        children: title
+      }), void 0), jsxRuntime.jsx(Box, __assign({
+        css: __assign({
+          width: MIN_WIDTH,
+          height: MIN_HEIGHT
+        }, css)
+      }, {
+        children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
+          children: jsxRuntime.jsxs(recharts.BarChart, __assign({
+            width: MIN_WIDTH,
+            height: MIN_HEIGHT,
+            data: formattedData,
+            layout: isHorizontal ? 'vertical' : 'horizontal'
+          }, {
+            children: [jsxRuntime.jsx(recharts.CartesianGrid, {
+              stroke: colors$1.gray150,
+              vertical: isHorizontal,
+              horizontal: !isHorizontal
+            }, void 0), isHorizontal && jsxRuntime.jsx(recharts.XAxis, __assign({
+              type: "number",
+              stroke: colors$1.textSecondary,
+              fontSize: 12,
+              axisLine: false
+            }, isHorizontal && {
+              tickFormatter: tickFormatter
+            }), void 0), jsxRuntime.jsx(recharts.YAxis, __assign({
+              axisLine: false,
+              type: isHorizontal ? 'category' : 'number',
+              dataKey: isHorizontal ? 'name' : 'total',
+              width: isHorizontal ? 100 : 50,
+              hide: !(yAxis === null || yAxis === void 0 ? void 0 : yAxis.show),
+              stroke: colors$1.textSecondary,
+              fontSize: 12
+            }, !isHorizontal && {
+              tickFormatter: tickFormatter
+            }), void 0), data.length > 0 && jsxRuntime.jsx(recharts.Tooltip, {
+              wrapperStyle: {
+                outline: 'none'
+              },
+              cursor: {
+                fill: 'transparent'
+              },
+              content: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) ? (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) === null || _b === void 0 ? void 0 : _b.call(tooltip) : jsxRuntime.jsx(CustomTooltip, {}, void 0)
+            }, void 0), (legend === null || legend === void 0 ? void 0 : legend.show) && jsxRuntime.jsx(recharts.Legend, {
+              content: renderLegend$1(formattedData, legend, subtitle, tickFormatter)
+            }, void 0), jsxRuntime.jsxs(recharts.Bar, __assign({
+              dataKey: "total",
+              barSize: 12,
+              radius: 50
+            }, {
+              children: [formattedData.map(function (item) {
+                return jsxRuntime.jsx(recharts.Cell, {
+                  fill: item.color || colors$1.chartGreen
+                }, item.name);
+              }), (label === null || label === void 0 ? void 0 : label.show) && jsxRuntime.jsx(recharts.LabelList, {
+                style: {
+                  marginLeft: '-8px'
+                },
+                dataKey: (label === null || label === void 0 ? void 0 : label.dataKey) || 'total',
+                formatter: label === null || label === void 0 ? void 0 : label.formatter,
+                position: (label === null || label === void 0 ? void 0 : label.position) || 'top',
+                content: (_c = label === null || label === void 0 ? void 0 : label.render) === null || _c === void 0 ? void 0 : _c.call(label),
+                fill: colors$1.textDisable,
+                fontSize: 12
+              }, void 0)]
+            }), void 0)]
+          }), void 0)
+        }, void 0)
+      }), void 0)]
+    }, void 0);
+  }
+  BarChartComponent.defaultProps = {
+    data: [],
+    legend: {
+      show: true,
+      showTotal: true
+    },
+    yAxis: {
+      show: true
+    }
+  };
+
+  var colors = core.foundations.colors;
+  var renderActiveShape = function renderActiveShape(props, avatar, acronym, validAvatar, activeRef) {
+    var cx = props.cx,
+      cy = props.cy,
+      innerRadius = props.innerRadius,
+      outerRadius = props.outerRadius,
+      startAngle = props.startAngle,
+      endAngle = props.endAngle,
+      fill = props.fill;
+    var IMG_WIDHT = 40;
+    var IMG_HEIGHT = 40;
+    return jsxRuntime.jsx(React__default["default"].Fragment, {
+      children: jsxRuntime.jsxs("g", {
+        children: [jsxRuntime.jsx("clipPath", __assign({
+          id: "circleAvatar"
+        }, {
+          children: jsxRuntime.jsx("circle", {
+            cx: cx,
+            cy: cy,
+            r: IMG_WIDHT / 2,
+            fill: "#FFFFFF"
+          }, void 0)
+        }), void 0), validAvatar ? jsxRuntime.jsx("image", {
+          x: cx - IMG_WIDHT / 2,
+          y: cy - IMG_HEIGHT / 2,
+          width: IMG_WIDHT,
+          height: IMG_HEIGHT,
+          href: avatar,
+          clipPath: "url(#circleAvatar)"
+        }, void 0) : jsxRuntime.jsxs(React__default["default"].Fragment, {
+          children: [jsxRuntime.jsx("circle", {
+            cx: cx,
+            cy: cy,
+            r: IMG_WIDHT / 2,
+            fill: core.foundations.colors.bgBorder
+          }, void 0), jsxRuntime.jsx("text", __assign({
+            x: cx,
+            y: cy,
+            textAnchor: "middle",
+            alignmentBaseline: "middle",
+            fontFamily: "main",
+            fontWeight: "600"
+          }, {
+            children: acronym
+          }), void 0)]
+        }, void 0), jsxRuntime.jsx(recharts.Sector, {
+          cx: cx,
+          cy: cy,
+          innerRadius: innerRadius,
+          outerRadius: activeRef.current ? outerRadius + 10 : outerRadius,
+          startAngle: startAngle,
+          endAngle: endAngle,
+          fill: fill,
+          style: {
+            outline: 'none'
+          }
+        }, void 0)]
+      }, void 0)
+    }, void 0);
+  };
+  var renderLegend = function renderLegend(formattedData, legend, subtitle) {
+    return jsxRuntime.jsxs(Box, {
+      children: [subtitle && jsxRuntime.jsx(Flex$1, __assign({
+        css: {
+          margin: '$spacing-06'
+        },
+        justify: "center"
+      }, {
+        children: jsxRuntime.jsx(Heading, __assign({
+          heading: "sectionTitle"
+        }, {
+          children: subtitle
+        }), void 0)
+      }), void 0), formattedData.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
+        direction: "column",
+        gap: 5
+      }, {
+        children: formattedData === null || formattedData === void 0 ? void 0 : formattedData.map(function (data, index) {
+          var _a;
+          return jsxRuntime.jsxs(Box, {
+            children: [jsxRuntime.jsxs(Flex$1, __assign({
+              justify: "between"
+            }, {
+              children: [jsxRuntime.jsxs(Flex$1, __assign({
+                align: "center"
+              }, {
+                children: [jsxRuntime.jsx(Box, {
+                  css: {
+                    backgroundColor: data.color,
+                    borderRadius: '50%',
+                    height: 12,
+                    width: 12,
+                    display: 'inline-block',
+                    marginRight: '$spacing-03'
+                  }
+                }, void 0), jsxRuntime.jsx(Box, __assign({
+                  css: {
+                    width: 120
+                  }
+                }, {
+                  children: jsxRuntime.jsx(Text$1, __assign({
+                    variant: "label",
+                    color: "secondary"
+                  }, {
+                    children: data.name
+                  }), void 0)
+                }), void 0)]
+              }), void 0), (legend === null || legend === void 0 ? void 0 : legend.showTotal) && jsxRuntime.jsx(Text$1, __assign({
+                variant: "label",
+                color: "secondary"
+              }, {
+                children: (_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total
+              }), void 0)]
+            }), void 0), jsxRuntime.jsx(Separator$2, {
+              css: {
+                marginTop: '$spacing-03'
+              }
+            }, void 0)]
+          }, index);
+        })
+      }), void 0)]
+    }, void 0);
+  };
+  var PieChartComponent = function PieChartComponent(_a) {
+    var _b;
+    var data = _a.data,
+      css = _a.css,
+      avatarURL = _a.avatarURL,
+      avatarAcronym = _a.avatarAcronym,
+      validAvatar = _a.validAvatar,
+      legend = _a.legend,
+      isMobile = _a.isMobile,
+      tooltip = _a.tooltip,
+      showPercentage = _a.showPercentage,
+      title = _a.title,
+      subtitle = _a.subtitle;
+    var emptyData = [{
+      id: '0',
+      name: '',
+      total: 1,
+      color: core.foundations.colors.chartLightGray
+    }];
+    var dataChart = data.map(function (item) {
+      return __assign(__assign({}, item), {
+        total: Number(item.total)
+      });
+    });
+    var activeRef = React.useRef();
+    var formattedData = data.length > 0 ? dataChart : emptyData;
+    var _c = React.useState(0),
+      activeIndex = _c[0],
+      setActiveIndex = _c[1];
+    var CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+    var CONTAINER_WIDTH = isMobile ? 350 : 450;
+    var CHART_HEIGHT = 150;
+    var CHART_WIDTH = 450;
+    var CustomTooltip = function CustomTooltip(_a) {
+      var _b;
+      var _c = _a.payload,
+        payload = _c === void 0 ? {} : _c,
+        _d = _a.active,
+        active = _d === void 0 ? false : _d;
+      if (active) {
+        var _e = payload[0].payload,
+          total = _e.total,
+          name_1 = _e.name;
+        return jsxRuntime.jsxs(Box, __assign({
+          css: {
+            backgroundColor: '$textContent',
+            color: '$white',
+            borderRadius: '$sm',
+            padding: '$spacing-02',
+            flexDirection: 'column'
+          }
+        }, {
+          children: [jsxRuntime.jsx(Text$1, __assign({
+            variant: "placeholder",
+            color: "disable",
+            css: {
+              fontSize: 11
+            }
+          }, {
+            children: name_1
+          }), void 0), jsxRuntime.jsx(Paragraph, __assign({
+            paragraph: "shortContentRegular",
+            css: {
+              color: '$white',
+              fontSize: 12
+            }
+          }, {
+            children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) ? (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) === null || _b === void 0 ? void 0 : _b.call(tooltip, total) : total
+          }), void 0)]
+        }), void 0);
+      }
+      return null;
+    };
+    var RADIAN = Math.PI / 180;
+    var renderCustomizedLabel = function renderCustomizedLabel(_a) {
+      var cx = _a.cx,
+        cy = _a.cy,
+        midAngle = _a.midAngle,
+        innerRadius = _a.innerRadius,
+        outerRadius = _a.outerRadius,
+        percent = _a.percent;
+        _a.index;
+      var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+      var x = cx + radius * Math.cos(-midAngle * RADIAN);
+      var y = cy + radius * Math.sin(-midAngle * RADIAN);
+      return jsxRuntime.jsx("text", __assign({
+        x: x,
+        y: y,
+        fill: "white",
+        textAnchor: x > cx ? 'start' : 'end',
+        dominantBaseline: "central"
+      }, {
+        children: "".concat((percent * 100).toFixed(0), "%")
+      }), void 0);
+    };
+    return jsxRuntime.jsxs(Box, {
+      children: [title && jsxRuntime.jsx(Heading, __assign({
+        css: {
+          marginBottom: '$spacing-06'
+        },
+        heading: "sectionTitle"
+      }, {
+        children: title
+      }), void 0), jsxRuntime.jsx(Box, __assign({
+        css: __assign({
+          position: 'relative',
+          width: CONTAINER_WIDTH,
+          height: CONTAINER_HEIGHT
+        }, css)
+      }, {
+        children: jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({
+          width: "100%",
+          height: "100%"
+        }, {
+          children: jsxRuntime.jsxs(recharts.PieChart, __assign({
+            width: CHART_WIDTH,
+            height: CHART_HEIGHT
+          }, {
+            children: [jsxRuntime.jsx(recharts.Pie, __assign({
+              activeIndex: activeIndex,
+              activeShape: function (shape) {
+                return renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef);
+              },
+              data: formattedData,
+              cx: "50%",
+              cy: "50%",
+              innerRadius: 50,
+              outerRadius: 80,
+              dataKey: "total",
+              onMouseEnter: function (x) {
+                setActiveIndex(formattedData.findIndex(function (y) {
+                  return y.name === x.name;
+                }));
+                activeRef.current = true;
+              },
+              blendStroke: true
+            }, showPercentage && {
+              label: renderCustomizedLabel,
+              labelLine: false
+            }, {
+              children: formattedData.map(function (item) {
+                return jsxRuntime.jsx(recharts.Cell, {
+                  fill: item.color || colors.chartGreen
+                }, item.name);
+              })
+            }), void 0), data.length > 0 && jsxRuntime.jsx(recharts.Tooltip, {
+              wrapperStyle: {
+                outline: 'none'
+              },
+              cursor: true,
+              content: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) ? (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) === null || _b === void 0 ? void 0 : _b.call(tooltip) : jsxRuntime.jsx(CustomTooltip, {}, void 0)
+            }, void 0), Boolean(legend === null || legend === void 0 ? void 0 : legend.show) && jsxRuntime.jsx(recharts.Legend, __assign({}, (legend === null || legend === void 0 ? void 0 : legend.position) !== 'bottom' && {
+              verticalAlign: 'middle',
+              align: (legend === null || legend === void 0 ? void 0 : legend.position) || 'right',
+              layout: 'vertical'
+            }, {
+              content: renderLegend(formattedData, legend, subtitle)
+            }), void 0)]
+          }), void 0)
+        }), void 0)
+      }), void 0)]
+    }, void 0);
+  };
+  PieChartComponent.defaultProps = {
+    data: [],
+    avatarURL: undefined,
+    avatarAcronym: '',
+    validAvatar: false,
+    legend: {
+      data: [],
+      position: 'right'
+    },
+    isMobile: false
+  };
+
   var _jsxFileName = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/colors/Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
@@ -52240,6 +52756,7 @@
   exports.BannerDescription = BannerDescription;
   exports.BannerLink = BannerLink;
   exports.BannerTitle = BannerTitle;
+  exports.BarChart = BarChartComponent;
   exports.Box = Box;
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
@@ -52372,6 +52889,7 @@
   exports.Paper = Paper;
   exports.PaperComponent = PaperComponent;
   exports.Paragraph = Paragraph;
+  exports.PieChart = PieChartComponent;
   exports.Popover = Popover;
   exports.PopoverClose = PopoverClose;
   exports.PopoverContent = PopoverContent;