@majoo-ui/react 1.56.3 → 1.57.1

package/index.esm.js

@@ -39,7 +39,7 @@ import * as color from 'react-color/lib/helpers/color';
 import StepWizard$1 from 'react-step-wizard';
 import { useJsApiLoader, GoogleMap, StandaloneSearchBox } from '@react-google-maps/api';
 import request from 'superagent';
-import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$2 } from 'recharts';
+import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$2, BarChart, Legend, Bar, Cell, LabelList, PieChart, Pie, Sector } from 'recharts';
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
@@ -1223,7 +1223,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-const colors$5 = foundations.colors;
+const colors$7 = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -3203,7 +3203,7 @@ const Toast = _ref => {
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -3644,7 +3644,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
-  color: colors$5.iconSecondary,
+  color: colors$7.iconSecondary,
   size: "16px",
   __self: undefined,
   __source: {
@@ -3731,7 +3731,7 @@ const SingleTagBanner = props => {
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     size: "16px",
     __self: undefined,
     __source: {
@@ -7771,7 +7771,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 16,
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     style: {
       verticalAlign: 'middle'
     },
@@ -8305,7 +8305,7 @@ SvgSearchOutline.defaultProps = {
 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
 } = foundations;
 const InputSearchbox = _ref => {
   var _props$value;
@@ -8381,7 +8381,7 @@ const InputSearchbox = _ref => {
     }
   })), /*#__PURE__*/React__default.createElement(InputRightElement, {
     children: (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
-      color: colors$4.iconSecondary,
+      color: colors$6.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$z,
@@ -9251,7 +9251,7 @@ function InputSelect(_a) {
           readOnly: readOnly
         }, {
           children: jsx(CaretDownOutline, {
-            color: readOnly ? colors$5.gray300 : iconColor
+            color: readOnly ? colors$7.gray300 : iconColor
           }, void 0)
         }), void 0);
       };
@@ -9457,7 +9457,7 @@ function InputSelect(_a) {
                         }, {
                           children: jsx(CircleInfoOutline, {
                             size: "16px",
-                            color: colors$5.iconDisable,
+                            color: colors$7.iconDisable,
                             style: {
                               verticalAlign: 'text-bottom'
                             }
@@ -11470,7 +11470,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 11
     }
   }), /*#__PURE__*/React__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,
@@ -11569,7 +11569,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -11577,7 +11577,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$5.iconSecondary,
+    color: colors$7.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
@@ -11734,7 +11734,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 23
       }
     }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: colors$5.iconDisable,
+      color: colors$7.iconDisable,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11742,7 +11742,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         columnNumber: 27
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
@@ -11807,7 +11807,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
     size: "16px",
-    color: colors$5.iconDisable,
+    color: colors$7.iconDisable,
     style: {
       verticalAlign: 'text-bottom'
     },
