@salesgenterp/ui-components 0.4.430 → 0.4.431

package/dist/index.modern.js

@@ -12939,10 +12939,182 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   }))));
 };
 
-var _templateObject$P, _templateObject2$z, _templateObject3$p;
+var _templateObject$P, _templateObject2$z;
 var columns = [{
   id: 'id',
   label: 'Id'
+}, {
+  id: 'productName',
+  label: 'Name'
+}, {
+  id: 'upc',
+  label: 'UPC'
+}, {
+  id: 'sku',
+  label: 'SKU'
+}, {
+  id: 'costPrice',
+  label: 'Cost'
+}, {
+  id: 'quantity',
+  label: 'Quantity'
+}, {
+  id: 'soldQuantity',
+  label: 'Sold Quantity'
+}, {
+  id: 'soldAmount',
+  label: 'Sold Amount'
+}, {
+  id: 'currentStockFromVendor',
+  label: 'Current Stock'
+}, {
+  id: 'tier1Price',
+  label: 'Price'
+}];
+var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
+  var _router$query;
+  var API_BASE_URL = _ref.API_BASE_URL,
+    primaryColor = _ref.primaryColor;
+  var _useState = useState({}),
+    queryParams = _useState[0],
+    setQueryParams = _useState[1];
+  var _useState2 = useState(getRandomString()),
+    triggerTableData = _useState2[0],
+    setTriggerTableData = _useState2[1];
+  var router = useRouter();
+  var sortItems = [{
+    Price: 'tier1_price'
+  }, {
+    Quantity: 'quantity'
+  }, {
+    'Cost Price': 'cost_price'
+  }, {
+    'Sold Quantity': 'sold_quantity'
+  }, {
+    'Current Stock': 'current_stock_of_product_from_vendor'
+  }];
+  var sortDirection = [{
+    Ascending: 'asc'
+  }, {
+    Descending: 'desc'
+  }];
+  var mappedItems = Object.entries(sortItems.reduce(function (acc, cur) {
+    return _extends({}, acc, cur);
+  }, {})).map(function (_ref2) {
+    var key = _ref2[0],
+      value = _ref2[1];
+    return {
+      label: key,
+      value: value
+    };
+  });
+  var mappedDirection = Object.entries(sortDirection.reduce(function (acc, cur) {
+    return _extends({}, acc, cur);
+  }, {})).map(function (_ref3) {
+    var key = _ref3[0],
+      value = _ref3[1];
+    return {
+      label: key,
+      value: value
+    };
+  });
+  var getItem = erLocalStorage.getItem;
+  var VENDOR_TOKEN = STORAGE_KEYS.VENDOR_TOKEN;
+  var token = getItem(VENDOR_TOKEN);
+  var onSortByItemChange = function onSortByItemChange(selectedNames) {
+    setQueryParams(_extends({}, queryParams, {
+      sort: selectedNames
+    }));
+    setTriggerTableData(getRandomString());
+  };
+  var handleSortByOrder = function handleSortByOrder(order) {
+    setQueryParams(_extends({}, queryParams, {
+      sortDirection: order
+    }));
+    setTriggerTableData(getRandomString());
+  };
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+    cacheFilters: true,
+    extraFilterParams: queryParams,
+    tableHeaderContent: /*#__PURE__*/React__default.createElement(Grid, {
+      container: true,
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(TypographyContainer$8, {
+      variant: "h4",
+      gutterBottom: true,
+      fontColor: '#000',
+      style: {
+        fontWeight: 600,
+        color: primaryColor,
+        padding: '1rem 0',
+        margin: 0,
+        alignItems: 'baseline'
+      }
+    }, /*#__PURE__*/React__default.createElement(IoArrowBack, {
+      onClick: function onClick() {
+        return router.back();
+      },
+      style: {
+        fontSize: '1.5rem',
+        cursor: 'pointer',
+        marginRight: '1rem',
+        color: '#000'
+      }
+    }), "Purchase Order Details"), /*#__PURE__*/React__default.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React__default.createElement(MuiSelect, {
+      label: "Sort by order",
+      defaultValue: [],
+      onChange: handleSortByOrder,
+      options: mappedDirection || [],
+      valueKey: "value",
+      labelKey: "label",
+      multiple: false,
+      fontColor: '#000',
+      primaryColor: primaryColor,
+      maxWidth: 300,
+      checkAllOption: false
+    }), /*#__PURE__*/React__default.createElement(MuiSelect, {
+      label: "Select item",
+      defaultValue: [],
+      onChange: onSortByItemChange,
+      options: mappedItems || [],
+      valueKey: "value",
+      labelKey: "label",
+      multiple: false,
+      fontColor: '#000',
+      primaryColor: primaryColor,
+      maxWidth: 300,
+      checkAllOption: false
+    }))),
+    listUpdate: triggerTableData,
+    pagination: false,
+    scroll: {
+      x: 1000
+    },
+    tableId: "master-child-map",
+    columns: columns,
+    apiData: {
+      url: "/vendor/portal/purchaseOrder/" + (router === null || router === void 0 ? void 0 : (_router$query = router.query) === null || _router$query === void 0 ? void 0 : _router$query.id),
+      apiEndPoint: API_BASE_URL,
+      token: token
+    },
+    primaryColor: primaryColor,
+    secondaryColor: '#fff',
+    backgroundColor: '#424242',
+    fontColor: '#000'
+  })));
+};
+var TypographyContainer$8 = styled(Typography)(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.fontColor;
+});
+var TableContainer$2 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
+
+var _templateObject$Q, _templateObject2$A, _templateObject3$p;
+var columns$1 = [{
+  id: 'id',
+  label: 'Id'
 }, {
   id: 'insertedTimestamp',
   label: 'Date'
@@ -12972,13 +13144,13 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
   };
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer$3, {
     primaryColor: primaryColor
-  }, /*#__PURE__*/React__default.createElement("span", null, currentTimeText()), /*#__PURE__*/React__default.createElement("b", null, " ", name, "!")), /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+  }, /*#__PURE__*/React__default.createElement("span", null, currentTimeText()), /*#__PURE__*/React__default.createElement("b", null, " ", name, "!")), /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     tableHeaderContent: /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
       justifyContent: "space-between",
       alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(TypographyContainer$8, {
+    }, /*#__PURE__*/React__default.createElement(TypographyContainer$9, {
       variant: "h4",
       gutterBottom: true,
       fontColor: '#000',
@@ -12994,7 +13166,7 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: columns,
+    columns: columns$1,
     apiData: {
       url: "/vendor/portal/purchaseOrder/list",
       apiEndPoint: API_BASE_URL,
@@ -13007,15 +13179,15 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
     handlePoDetails: handlePoDetails
   })));
 };
