@majoo-ui/react 1.63.3 → 2.0.1

package/charts.esm.js

@@ -0,0 +1,1453 @@
+import { s as styled } from './stitches.config.esm.js';
+import { B as Box, F as Flex, b as Button, H as Heading, T as Text, a as Paragraph, I as Image } from './ModalDialog.esm.js';
+import { p as Tooltip$1, T as Tag, o as InputSelect, c as InputCheckbox, a as Separator } from './Separator.esm.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { foundations } from '@majoo-ui/core';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line, BarChart, Legend, Bar, Cell, LabelList, PieChart as PieChart$1, Pie, Sector } from 'recharts';
+import moment from 'moment';
+import { CloseOutline, PlusOutline } from '@majoo-ui/icons';
+import '@stitches/react';
+import 'react-i18next';
+import '@radix-ui/react-dialog';
+import '@majoo-ui/helpers';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-label';
+import 'react-dom/server';
+import 'downshift';
+import 'lodash.debounce';
+import 'react-infinite-scroller';
+import '@floating-ui/react';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-separator';
+
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAACNCAYAAACALpWyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADCcSURBVHgB7X0JnFxVlff/bbVXd/XeSTohKwlbgCwswSDKLjMOo4K44DduqMzIMjqKIkMj48o4MvK5gLOpOH6KoqIgi5ig7JBAgEAWErJ20p3eq2t/y3fOvfe9epV0IOlEws/U6d/rqrffd8895/zPcl8BdapTnepUpzrVqU51qlOd6lSnOtWpTnWqU53qVKc61alOdapTnepUpzrVqU4HgzTUaVx6Q3fMGWecYRqGcZYZjcIply/o6+/fmR8bu8113bnRpqYNL61YsQN1esMxUZs9e/ZRqVQqP2XKlKnDw9mTDVO70nW91ohlVai19tjY2BrNMH5RLhYvqZTLl0Sj0S0rVqyo4DAmE4eYFi5c2NjRMenanTt7fkMSNjPV0NA5OjJyoabrx6cbkvlSqRSPREzPcexILBqLtLe3z9++ffuxWjSq64ZxTWtz89foMhto8XCYkoFDRxox0CJ1+Q/0/fJEKqVFrMjptl15bzKZ7BzL5bx4LN7oEBWLRb25uVknrtmxWBwkqZFCqWRYptll6PqoZlnW0MDAJhymdMgk8dTTTz+VZKk8ms2e58EzE4nER8ecMc+ChUKhYDmO65nNBmKZTHTb1m0l4rmtG1qEmOwRE/WIYbpWPN5i2/YszfMa6JLLcJiSjkNDmu557yFmnZ1IJOekUulGu1IxLcskDWk6nue5JI1avlBAMpFAJtOok/0zQdttx/EGBwY113NJi2gm2culpq6/j0EQDlM6JA++ePHii+PR2CllXe+KRKIpUqmEVXQQQ8gUalalXDHbWpO06oJUqdfZ2Wn27uzFaHbUJSn0bNvxSLdq5XIZdG5HKp22V69eHaNLj+EwpNddEtkOlsv2hbqhH5nJZNpJGiMkYCCmQNc0PUIopqGxAaZlakQoFgoaHaObpqk5tq3nc3ltZGRYJ8CDbDYLOsZoa2+vkOR24TCl11USp02b1pQrFt+eiMbOsyt2RE8YWktLs6dBc5gZzEhN19DU1IR8LqfFSZXmxnJaLp9HQyqhtWbSGtlEPaqZcFlkk8kSDYBcIpa0SSJzOEzpdWUiSUtrY0PD9WTb4iRZ7Da45A9Gdu3a5eSJUaVSmSTR4k+wx8Dqkpka02y8a9FkNCcjqDgOTNpWqLje7Q9vssueXtm+bdsPNmzYsA2HKb2u6rRSqQyTN1CJxmJGIpk0Xc/TiqWS19U11SAwQzauBGamoXmIWTpGhofRmdTxvjcdiUlNCbS2tmJyZweBnSTSMVM7cXqzQcj14d7e3hWYPTuCw5ReV0k87rjjtM1btz6cTqVmkvtnkFvhFnI5vX9Xv0YABoVcFotmd+JNR09GJhUD+Y1IxGOIx+OIUOiNbSRpXcRiMbKVRcw/wos9OaVz4dr1uYc6slmzFyjhMKTXlYmkHitdkyc3kCOfc10nXSInfmRkVLMrZTTETVx01rGY1ZkB+RloaW0DSS0BHoM9C3kBj4IyJKWaYYKCA5hCmyY37+haC7yVpPH7OExpQuqUVR8mQHffffewrls/TqfSGtlEkip4sVgUzU2NuOTNR2FmZyOsSAQZAjaEUoXkhaNpUhK1IOBLNhbHHtGqc6yVUG/dT9wvuuGG2t7dd/La21vu1nXzZfL5ZrqOk4xGInpjOiVAi2WxBLaS71dtFjmO8FxXMI4GD4bHili1fivam9KYN30SLZ0UJLCee/rppw/bIPiEmKh1d7uYALEEE1WuuuofnyB3YhLgRlOJmOWw0w6XbF8apmGJ0VEghBqxTFKtNVeAQww9ipi3eecAhrJ5ZJIxQrRaGW8Q4mf88p9u7/TypamO4U3SPLeNvKGI67g2PfOA69h9JUvb+KUzP7EdB4le11SUr4Y/9alPfZK+/yPFPTtJziJR09DOmOqio6MdZiSGZSvXIRG1cOKRXYRSyS4aLI3MWk9IprgWS6fOUR7X2zY4evL5l934FA4B8TPdeN/3j4ahv4XM9UnUzrM1HZ3jH1zzdSMtP6LTv9V93kcGcQB0SPKJn7zqqgvgeDdrcCeTWaRUk6UtnVTB9COmkXQVULEddDanhf1j5jHQISAk1scKJXztx7/HtR84B1HyKRnsUEdecdxFn7kFrxN99YFbG0u2scgw3LdRpPBd1IipbK2D3mRm7daz3HYacGIf+75sGpRN6qOVq68797Kf0DETSqcdEjBQyueXJZOpYeqAdg6YEp/InTfAvdDSkKAH83D/k2sxZ1o7Zk5ugcuMUufywdv6htDTO4jpk1pFh1DXTMPrQMS8aRVX/2DJ8S7RNHceKweNW8uN06XNBhQvVYO55WIw8jPIEyQj4fNaayf99IMv3v/9Y2n1WkwAaxyws7+su3u/B8Jtt92WJz/xSYOeLR3VSgY9ZMHmkWrLjqCHferFV3DfYy+AwA+PceRGhsT3ZDyCmy+/EJOTcbi5AtyKQ8EBPY4/E3V73Xr3/f+56IZ7b/1h2cHz1L5uas48nwuix2tgnqf+e7Wb9pBOyVgO8pOEmiSDn/vifbe9GxOgA5bEM64nQejGfhMZ+9uPbbbf3hb3uvryLmyXzZxLAVRDjNgPn7uQnpvGmOPyWBY2sH/bVjR3TkI6GkF5eBQucVdnVyUWOShOvudVzqYu4SS1BemV6oVKsblvweDxjudGmQeyNZRNF/6rp9ygKmm+JLL6pP13rLofpQoDZ3VsSM6kuXDFGYLlrvfv19/zrXtueNsVo9gPOmAmatrEkOr27dufPGdax4sUJ+3KGC5HZzRKQVFclNKGZBNbE3Hx6eSLMBIUtUmlxXkGMY0CqNCJkSLzIVJYzss4QBpZdv4pI8vf+5PYrPe3mF1/hTJJvVR7hFIa2kJy5QVCFVKeAfnH8fY4RZxMCtYXvbJStWq/L5nBuuuvthPQuYQ+b8N+0KFKCuOOO+5wdE1/WKSbShVqCH8WA2feYwm0HSkPTGQ4DD2KgZ5+DA8MwUjGYDYkoUfMAc3N/wgHSFvszjch2triFnaK+zOQcjybJE/+sRBxV7tedZHC49JxrvgUKtSTNtJQKJqv5dC1GNSIY0jLiO+0yGPVoFASrXn6edhPOrRRDs/4NjnqMxMx72KN8sLFQj7qNlLYjdwKI04Paxro37kLhXIEnUcfDy9pILdzFY6Y2yl6h1wMUsD40rEXdk84GXztr74x1YwkrvyVgw+dFGnCkmlvQ65cEAzShfoj35SZFlKbqrslc8eRRSab7HvFrgi/NpA6z9vtyAChCuaKW+jaglufvtX62KKP7XPw4g1RsnjfTR9vpyThTLLvv0ulGzINxEiwreCnoiU3TMnfwQJ9jiA5ZwqSDSkxkmnXD4Y6klePtBebxlBOG2UkIzGrQDnLnvced23vq93z8p99O9USw8cNU/snj1GyJlUggaSqSgyjlt1tn1ofzy7K/fKz7NgKAAX6E2psINigbKJCtWMVw5n5lbddsQv7SG+outPf3Xz5YhLIWxPJ1AnpdCPbP00GvWUzdaGiJKgvWs7qrVPd1WXTPZn2thADLAqWW65HSUrXG7Z0s4ck5SHCFD/tmF94+i1at83XuOhnFxkz9VM+RFH0jxO4WuAnoscDKKGuD8CK3ODbN3VcgE6rEFQyF3swv8b1QJiZ/o20shGJzug+58M92Ed6QzGR6dbLLrOmHx15B2Xq351KN54bi8cjCtUZhEQ1lwxAT2MFA0liEbPF1mETNnVtD3aF1B4pIa+soVxywAEiu+wiFWnYkN8Sv6NUjlR2uv3vt93KDKfsMUJmTCEkziO97NmeWPdsidUiHRTLPbmhtpc8BH6fT75k+VLpO/aBndN1GZRw3Rr7V71mjaTbJSMy4+tv++g+J7nfcEwk0n624atTtaL7yTkvmVm3UrmBc4dPrLSxdUcUIwUNlbIrOl0cLPCDJ4APdyKBWwH/C/kyTEost03OoKWjkYAT29dh9PZwhEsTIIXtkHDAyWFlhuqWBqdCg6PEBpH26Q4WXjUXY0Y+kCAGJ2FGiTb4zrwSRF00ykOtGIeCAep4yfw9fPuyZ9vTv/zOq/d5isKfFdhwXPGaO77WYBqpjGNp7YbrdVEndOqeF6cnjVEvETLhGje3YJcqo8XR3EAun9viZCsXmpbxKTuujSQMcjUQw+r1Y3AcRnYeuSEWaUP1AJTxYPQnOkWoRd5moGw4mDytDa3EQIo9o2dLP7KDeaTiCcF47rq8kyeG6YwIkYhFxHmu6aFI8XRqEGxyM45tn4VH+p6tea6oGeEqOwoB5sJiqJgjGa16QH643m4S6AWSW0PSLmf7rcQI9oMOOhMvu6s70Y7Wt1LDz7nurm+fHomlOSSW1jyPyzGE6hKxbJshtyNcCYrwI5WwKV5KucS0yfBdPHMpjkycpKJcYVUpbWIqGcUFl7wJbe0ZRExL2JZyxRZMNQnN8sJMihBT4umYSG+VimWhJiNRAxYF1l0aDIbFeRNbJJ15ILDKY63HwvXr/1qOu3/zKBzbRtKKiufixLTw/umgBVPnIVvMY9X2tbWRmhp7p1VjN76PqD7DoKiW2Cv1Vt/2jo/lsR90cJhIbb7ut9+b79jlq3RPP5O2TKLmmRI2SxXiOtLn81TjKexGyp/gZNTBjBmU4E3RY/Px5LwXC2WNOz9n2MhoUdHprP549E8ndHr+e5dg20g/ciQtDOEj/PDUMTZLJF3focExaBfpRkXR+UbSlNtpP6e48pUyymMVIWnSLyUVTefwg5w/ewGa2mM4/eQkHUsZlNKwaLfvFzbGk6L9nY2teHbrGiAUBHDlRy2gUYBnT62pqCZoLuLAf8B+0gEz8brffmep+2v3egeVt2pqiPmqQji2u/tGanuFpCNuVXDsURYYhIrjNGIVMT1PUZos5QpbxhrpGWOoVDiiYyEZi6KRGJIt5fDzlx7HWLkoRr3rAwZUEWMocom9ZbC10H+/95dOK2JmVwWzGlMkodSuobVoJ4nsUUwZyI4g25jDE688P549Cy5VA1a8cKA1dH/f1QgCGmwSjGXYT5owE7vv+267XbS/4drue6gTDR99+1EI0aaQZQ8PzHKxCEur4Ji5UVimBj8Do2mmOIeLoxi4nDD3IlSGdyEfGyXJXUmS5FEckkGIKaQuTrZJREFMed8IbS85FZRI9+oKPHDkJBNLEcMLZMsssS8VjaNMjOHvJu23SJ3G6Fp9uWE6D1j9ko3Hl/fiqCOB0xa34dSIgTvzJXiWJdq5atvaV4WEVQ0bUp9V7yP47qljQt5JX8IZfhz7SfvNxG7KWlRObPlbu2DfQiCjQwSjWN0oW+6PLk0LNVYxlm1fhfKBJUKbRx0bQyKhSRDgSZVmk0rj0+IcUis3oHnKXICWrL6NmPg0CsUSRUFsFf33cFTbFFKNJRGjHCaQ0ZZsFFK5Y2wIA/kslkydiy2j/cQoA82kBtuSGWLUCDHfEm1MRqIiZMbM5I7Ojw5g4PmHMadtA455T4sASoxaM7RvDi0vUft5tDIw1hQaDol/QLXOPMK5Q79DEFYd/qF0rx91v7N7v6sU9ouJl911a6Jkl79DMc1LSSXqfHMRmlKhBtlg1H661X02BbgLlD5qa9bR3OyHbZUjr7ET4CkIr6MlMSm4r+fIzmJbx8XFLIUc1hJSSDcixx4RkqZd+VG0xFNIWTEMICvWOWLCUjZETKYYgPQN6ZqMPnflRzA53UJhthIBmAiml/OIkZsxpieQpUHQ2BCntkiXIkHnOASgwFkTyDhqQJqwBAEjwxmBQPgCJoe5Gz5OyxNu+DYmQPvMxM/+7KuNKBd+SUDiLT6DRFA4MOS1jRIDzq0GhF3qzBJJIdu/eaRGeUSLQaDsl0CqvE4wk12CRLwhuJSrCqVcZU91pZvX9vegKFQnAtu7aagabXuhb4tqpyZck501dlI2mCXTj7o00b8ZoyOkdstINFAbOeHpyTBcKwEuVCR7qlepuhXeODav5lhvXI1abZ/n/e83LvmnVzAB2qcsxmd+/bU0tOj95A68JfBvvGqjXVdFOmh9RlsXzjv2NOF7OY6M1tu2ZCCnmmZMsxCjzFxFZAnk4ilQ4YM6VlUNsZbg/qzWuKUsrdGkpTqBS/lLYgg4Ctj42YUw4JCqXmYhwpESP2kbHEsfU6gtLc2tKJZ1ZMdkm0QAge67vVCunl8FpOr8qhbysxLB4lW3w89auP53uY/a32tYkRswQXpNSfzk7d9q0EvOLyiSf5LoUK0aVazmxqqdV6ZgJTesTDDeT7dUCNYzGo1FPXRNNkWnSCmmNA6lm5hJ7D4AKiJC56fjTUEb2B3xe80ie8aA5siWSdg5NiwC1nwtrssxRamjJ512kfqRnSvAC6lcnsfB6lSeoxGgMcR3nxJT5sDt20jt1LFzuIzRnI1pkxM04Gy8QIOQnNnqAPZVj1/XHOozrTaMVrUtIWc/QDMS9Nz89XdeMeG5JK/KRI64fPqn3/wcmaSzZBu0GoYFyKp6PF7p3YqNtPhghhnITjN3altrBNGIEQAfVqVj5E6kKC/oIzgeImVCmBEjNLXCH9a6cuip898x7xRSpWWx2c88+EFqLYSGtZAj4Q86z/8eIka27MiXJ03Hd278JR5a9jIh3SK+cMO56BtbizxdIcIARQ3MKovCiEa209PGYyRqHZ+qPn3sVHP6Td/ExOlVmfiZn/7bBdSOq4MuUDbOVSoknE4JVElIlbkkHW6QIQe6OiLB+cxAmzL0lHOoKVvwmZGKZVC9uopPOhzPlPc2lGsQREFUhES0VKvaPJ9dtSzzz6nRjIKsRCNyOXUOA6pMF/647TkYETOkPmvt4h5fA0tTe9cqT4MvgxSj/fDFF1/s4ABor0zsXtZt5nZpN5FqiwYZ6HD4KPBvdrMtRI2JNE6bc4L4vmzVYxgaGxUqqqHBUCDDEQCGO4nL+ZlcVB124hSF1Kq1TyLCQwOooSGG1klNkmFeqIoM1ZIJDp9pXi2bfCDkqmP5PD/vbnP2XgQZ3ADgxNviaJ3VSEEGCvEmqd0tDXAiulD5EnxJDSklX8fuPqO07ZrqFxfDg6MKlAVPJP9ruOKW933uJRwg7ZWJY33pf6JmzJN2DTUM9PaQxFqa0zkVz2xaQ9DewszOaXh6/fNobmIbpIuHEaUL7DKQmtV05abQBvbZWEItPbpHuiaVjqJregfisQj84IHFAdOgRNxTjFU2LuTDFbODiKYyYiIOgqOJqeURbCqvRjbVXHOvN//ziXgzTgzW//qEc0PDBK/m549Lv7jzXpLuYs02auutt3zg8z/GQaBxmfjxH97UTmrwI75jGlafew01hei5LeuxYPpRIrj9x9VPCT+kpdlQzjwDC9nxjCp1vYoARQpHqNraZrEd7JzaKo4rlX1f2G9H2NsO6TPiciU3iu3PPsj+Daad9o7azq+MIff45ZhkJaHPPAsjHfNhF7LykTUZx5W2DXvqXP9WKuMk09Sa8hc9Iapseii5C40WaHuwfSNGUlfiING4TCSH90JqxEwoZ9p7Fakbj8rkuz227lkBaoRfR3YsndIVAEGg3li9WJZEq0IKVTmGrtW+XsciMMQCNzw4hpGBHPwsQZU0DG18Drm+TYhlOtBMQWymnlXLUBzYgSkLz1JVAeFT6HyDw3sVBfeVOmU7yOEnTUZrRGrDcdXzV5W0+GdXnT9NDRxh0V1l45WpCCNgiICids23rrjioM2lHF+dus7fCwfdnVA1oqBqEJzSTEmN0Lm0JwZkiQU/pU3AJ0EhNoI/YtFVFbi228w5fuyxkQIGdo5IF6R2L8Ugsuhf9xT7IiiODCDa1E7rK1CmTEfDlNlITZ6zR/s0M4nUgi9hS/EFjDVOFmrYoGhP7ZXHd87HW39VqvE2tMd2xEu/xkGkPZj49z/+1yM8p3L0fgjeuCQmhkr8Q9EXmSoKFJ6ScEauXDeq3HxIW6eRXxetuVa5VEH/jhEBfl5atRn3//wJytob6po6knoPGikL74liXAfbnrpX2FaWjGy5HSMrN5NbovMbORCLWSIIYdPgihLidLV5SGdlnpCvP9Q3ip/94EEUyjmhut93+Xl4sv95VHQVV9NCPFFQuNa98XdU3RrOyvhEuuihOy7uPqizuPZgoumU/4aadMApqrDtTIu6X01FVUTZvehEGWDWlYT6zj5lI4yEfxVxXpQ6Pl8qihGxYcMmrL9lk+ghPwX1/nc0o2F2OvARLdK9fJ1i0cX/vfEXGBmVeUN+Vw6H0jiPyIwUKJVtZ0XmEkXSmq4rIkx2gY6rwBmpYGdPP2zzQIc1JL5wjd/gINMezKKmLsKBkuRWgAOScb0GwEDIjxZyvF0pRQpEWbrv6MsR3TI1hmmnANtXkgqmGKynS+axWxAn1+WIrqgqRpJnOWIGlY5XtuSxi+C941adfD+7wqDKj+yIgeRVUYtfM2pQMNw1SNXzPQ29BjEnKZ115jEn48HVTyBXKmCfSMOok9Q24SDTOBKnLcYBkl8J7aOhWFwXCkfk+NSfkCK92nGuQK66sHkRM1bbIuLPSe9tROJdnTBc8h9dXahYNtkN/cOkIt3AXxUKVszncJHuaMd7PjFHMIulSwYZDIE6RYW5QpUiDUaM4sADF2Wxhhgp5tA6uRErelaLTIil1ap4Tm/x4PArvdvSTRgtjIm01t47RtNsTogeZKphItdkapTY3lfFMZkABCdafUPhh78YkTrliixfp86KWTurNpEuXqDUzxBlyCPUuaODQzActpsJ6hDqFEJ8MVJ5JcoJ6uTXuRTkHhvdgWiJmbxDdD4jSJ7dYlEHNlk89z8pm+BHfdg31Oh6zS1o83RZuuFIRvHLHPxedH1ECog6nnKZX0NGPnIui7XDL1HylySuuYGC7ntOuhohht397EPiOwc22Dy0NmRw9zN/3HuHaUhHbJ2SpDioL9utYWIDTm0kT2yf3gczPTKMjyxailTHErEehv1eyG/LlUdx77rvyRQTRUcqBOlzeRrlVgJOvoL2XBRphzL8u+joig/tV2P9mnVicilf06XRPTMknazW+I0bHEGJxhKQ8XFdhdsISBBTR/RmH24EgXAOkhukHtnv9Fy3JuPOr1thFSwLohJwYyZSjQlEErE93ZPdSFQS0DEcmH8tIgF+N2mphyY6oXQ8qmFiPFuJuaaPrLy9wugI2aIPTt5JybsfwcvMRV5PqTK93cA/dd5AjqvRyZYR83jhoxrSJCU5B0cMJJCJNRKMItukkd0xJWo1TTlvX7x0Qbz3LSLTUf71WeVG48qH9qQaFptdZPUGjHgNIknr16QyD5nhHCHiEguewOHPofCjRMxQfkeAhjgh2gJHxGHGI2IgvRY9/cpqNKdI9W5c/ZrHUmP+7qrbv34zfVuLg0Q1Q6xIEeuKw1kEXnRK3eji018qahmzTdzTl4bVdhr0aDNM6i22EbJexRBZdv97ycmSD1ghCSzTiLVRLFEOkFBj5qUCYp4lRr9AqeQYM/NMMyLjn0JKXFRZp4nIC/zvQeqLkCTZuTEkscuYQkxsgmFaovOZeSx9TJzOYheDpZJtpK6qsvnaul4FLSYxuaSR62MarymBYRocGxED4jVJ02I0MH906Q9vSuIgUY0k6m5r1tOHxXc3lAcQ9w59Z1o+Mg1ebyfQ+2AQCPYlQ+TyqPNE6CmxmVQSSQH9FSmCk4hGEH8uC6NIajLuKobpInLisegIRhky/KbrqgpO1ajohmqHhjyBmzwSsEl12ogDCM1PUgzOF/JoasogmUqTG2EjrYLh0VhMRZI0OYg0VVKpsh9OOgK7JQErFg3ivCIsqNrDdxGDQcRtPdRUgYkUmx4E2k1xviYGEa9vG+zF5v6exRnY36WjP4D9JYHEalXxHtryQ9//aj9tbBlvd8iEhBha+wD+Pq4p5Zqao+e4mHWEBBND2ZyYrt2yIo84gbQEdW5za7uM7riOun41FuqnlxxChmUabxWSXFuLkcYw0D+SJbXcIICK6/t81GGitrRQEKX88XgM846Zhc6u2ePFL1817OIH+sNuxXizn17jMrsd54m48n89dKd/j39rmVb+bPdb5GSffSH1GpkaJu7hYlTKzkoaoWfXbNyjhdpeGy2no4kvQiLXb3TQRCmolibpi0VIXe6cksfULQzn8+QqFCHfLlXNRpRBjCI7W3ItwUBPl6rR8508QrGWxQlmldHg8hdS1dlcTkhONBolROxhBvnV0Y0jpAHORHTm++i4iKjJ8Ts0PPNpd00j/UoveP4AtHnqPG33sJyq+vaqFwjma9Angx5dSKYhAg3yWri6d6NRoWt+bl+BznjH7aH0qUMeZYll4y8W/u7I7yLExNscEabkuLDw1QTqVwixKUG5N9uP6hvIZl38ftkotm6ziVk6ioQqk1Mz6J2fQLZFx67iMAasMjZYQ9hlNaPXnIk+bTJG3QYKdSWJiUYwB4Plkhnugw1Rh0qhsZGxrCgLSaeS5KrERZlGK55DY9pEtG0BSj33wRl7xecHdi+rVzwL9leZoja42C3hrfKSMmGofOLwlWpzrLsny+VsYeFHs+P16b//rxv/Dw6AxrHc5j1BvlD5fL7zLie9yn27LxybfOsxJ+Lc+YsEcOCHN6MWRT1MMRAeeWwEzz9DtnKoAWYlhmgiieKMJgzNbMZAqoHQ4zxKCjSJAaGrwICwI4BSlZqIsuRy/F7UkpDCHEkeI9JGUqusOoV5MiQStbU4MW4j7KHnJUBSkUR23Et2WbgFXN5RsGWxMW/nGpwKXa+s1ku80ODgT57DL/fLhUN3ZYrslEX5pFz4HG6jKAITi6tCeVoQFDBVYjlItFMsiHj57ctv++KEgyx7qNMffuKzT1767a+soYvPCw089aFGn9I94fSUSzt4ngMj0ATB/2FymPlAk4AMq5QyuRTFIUrsFo+BvpObTgyyDfhT0vhBHd0PmsuBwaAnRyqXQ2D+VDZmZiwaE+9/K5IU8ov8/OiQSAizdiD/Ylibi5g7hHarhPiM98JIzxLnp6ltfnptfEvmyQk/8KXIf15vN/WpGBE6L/jv+SIgV/zyTNF+dodsN4jTqmsm6B//vsdbMQEaF0PblHX2SxCDeXeh70Id+FxUO3lkPrZ+NbYP9mOY1FtwPDdSoDgNC6fMFKUNnG/TbUtCF1Yo7GIYelCFJtAclzqSFHACOZ1Mo6mxEc2ZRjQQGLJUAS+H0phkINx37GWZJJdQbXffhFLX1YhMOgt+6WLAcBW/9RNjYvHVoucFESZDVMdpAiixPeNPUeisyRqfCK1zwD1iWIjSEuOFK/L4Xa1kBxNWTBQv+8znMsuK7Qq7yObAVaaC+vQtf3fLdcdhAjRutkJznLtJW19P3zJVHe+DgEAs9wACZa+CP615DjKlVN3OxOG5I5paJSjQRW8HDrw/2dMzVFBcBKdN5WmoWKsKkflSy0hU+HuGTK8LT0TUzqhgtiddnrUvvogVz6zELx9bJiraLlxyhoD9/OJbeZIegjfAhuE+PNW7CVZUgiYBYEIFyyLOyqDA81WkrHuVMduwdqr2ga6O4135YkG8LcQ3EWJREklNX0r/n8fBYOL/Xnnd+ktuvvG/ySm9Orxdq7ph1ZJATU6ZVs6TguESkYnEskgMO0H5vJ9oNlQGIVxnZFds+W4aMY9eviJT+nJGMHFTuBGiflTmIeX1ZOBUSqTMlHDHj5XzYlA9sWa1QK/tTc0okk3lwcNSziBJ+ovSNeHztvX3YcfQgLDlIqLj7g5aqsVZNRg9UK213rWf1PeHAKrgXYI1VWMkTZXWjgnQ3vOGjvZNyix8hG6S9lWjHPWAmgMTerCgzco2aaq+H+qdLZ4oEuaIBge9PcXsoGBYc4PT5aiWFQH8Ivc4S4zqMJ95coAEb1mU11FhNr5trlzEs5s24E9rnyf0WuEaEBmH1Qw5m5iZ78gsiiyl9QIpHyQbLMaF49VIaC0jERzvkx8EqCU626miVFHuAcW8oL/kPWQ6DBYmQHtl4v/71Be2vfNfr/8JYY3LJBNdWW8CH1IrL0sKQXXsSePiP4NsJGfSCbnlKXuRMGUc1HGdADWICnD2n1jTCsmQqSMxEZXzeiJMZgTOdvWleJrwHfPFEkaLeewYHcJ2kqKXd+0Uk2QoGColnm0nMdOfgCMGF6rOfHgq3rCYeCNVqA/ilJQEg9SXJuwmpLKyIDQXX53vM40HkT87LEhsKjPgyHcB9ONgMpHvoJvalyim9TZqQZffAN+Z95RN07WqjfNC8K0KijylRoFVPVvw1llHozrdOfwsXvApHWS5T+QG6RD+ySFm7CCBpoFSHi/1bsMuyoZwtr5ETOQBoJlS0jxuV0RGiTRdxU5JExTLdsAwXoea4qZ6ktwJm1RwGb6RchXzprZ1IkMu0fObNyquVae1+efLmVtqMKhZRkFgAAi5Zv6gQKDZfA1EqbCHcJCZiDuu6t5y8TduuI0a88Wgs/1RGIrM+C1RwFLB7OrrQATypA5eS3HDU6bNQprSR8LGqZHtelXG6cqIyPIJHRv6duCPa19AliI73KkVRp+sislmGeReuCylpswZesreik60ldrzVZ7niTdFsW00DSnVrB0M9W4c7tVhkuY8R3RE8FuedswRMzCjY7KMA9PGlRvWyWYrc+EpuxZmKCDBivCr1XPxcbZ6vRg/ugv1vKo8hVZeXITEs7/F/pP2mkeQJ/q3X72W8l/6UskoLXSqUgdK17998Wk4ccYcgSzZ+fdVCo88U6HATDwp7aJyV2RZRe37XcIqjiWPT5TJXKl6fR9LU7Wqvoaw1ISaCjGH9931yDL89MH7RIK6Qhl7TkV9+PSz0UBtYKazj2mJpLZsy1ZSx3dt4JJ9mejm1iQiMbz95NOQo2zxo2uex66R4SoQYTVouzVhWU+5J4FGUlPeg3N8iKNVbSHtYz327js///WfYwL02gVRFKtzuj//D3rEeZJWxOsiNUMPRhR/mpShODKVw5ltvejsWCTSU+GHCh5uP1I7PqVkldV+ka/qprZPEurY0R2Fdj0BdLyYnBZQZtAjR48QI47g+C6PL1FjJJ13ProcC2bORd/goLiuE0agvukLmQg3sHVQ9lMOPrgS3OhqgPtuETmdN9/52a9MiIFM+1TVdlf3l5+78F8+91Ea3D8UDWVkp+AVP8DizAA+OH0LjJEccqueRGrhTcToGKmnnHi5XfVILYxlq55nACwQGMoqMtRloXXQb16QBnKUqgpDf15tiqdI8uXrUDgvaDh0rGmIUWeHAJUfGYpaBKRoc1ZV1HlOde66SGnZRTy8elWgIaqCFyAfteYFNt5Xr9KkqMvpCk946m1WHDPRvFt/8dmvfgoHQPtcmvirL3zl9gtvvGYhNeJKHx/7WHFuegxWegaM5hNR3n4f+HWTRmo6Ze2TotP8CuhgtGJf9Pi+UdUjU2DYq76OSwYDDJFwFkFzWgqkVjMN/UhR5l4n/J9snYF4QzN6hkcpMNCnqgmqQ61mgKkvHvyBpgVS7KvX4OECGwkVf5YnB+6GoW+nQXblQDF+wIXE+1Nf6g07o19Ia8njqa1nyFk/8iFWDqSxILMZiUIvzKbjoMc7xENlSwXxlgpfpkQ8RYEh/hA1n4HhD8+C9+2GLL0Iz3ySLVHSrakXN6jO4yMSVhQNkbi4BL8AVx6nTqN73HX/vYgvno3Tj5suzo/HomJ/V3MGp846AsteWIOc4fmeRFWyapqmhfw8L9RiKPssz+H7OW6IcTKGWqbH+h6l4P7l11+5ZZ/fpPhqtF9Fwsu7vzN26U2f/qvhnPYHGsYn+VGKp4mJW3Kz8cWLLsSkaUuotdJnbYgmKN6G15WqeT1vj8HBSPXM0hj+8+4n8NtHX8SRXa04bYmHk046leK9Y2jM22gazKFMza80ygq3cBgt7CKoL1WpVQl3GQd1sftbo5Rrdg/t+sLvbvy3Z3AQaUJa7ZybPp20ctovqavOFqNSXeXCU07HzM7JAsZLH00VDItp1SoMR/tEBTYfQ+uTM83oyDQFKNcLxfT4/yvDAyK1w/6go2pFZZxSD0CFlG69xuPh6zyy+jk8uPIJUSpSJj8zt20n/magn67n4bcFjiARQiX3ZNHxR2HS5Ck4+cTjsfrljViycD7uXr0az/T2kgujpj6pFmnKXQi3M8Tp4N4hIucUT3uaec3vbrzpIfwZaMKm6YJrPtGkWbHbyLF+l9+ZCI96hB490D2SiRVyzrl8ozw6hrZECped99eUvoqioyUl/DXug3LFxdBoEfe8vFr4l/7vRgWuWBUWBj944vucVXQpt3GZSJlyj9m1m9E4PIJrMxFsJi38H6MV5IjBJ0RNzFowE29eehKe2DCMjo4OrNu0FV4mhefyI1XAFTJ0QRoqiOCE4I6KdFDfrCTn4aa+XYU7V9x225/tZ5Am/BPt6x9+unj8wlN/W4lQ2s7xFlLPmeNwTj5kaGD6P1jChUk2MXNgaBiDmzdgyTFTkWlpEWWDFklHPGZhcNs6vNyzDf2hV6n4ZshXlwGFd4YQok82ZQ5ayOfbsXMX1pYdXJKycGbcxJGWhsUxA/+5vg+vbNuG3r5+zJ8SF29dnEauSKySxRBH7TwFYLzdBtJuJB0J7XekUq8+xWr67H/c+LUXdqxYMfHpZftAE2Yi04uPP26vf+jxB2adceo6sjen0KbGPV2IWhLb+EnJSbaFRJbQu3knFs07Ah1TplYBAkn1ow/djz+8sAlmW1MAhsQ+1JZE+K5CjbR40jZ5fjiQvi89+RR88oMfQXLSZGw24zglFcVRpRzuzpXxXNlF73CBf4gaEa+EseF+kt5hHJnW0UXZySfW9cLKpLG3YimiPN37dk/zPq61O9+699pb1ixfvtzD60AHC+njnE9/OqlHK1+nHvuE/6RV186rYYIIs5GKy+0aRI4kMTKYxanzj8EZbzoVx86dKcoLVxJKXL58GdZTAjkxY0qNj1aDUkOduvv7RIOXPihVzNK4YPZcnHvyEsyiAdPV1oHcyAh+8vOf868DoK+vr6ou6a8lFUdLYxTZgo2e/jHMPm0RKu2Z8GPzwavogW7XIpEf39N9004cAjpoTPTprOuuPs503H+h5zuHek/W3ns1+lTclPN5hcER5PoHoPUO4wPnnoJJM47CIyteELOHzzn5aDz0wD14DClE25v3fkMlfLtr0FqV52N+qcYZ6Dh0f0pQ4YwFi/F+ssmca3zggQfw3//zP3hl0yaR23SFiyAD6Bye+4errsDve14ujuXzGzUT95Vd7fsP3PjNNQezJH8idNCZKKi7Wz+/MnASWfaLaUR/gB5S1LEqP0kQd2R+cBiFgSHYW3bikjMXwU114rgjZ2AHSWiWYpS7Xnkej+Z1JKZP2e0GYfgU3qbtIZ17rCtAJBjJM6VIIyQJVC0++ji8481nkoROw7p16/Cbhx5EZ6JBZE44ndU1pcudeexRP/jHW7/5P8l1PY/w73oA8AO3f4FMDNHbv/aZdHm0/FfUcxeRDJ5FdxTBUJaI/MAwir27kKHU35mLj8ZfX3C+SAKz+nvi2dW4694/YAMFpZuOnxdqsVYFL0xeeNt4j+OhmnpRl0BIzau2uCSZ/AK+2cTEtyw6GfNnzumfN236WmIgRyv4bU//S8t91LYDeufMn4P+7EwM3+vcay6fRTGwBRSUPsuxy0tL2fyR0cGsXiD/7fylCzCHpOGEeXOwjRi7as3LeOm5Z/DUhm1oX7oQ2KfguR/pkWu7+Wt7BVoqRrqDbNszdtn+veeWny7HnDVnRo8Yuv76651DrS5fi15PJu5x749c/5kpbW7k8UeX/37KP3/4AqwZtrDyxQ2YO2MazjxlPp64/w58777VaFtyIqzG18hmqNDb7mmhccimRO9GT3dXUsTuRQoaPE+m74n7vnzzQZ0z+HrSofyZIe9fr/585Pru7nZKt+LBZzdTyG42PvTO8/Dkc2vwzKpVkiHkIhQHhh6LNKaHiUmtpBn5lVJJcD0KuxGa5+oaT1P1bBFLodwvMYnff8kv7x4kh3sDhWa2epqzTnesLbtm5Lev+Nhtf1G/P3xIfyuqsbFx/tDQkJnJNOLoNgPHnzALiUwLLjjjVNx19z3k6MuXTDTn3Tt+86V/l++wI9B0VqEn7Rku5UiSMJJJcjfHKpu1lmI7lrvLu5fv8+SUvxQ61D9rTr51Udu2vYdARTteeeYPSGbaxI7ZiVG8wu9CJV13ztlnH/+bX6uMTXe3+3uAfzdij9+OeBGHJx2yn95TtD3T1ORVHA9Pru8VlW3ZgR6M9vegZ2BM/JopzyU89pjjDkrK5i+VDrUk9p14wgnFxx97PP7HF5hxOcztakI2X8ajL+4QucaFC+Zj6dLTHkGd9kqHWhKz555zzkB7e5tILb3cM4y7n9qEh1/aKWo4Y9God9lHPzpKvtpBm9/+l0iHmomFGTNmPPLP112HxoaGoDSCi2sjFEW58oor3SVLlpAJxBrUaa90KP1EQcQ0foPVXZs3b570ne9+FyMjI14mk9EuvfRSHH3UUTvJ0T6Jlq2o0xubiJGX0pLjPCr/iBt/0LKSlrmo02vSIZdEn4hh0+iD32zEP0/OvxH8pzd6uKtOdapTnepUpzrVqU51qlOd6lSnOtWpTnWqU53qVKc61alOdapTnepUpzrVqU51qlOd6lSnOtWpTnWqU53qVKc61alOdapTneo0Efr/PMm3yIxL++4AAAAASUVORK5CYII=";
+
+//@ts-nocheck
+const formatHour = date => moment(date, 'YYYY-MM-DD HH:mm:ss').format('HH:mm');
+const formatDay = date => moment(date).locale('id-ID').format('DD MMM');
+const formatMonth = date => moment(date).locale('id-ID').format('MMM');
+const formatYear = date => new Date(Date.parse(date)).toLocaleDateString('id-ID', {
+  year: 'numeric'
+});
+const handleXaxis = (date, period) => {
+  switch (period) {
+    case 'jam':
+      return formatHour(date);
+    case 'hari':
+      return formatDay(date);
+    case 'minggu':
+      return formatDay(date);
+    case 'bulan':
+      return formatMonth(date);
+    case 'tahun':
+      return formatYear(date);
+    default:
+      return formatDay(date);
+  }
+};
+const currency = ({
+  value,
+  type = 'Rp',
+  thousandSeparator = '.',
+  decimal = false,
+  convertMinus = false
+}) => {
+  let formattedNumber;
+  if (decimal) {
+    const toFixedNum = parseFloat(value).toFixed(2);
+    const decimalSplit = toFixedNum ? toFixedNum.split('.') : ['0', '00'];
+    decimalSplit[0] = decimalSplit[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${thousandSeparator}`);
+    formattedNumber = decimalSplit.join(thousandSeparator === ',' ? '.' : ',');
+  } else {
+    formattedNumber = Math.round(value).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${thousandSeparator}`);
+  }
+  if (convertMinus && parseFloat(value) < 0) {
+    const numberWithoutMinus = formattedNumber.toString().replace('-', '');
+    return type.length > 0 ? `( ${type} ${numberWithoutMinus} )` : `( ${numberWithoutMinus} )`;
+  }
+  return type.length > 0 ? `${type} ${formattedNumber}` : formattedNumber;
+};
+const numSeparator = num => {
+  const toFixedNum = parseFloat(num).toFixed(2); // set two decimal places
+  const decimalSplit = toFixedNum.split('.');
+  let formatedNumber = decimalSplit[0].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.');
+  if (decimalSplit.length <= 2) {
+    const decimalNumber = decimalSplit[1];
+    if (decimalNumber) {
+      formatedNumber += `,${decimalNumber}`;
+    }
+  }
+  return formatedNumber;
+};
+const formatCurrency = (number, options) => new Intl.NumberFormat('id-Id', Object.assign({
+  style: 'currency',
+  currency: 'IDR'
+}, options)).format(number);
+const compactCurrency = number => formatCurrency(number, {
+  notation: 'compact',
+  compactDisplay: 'short'
+}).replace('Rp', '').trim();
+const roundUp = highestVal => {
+  let upper = 1;
+  for (let j = 0; j < Number.parseInt(highestVal, 10).toString().length; j += 1) {
+    upper += String(0);
+  }
+  if (highestVal === 0 || highestVal === Number.NEGATIVE_INFINITY) {
+    return 1;
+  }
+  if (highestVal <= 5) {
+    return 5;
+  }
+  if (Math.ceil(highestVal) % (upper / 10) !== 0) {
+    const newHighest = Math.ceil(highestVal / (upper * 0.2)) * (upper * 0.2);
+    return newHighest;
+  }
+  return highestVal;
+};
+const roundDown = lowestVal => {
+  let upper,
+    _lowestVal = 0;
+  if (lowestVal) {
+    if (parseFloat(lowestVal) < 0) {
+      upper = -1;
+      for (let z = 0; z < Math.abs(parseInt(lowestVal, 10)).toString().length; z += 1) {
+        upper += String(0);
+      }
+      if (Math.ceil(lowestVal) % (upper / 10) !== 0) {
+        const newLowest = Math.ceil(lowestVal / (upper * 0.2)) * (upper * 0.2);
+        _lowestVal = Math.ceil(newLowest);
+      } else {
+        _lowestVal = lowestVal;
+      }
+    }
+    return _lowestVal;
+  }
+  return _lowestVal;
+};
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+
+const tooltipLabel = (name, variants) => {
+  if (variants && variants.length > 0) {
+    return `${name} - ${variants && variants.join(', ')}`;
+  }
+  return name;
+};
+const ProductList = props => {
+  const {
+    variants = [],
+    name,
+    direction,
+    css
+  } = props;
+  return jsx(Tooltip$1, {
+    label: tooltipLabel(name, variants),
+    children: jsxs(Box, {
+      gap: 2,
+      css: Object.assign({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: direction === 'column' ? 'column' : 'row',
+        gap: '4px',
+        maxWidth: '250px',
+        '@md': {
+          maxWidth: '124px',
+          flexDirection: direction === 'row' ? 'row' : 'column',
+          alignItems: 'flex-start'
+        }
+      }, css),
+      children: [jsx(Box, {
+        title: name && name,
+        css: {
+          maxWidth: '124px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          fontSize: 14,
+          fontWeight: 600,
+          color: '$textSecondary'
+        },
+        children: name
+      }), variants && variants.length > 0 && jsxs(React__default.Fragment, {
+        children: [jsx(Flex, {
+          gap: 2,
+          children: variants.slice(0, 2).map(variant => jsx(Tag, {
+            css: {
+              height: 'auto',
+              padding: '4px 8px'
+            },
+            type: "varian",
+            children: variant
+          }, variant))
+        }), variants.length > 2 && jsx(Tag, {
+          css: {
+            height: 'auto',
+            padding: '4px 8px',
+            minWidth: 'unset',
+            justifyContent: 'flex-start',
+            mr: 'auto'
+          },
+          type: "varian",
+          children: `+${variants.length - 2}`
+        }, "index")]
+      })]
+    })
+  });
+};
+
+const {
+  colors: colors$4
+} = foundations;
+const ComparatorItem = props => {
+  const {
+    dataKey,
+    color,
+    onCloseClick,
+    disableClose,
+    variants
+  } = props;
+  return jsxs(Flex, {
+    id: "comparator-item",
+    children: [jsxs(Box, {
+      css: {
+        display: 'flex',
+        flexDirection: 'column',
+        '@sm': {
+          padding: '$spacing-02',
+          gap: 8,
+          backgroundColor: '$white',
+          boxShadow: '$small',
+          borderRadius: '$md'
+        },
+        '@md': {
+          padding: '$spacing-03 $spacing-04',
+          gap: '$compact',
+          backgroundColor: 'none',
+          boxShadow: 'none',
+          borderRadius: 'none'
+        }
+      },
+      children: [jsxs(Box, {
+        css: {
+          display: 'flex',
+          alignItems: 'center',
+          position: 'relative',
+          gap: '$spacing-08',
+          '@md': {
+            gap: '$spacing-10'
+          }
+        },
+        children: [jsxs(Box, {
+          css: {
+            display: 'flex',
+            alignItems: 'center',
+            height: 24
+          },
+          children: [jsx(Box, {
+            css: {
+              position: 'absolute',
+              left: 4,
+              backgroundColor: color,
+              width: 12,
+              height: 12,
+              borderRadius: '50%'
+            }
+          }), jsx(Box, {
+            css: {
+              width: 80,
+              height: 4,
+              backgroundColor: color
+            }
+          })]
+        }), jsx(Box, {
+          onClick: () => onCloseClick(),
+          css: {
+            cursor: 'pointer',
+            display: disableClose ? 'none' : 'block'
+          },
+          children: jsx(CloseOutline, {
+            color: colors$4.textSecondary,
+            size: 24
+          })
+        })]
+      }), jsx(ProductList, {
+        name: dataKey,
+        variants: variants,
+        direction: "column",
+        css: {
+          '& > div': {
+            fontWeight: 600
+          }
+        }
+      })]
+    }), jsx(Box, {
+      id: "separator-item",
+      css: {
+        height: '100%',
+        width: 1,
+        backgroundColor: '$bgBorder'
+      }
+    })]
+  });
+};
+
+const {
+  colors: colors$3
+} = foundations;
+const ComparatorController = ({
+  option,
+  onComparatorAdd,
+  onComparatorSearch,
+  placeholder
+}) => {
+  const [toggle, setToggle] = useState(true);
+  const [selectedValue, setSelectedValue] = useState();
+  const ref = useRef(null);
+  const handleToggle = () => {
+    setToggle(!toggle);
+  };
+  const handleSelected = selected => {
+    onComparatorAdd(selected);
+    setSelectedValue(undefined);
+    setToggle(true);
+  };
+  const handleSearch = keyword => {
+    onComparatorSearch(keyword);
+    return keyword;
+  };
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target) && !toggle) {
+        setToggle(!toggle);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, toggle, selectedValue]);
+  return jsxs(React__default.Fragment, {
+    children: [jsx(Box, {
+      css: {
+        display: toggle ? 'flex' : 'none',
+        justifyContent: 'center',
+        alignItems: 'center',
+        '@sm': {
+          padding: 0
+        }
+      },
+      children: jsx(Button, {
+        buttonType: "ghost",
+        css: {
+          fontWeight: 600,
+          fontSize: 14,
+          '@sm': {
+            height: 60,
+            width: '100%',
+            backgroundColor: '$white',
+            boxShadow: '$small',
+            borderRadius: '$md'
+          },
+          '@md': {
+            height: 'auto',
+            width: 'auto',
+            backgroundColor: 'none',
+            boxShadow: 'none',
+            borderRadius: 'none'
+          }
+        },
+        leftIcon: jsx(PlusOutline, {
+          size: 24,
+          color: colors$3.primary500
+        }),
+        onClick: () => handleToggle(),
+        children: "Perbandingan"
+      })
+    }), jsx(Box, {
+      css: {
+        display: toggle ? 'none' : 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '$spacing-03 $spacing-04'
+      },
+      children: jsx("div", {
+        ref: ref,
+        children: jsx(InputSelect, {
+          showLeadingIcon: true,
+          search: true,
+          size: "sm",
+          placeholder: placeholder,
+          option: option,
+          onChange: x => handleSelected(x),
+          onSearch: y => handleSearch(y),
+          css: {
+            '& > div > div': {
+              maxHeight: '250px',
+              '&::-webkit-scrollbar': {
+                display: 'none'
+              }
+            }
+          }
+        }, String(toggle))
+      })
+    })]
+  });
+};
+
+const Comparator = props => {
+  const {
+    option,
+    onCloseClick,
+    onComparatorAdd,
+    legendData,
+    placeholder,
+    onComparatorSearch
+  } = props;
+  const [filteredOption, setFilteredOption] = useState(option);
+  const [isDisableClose, setIsDisableClose] = useState(false);
+  const visibleOptions = option.filter(opt => !opt.hide);
+  useEffect(() => {
+    setFilteredOption(legendData.filter(f => !option.some(l => {
+      if (typeof l.value === 'number') {
+        return +l.value === +f.value;
+      }
+      if (typeof l.value === 'string') {
+        return String(l.value) === String(f.value);
+      }
+      return false;
+    })));
+    if (option.length === 1) {
+      setIsDisableClose(true);
+    } else {
+      setIsDisableClose(false);
+    }
+  }, [option, legendData]);
+  const Container = styled(Flex, {
+    borderRadius: 8,
+    marginTop: '$spacing-02',
+    '@sm': {
+      display: 'grid',
+      gap: 8,
+      gridTemplateColumns: 'repeat(2,1fr)',
+      boxShadow: 'none',
+      backgroundColor: 'transparent'
+    },
+    '@md': {
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: 'fit-content',
+      rowGap: '$compact',
+      boxShadow: '$small',
+      backgroundColor: '$white'
+    },
+    '& > #comparator-item:last-child > #separator-item': {
+      display: 'none'
+    }
+  });
+  return jsxs(Container, {
+    children: [visibleOptions.map(opt => jsx(ComparatorItem, {
+      dataKey: opt.dataKey,
+      color: opt.color,
+      onCloseClick: () => onCloseClick(opt),
+      variants: opt.variants,
+      disableClose: isDisableClose
+    }, opt.value)), option.length < COMPARISON_LIMIT && filteredOption.length > 0 && jsx(ComparatorController, {
+      option: filteredOption,
+      onComparatorAdd: d => onComparatorAdd(d),
+      onComparatorSearch: keyword => onComparatorSearch(keyword),
+      placeholder: placeholder
+    })]
+  });
+};
+Comparator.defaultProps = {
+  option: [{}]
+};
+
+const StyledDescription = styled('p', {
+  marginTop: '$spacing-03',
+  fontWeight: 400,
+  fontSize: 12,
+  color: '$textSecondary'
+});
+const TitleLegend = props => {
+  const {
+    title,
+    description,
+    legendData,
+    filteredData,
+    setFilteredData,
+    isComparator,
+    titleOnly
+  } = props;
+  return filteredData.length > 0 ? jsxs(Box, {
+    css: {
+      display: 'flex',
+      marginBottom: '$spacing-06',
+      '@sm': {
+        flexDirection: 'column',
+        gap: '$compact',
+        alignItems: 'start'
+      },
+      '@md': {
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      }
+    },
+    children: [jsxs(Box, {
+      css: {
+        marginBottom: '$spacing-03'
+      },
+      children: [jsx(Heading, {
+        heading: "sectionTitle",
+        css: {
+          lineHeight: '24px'
+        },
+        children: title
+      }), description && jsx(StyledDescription, {
+        children: description
+      })]
+    }), !titleOnly && !isComparator && jsx(Box, {
+      css: {
+        '@sm': {
+          display: 'grid',
+          gridTemplateColumns: legendData.length > 2 ? '1fr 1fr' : '1fr',
+          gap: legendData.length > 2 ? '$compact' : '4px'
+        },
+        '@md': {
+          display: 'flex',
+          flexWrap: 'nowrap',
+          gap: '$compact'
+        }
+      },
+      children: legendData.map(legend => jsxs(Box, {
+        css: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'start'
+        },
+        children: [legend.isHideable && jsx(InputCheckbox, {
+          id: legend.name,
+          checked: !filteredData.find(data => data.name === legend.name).hide,
+          onCheckedChange: status => setFilteredData(filteredData.map(data => data.name === legend.name ? Object.assign(Object.assign({}, data), {
+            hide: !status
+          }) : Object.assign({}, data)))
+        }), jsx(Box, {
+          css: {
+            backgroundColor: legend.color,
+            borderRadius: '50%',
+            display: 'inline-block',
+            margin: '0px 6px 0px 10px',
+            '@sm': {
+              height: legend.isHideable ? 4 : 10,
+              width: legend.isHideable ? 4 : 10
+            },
+            '@md': {
+              height: 6,
+              width: 6
+            }
+          }
+        }), jsx(Text, {
+          variant: "label",
+          children: legend.name
+        })]
+      }, legend.name))
+    })]
+  }) : jsx(Box, {});
+};
+TitleLegend.defaultProps = {
+  isComparator: undefined,
+  titleOnly: false
+};
+
+const StyledIconLeft = styled('div', {
+  margin: '5px 3px 5px 0px',
+  display: 'inline-flex',
+  verticalAlign: 'middle',
+  width: '8px',
+  height: '8px',
+  borderRadius: '50%'
+});
+const Tooltip = props => {
+  const {
+    hover,
+    payload,
+    active,
+    legendData,
+    xAxisKey,
+    chartTypeLabel,
+    customTooltipDate
+  } = props;
+  if (legendData.some(l => l.dataKey === 'novalue')) {
+    return jsx("div", {});
+  }
+  const formatValue = (legendDataKey, hoverKey, hoverValue) => {
+    let finalValue = '';
+    const selectedKey = legendDataKey.find(l => l.dataKey === hoverKey);
+    if (selectedKey === undefined) return finalValue;
+    const formattedValue = Number.isNaN(Number(hoverValue)) ? '0' : `${selectedKey.isCurrency ? currency({
+      value: hoverValue,
+      convertMinus: hoverValue < 0,
+      decimal: true
+    }) : numSeparator(hoverValue)}`;
+    finalValue = `${formattedValue} ${chartTypeLabel !== null && chartTypeLabel !== void 0 ? chartTypeLabel : selectedKey.name}`;
+    return finalValue;
+  };
+  if (active && hover) {
+    const visibleValue = legendData.filter(v => v.hide === false);
+    const mapValue = visibleValue.map(val => Object.assign(Object.assign({}, val), {
+      name: val.dataKey,
+      hoverValue: payload[0].payload[val.dataKey]
+    }));
+    const hoverDate = payload[0].payload[xAxisKey];
+    return jsxs(Box, {
+      css: {
+        backgroundColor: '$textContent',
+        color: '$white',
+        borderRadius: '$sm',
+        padding: '$spacing-03'
+      },
+      children: [payload && (customTooltipDate ? jsx(Paragraph, {
+        paragraph: "shortContentRegular",
+        children: isValidDate(hoverDate) ? customTooltipDate(hoverDate) : hoverDate
+      }) : jsx(Paragraph, {
+        paragraph: "shortContentRegular",
+        children: isValidDate(hoverDate) ? moment(hoverDate).locale('id-ID').format('DD MMMM YYYY') : hoverDate
+      })), mapValue.map((s, index) => jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [jsx(StyledIconLeft, {
+          css: {
+            backgroundColor: s.color
+          }
+        }), jsx(Paragraph, {
+          paragraph: "shortContentRegular",
+          children: formatValue(legendData, s.name, s.hoverValue)
+        }, s.name)]
+      }, `${s.name}_${index}`))]
+    });
+  }
+  return null;
+};
+Tooltip.defaultProps = {
+  hover: null,
+  payload: undefined,
+  active: undefined,
+  legendData: []
+};
+
+const {
+  colors: colors$2
+} = foundations;
+const Container = styled('div', {
+  '@sm': {
+    overflowY: 'hidden',
+    whiteSpace: 'nowrap',
+    overflowX: 'scroll',
+    scrollbarWidth: 0,
+    '&::-webkit-scrollbar': {
+      width: 0,
+      height: 0
+    }
+  },
+  '@md': {
+    overflowX: 'auto',
+    overflowY: 'auto',
+    whiteSpace: 'wrap'
+  }
+});
+const ErrorWrapper = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  flexDirection: 'column',
+  variants: {
+    hidden: {
+      true: {
+        display: 'none'
+      }
+    }
+  }
+});
+const StyledContainer = styled('div', {
+  position: 'relative',
+  '@md': {
+    width: '100%',
+    height: 300
+  },
+  '& circle': {
+    r: 4
+  },
+  'g.yAxis text': {
+    fontSize: '$label',
+    lineHeight: '$label',
+    fontWeight: '500',
+    fill: '$textSecondary'
+  },
+  'g.xAxis text': {
+    fontSize: '$label',
+    lineHeight: '$label',
+    fontWeight: '500',
+    fill: '$textPrimary'
+  },
+  variants: {
+    hidden: {
+      true: {
+        '& > #responsive-container': {
+          display: 'none'
+        }
+      }
+    },
+    isEmpty: {
+      true: {
+        '@sm': {
+          width: 'auto',
+          height: 254,
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      },
+      false: {
+        '@sm': {
+          width: 900,
+          height: 254,
+          display: 'inline-block',
+          justifyContent: 'unset'
+        }
+      }
+    }
+  }
+});
+const ContainerLoading = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: '$docked',
+  position: 'absolute',
+  inset: 0,
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: '$bgWhite',
+  opacity: 0.8,
+  userSelect: 'none',
+  variants: {
+    loading: {
+      false: {
+        display: 'none'
+      }
+    }
+  }
+});
+const COMPARISON_LIMIT = 5;
+function LineChart(props) {
+  const {
+    title,
+    description,
+    data,
+    legendData,
+    xAxisKey,
+    isLoading,
+    period,
+    customXAxisFormat,
+    customYAxisFormat,
+    roundUpYAxis,
+    placeholder,
+    comparatorList,
+    chartTypeLabel,
+    onComparatorChange,
+    customTooltipDate
+  } = props;
+  const [isDividedByThousand, setIsDividedByThousand] = useState(false);
+  const [isComparator, setIsComparator] = useState(false);
+  const [hover, setHover] = useState(null);
+  const [filteredData, setFilteredData] = useState([]);
+  const [maxData, setMaxData] = useState(0);
+  useEffect(() => {
+    if (maxData > 0) {
+      setIsDividedByThousand(String(Math.round(maxData)).length > 10);
+    }
+  }, [maxData]);
+  useEffect(() => {
+    setFilteredData(legendData.map(value => Object.assign(Object.assign({}, value), {
+      hide: false,
+      isCurrency: !!value.isCurrency
+    })));
+    if (legendData.length === 0) {
+      setFilteredData([{
+        dataKey: 'novalue',
+        name: 'novalue',
+        color: colors$2.chartYellow,
+        hide: true
+      }]);
+      setIsComparator(false);
+    }
+    if (legendData.some(l => l.isComparator === true)) {
+      setIsComparator(true);
+      setFilteredData(legendData.map(value => Object.assign(Object.assign({}, value), {
+        hide: false
+      })).slice(0, COMPARISON_LIMIT));
+    }
+  }, [legendData]);
+  const handleActiveDot = e => {
+    const {
+      cx,
+      cy,
+      fill
+    } = e;
+    if (e.dataKey === hover) {
+      return jsx("circle", {
+        cx: cx,
+        cy: cy,
+        r: 10,
+        fill: colors$2.white,
+        stroke: fill,
+        strokeWidth: 3
+      });
+    }
+    return jsx("circle", {
+      cx: cx,
+      cy: cy,
+      r: 10,
+      fill: "#00000000",
+      stroke: "#00000000",
+      strokeWidth: 3
+    });
+  };
+  return jsxs(Fragment, {
+    children: [jsx(TitleLegend, {
+      title: title,
+      description: description,
+      legendData: legendData,
+      filteredData: filteredData,
+      setFilteredData: setFilteredData,
+      isComparator: isComparator,
+      isDividedByThousand: isDividedByThousand,
+      titleOnly: data.length === 0
+    }), jsx(Container, {
+      children: jsxs(StyledContainer, {
+        hidden: data.length < 1,
+        isEmpty: data.length < 1,
+        children: [jsx(ResponsiveContainer, {
+          id: "responsive-container",
+          children: jsxs(LineChart$1, {
+            data: legendData.length === 0 ? data.map(d => Object.assign(Object.assign({}, d), {
+              novalue: 0
+            })) : data,
+            margin: {
+              top: 20,
+              bottom: 5,
+              right: 20
+            },
+            children: [jsx(XAxis, {
+              dataKey: xAxisKey,
+              padding: {
+                left: 20
+              },
+              interval: "preserveEnd",
+              tickLine: false,
+              axisLine: false,
+              hide: data.length === 0,
+              dy: 10,
+              tickFormatter: dateValue => {
+                if (!isValidDate(dateValue)) return dateValue;
+                if (customXAxisFormat) {
+                  return customXAxisFormat(dateValue);
+                }
+                if (period) {
+                  return handleXaxis(dateValue, period);
+                }
+                return dateValue;
+              }
+            }), jsx(YAxis, {
+              textAnchor: "start",
+              tickLine: false,
+              axisLine: false,
+              dy: -10,
+              dx: -50,
+              type: "number",
+              tickCount: maxData === 0 ? 3 : 5,
+              allowDecimals: roundUpYAxis,
+              tickFormatter: val => {
+                if (customYAxisFormat) {
+                  return customYAxisFormat(val);
+                }
+                return compactCurrency(val);
+              },
+              domain: [dataMin => dataMin < 0 ? roundDown(dataMin) : 0, dataMax => {
+                setMaxData(dataMax);
+                return roundUpYAxis ? roundUp(dataMax) : dataMax;
+              }]
+            }), jsx(CartesianGrid, {
+              vertical: false,
+              x: 0,
+              width: 9999
+            }), jsx(Tooltip$2, {
+              cursor: false,
+              content: jsx(Tooltip, {
+                hover: hover,
+                xAxisKey: xAxisKey,
+                chartTypeLabel: chartTypeLabel,
+                legendData: filteredData,
+                maxValue: maxData,
+                customTooltipDate: customTooltipDate
+              })
+            }), !isLoading && filteredData.map(legend => data.length === 1 ? jsx(Line, {
+              type: "monotone",
+              dot: false,
+              dataKey: legend.dataKey,
+              stroke: legend.color,
+              hide: legend.hide,
+              strokeWidth: 4,
+              onMouseOver: () => setHover(legend.dataKey),
+              activeDot: {
+                onMouseOver: (_, b) => {
+                  const {
+                    cx,
+                    cy,
+                    fill
+                  } = b;
+                  setHover(legend.dataKey);
+                  return jsx("circle", {
+                    cx: cx,
+                    cy: cy,
+                    r: 10,
+                    fill: colors$2.white,
+                    stroke: fill,
+                    strokeWidth: 3
+                  });
+                },
+                onMouseLeave: () => setHover(null)
+              }
+            }, legend.name) : jsx(Line, {
+              type: "monotone",
+              dot: false,
+              dataKey: legend.dataKey,
+              stroke: legend.color,
+              hide: legend.hide,
+              strokeWidth: 4,
+              onMouseOver: () => setHover(legend.dataKey),
+              activeDot: handleActiveDot
+            }, legend.name))]
+          })
+        }), jsxs(ErrorWrapper, {
+          hidden: data.length > 0,
+          children: [jsx(Image, {
+            src: img,
+            alt: "no-data-content"
+          }), jsx(Text, {
+            variant: "status",
+            children: "Tidak ada data yang dapat ditampilkan"
+          })]
+        }), jsx(ContainerLoading, {
+          loading: isLoading,
+          children: jsx(Text, {
+            variant: "caption",
+            children: "Loading .... "
+          })
+        })]
+      })
+    }), isComparator && comparatorList && jsx(Comparator, {
+      legendData: comparatorList,
+      placeholder: placeholder,
+      option: filteredData,
+      onCloseClick: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'DELETE',
+        payload: x
+      }),
+      onComparatorAdd: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'ADD',
+        payload: x
+      }),
+      onComparatorSearch: x => onComparatorChange === null || onComparatorChange === void 0 ? void 0 : onComparatorChange({
+        type: 'SEARCH',
+        payload: x
+      })
+    })]
+  });
+}
+LineChart.defaultProps = {
+  customXAxisFormat: undefined,
+  onComparatorChange: undefined,
+  comparatorList: [],
+  placeholder: 'Cari ...',
+  roundUpYAxis: true,
+  period: undefined
+};
+
+const {
+  colors: colors$1
+} = foundations;
+const renderLegend$1 = (formattedData, legend, subtitle, tickFormatter) => jsxs(Box, {
+  css: {
+    marginTop: '$spacing-09'
+  },
+  children: [subtitle && jsx(Flex, {
+    justify: "center",
+    children: jsx(Heading, {
+      css: {
+        marginBottom: '$spacing-06'
+      },
+      heading: "sectionTitle",
+      children: subtitle
+    })
+  }), formattedData.length > 0 && jsx(Flex, {
+    direction: "column",
+    gap: 5,
+    children: formattedData.map((data, index) => {
+      var _a, _b;
+      return jsxs(Box, {
+        children: [jsxs(Flex, {
+          justify: "between",
+          children: [jsxs(Flex, {
+            align: "center",
+            children: [jsx(Box, {
+              css: {
+                backgroundColor: data.color,
+                borderRadius: '50%',
+                height: 12,
+                width: 12,
+                display: 'inline-block',
+                marginRight: '$spacing-03'
+              }
+            }), jsx(Box, {
+              css: {
+                width: 120
+              },
+              children: jsx(Text, {
+                variant: "label",
+                color: "secondary",
+                children: data.name
+              })
+            })]
+          }), legend.showTotal && jsx(Text, {
+            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
+          })]
+        }), jsx(Separator, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        })]
+      }, index);
+    })
+  })]
+});
+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 = {},
+    active = false
+  }) => {
+    var _a;
+    if (active) {
+      const {
+        total,
+        name
+      } = payload[0].payload;
+      return jsxs(Box, {
+        css: {
+          backgroundColor: '$textContent',
+          color: '$white',
+          borderRadius: '$sm',
+          padding: '$spacing-02',
+          flexDirection: 'column'
+        },
+        children: [jsx(Text, {
+          variant: "placeholder",
+          color: "disable",
+          css: {
+            fontSize: 11
+          },
+          children: name
+        }), jsx(Paragraph, {
+          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
+        })]
+      });
+    }
+    return null;
+  };
+  return jsxs(Box, {
+    children: [title && jsx(Heading, {
+      heading: "sectionTitle",
+      children: title
+    }), jsx(Box, {
+      css: Object.assign({
+        width: MIN_WIDTH,
+        height: MIN_HEIGHT,
+        marginTop: '$spacing-07'
+      }, css),
+      children: jsx(ResponsiveContainer, {
+        children: jsxs(BarChart, {
+          width: MIN_WIDTH,
+          height: MIN_HEIGHT,
+          data: formattedData,
+          layout: isHorizontal ? 'vertical' : 'horizontal',
+          children: [jsx(CartesianGrid, {
+            stroke: colors$1.gray150,
+            vertical: isHorizontal,
+            horizontal: !isHorizontal
+          }), isHorizontal && jsx(XAxis, Object.assign({
+            type: "number",
+            stroke: colors$1.textSecondary,
+            fontSize: 12,
+            axisLine: false
+          }, isHorizontal && {
+            tickFormatter
+          })), 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
+          })), 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, {})
+          }), (legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, {
+            content: renderLegend$1(formattedData, legend, subtitle, tickFormatter)
+          }), jsxs(Bar, {
+            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
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+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 = 75;
+  const IMG_HEIGHT = 75;
+  return jsx(React__default.Fragment, {
+    children: jsxs("g", {
+      children: [jsx("clipPath", {
+        id: "circleAvatar",
+        children: jsx("circle", {
+          cx: cx + 1,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: "#FFFFFF"
+        })
+      }), validAvatar ? jsx("image", {
+        x: cx - IMG_WIDHT / 2,
+        y: cy - IMG_HEIGHT / 2,
+        width: IMG_WIDHT,
+        height: IMG_HEIGHT,
+        href: avatar,
+        clipPath: "url(#circleAvatar)"
+      }) : jsxs(React__default.Fragment, {
+        children: [jsx("circle", {
+          cx: cx,
+          cy: cy,
+          r: IMG_WIDHT / 2,
+          fill: foundations.colors.bgBorder
+        }), jsx("text", {
+          x: cx,
+          y: cy,
+          textAnchor: "middle",
+          alignmentBaseline: "middle",
+          fontFamily: "main",
+          fontWeight: "600",
+          children: acronym
+        })]
+      }), jsx(Sector, {
+        cx: cx,
+        cy: cy,
+        innerRadius: innerRadius,
+        outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        fill: fill,
+        style: {
+          outline: 'none'
+        }
+      })]
+    })
+  });
+};
+const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
+  children: [jsx(Flex, {
+    css: {
+      marginTop: '$spacing-05',
+      height: 18
+    },
+    justify: "center",
+    children: subtitle && jsx(Heading, {
+      heading: "sectionTitle",
+      children: subtitle
+    })
+  }), formattedData.length > 0 && jsx(Flex, {
+    css: {
+      marginTop: '$spacing-06'
+    },
+    direction: "column",
+    gap: 5,
+    children: formattedData === null || formattedData === void 0 ? void 0 : formattedData.map((data, index) => {
+      var _a;
+      return jsxs(Box, {
+        children: [jsxs(Flex, {
+          justify: "between",
+          children: [jsxs(Flex, {
+            align: "center",
+            children: [jsx(Box, {
+              css: {
+                backgroundColor: data.color,
+                borderRadius: '50%',
+                height: 12,
+                width: 12,
+                display: 'inline-block',
+                marginRight: '$spacing-03'
+              }
+            }), jsx(Box, {
+              css: {
+                width: 120
+              },
+              children: jsx(Text, {
+                variant: "label",
+                color: "secondary",
+                children: data.name
+              })
+            })]
+          }), (legend === null || legend === void 0 ? void 0 : legend.showTotal) && jsx(Text, {
+            variant: "label",
+            color: "secondary",
+            children: (_a = formattedData[index]) === null || _a === void 0 ? void 0 : _a.total
+          })]
+        }), jsx(Separator, {
+          css: {
+            marginTop: '$spacing-03'
+          }
+        })]
+      }, index);
+    })
+  })]
+});
+const PieChart = ({
+  data,
+  css,
+  avatarURL,
+  avatarAcronym,
+  validAvatar,
+  legend,
+  isMobile,
+  tooltip,
+  title,
+  subtitle,
+  label,
+  outerRadius,
+  innerRadius
+}) => {
+  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' ? subtitle ? 420 : 380 : 230;
+  const CONTAINER_WIDTH = isMobile ? 350 : 450;
+  const CHART_HEIGHT = 150;
+  const CHART_WIDTH = 450;
+  const CustomTooltip = ({
+    payload = {},
+    active = false
+  }) => {
+    var _a;
+    if (active) {
+      const {
+        total,
+        name
+      } = payload[0].payload;
+      return jsxs(Box, {
+        css: {
+          backgroundColor: '$textContent',
+          color: '$white',
+          borderRadius: '$sm',
+          padding: '$spacing-02',
+          flexDirection: 'column'
+        },
+        children: [jsx(Text, {
+          variant: "placeholder",
+          color: "disable",
+          css: {
+            fontSize: 11
+          },
+          children: name
+        }), jsx(Paragraph, {
+          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
+        })]
+      });
+    }
+    return null;
+  };
+  return jsxs(Box, {
+    children: [title && jsx(Heading, {
+      heading: "sectionTitle",
+      children: title
+    }), jsx(Box, {
+      css: Object.assign({
+        position: 'relative',
+        width: CONTAINER_WIDTH,
+        height: CONTAINER_HEIGHT,
+        marginTop: '$spacing-07'
+      }, css),
+      children: jsx(ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        children: jsxs(PieChart$1, {
+          width: CHART_WIDTH,
+          height: CHART_HEIGHT,
+          children: [jsxs(Pie, Object.assign({
+            activeIndex: activeIndex,
+            activeShape: shape => renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef),
+            data: formattedData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: innerRadius,
+            outerRadius: outerRadius,
+            dataKey: "total",
+            onMouseEnter: x => {
+              setActiveIndex(formattedData.findIndex(y => y.name === x.name));
+              activeRef.current = true;
+            },
+            onMouseLeave: () => activeRef.current = false,
+            blendStroke: true
+          }, (label === null || label === void 0 ? void 0 : label.show) && (label === null || label === void 0 ? void 0 : label.render) && {
+            label: e => {
+              var _a;
+              return (_a = label === null || label === void 0 ? void 0 : label.render) === null || _a === void 0 ? void 0 : _a.call(label, e);
+            },
+            labelLine: false
+          }, {
+            children: [formattedData.map(item => jsx(Cell, {
+              fill: item.color || colors.chartGreen
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsx(LabelList, {
+              stroke: "0",
+              fill: colors.textWhite,
+              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
+            })]
+          })), 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, {})
+          }), Boolean(legend === null || legend === void 0 ? void 0 : legend.show) && jsx(Legend, Object.assign({
+            height: (legend === null || legend === void 0 ? void 0 : legend.height) || 210
+          }, (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)
+          }))]
+        })
+      })
+    })]
+  });
+};
+PieChart.defaultProps = {
+  data: [],
+  avatarURL: undefined,
+  avatarAcronym: '',
+  validAvatar: false,
+  legend: {
+    show: true,
+    showTotal: true,
+    data: [],
+    position: 'right',
+    height: 210
+  },
+  isMobile: false,
+  outerRadius: 100,
+  innerRadius: 70
+};
+
+export { BarChartComponent as BarChart, LineChart, PieChart };