@salesgenterp/ui-components 0.4.529 → 0.4.531

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +252 -59
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +253 -60
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +9 -2
package/dist/index.modern.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$3, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card, CardHeader, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Tooltip, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$3 } from '@mui/material';
1
+ import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$3, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card, CardHeader, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Pagination, Tooltip, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$3 } from '@mui/material';
2
2
  import { styled as styled$1 } from '@mui/material/styles';
3
3
  import useMediaQuery from '@mui/material/useMediaQuery';
4
4
  import React__default, { useState, useEffect, forwardRef, createElement, memo, useCallback, Fragment as Fragment$1, useRef, useMemo } from 'react';
@@ -45,6 +45,7 @@ import TableContainer$4 from '@mui/material/TableContainer';
45
45
  import TableHead$1 from '@mui/material/TableHead';
46
46
  import TableRow$1 from '@mui/material/TableRow';
47
47
  import { BounceLoader, PuffLoader } from 'react-spinners';
48
+ import { Virtuoso } from 'react-virtuoso';
48
49
  import Box$1 from '@mui/material/Box';
49
50
  import TableSortLabel$1 from '@mui/material/TableSortLabel';
50
51
  import { HiChevronUpDown } from 'react-icons/hi2';
@@ -6121,14 +6122,14 @@ var TableCellContainer$1 = styled(TableCell$1)(_templateObject9$2 || (_templateO
6121
6122
  });
6122
6123
 
6123
6124
  var _templateObject$r, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3;
6124
- var CartDrawerContainer = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
6125
+ var CartDrawerContainer = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
6125
6126
  return props.maxWidth || '650px';
6126
6127
  });
6127
- var CartDrawerBar = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 600px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
6128
- var CartDrawerProductContainer = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n /* height: 900px; */\n padding: 1rem;\n min-height: 74vh;\n opacity: ", ";\n @media only screen and (max-width: 768px) {\n min-height: 75vh;\n }\n /* background-color: red; */\n"])), function (props) {
6128
+ var CartDrawerBar = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: 0;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 600px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
6129
+ var CartDrawerProductContainer = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n padding-top: 1rem;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n box-sizing: border-box;\n opacity: ", ";\n /* background-color: red; */\n"])), function (props) {
6129
6130
  return props.opacity;
6130
6131
  });
6131
- var CartDrawerBottomSection = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
6132
+ var CartDrawerBottomSection = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
6132
6133
  var CartDrawerOutlinedButton = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n width: 90%;\n height: 3.55rem;\n border: 2px solid;\n border-radius: 1rem;\n display: grid;\n place-items: center;\n font-weight: 500;\n font-size: 1rem;\n transition: 0.5s;\n outline: none;\n text-transform: capitalize;\n border-color: ", ";\n color: ", ";\n text-transform: capitalize;\n margin: 0.6rem 0;\n cursor: pointer;\n background: white;\n &:hover,\n &:focus {\n opacity: 0.8;\n letter-spacing: 1px;\n outline: none;\n }\n @media only screen and (max-width: 600px) {\n height: 2.9rem;\n }\n @media only screen and (max-width: 340px) {\n height: 2.2rem;\n margin: 0.3rem 0;\n }\n"])), function (props) {
6133
6134
  return props.color || 'black';
6134
6135
  }, function (props) {
@@ -6229,7 +6230,7 @@ function useGridSize() {
6229
6230
  return layout;
6230
6231
  }
6231
6232
 
6232
- var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
6233
+ var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2;
6233
6234
  var CartPageSection = styled.section(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 20px;\n max-width: 1600px;\n width: min(1600px, 100%);\n margin: auto;\n @media screen and (max-width: 1200px) {\n padding: 0 1em;\n }\n"])), function (props) {
6234
6235
  return props.bg;
6235
6236
  }, function (props) {
@@ -6269,12 +6270,13 @@ var CartTableContainer = styled(TableContainer$3)(_templateObject7$4 || (_templa
6269
6270
  }, function (props) {
6270
6271
  return props.color;
6271
6272
  });
6272
- var CartButtonsRow = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding-right: 1.85em;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-left: 1em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
6273
+ var CartButtonsRow = styled.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n padding-right: 1.85em;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-left: 1em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
6273
6274
  return props.bg || 'rgba(107, 106, 106, 1)';
6274
6275
  }, function (props) {
6275
6276
  return props.color || 'white';
6276
6277
  });