-var TypographyContainer$8 = styled(Typography)(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer$9 = styled(Typography)(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
-var TableContainer$2 = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
+var TableContainer$3 = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
 var TitleContainer$3 = styled.h4(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  span {\n    color: '#000';\n    font-size: 2.7rem;\n    font-weight: 500;\n  }\n  b {\n    color: ", ";\n    font-size: 2.7rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 });
 
-var columns$1 = [{
+var columns$2 = [{
   id: 'id',
   label: 'Id'
 }, {
@@ -13072,14 +13244,14 @@ var VendorInventory = function VendorInventory(_ref) {
     });
     setTriggerTableData(getRandomString());
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     extraFilterParams: selectDates,
     tableHeaderContent: /*#__PURE__*/React__default.createElement(Grid, {
       container: true,
       justifyContent: "space-between",
       alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(TypographyContainer$8, {
+    }, /*#__PURE__*/React__default.createElement(TypographyContainer$9, {
       variant: "h4",
       gutterBottom: true,
       fontColor: '#000',
@@ -13104,7 +13276,7 @@ var VendorInventory = function VendorInventory(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: columns$1,
+    columns: columns$2,
     apiData: {
       apiEndPoint: API_BASE_URL,
       token: token,
@@ -13117,7 +13289,7 @@ var VendorInventory = function VendorInventory(_ref) {
   })));
 };
 
-var _templateObject$Q, _templateObject2$A, _templateObject3$q, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$8;
+var _templateObject$R, _templateObject2$B, _templateObject3$q, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$8;
 var VendorLogin = function VendorLogin(_ref) {
   var primaryColor = _ref.primaryColor,
     API_BASE_URL = _ref.API_BASE_URL;
@@ -13223,8 +13395,8 @@ var VendorLogin = function VendorLogin(_ref) {
     color: "inherit"
   }) : 'sign in'))))));
 };
-var Container$2 = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgb(255, 255, 255);\n  font-size: 16px !important;\n  padding: 1rem;\n  @media only screen and (max-width: 640px) {\n    font-size: 14px !important;\n  }\n"])));
-var StyledLogin = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  height: 70%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 1em;\n  align-items: center;\n"])));
+var Container$2 = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgb(255, 255, 255);\n  font-size: 16px !important;\n  padding: 1rem;\n  @media only screen and (max-width: 640px) {\n    font-size: 14px !important;\n  }\n"])));
+var StyledLogin = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  height: 70%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 1em;\n  align-items: center;\n"])));
 var StyledCard = styled(Card)(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  width: min(100%, 489px);\n  height: 100%;\n  max-height: 450px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #cac8c8;\n  flex-direction: column;\n  background: white;\n  // min-height: 500px;\n  h4 {\n    font-size: 1.5em;\n    margin-bottom: 1em;\n    margin-top: -2em;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  button {\n    text-transform: capitalize;\n    letter-spacing: 1px;\n    font-size: 1em;\n    font-weight: 500;\n  }\n"])));
 var H1 = styled(Typography)(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  margin-top: 1rem;\n"])));
 var StyleInputBx = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 1px solid rgb(202, 200, 200);\n  // padding:.5em;\n  min-width: min(80vw, 360px);\n  // border-radius: 20px;\n  overflow: hidden;\n  margin: 0.6em 0;\n  // padding:.2em 0;\n  .icon {\n    border-right: 1px solid rgb(202, 200, 200);\n    height: 100%;\n    padding: 1em;\n    display: grid;\n    place-items: center;\n    width: 15%;\n    box-sizing: border-box;\n    color: grey;\n  }\n  input {\n    width: 85%;\n    height: 100%;\n    outline: none;\n    padding: 0 1em;\n    font-size: 1.1em;\n    border: none;\n    &:focus,\n    &:hover {\n      outline: none !important;\n    }\n  }\n"])));
@@ -13232,178 +13404,6 @@ var ShowPassBtn = styled.span(_templateObject6$e || (_templateObject6$e = _tagge
 var ButtonContianer = styled.span(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 360px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  // @include flexRow(space-between);\n  margin-top: 1em;\n  @media only screen and (max-width: 640px) {\n    padding: 0 1em;\n  }\n"])));
 var StyledButton$1 = styled(Button)(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n  width: 100px;\n  height: 46px;\n  box-sizing: border-box;\n\n  span {\n    padding: 0.5em;\n  }\n  @media only screen and (max-width: 640px) {\n    height: 35px;\n  }\n"])));
 
-var _templateObject$R, _templateObject2$B;
-var columns$2 = [{
-  id: 'id',
-  label: 'Id'
-}, {
-  id: 'productName',
-  label: 'Name'
-}, {
-  id: 'upc',
-  label: 'UPC'
-}, {
-  id: 'sku',
-  label: 'SKU'
-}, {
-  id: 'costPrice',
-  label: 'Cost'
-}, {
-  id: 'quantity',
-  label: 'Quantity'
-}, {
-  id: 'soldQuantity',
-  label: 'Sold Quantity'
-}, {
-  id: 'soldAmount',
-  label: 'Sold Amount'
-}, {
-  id: 'currentStockFromVendor',
-  label: 'Current Stock'
-}, {
-  id: 'tier1Price',
-  label: 'Price'
-}];
-var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
-  var _router$query;
-  var API_BASE_URL = _ref.API_BASE_URL,
-    primaryColor = _ref.primaryColor;
-  var _useState = useState({}),
-    queryParams = _useState[0],
-    setQueryParams = _useState[1];
-  var _useState2 = useState(getRandomString()),
-    triggerTableData = _useState2[0],
-    setTriggerTableData = _useState2[1];
-  var router = useRouter();
-  var sortItems = [{
-    Price: 'tier1_price'
-  }, {
-    Quantity: 'quantity'
-  }, {
-    'Cost Price': 'cost_price'
-  }, {
-    'Sold Quantity': 'sold_quantity'
-  }, {
-    'Current Stock': 'current_stock_of_product_from_vendor'
-  }];
-  var sortDirection = [{
-    Ascending: 'asc'
-  }, {
-    Descending: 'desc'
-  }];
-  var mappedItems = Object.entries(sortItems.reduce(function (acc, cur) {
-    return _extends({}, acc, cur);
-  }, {})).map(function (_ref2) {
-    var key = _ref2[0],
-      value = _ref2[1];
-    return {
-      label: key,
-      value: value
-    };
-  });
-  var mappedDirection = Object.entries(sortDirection.reduce(function (acc, cur) {
-    return _extends({}, acc, cur);
-  }, {})).map(function (_ref3) {
-    var key = _ref3[0],
-      value = _ref3[1];
-    return {
-      label: key,
-      value: value
-    };
-  });
-  var getItem = erLocalStorage.getItem;
-  var VENDOR_TOKEN = STORAGE_KEYS.VENDOR_TOKEN;
-  var token = getItem(VENDOR_TOKEN);
-  var onSortByItemChange = function onSortByItemChange(selectedNames) {
-    setQueryParams(_extends({}, queryParams, {
-      sort: selectedNames
-    }));
-    setTriggerTableData(getRandomString());
-  };
-  var handleSortByOrder = function handleSortByOrder(order) {
-    setQueryParams(_extends({}, queryParams, {
-      sortDirection: order
-    }));
-    setTriggerTableData(getRandomString());
-  };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
-    cacheFilters: true,
-    extraFilterParams: queryParams,
-    tableHeaderContent: /*#__PURE__*/React__default.createElement(Grid, {
-      container: true,
-      justifyContent: "space-between",
-      alignItems: "center"
-    }, /*#__PURE__*/React__default.createElement(TypographyContainer$9, {
-      variant: "h4",
-      gutterBottom: true,
-      fontColor: '#000',
-      style: {
-        fontWeight: 600,
-        color: primaryColor,
-        padding: '1rem 0',
-        margin: 0,
-        alignItems: 'baseline'
-      }
-    }, /*#__PURE__*/React__default.createElement(IoArrowBack, {
-      onClick: function onClick() {
-        return router.back();
-      },
-      style: {
-        fontSize: '1.5rem',
-        cursor: 'pointer',
-        marginRight: '1rem',
-        color: '#000'
-      }
-    }), "Purchase Order Details"), /*#__PURE__*/React__default.createElement(Grid, {
-      item: true
-    }, /*#__PURE__*/React__default.createElement(MuiSelect, {
-      label: "Sort by order",
-      defaultValue: [],
-      onChange: handleSortByOrder,
-      options: mappedDirection || [],
-      valueKey: "value",
-      labelKey: "label",
-      multiple: false,
-      fontColor: '#000',
-      primaryColor: primaryColor,
-      maxWidth: 300,
-      checkAllOption: false
-    }), /*#__PURE__*/React__default.createElement(MuiSelect, {
-      label: "Select item",
-      defaultValue: [],
-      onChange: onSortByItemChange,
-      options: mappedItems || [],
-      valueKey: "value",
-      labelKey: "label",
-      multiple: false,
-      fontColor: '#000',
-      primaryColor: primaryColor,
-      maxWidth: 300,
-      checkAllOption: false
-    }))),
-    listUpdate: triggerTableData,
-    pagination: false,
-    scroll: {
-      x: 1000
-    },
-    tableId: "master-child-map",
-    columns: columns$2,
-    apiData: {
-      url: "/vendor/portal/purchaseOrder/" + (router === null || router === void 0 ? void 0 : (_router$query = router.query) === null || _router$query === void 0 ? void 0 : _router$query.id),
-      apiEndPoint: API_BASE_URL,
-      token: token
-    },
-    primaryColor: primaryColor,
-    secondaryColor: '#fff',
-    backgroundColor: '#424242',
-    fontColor: '#000'
-  })));
-};
-var TypographyContainer$9 = styled(Typography)(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
-  return props.fontColor;
-});
-var TableContainer$3 = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
-
 var _templateObject$S, _templateObject2$C, _templateObject3$r, _templateObject4$l;
 var menuItems = [{
   name: 'My Account',
@@ -13442,8 +13442,10 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
     vendorDetails = _useState2[0],
     setVendorDetails = _useState2[1];
   var _useState3 = useState(false),
-    dataLoading = _useState3[0];
-  var getItem = erLocalStorage.getItem;
+    dataLoading = _useState3[0],
+    setDataLoading = _useState3[1];
+  var getItem = erLocalStorage.getItem,
+    removeItem = erLocalStorage.removeItem;
   var VENDOR_TOKEN = STORAGE_KEYS.VENDOR_TOKEN;
   var token = getItem(VENDOR_TOKEN);
   var _useState4 = useState(path || 'dashboard'),
@@ -13453,7 +13455,7 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
     setTabValue(path || 'dashboard');
   }, [path]);
   var onChangePath = function onChangePath(path) {
-    router.push("/vendor-portal?path=" + path);
+    router === null || router === void 0 ? void 0 : router.push("/vendor-portal?path=" + path);
   };
   var onTabChange = function onTabChange(data) {
     setTabValue(data || 'dashboard');
@@ -13483,8 +13485,7 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
             primaryColor: primaryColor
           });
         case 'logout':