@@ -12143,7 +12143,7 @@ function InputCreatable({
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: colors$5.iconGreen,
+    color: colors$7.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
@@ -12412,7 +12412,7 @@ function InputResourceList({
       }, {
         children: jsx(SortingOutline, {
           size: 16,
-          color: colors$5.iconSecondary
+          color: colors$7.iconSecondary
         }, void 0)
       }), void 0)]
     }), void 0), isLoading && jsx(Flex$1, Object.assign({
@@ -12629,7 +12629,7 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 });
 
 const {
-  colors: colors$3
+  colors: colors$5
 } = foundations;
 function InputOTP(props) {
   const {
@@ -12638,12 +12638,12 @@ function InputOTP(props) {
   const inputStyles = {
     width: 48,
     height: 48,
-    border: `1px solid ${isError ? colors$3.textRed : colors$3.gray300}`,
+    border: `1px solid ${isError ? colors$5.textRed : colors$5.gray300}`,
     borderRadius: 4,
     fontWeight: 600,
     fontSize: 24,
     textAlign: 'center',
-    color: colors$3.textPrimary
+    color: colors$5.textPrimary
   };
   return jsx(OTPInput, Object.assign({
     inputStyles: inputStyles
@@ -12913,7 +12913,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(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), jsx(Input$4, {
       ref: ref,
@@ -12936,7 +12936,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     }, {
       children: jsx(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);
@@ -13674,7 +13674,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
-    color: colors$5.iconGreen,
+    color: colors$7.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -13703,7 +13703,7 @@ const TabsList$1 = _ref2 => {
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
-    color: colors$5.iconGreen,
+    color: colors$7.iconGreen,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$r,
@@ -13763,7 +13763,7 @@ const TabsTrigger$1 = _ref3 => {
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__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 => {
@@ -14035,7 +14035,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -14065,7 +14065,7 @@ function ButtonGroup$1(_ref) {
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
-      color: colors$5.iconGreen,
+      color: colors$7.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$q,
@@ -16841,7 +16841,7 @@ function InputTimePicker({
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
     children: /*#__PURE__*/React__default.createElement(TimeOutline, {
-      color: disabled ? colors$5.iconDisable : colors$5.iconPrimary,
+      color: disabled ? colors$7.iconDisable : colors$7.iconPrimary,
       __self: this,
       __source: {
         fileName: _jsxFileName$l,
@@ -17581,9 +17581,9 @@ function InputDateRangePicker(props) {
 const getInputPickerValue = (type, date, isTimePicker) => {
   if (!date) return '';
   if (type === SINGLE_PICKER) {
-    return `${moment(date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY')}`;
+    return `${moment(date).format(isTimePicker ? 'DD MMMM YYYY, HH:mm' : 'DD MMMM YYYY')}`;
   } else {
-    return `${moment(date[0]).format('D MMM YYYY')} - ${moment(date[1]).format('D MMM YYYY')}`;
+    return `${moment(date[0]).format('DD MMM YYYY')} - ${moment(date[1]).format('DD MMM YYYY')}`;
   }
 };
 function InputDatePicker({
@@ -18087,7 +18087,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(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,
@@ -18140,7 +18140,7 @@ const PaginationButton = ({
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(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,
@@ -18295,7 +18295,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
-    color: colors$5.gray400,
+    color: colors$7.gray400,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
@@ -18533,23 +18533,23 @@ const ContextMenuItem = styled(Item, {
   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
   }
 });
 const ContextMenuSeparator = styled('div', {
   height: 1,
-  backgroundColor: colors$5.gray150,
+  backgroundColor: colors$7.gray150,
   margin: 5
 });
 
@@ -18835,7 +18835,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                           justify: "between",
                           gap: 5,
                           css: {
-                            backgroundColor: colors$5.bgGray,
+                            backgroundColor: colors$7.bgGray,
                             padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                             borderBottom: '1pt solid $bgBorder',
                             alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -18858,7 +18858,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       gap: 3,
                       css: {
                         height: '40px',
-                        backgroundColor: colors$5.bgGray,
+                        backgroundColor: colors$7.bgGray,
                         paddingRight: '$spacing-04'
                       }
                     }, {
@@ -19777,7 +19777,7 @@ function Table({
                     }, {
                       children: [leftAddOnCells.map((_, index) => jsx("td", {
                         style: {
-                          backgroundColor: colors$5.bgGray
+                          backgroundColor: colors$7.bgGray
                         }
                       }, index)), jsxs(React.Fragment, {
                         children: [jsx(TableCell$3, Object.assign({
@@ -20906,7 +20906,7 @@ const contentShow = keyframes({
 });
 const StyledOverlay = styled(ADialog.Overlay, {
   zIndex: 1,
-  backgroundColor: colors$5.bgDimmer,
+  backgroundColor: colors$7.bgDimmer,
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -20939,14 +20939,14 @@ const StyledTitle = styled(ADialog.Title, {
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  color: colors$5.gray900,
+  color: colors$7.gray900,
   fontSize: 17,
   fontWeight: 500
 });
 const StyledDescription$1 = styled(ADialog.Description, {
   mx: 24,
   my: 20,
-  color: colors$5.gray900,
+  color: colors$7.gray900,
   fontSize: 15,
   lineHeight: 1.5
 });
@@ -21596,17 +21596,17 @@ const itemStyles = {
   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.Item, Object.assign({}, itemStyles));
@@ -21623,11 +21623,11 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
   padding: '8px 0',
   fontSize: 12,
   lineHeight: '25px',
-  color: colors$5.gray700
+  color: colors$7.gray700
 });
 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
   height: 1,
-  backgroundColor: colors$5.gray150,
+  backgroundColor: colors$7.gray150,
   margin: 5
 });
 const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
@@ -21724,7 +21724,7 @@ const RightSlot = styled('div', {
     color: 'white'
   },
   '[data-disabled] &': {
-    color: colors$5.gray400
+    color: colors$7.gray400
   }
 });
 const StyledDropdown = styled(Button$4, {
@@ -25481,7 +25481,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronLeftOutline, {
-        color: colors$5.btnPrimary
+        color: colors$7.btnPrimary
       }, void 0)
     }), void 0), jsxs(Flex$1, Object.assign({
       align: "center",
@@ -25541,7 +25541,7 @@ const Device = props => {
       buttonType: "secondary"
     }, {
       children: jsx(ChevronRightOutline, {
-        color: colors$5.btnPrimary
+        color: colors$7.btnPrimary
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -28620,7 +28620,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: colors$5.bgGreen,
+        color: colors$7.bgGreen,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28641,7 +28641,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: colors$5.iconSecondary,
+        color: colors$7.iconSecondary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -28713,7 +28713,7 @@ const Navigation = props => {
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: colors$5.iconPrimary,
+        color: colors$7.iconPrimary,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
@@ -29140,10 +29140,10 @@ var _jsxFileName$2 = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packag
 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'
@@ -29151,7 +29151,7 @@ const DesktopContainer = styled(Flex$1, {
 });
 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%',
@@ -29278,7 +29278,7 @@ function Content({
         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
       },
@@ -47818,11 +47818,11 @@ function ProgressIndicator(props) {
     const 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;
       }
     };
     const iconProps = {
@@ -48649,7 +48649,7 @@ const ProductList = props => {
 };
 
 const {
-  colors: colors$2
+  colors: colors$4
 } = foundations;
 const ComparatorItem = props => {
   const {
@@ -48724,7 +48724,7 @@ const ComparatorItem = props => {
           }
         }, {
           children: jsx(CloseOutline, {
-            color: colors$2.textSecondary,
+            color: colors$4.textSecondary,
             size: 24
           }, void 0)
         }), void 0)]
@@ -48750,7 +48750,7 @@ const ComparatorItem = props => {
 };
 
 const {
-  colors: colors$1
+  colors: colors$3
 } = foundations;
 const ComparatorController = ({
   option,
@@ -48817,7 +48817,7 @@ const ComparatorController = ({
         },
         leftIcon: jsx(PlusOutline, {
           size: 24,
-          color: colors$1.primary500
+          color: colors$3.primary500
         }, void 0),
         onClick: () => handleToggle()
       }, {
@@ -49109,7 +49109,7 @@ Tooltip.defaultProps = {
 };
 
 const {
-  colors
+  colors: colors$2
 } = foundations;
 const Container$2 = styled('div', {
   '@sm': {
@@ -49251,7 +49251,7 @@ function LineChart(props) {
       setFilteredData([{
         dataKey: 'novalue',
         name: 'novalue',
-        color: colors.chartYellow,
+        color: colors$2.chartYellow,
         hide: true
       }]);
       setIsComparator(false);
@@ -49274,7 +49274,7 @@ function LineChart(props) {
         cx: cx,
         cy: cy,
         r: 10,
-        fill: colors.white,
+        fill: colors$2.white,
         stroke: fill,
         strokeWidth: 3
       }, void 0);
@@ -49389,7 +49389,7 @@ function LineChart(props) {
                     cx: cx,
                     cy: cy,
                     r: 10,
-                    fill: colors.white,
+                    fill: colors$2.white,
                     stroke: fill,
                     strokeWidth: 3
                   }, void 0);
@@ -49710,7 +49710,7 @@ function CheckboxTable(props) {
                       }
                     }, void 0) : jsx(MinusOutline, {
                       size: 16,
-                      color: colors$5.iconDisable
+                      color: colors$7.iconDisable
                     }, void 0)
                   }, void 0)
                 }), index + indexSubRow + 'tb-cell-collapse');
@@ -50015,9 +50015,9 @@ const StyledSkeleton = props => {
   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) {
@@ -50168,9 +50168,9 @@ function TagList({
         }
       }, {
         children: [showAllTags ? jsx(ChevronUpOutline, {
-          color: colors$5.iconSecondary
+          color: colors$7.iconSecondary
         }, void 0) : jsx(ChevronDownOutline, {
-          color: colors$5.iconSecondary
+          color: colors$7.iconSecondary
         }, void 0), jsx(Paragraph, Object.assign({
           css: {
             fontWeight: 600,
@@ -50196,6 +50196,515 @@ TagList.defaultProps = {
   counterLabel: 'produk dipilih'
 };
 
+const {
+  colors: colors$1
+} = foundations;
+const renderLegend$1 = (formattedData, legend, subtitle, tickFormatter) => jsxs(Box, Object.assign({
+  css: {
+    marginTop: '$spacing-09'
+  }
+}, {
+  children: [subtitle && jsx(Flex$1, Object.assign({
+    justify: "center"
+  }, {
+    children: jsx(Heading, Object.assign({
+      css: {
+        marginBottom: '$spacing-06'
+      },
+      heading: "sectionTitle"
+    }, {
+      children: subtitle
+    }), void 0)
+  }), void 0), formattedData.length > 0 && jsx(Flex$1, Object.assign({
+    direction: "column",
+    gap: 5
+  }, {
+    children: formattedData.map((data, index) => {
+      var _a, _b;
+      return jsxs(Box, {
+        children: [jsxs(Flex$1, Object.assign({
+          justify: "between"
+        }, {
+          children: [jsxs(Flex$1, Object.assign({
+            align: "center"
+          }, {
+            children: [jsx(Box, {
+              css: {
+                backgroundColor: data.color,
+                borderRadius: '50%',
+                height: 12,
+                width: 12,
+                display: 'inline-block',
+                marginRight: '$spacing-03'
+              }
+            }, void 0), jsx(Box, Object.assign({
+              css: {
+                width: 120
+              }
+            }, {
+              children: jsx(Text$1, Object.assign({
+                variant: "label",
+                color: "secondary"
+              }, {
+                children: data.name
+              }), void 0)
+            }), void 0)]
+          }), void 0), legend.showTotal && jsx(Text$1, Object.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), jsx(Separator$2, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        }, void 0)]
+      }, index);
+    })
+  }), void 0)]
+}), void 0);
+const DEFAULT_DATA = [{
+  name: 'none',
+  total: 0,
+  color: colors$1.chartGreen
+}];
+function BarChartComponent({
+  css,
+  data,
+  legend,
+  title,
+  subtitle,
+  tooltip,
+  direction,
+  tickFormatter,
+  label,
+  yAxis
+}) {
+  var _a, _b;
+  const isHorizontal = direction === 'horizontal';
+  const MIN_HEIGHT = 350;
+  const MIN_WIDTH = 500;
+  const formattedData = data.length ? data : DEFAULT_DATA;
+  const CustomTooltip = ({
+    payload: _payload = {},
+    active: _active = false
+  }) => {
+    var _a;
+    if (_active) {
+      const {
+        total,
+        name
+      } = _payload[0].payload;
+      return jsxs(Box, Object.assign({
+        css: {
+          backgroundColor: '$textContent',
+          color: '$white',
+          borderRadius: '$sm',
+          padding: '$spacing-02',
+          flexDirection: 'column'
+        }
+      }, {
+        children: [jsx(Text$1, Object.assign({
+          variant: "placeholder",
+          color: "disable",
+          css: {
+            fontSize: 11
+          }
+        }, {
+          children: name
+        }), void 0), jsx(Paragraph, Object.assign({
+          paragraph: "shortContentRegular",
+          css: {
+            color: '$white',
+            fontSize: 12
+          }
+        }, {
+          children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) === null || _a === void 0 ? void 0 : _a.call(tooltip, total) : total
+        }), void 0)]
+      }), void 0);
+    }
+    return null;
+  };
+  return jsxs(Box, {
+    children: [title && jsx(Heading, Object.assign({
+      css: {
+        marginBottom: '$spacing-07'
+      },
+      heading: "sectionTitle"
+    }, {
+      children: title
+    }), void 0), jsx(Box, Object.assign({
+      css: Object.assign({
+        width: MIN_WIDTH,
+        height: MIN_HEIGHT
+      }, css)
+    }, {
+      children: jsx(ResponsiveContainer, {
+        children: jsxs(BarChart, Object.assign({
+          width: MIN_WIDTH,
+          height: MIN_HEIGHT,
+          data: formattedData,
+          layout: isHorizontal ? 'vertical' : 'horizontal'
+        }, {
+          children: [jsx(CartesianGrid, {
+            stroke: colors$1.gray150,
+            vertical: isHorizontal,
+            horizontal: !isHorizontal
+          }, void 0), isHorizontal && jsx(XAxis, Object.assign({
+            type: "number",
+            stroke: colors$1.textSecondary,
+            fontSize: 12,
+            axisLine: false
+          }, isHorizontal && {
+            tickFormatter
+          }), void 0), jsx(YAxis, Object.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
+          }), void 0), data.length > 0 && jsx(Tooltip$2, {
+            wrapperStyle: {
+              outline: 'none'
+            },
+            cursor: {
+              fill: 'transparent'
+            },
+            content: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) === null || _a === void 0 ? void 0 : _a.call(tooltip) : jsx(CustomTooltip, {}, void 0)
+          }, void 0), (legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, {
+            content: renderLegend$1(formattedData, legend, subtitle, tickFormatter)
+          }, void 0), jsxs(Bar, Object.assign({
+            dataKey: "total",
+            barSize: 12,
+            radius: 50
+          }, {
+            children: [formattedData.map(item => jsx(Cell, {
+              fill: item.color || colors$1.chartGreen
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && jsx(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: (_b = label === null || label === void 0 ? void 0 : label.render) === null || _b === void 0 ? void 0 : _b.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
+  }
+};
+
+const {
+  colors
+} = foundations;
+const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
+  const {
+    cx,
+    cy,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill
+  } = props;
+  const IMG_WIDHT = 40;
+  const IMG_HEIGHT = 40;
+  return jsx(React__default.Fragment, {
+    children: jsxs("g", {
+      children: [jsx("clipPath", Object.assign({
+        id: "circleAvatar"
+      }, {
+        children: jsx("circle", {
+          cx: cx,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: "#FFFFFF"
+        }, void 0)
+      }), void 0), validAvatar ? 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) : jsxs(React__default.Fragment, {
+        children: [jsx("circle", {
+          cx: cx,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: foundations.colors.bgBorder
+        }, void 0), jsx("text", Object.assign({
+          x: cx,
+          y: cy,
+          textAnchor: "middle",
+          alignmentBaseline: "middle",
+          fontFamily: "main",
+          fontWeight: "600"
+        }, {
+          children: acronym
+        }), void 0)]
+      }, void 0), jsx(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);
+};
+const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
+  children: [subtitle && jsx(Flex$1, Object.assign({
+    css: {
+      margin: '$spacing-06'
+    },
+    justify: "center"
+  }, {
+    children: jsx(Heading, Object.assign({
+      heading: "sectionTitle"
+    }, {
+      children: subtitle
+    }), void 0)
+  }), void 0), formattedData.length > 0 && jsx(Flex$1, Object.assign({
+    direction: "column",
+    gap: 5
+  }, {
+    children: formattedData === null || formattedData === void 0 ? void 0 : formattedData.map((data, index) => {
+      var _a;
+      return jsxs(Box, {
+        children: [jsxs(Flex$1, Object.assign({
+          justify: "between"
+        }, {
+          children: [jsxs(Flex$1, Object.assign({
+            align: "center"
+          }, {
+            children: [jsx(Box, {
+              css: {
+                backgroundColor: data.color,
+                borderRadius: '50%',
+                height: 12,
+                width: 12,
+                display: 'inline-block',
+                marginRight: '$spacing-03'
+              }
+            }, void 0), jsx(Box, Object.assign({
+              css: {
+                width: 120
+              }
+            }, {
+              children: jsx(Text$1, Object.assign({
+                variant: "label",
+                color: "secondary"
+              }, {
+                children: data.name
+              }), void 0)
+            }), void 0)]
+          }), void 0), (legend === null || legend === void 0 ? void 0 : legend.showTotal) && jsx(Text$1, Object.assign({
+            variant: "label",
+            color: "secondary"
+          }, {
+            children: (_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total
+          }), void 0)]
+        }), void 0), jsx(Separator$2, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        }, void 0)]
+      }, index);
+    })
+  }), void 0)]
+}, void 0);
+const PieChartComponent = ({
+  data,
+  css,
+  avatarURL,
+  avatarAcronym,
+  validAvatar,
+  legend,
+  isMobile,
+  tooltip,
+  showPercentage,
+  title,
+  subtitle
+}) => {
+  var _a;
+  const emptyData = [{
+    id: '0',
+    name: '',
+    total: 1,
+    color: foundations.colors.chartLightGray
+  }];
+  const dataChart = data.map(item => Object.assign(Object.assign({}, item), {
+    total: Number(item.total)
+  }));
+  const activeRef = useRef();
+  const formattedData = data.length > 0 ? dataChart : emptyData;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+  const CONTAINER_WIDTH = isMobile ? 350 : 450;
+  const CHART_HEIGHT = 150;
+  const CHART_WIDTH = 450;
+  const CustomTooltip = ({
+    payload: _payload = {},
+    active: _active = false
+  }) => {
+    var _a;
+    if (_active) {
+      const {
+        total,
+        name
+      } = _payload[0].payload;
+      return jsxs(Box, Object.assign({
+        css: {
+          backgroundColor: '$textContent',
+          color: '$white',
+          borderRadius: '$sm',
+          padding: '$spacing-02',
+          flexDirection: 'column'
+        }
+      }, {
+        children: [jsx(Text$1, Object.assign({
+          variant: "placeholder",
+          color: "disable",
+          css: {
+            fontSize: 11
+          }
+        }, {
+          children: name
+        }), void 0), jsx(Paragraph, Object.assign({
+          paragraph: "shortContentRegular",
+          css: {
+            color: '$white',
+            fontSize: 12
+          }
+        }, {
+          children: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.label) === null || _a === void 0 ? void 0 : _a.call(tooltip, total) : total
+        }), void 0)]
+      }), void 0);
+    }
+    return null;
+  };
+  const RADIAN = Math.PI / 180;
+  const renderCustomizedLabel = ({
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    percent,
+    index
+  }) => {
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return jsx("text", Object.assign({
+      x: x,
+      y: y,
+      fill: "white",
+      textAnchor: x > cx ? 'start' : 'end',
+      dominantBaseline: "central"
+    }, {
+      children: `${(percent * 100).toFixed(0)}%`
+    }), void 0);
+  };
+  return jsxs(Box, {
+    children: [title && jsx(Heading, Object.assign({
+      css: {
+        marginBottom: '$spacing-06'
+      },
+      heading: "sectionTitle"
+    }, {
+      children: title
+    }), void 0), jsx(Box, Object.assign({
+      css: Object.assign({
+        position: 'relative',
+        width: CONTAINER_WIDTH,
+        height: CONTAINER_HEIGHT
+      }, css)
+    }, {
+      children: jsx(ResponsiveContainer, Object.assign({
+        width: "100%",
+        height: "100%"
+      }, {
+        children: jsxs(PieChart, Object.assign({
+          width: CHART_WIDTH,
+          height: CHART_HEIGHT
+        }, {
+          children: [jsx(Pie, Object.assign({
+            activeIndex: activeIndex,
+            activeShape: shape => renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef),
+            data: formattedData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 50,
+            outerRadius: 80,
+            dataKey: "total",
+            onMouseEnter: x => {
+              setActiveIndex(formattedData.findIndex(y => y.name === x.name));
+              activeRef.current = true;
+            },
+            blendStroke: true
+          }, showPercentage && {
+            label: renderCustomizedLabel,
+            labelLine: false
+          }, {
+            children: formattedData.map(item => jsx(Cell, {
+              fill: item.color || colors.chartGreen
+            }, item.name))
+          }), void 0), data.length > 0 && jsx(Tooltip$2, {
+            wrapperStyle: {
+              outline: 'none'
+            },
+            cursor: true,
+            content: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) ? (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.render) === null || _a === void 0 ? void 0 : _a.call(tooltip) : jsx(CustomTooltip, {}, void 0)
+          }, void 0), Boolean(legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, Object.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',
@@ -51692,4 +52201,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultFetchDataParams, pickerReducer, useListOption, useToggle };