6277
- var CartPageBox = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n margin-right: 1rem;\n min-height: 30em;\n position: relative;\n @media only screen and (max-width: 768px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
6278
+ var PaginationRow = styled.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 1em 0;\n gap: 1em;\n flex-wrap: wrap;\n .MuiPagination-root {\n .MuiPagination-ul {\n flex-wrap: wrap;\n }\n }\n @media screen and (max-width: 768px) {\n justify-content: center;\n padding: 1em 0.5em;\n }\n"])));
6279
+ var CartPageBox = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n margin-right: 1rem;\n min-height: 30em;\n position: relative;\n @media only screen and (max-width: 768px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
6278
6280
 
6279
6281
  function createCommonjsModule(fn, module) {
6280
6282
  return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -7604,6 +7606,8 @@ var CardRow = function CardRow(_ref) {
7604
7606
  }))));
7605
7607
  };
7606
7608
 
7609
+ var DEFAULT_PAGE_SIZE = 50;
7610
+ var PAGE_SIZE_OPTIONS = [50, 100, 300, 500];
7607
7611
  var headCells = function headCells(_ref) {
7608
7612
  var doNotShowPrice = _ref.doNotShowPrice;
7609
7613
  return [{
@@ -7719,7 +7723,7 @@ EnhancedTableHead.propTypes = {
7719
7723
  rowCount: propTypes.number.isRequired
7720
7724
  };
7721
7725
  function EnhancedTable(_ref2) {
7722
- var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _sortBy, _styles$Btn2, _styles$Btn3;
7726
+ var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8, _styles$Btn9, _styles$Btn10;
7723
7727
  var cartData = _ref2.cartData,
7724
7728
  loading = _ref2.loading,
7725
7729
  imgnotfoundUrl = _ref2.imgnotfoundUrl,
@@ -7748,27 +7752,23 @@ function EnhancedTable(_ref2) {
7748
7752
  var _React$useState4 = useState(cartList),
7749
7753
  cartArray = _React$useState4[0],
7750
7754
  setCartArray = _React$useState4[1];
7751
- var Sort = function Sort() {
7752
- var newArray = cartArray || [];
7753
- var li = orderBy;
7754
- if (order === 'asc') {
7755
- newArray.sort(function (a, b) {
7756
- return a[li] - b[li];
7755
+ var _React$useState5 = useState(1),
7756
+ page = _React$useState5[0],
7757
+ setPage = _React$useState5[1];
7758
+ var _React$useState6 = useState(DEFAULT_PAGE_SIZE),
7759
+ rowsPerPage = _React$useState6[0],
7760
+ setRowsPerPage = _React$useState6[1];
7761
+ var NUMERIC_SORT_COLUMNS = ['quantity', 'standardPrice', 'subtotal'];
7762
+ var handleRequestSort = function handleRequestSort(event, property) {
7763
+ var isSameColumn = orderBy === property;
7764
+ if (isSameColumn) {
7765
+ setOrder(function (prev) {
7766
+ return prev === 'asc' ? 'desc' : 'asc';
7757
7767
  });
7758
- return setCartArray(newArray);
7768
+ } else {
7769
+ setOrderBy(property);
7770
+ setOrder(NUMERIC_SORT_COLUMNS.includes(property) ? 'desc' : 'asc');
7759
7771
  }
7760
- newArray.sort(function (a, b) {
7761
- return b[li] - a[li];
7762
- });
7763
- return setCartArray(newArray);
7764
- };
7765
- useEffect(function () {
7766
- Sort();
7767
- }, [order, orderBy]);
7768
- var handleRequestSort = function handleRequestSort(event, property) {
7769
- var isAsc = orderBy === property && order === 'asc';
7770
- setOrder(isAsc ? 'desc' : 'asc');
7771
- setOrderBy(property);
7772
7772
  };
7773
7773
  var handleSelectAllClick = function handleSelectAllClick(event) {
7774
7774
  if ((selected === null || selected === void 0 ? void 0 : selected.length) < (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length)) {
@@ -7794,6 +7794,38 @@ function EnhancedTable(_ref2) {
7794
7794
  useEffect(function () {
7795
7795
  setCartArray(cartList);
7796
7796
  }, [cartData]);
7797
+ var getSortValue = function getSortValue(row, key) {
7798
+ var _row$key;
7799
+ if (key === 'subtotal') {
7800
+ var _row$discountAmount, _row$quantity, _row$couponDiscount;
7801
+ return ((row === null || row === void 0 ? void 0 : row.standardPrice) - ((_row$discountAmount = row === null || row === void 0 ? void 0 : row.discountAmount) != null ? _row$discountAmount : 0)) * ((_row$quantity = row === null || row === void 0 ? void 0 : row.quantity) != null ? _row$quantity : 0) - ((_row$couponDiscount = row === null || row === void 0 ? void 0 : row.couponDiscount) != null ? _row$couponDiscount : 0);
7802
+ }
7803
+ return (_row$key = row[key]) != null ? _row$key : 0;
7804
+ };
7805
+ var columnSortedArray = useMemo(function () {
7806
+ var arr = [].concat(cartArray || []);
7807
+ var key = orderBy;
7808
+ if (order === 'asc') {
7809
+ arr.sort(function (a, b) {
7810
+ return getSortValue(a, key) - getSortValue(b, key);
7811
+ });
7812
+ } else {
7813
+ arr.sort(function (a, b) {
7814
+ return getSortValue(b, key) - getSortValue(a, key);
7815
+ });
7816
+ }
7817
+ return arr;
7818
+ }, [cartArray, order, orderBy]);
7819
+ var sortedCartArray = sortBy(columnSortedArray, function (o) {
7820
+ return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
7821
+ }) || [];
7822
+ var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
7823
+ var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
7824
+ useEffect(function () {
7825
+ if (page > totalPages) {
7826
+ setPage(1);
7827
+ }
7828
+ }, [totalPages, page]);
7797
7829
  return /*#__PURE__*/createElement(CartPageBox, null, loading && /*#__PURE__*/createElement(Loader$1, null, /*#__PURE__*/createElement(BounceLoader, {
7798
7830
  size: 40,
7799
7831
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
@@ -7801,8 +7833,7 @@ function EnhancedTable(_ref2) {
7801
7833
  })), /*#__PURE__*/createElement(Box$1, {
7802
7834
  sx: {
7803
7835
  width: '100%'
7804
- },
7805
- paddingBottom: "2em"
7836
+ }
7806
7837
  }, /*#__PURE__*/createElement(CartTableContainer, {
7807
7838
  bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
7808
7839
  color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.color
@@ -7821,9 +7852,7 @@ function EnhancedTable(_ref2) {
7821
7852
  disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox,
7822
7853
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
7823
7854
  doNotShowPrice: doNotShowPrice
7824
- }), /*#__PURE__*/createElement(TableBody$1, null, (_sortBy = sortBy(cartArray, function (o) {
7825
- return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
7826
- })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (row, index) {
7855
+ }), /*#__PURE__*/createElement(TableBody$1, null, paginatedCartArray.map(function (row, index) {
7827
7856
  var isItemSelected = isSelected(row);
7828
7857
  return /*#__PURE__*/createElement(CardRow, {
7829
7858
  row: row,
@@ -7838,7 +7867,14 @@ function EnhancedTable(_ref2) {
7838
7867
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
7839
7868
  doNotShowPrice: doNotShowPrice
7840
7869
  });
7841
- }))))), (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/createElement(CartButtonsRow, {
7870
+ }))))), /*#__PURE__*/createElement("div", {
7871
+ style: {
7872
+ display: 'flex',
7873
+ justifyContent: 'space-between',
7874
+ flexWrap: 'wrap',
7875
+ width: '100%'
7876
+ }
7877
+ }, (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/createElement(CartButtonsRow, {
7842
7878
  bg: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
7843
7879
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color
7844
7880
  }, /*#__PURE__*/createElement("button", {
@@ -7852,7 +7888,51 @@ function EnhancedTable(_ref2) {
7852
7888
  });
7853
7889
  setSelected([]);
7854
7890
  }
7855
- }, "remove selected")));
7891
+ }, "remove selected")), sortedCartArray.length > 0 && /*#__PURE__*/createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/createElement(Pagination, {
7892
+ count: totalPages,
7893
+ page: page,
7894
+ onChange: function onChange(_, value) {
7895
+ return setPage(value);
7896
+ },
7897
+ color: "primary",
7898
+ sx: {
7899
+ '& .MuiPaginationItem-root.Mui-selected': {
7900
+ backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background,
7901
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.color) || '#fff',
7902
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.background
7903
+ },
7904
+ '& .MuiPaginationItem-root.Mui-selected:hover': {
7905
+ backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background) + '80',
7906
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.color) || '#fff',
7907
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn9 = styles.Btn) === null || _styles$Btn9 === void 0 ? void 0 : _styles$Btn9.background
7908
+ }
7909
+ },
7910
+ showFirstButton: true,
7911
+ showLastButton: true
7912
+ }), /*#__PURE__*/createElement(FormControl, {
7913
+ size: "small",
7914
+ sx: {
7915
+ minWidth: 120
7916
+ }
7917
+ }, /*#__PURE__*/createElement(Select$1, {
7918
+ value: rowsPerPage,
7919
+ onChange: function onChange(e) {
7920
+ setRowsPerPage(Number(e.target.value));
7921
+ setPage(1);
7922
+ },
7923
+ sx: {
7924
+ '& .MuiSelect-select': {
7925
+ backgroundColor: '#ffffff',
7926
+ borderRadius: '5px',
7927
+ borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn10 = styles.Btn) === null || _styles$Btn10 === void 0 ? void 0 : _styles$Btn10.background) || '#d3d3d3'
7928
+ }
7929
+ }
7930
+ }, PAGE_SIZE_OPTIONS.map(function (size) {
7931
+ return /*#__PURE__*/createElement(MenuItem, {
7932
+ key: size,
7933
+ value: size
7934
+ }, size, " per page");
7935
+ }))))));
7856
7936
  }