-          localStorage.removeItem('vendorToken');
-          localStorage.removeItem('vendorRefreshToken');
+          removeItem(VENDOR_TOKEN);
           router.push('/vendor-portal');
           return /*#__PURE__*/React__default.createElement("h1", null, "Logged out successfully");
         case 'order':
@@ -13516,9 +13517,11 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
     }
   };
   useEffect(function () {
-    if (router.isReady) {
-      var currentPath = router.query.path || 'dashboard';
-      var id = router.query.id;
+    if (router !== null && router !== void 0 && router.isReady) {
+      var _router$query2, _router$query3;
+      setDataLoading(true);
+      var currentPath = (router === null || router === void 0 ? void 0 : (_router$query2 = router.query) === null || _router$query2 === void 0 ? void 0 : _router$query2.path) || 'dashboard';
+      var id = router === null || router === void 0 ? void 0 : (_router$query3 = router.query) === null || _router$query3 === void 0 ? void 0 : _router$query3.id;
       if (token) {
         var queryParams = id ? "path=" + currentPath + "&id=" + id : "path=" + currentPath;
         router.push("/vendor-portal?" + queryParams);
@@ -13526,8 +13529,9 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
       } else {
         router.push('/vendor-portal');
       }
+      setDataLoading(false);
     }
-  }, [token, router.isReady]);
+  }, [token, router]);
   if (!token) {
     return /*#__PURE__*/React__default.createElement(VendorLogin, {
       primaryColor: primaryColor,
@@ -13599,10 +13603,7 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
     skeleton: true
   }, API_BASE_URL && token && renderListItemComponent(tabValue)))))));
 };
-var Root$e = styled(Box)(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  // background-image: url(", ");\n  // background-position: center;\n  // background-repeat: no-repeat;\n  // background-size: cover;\n  padding: 1.4rem;\n  background-color: #fff;\n"])), function (props) {
-  var _props$theme;
-  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundImage;
-});
+var Root$e = styled(Box)(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  padding: 1.4rem;\n  background-color: #fff;\n"])));
 var MainContainer$4 = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  margin: auto;\n  min-height: 100vh;\n  background-color: #fff;\n  max-width: ", ";\n  padding: 2rem;\n  border-radius: 14px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
   return props.open ? '1800px' : '1600px';
 });