@salesgenterp/ui-components 0.4.126 → 0.4.128

package/dist/index.js

@@ -25,6 +25,7 @@ var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
 var styles = require('@mui/material/styles');
 var useMediaQuery = _interopDefault(require('@mui/material/useMediaQuery'));
+var reactRouterDom = require('react-router-dom');
 var moment = _interopDefault(require('moment'));
 var lodash = require('lodash');
 var axios = _interopDefault(require('axios'));
@@ -289,7 +290,7 @@ function createCommonjsModule(fn, module) {
  */
 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment$1=e;var Lazy=t;var Memo=r;var Portal=d;
 var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
 var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
 var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
@@ -301,7 +302,7 @@ var reactIs_production_min = {
 	ContextProvider: ContextProvider,
 	Element: Element,
 	ForwardRef: ForwardRef,
-	Fragment: Fragment,
+	Fragment: Fragment$1,
 	Lazy: Lazy,
 	Memo: Memo,
 	Portal: Portal,
@@ -3636,6 +3637,20 @@ var getLocalTime = function getLocalTime(_ref) {
   }
   return convertedTime;
 };
+var getUTCTime$1 = function getUTCTime(_ref2) {
+  var time = _ref2.time,
+    _ref2$format = _ref2.format,
+    format = _ref2$format === void 0 ? DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT : _ref2$format,
+    isMoment = _ref2.isMoment;
+  if (!time) {
+    return time;
+  }
+  var convertedTime = moment(time).utc();
+  if (!isMoment) {
+    convertedTime = convertedTime.format(format);
+  }
+  return convertedTime;
+};
 function hexToRgbA(hex) {
   var c;
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
@@ -4264,7 +4279,7 @@ var PaperContainer = styled(material.Paper)(_templateObject2$9 || (_templateObje
 });
 var TableStyledContainer = styled(material.TableContainer)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 12px 12px 0 0 !important;\n"])));
 var TableStyled = styled(material.Table)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  // font-family: Poppins !important;\n  background-color: ", " !important;\n  color: ", " !important;\n  font-weight: ", ";\n  padding: 12px !important;\n  font-size: 1.1rem;\n"])), function (props) {
+var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  // font-family: Poppins !important;\n  background-color: ", " !important;\n  color: ", " !important;\n  font-weight: ", ";\n  padding: 12px !important;\n  border-bottom: 1px solid #000000D9 !important;\n  font-size: 1.1rem;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
@@ -4281,18 +4296,20 @@ var _templateObject$b, _templateObject2$a;
 var DateRangePicker = function DateRangePicker(_ref) {
   var onChange = _ref.onChange,
     fontColor = _ref.fontColor,
-    primaryColor = _ref.primaryColor;
-  var _useState = React.useState(null),
+    primaryColor = _ref.primaryColor,
+    initialStartDate = _ref.initialStartDate,
+    initialEndDate = _ref.initialEndDate;
+  var _useState = React.useState(initialStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
-  var _useState2 = React.useState(null),
+  var _useState2 = React.useState(initialEndDate),
     endDate = _useState2[0],
     setEndDate = _useState2[1];
   var onDateChange = function onDateChange(data) {
     if (startDate && endDate) {
       onChange && startDate && endDate && onChange({
-        startDate: moment$1(startDate).format(DATE_FORMATS.DEFAULT_DATE_FORMAT),
-        endDate: moment$1(endDate).format(DATE_FORMATS.DEFAULT_DATE_FORMAT)
+        startDate: moment$1(startDate).format(DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT),
+        endDate: moment$1(endDate).format(DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT)
       });
     } else {
       setStartDate(null);
@@ -4336,7 +4353,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
   }, "Apply"))));
 };
 var Root$1 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose([""])));