7857
7937
 
7858
7938
  var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$5;
@@ -7984,8 +8064,10 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
7984
8064
  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, null)));
7985
8065
  };
7986
8066
 
8067
+ var DEFAULT_PAGE_SIZE$1 = 50;
8068
+ var PAGE_SIZE_OPTIONS$1 = [50, 100, 300, 500];
7987
8069
  var CartPageMainRetail = function CartPageMainRetail(_ref) {
7988
- var _styles$Btn, _sortBy;
8070
+ var _styles$Btn, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8;
7989
8071
  var retail = _ref.retail,
7990
8072
  cartData = _ref.cartData,
7991
8073
  loading = _ref.loading,
@@ -7996,7 +8078,25 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
7996
8078
  clickRedirect = _ref.clickRedirect,
7997
8079
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
7998
8080
  doNotShowPrice = _ref.doNotShowPrice;
8081
+ var _useState = useState(1),
8082
+ page = _useState[0],
8083
+ setPage = _useState[1];
8084
+ var _useState2 = useState(DEFAULT_PAGE_SIZE$1),
8085
+ rowsPerPage = _useState2[0],
8086
+ setRowsPerPage = _useState2[1];
8087
+ var sortedCartArray = useMemo(function () {
8088
+ return sortBy((cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList) || [], function (o) {
8089
+ return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
8090
+ });
8091
+ }, [cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList]);
8092
+ var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
8093
+ var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
8094
+ React__default.useEffect(function () {
8095
+ if (page > totalPages) setPage(1);
8096
+ }, [totalPages, page]);
7999
8097
  return /*#__PURE__*/React__default.createElement("div", {
8098
+ className: ""
8099
+ }, /*#__PURE__*/React__default.createElement("div", {
8000
8100
  className: "scrollDiv"
8001
8101
  }, /*#__PURE__*/React__default.createElement(CardsBox, {
8002
8102
  retail: retail
@@ -8004,10 +8104,9 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8004
8104
  size: 40,
8005
8105
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
8006
8106
  loading: true
8007
- })), (_sortBy = sortBy(cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList, function (o) {
8008
- return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
8009
- })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (item) {
8107
+ })), paginatedCartArray.map(function (item) {
8010
8108
  return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
8109
+ key: item === null || item === void 0 ? void 0 : item.productId,
8011
8110
  item: item,
8012
8111
  loading: loading,
8013
8112
  imgnotfoundUrl: imgnotfoundUrl,
@@ -8018,7 +8117,51 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8018
8117
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8019
8118
  doNotShowPrice: doNotShowPrice
8020
8119
  });
8021
- })));
8120
+ }))), sortedCartArray.length > 0 && /*#__PURE__*/React__default.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination, {
8121
+ count: totalPages,
8122
+ page: page,
8123
+ onChange: function onChange(_, value) {
8124
+ return setPage(value);
8125
+ },
8126
+ color: "primary",
8127
+ sx: {
8128
+ '& .MuiPaginationItem-root.Mui-selected': {
8129
+ backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
8130
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color) || '#fff',
8131
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background
8132
+ },
8133
+ '& .MuiPaginationItem-root.Mui-selected:hover': {
8134
+ backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.background) + '80',
8135
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.color) || '#fff',
8136
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background
8137
+ }
8138
+ },
8139
+ showFirstButton: true,
8140
+ showLastButton: true
8141
+ }), /*#__PURE__*/React__default.createElement(FormControl, {
8142
+ size: "small",
8143
+ sx: {
8144
+ minWidth: 120
8145
+ }
8146
+ }, /*#__PURE__*/React__default.createElement(Select$1, {
8147
+ value: rowsPerPage,
8148
+ onChange: function onChange(e) {
8149
+ setRowsPerPage(Number(e.target.value));
8150
+ setPage(1);
8151
+ },
8152
+ sx: {
8153
+ '& .MuiSelect-select': {
8154
+ backgroundColor: '#ffffff',
8155
+ borderRadius: '5px',
8156
+ borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.background) || '#d3d3d3'
8157
+ }
8158
+ }
8159
+ }, PAGE_SIZE_OPTIONS$1.map(function (size) {
8160
+ return /*#__PURE__*/React__default.createElement(MenuItem, {
8161
+ key: size,
8162
+ value: size
8163
+ }, size, " per page");
8164
+ })))));
8022
8165
  };
8023
8166
 
8024
8167
  var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
@@ -8469,7 +8612,7 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
8469
8612
  };
8470
8613
 
8471
8614
  var _templateObject$w, _templateObject2$o, _templateObject3$i;
8472
- var CartDrawerProduct = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 1rem;\n user-select: none;\n background: #f2f2f290;\n border: 1px solid #f2f2f290;\n padding: 0.5rem;\n border-radius: 12px;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: contain;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n // width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n }\n @media only screen and (max-width: 340px) {\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n }\n }\n"])), function (props) {
8615
+ var CartDrawerProduct = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 1rem;\n user-select: none;\n background: #f2f2f290;\n border: 1px solid #f2f2f290;\n padding: 0.5rem;\n border-radius: 12px;\n box-sizing: border-box;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: contain;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n // width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n }\n @media only screen and (max-width: 340px) {\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n }\n }\n"])), function (props) {
8473
8616
  return props.color || 'grey';
8474
8617
  });
8475
8618
  var CartDrawerQtBox = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n height: 30px;\n width: 86px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #323232;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n input {\n width: 40px;\n height: 100%;\n text-align: center;\n border: none;\n }\n }\n @media only screen and (max-width: 600px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n font-size: 10px;\n }\n @media only screen and (max-width: 340px) {\n min-width: 50px;\n aspect-ratio: 1/2;\n height: 22px;\n font-size: 8px;\n }\n"])));