-var DatePickerContainer = styled(DesktopDatePicker.DesktopDatePicker)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  .MuiFormLabel-root,\n  svg,\n  input {\n    color: ", " !important;\n  }\n  fieldset {\n    border-color: ", " !important;\n  }\n  input {\n    padding: 8px;\n  }\n  .MuiFormLabel-root.MuiInputLabel-shrink {\n    top: 0;\n  }\n  .MuiFormLabel-root {\n    top: -7px;\n  }\n"])), function (props) {
+var DatePickerContainer = styled(DesktopDatePicker.DesktopDatePicker)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  margin: 0.4rem 0 !important;\n  margin-right: ", ";\n  .MuiFormLabel-root,\n  svg,\n  input {\n    color: ", " !important;\n  }\n  fieldset {\n    border-color: ", " !important;\n  }\n  input {\n    padding: 8px;\n  }\n  .MuiFormLabel-root.MuiInputLabel-shrink {\n    top: 0;\n  }\n  .MuiFormLabel-root {\n    top: -7px;\n  }\n"])), function (props) {
   return props.marginRight && '4px !important';
 }, function (props) {
   return props.fontColor;
@@ -4385,7 +4402,14 @@ var Dashboard = function Dashboard(_ref) {
     });
   };
   var onDateChange = function onDateChange(data) {
-    setSelectDates(data);
+    setSelectDates({
+      startDate: getUTCTime({
+        time: data === null || data === void 0 ? void 0 : data.startDate
+      }),
+      endDate: getUTCTime({
+        time: data === null || data === void 0 ? void 0 : data.endDate
+      })
+    });
     setTriggerTableData(getRandomString());
   };
   var downloadInvoice = function downloadInvoice(orderId) {
@@ -4880,7 +4904,7 @@ var sideMenuItems = [{
     Icon: md.MdPeopleAlt
   }]
 }, {
-  name: 'Nested Pages',
+  name: 'Deals',
   Icon: md.MdLibraryBooks,
   items: [{
     name: 'Deals List',
@@ -4901,13 +4925,191 @@ var SideMenu = function SideMenu(props) {
   }));
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9;
+var Statement = function Statement(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    serviceApiEndPoint = _ref.serviceApiEndPoint,
+    token = _ref.token,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    backgroundColor = _ref.backgroundColor,
+    fontColor = _ref.fontColor;
+  var _useState = React.useState({}),
+    setCustomerData = _useState[1];
+  var _useState2 = React.useState({
+      startDate: getUTCTime$1({
+        time: moment$1().startOf('month')
+      }),
+      endDate: getUTCTime$1({
+        time: moment$1().endOf('month')
+      })
+    }),
+    selectDates = _useState2[0],
+    setSelectDates = _useState2[1];
+  var _useState3 = React.useState(getRandomString()),
+    triggerTableData = _useState3[0],
+    setTriggerTableData = _useState3[1];
+
+  var onDateChange = function onDateChange(data) {
+    setSelectDates({
+      startDate: getUTCTime$1({
+        time: data === null || data === void 0 ? void 0 : data.startDate
+      }),
+      endDate: getUTCTime$1({
+        time: data === null || data === void 0 ? void 0 : data.endDate
+      })
+    });
+    setTriggerTableData(getRandomString());
+  };
+  var columns = [{
+    id: 'date',
+    label: 'Date',
+    minWidth: 150,
+    format: function format(value) {
+      return getLocalTime({
+        time: value
+      });
+    }
+  }, {
+    id: 'type',
+    label: 'Type',
+    minWidth: 150
+  }, {
+    id: 'id',
+    label: 'Order Id',
+    minWidth: 150
+  }, {
+    id: 'description',
+    label: 'Description',
+    minWidth: 150
+  }, {
+    label: 'Amount',
+    id: 'amount',
+    format: renderMoney,
+    minWidth: 150
+  }, {
+    label: 'Due Balance',
+    id: 'dueInvoiceAmount',
+    format: renderMoney,
+    minWidth: 150
+  }, {
+    label: 'Total Balance',
+    id: 'balance',
+    format: renderMoney,
+    minWidth: 150
+  }];
+  React.useEffect(function () {
+    (function () {
+      try {
+        var _temp2 = _catch(function () {
+          return Promise.resolve(API({
+            url: "/ecommerce/customer",
+            apiEndPoint: apiEndPoint,
+            token: token
+          })).then(function (customerDataResponse) {
+            setCustomerData(customerDataResponse);
+          });
+        }, function () {});
+        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
+      } catch (e) {
+        Promise.reject(e);
+      }
+    })();
+  }, []);
+  var print = function print() {
+    var location = "/cusomter/statement?token=" + token + "&startDate=" + selectDates.startDate + "&endDate=" + selectDates.endDate;
+    var pdfUrl = "" + serviceApiEndPoint + location;
+    var w = window.open(pdfUrl);
+    w.print();
+  };
+  var getStatementAPIData = function getStatementAPIData(_ref2) {
+    var queryParams = _ref2.queryParams;
+    try {
+      return Promise.resolve(API({
+        url: "/ecommerce/customer/report/statement?customerStoreIds=1199&storeIds=1,2,46,47,48,49,50,51,52,53,54&page=0&size=20",
+        apiEndPoint: apiEndPoint,
+        token: token,
+        queryParams: _extends({}, queryParams, selectDates)
+      })).then(function (data) {
+        return data === null || data === void 0 ? void 0 : data.customerDetailedStatementReportDtoList;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Root$3, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React__default.createElement(TableContainer$1, null, /*#__PURE__*/React__default.createElement(APITable, {
+    cacheFilters: true,
+    extraFilterParams: selectDates,
+    tableHeaderContent: /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Grid, {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(material.Grid, {
+      item: true
+    }, /*#__PURE__*/React__default.createElement(TypographyContainer$1, {
+      variant: "h5",
+      gutterBottom: true,
+      fontColor: fontColor,
+      style: {
+        fontWeight: 600,
+        color: primaryColor,
+        padding: '1rem 0',
+        margin: 0
+      }
+    }, "Statement")), /*#__PURE__*/React__default.createElement(material.Grid, {
+      item: true
+    }, /*#__PURE__*/React__default.createElement(material.Button, {
+      variant: "contained",
+      onClick: function onClick() {
+        return print();
+      },
+      style: {
+        background: primaryColor
+      }
+    }, "Print Statement"))), /*#__PURE__*/React__default.createElement(material.Grid, {
+      container: true,
+      justifyContent: "flex-end",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(material.Grid, {
+      item: true
+    }, /*#__PURE__*/React__default.createElement(DateRangePicker, {
+      fontColor: fontColor,
+      primaryColor: primaryColor,
+      onChange: onDateChange,
+      initialStartDate: moment$1().startOf('month'),
+      initialEndDate: moment$1().endOf('month')
+    })))),
+    listUpdate: triggerTableData,
+    pagination: false,
+    scroll: {
+      x: 1000
+    },
+    tableId: "master-child-map",
+    columns: columns,
+    asyncService: getStatementAPIData,
+    rowKey: 'masterProductId',
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    backgroundColor: backgroundColor,
+    fontColor: fontColor
+  })));
+};
+var Root$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
+var TypographyContainer$1 = styled(material.Typography)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  // font-family: Poppins !important;\n"])), function (props) {
+  return props.fontColor;
+});
+var StatusContainer$1 = styled(material.Grid)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  display: initial;\n  box-shadow: 0px 0px 1px 0px;\n  padding: 2px 4px;\n"])));
+var TableContainer$1 = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 12px;\n"])));
+
+var _templateObject$f, _templateObject2$d, _templateObject3$c;
 var drawerWidth = 280;
 var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
     apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
     _ref$token = _ref.token,
-    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTg5NTk2MSwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjU4NTk5NjEsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.dIkwIIKFvQLR6lTQqufHCcQrC5gVgsryoLQ25VmRZrg' : _ref$token,
+    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NjAyNTc3NiwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjU5ODk3NzYsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.aRtP3Iucn3jyejE8u23JaIOaiWsZgBK-gUHpvqNx2Ek' : _ref$token,
     _ref$primaryColor = _ref.primaryColor,
     primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
     secondaryColor = _ref.secondaryColor,
@@ -4917,6 +5119,7 @@ var AccountDetails = function AccountDetails(_ref) {
     darkMode = _ref.darkMode,
     onChangeColors = _ref.onChangeColors;
   var serviceApiEndPoint = 'https://dev.salesgent.xyz/api'.replace('/api', '/services/pdf');
+  var location = reactRouterDom.useLocation();
   var isMobile = useMediaQuery('(max-width:800px)');
   var _useState = React.useState(true),
     open = _useState[0],
@@ -4965,7 +5168,37 @@ var AccountDetails = function AccountDetails(_ref) {
   React.useEffect(function () {
     isMobile ? setOpen(false) : setOpen(true);
   }, [isMobile]);
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$3, {
+  var renderListItemComponent = function renderListItemComponent(path) {
+    console.log('path: ', path);
+    var key = path.split('/account/dashboard')[1];
+    switch (key) {
+      case 'dashboard':
+        return /*#__PURE__*/React__default.createElement(Dashboard, {
+          apiEndPoint: apiEndPoint,
+          serviceApiEndPoint: serviceApiEndPoint,
+          token: token,
+          primaryColor: colors.primaryColor,
+          secondaryColor: colors.secondaryColor,
+          backgroundColor: colors.backgroundColor,
+          fontColor: colors.fontColor
+        });
+
+      case 'statement':
+        return /*#__PURE__*/React__default.createElement(Statement, {
+          apiEndPoint: apiEndPoint,
+          serviceApiEndPoint: serviceApiEndPoint,
+          token: token,
+          primaryColor: colors.primaryColor,
+          secondaryColor: colors.secondaryColor,
+          backgroundColor: colors.backgroundColor,
+          fontColor: colors.fontColor
+        });
+
+      default:
+        return /*#__PURE__*/React__default.createElement(Fragment, null);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$4, {
     primaryColor: colors.primaryColor,
     sx: {
       display: 'flex'
@@ -5012,7 +5245,7 @@ var AccountDetails = function AccountDetails(_ref) {
         color: colors.fontColor
       }
     }
-  }, open ? /*#__PURE__*/React__default.createElement(md.MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(md.MdMenu, null)), /*#__PURE__*/React__default.createElement(TypographyContainer$1, {
+  }, open ? /*#__PURE__*/React__default.createElement(md.MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(md.MdMenu, null)), /*#__PURE__*/React__default.createElement(TypographyContainer$2, {
     variant: "h6",
     noWrap: true,
     component: "div",
@@ -5029,7 +5262,7 @@ var AccountDetails = function AccountDetails(_ref) {
         color: colors.fontColor
       }
     }
-  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
+  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && renderListItemComponent(location.pathname), apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
     serviceApiEndPoint: serviceApiEndPoint,
     token: token,
@@ -5039,7 +5272,7 @@ var AccountDetails = function AccountDetails(_ref) {
     fontColor: colors.fontColor
   }))))));
 };
-var Root$3 = styled(material.Box)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding: 2rem;\n"])), function (props) {
+var Root$4 = styled(material.Box)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding: 2rem;\n"])), function (props) {
   return props.backgroundImage;
 });
 var Main = styles.styled('main', {
@@ -5066,14 +5299,14 @@ var Main = styles.styled('main', {
     marginLeft: 0
   }, {
     background: backgroundColor,
-    borderRadius: 20,
+    borderRadius: 12,
     overflow: 'auto'
   });
 });
-var ContainerDrawer = styled(material.Drawer)(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 280px;\n    z-index: 1;\n    overflow: hidden;\n    border-top-right-radius: 12px;\n    background: transparent;\n  }\n"])), function (props) {
+var ContainerDrawer = styled(material.Drawer)(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 280px;\n    z-index: 1;\n    overflow: hidden;\n    border-top-right-radius: 12px;\n    background: transparent;\n  }\n"])), function (props) {
   return props.open && '2rem';
 });
-var TypographyContainer$1 = styled(material.Typography)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  // font-family: Poppins !important;\n"])), function (props) {
+var TypographyContainer$2 = styled(material.Typography)(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  // font-family: Poppins !important;\n"])), function (props) {
   return props.fontColor;
 });