@@ -8601,7 +8744,7 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
8601
8744
  };
8602
8745
 
8603
8746
  var CartDrawer = function CartDrawer(_ref) {
8604
- var _cartData$cartLineIte, _cartData$cartLineIte2, _cartData$cartLineIte3, _cartData$totalCartPr;
8747
+ var _cartData$cartLineIte, _cartData$cartLineIte3, _cartData$totalCartPr;
8605
8748
  var cartData = _ref.cartData,
8606
8749
  maxWidth = _ref.maxWidth,
8607
8750
  color = _ref.color,
@@ -8616,6 +8759,30 @@ var CartDrawer = function CartDrawer(_ref) {
8616
8759
  doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice,
8617
8760
  _ref$allowToProcessIn = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8618
8761
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref$allowToProcessIn === void 0 ? false : _ref$allowToProcessIn;
8762
+ var containerRef = useRef(null);
8763
+ var _useState = useState(400),
8764
+ listHeight = _useState[0],
8765
+ setListHeight = _useState[1];
8766
+ useEffect(function () {
8767
+ var updateHeight = function updateHeight() {
8768
+ if (containerRef.current) {
8769
+ requestAnimationFrame(function () {
8770
+ var _containerRef$current;
8771
+ var height = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight;
8772
+ if (height && height > 0) {
8773
+ setListHeight(height);
8774
+ }
8775
+ });
8776
+ }
8777
+ };
8778
+ updateHeight();
8779
+ window.addEventListener('resize', updateHeight);
8780
+ var timeoutId = setTimeout(updateHeight, 100);
8781
+ return function () {
8782
+ window.removeEventListener('resize', updateHeight);
8783
+ clearTimeout(timeoutId);
8784
+ };
8785
+ }, [cartData]);
8619
8786
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
8620
8787
  className: "cartDrawer-container",
8621
8788
  maxWidth: maxWidth
@@ -8624,23 +8791,49 @@ var CartDrawer = function CartDrawer(_ref) {
8624
8791
  onClick: function onClick() {
8625
8792
  handleClose();
8626
8793
  }
8627
- })), cartHeadingText && cartHeadingText, /*#__PURE__*/React__default.createElement(Box, null, (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
8794
+ })), cartHeadingText && cartHeadingText, /*#__PURE__*/React__default.createElement(Box, {
8795
+ ref: containerRef,
8796
+ sx: {
8797
+ flex: 1,
8798
+ position: 'relative',
8799
+ minHeight: 0,
8800
+ display: 'flex',
8801
+ flexDirection: 'column',
8802
+ overflow: 'hidden',
8803
+ width: '100%',
8804
+ boxSizing: 'border-box'
8805
+ }
8806
+ }, loading || (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
8628
8807
  opacity: loading ? '.4' : '1'
8629
- }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte2 = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte2 === void 0 ? void 0 : _cartData$cartLineIte2.map(function (product, i) {
8630
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(PuffLoader, {
8631
- color: "black"
8632
- })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
8633
- product: product,
8634
- handleRedirect: handleRedirect,
8635
- handleIncrementDecrement: handleIncrementDecrement,
8636
- handleRemoveProduct: handleRemoveProduct,
8637
- color: color,
8638
- key: i,
8639
- imgnotfoundUrl: imgnotfoundUrl,
8640
- loading: loading,
8641
- allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8642
- doNotShowPrice: doNotShowPrice
8643
- }));
8808
+ }, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(PuffLoader, {
8809
+ color: "black"
8810
+ })), /*#__PURE__*/React__default.createElement(Virtuoso, {
8811
+ data: cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList,
8812
+ style: {
8813
+ height: listHeight,
8814
+ width: '100%',
8815
+ boxSizing: 'border-box'
8816
+ },
8817
+ itemContent: function itemContent(index, product) {
8818
+ var _cartData$cartLineIte2;
8819
+ return /*#__PURE__*/React__default.createElement("div", {
8820
+ style: {
8821
+ padding: '0 1rem',
8822
+ paddingBottom: index === (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte2 = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte2 === void 0 ? void 0 : _cartData$cartLineIte2.length) - 1 ? '1rem' : '0',
8823
+ boxSizing: 'border-box'
8824
+ }
8825
+ }, /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
8826
+ product: product,
8827
+ handleRedirect: handleRedirect,
8828
+ handleIncrementDecrement: handleIncrementDecrement,
8829
+ handleRemoveProduct: handleRemoveProduct,
8830
+ color: color,
8831
+ imgnotfoundUrl: imgnotfoundUrl,
8832
+ loading: loading,
8833
+ allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8834
+ doNotShowPrice: doNotShowPrice
8835
+ }));
8836
+ }
8644
8837
  })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
8645
8838
  color: color
8646
8839
  }, /*#__PURE__*/React__default.createElement(BsCartX, {
@@ -10978,7 +11171,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
10978
11171
  }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
10979
11172
  };
10980
11173
 
10981
- var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
11174
+ var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
10982
11175
  var StepContainer = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 60em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n // @media screen and (max-width: 1200px) {\n // width: 80vw;\n // min-width: 0;\n // }\n @media screen and (max-width: 768px) {\n // width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 600px) {\n // width: 94%;\n margin-left: 1.2em;\n }\n"])));
10983
11176
  var StepsContent = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n .MuiOutlinedInput-root {\n background: ", ";\n }\n\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: ", ";\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])), function (props) {
10984
11177
  return 'transparent' + '!important';
@@ -11050,7 +11243,7 @@ var CheckBoxRow = styled.div(_templateObject9$5 || (_templateObject9$5 = _tagged
11050
11243
  }, function (prop) {
11051
11244
  return prop.colorText || 'red';
11052
11245
  });
11053
- var CreditCardFextField = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n label {\n color: rgba(107, 106, 106, 0.6) !important;\n }\n .MuiOutlinedInput-root {\n background: ", ";\n }\n .save-btn {\n background: ", ";\n }\n"])), function (prop) {
11246
+ var CreditCardFextField = styled.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n label {\n color: rgba(107, 106, 106, 0.6) !important;\n }\n .MuiOutlinedInput-root {\n background: ", ";\n }\n .save-btn {\n background: ", ";\n }\n"])), function (prop) {
11054
11247
  return prop.bgInput + '!important' || '';
11055
11248
  }, function (prop) {
11056
11249
  return prop.btnBg + '!important' || '';