@salesgenterp/ui-components 0.4.113 → 0.4.115

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 (6) hide show
  1. package/dist/index.css +25 -3
  2. package/dist/index.js +110 -56
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +110 -56
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -59,16 +59,38 @@ input[type='number'] {
59
59
  color: grey !important;
60
60
  font-size: 0.875em;
61
61
  }
62
+ /* /////////coloring */
62
63
  ._1vD5N ._3HGw2 ._1vD5N ._3MZVJ,
63
64
  ._1vD5N ._2wB7w,
64
65
  ._1vD5N ._26InF,
65
66
  ._1vD5N ._33LCH,
66
67
  ._1vD5N ._2PPqR {
67
- background: #fff0ec;
68
+ /* background: #fff0ec; //orlando */
69
+ background: rgba(240, 249, 240, 1);
68
70
  border-radius: 10px;
69
71
  }
70
- ._1vD5N
71
- ._1WybA._-mciM {
72
+ ._1vD5N ._yC7t2 {
73
+ /* background: #fff0ec; //orlando */
74
+ background: rgba(240, 249, 240, 1);
75
+ }
76
+ ._1vD5N ._3KkHb {
77
+ background: rgba(2, 83, 1, 1);
78
+ border-color: rgba(7, 126, 6, 1);
79
+ }
80
+ ._1vD5N ._1wN8B {
81
+ color: rgba(2, 83, 1, 1) !important;
82
+ }
83
+ ._1vD5N ._o5kFN {
84
+ border-color: rgba(2, 83, 1, 1) !important;
85
+ }
86
+ ._1vD5N ._jdM-E {
87
+ background-color: rgba(2, 83, 1, 1) !important;
88
+ }
89
+ ._1vD5N ._39ZP8 {
90
+ background-color: rgba(240, 249, 240, 1) !important;
91
+ }
92
+
93
+ ._1WybA._-mciM {
72
94
  height: 28px;
73
95
  }
74
96
  /* /////stepper length */
package/dist/index.js CHANGED
@@ -226,7 +226,7 @@ var CartDrawer = function CartDrawer(_ref) {
226
226
  };
227
227
 
228
228
  var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
229
- var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n border-radius: 28px;\n"])), function (props) {
229
+ var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n border-radius: 28px;\n background-color: grey;\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
230
230
  return props.bg;
231
231
  }, function (props) {
232
232
  return props.bg || '#FAE8E5';
@@ -249,11 +249,15 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
249
249
  var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* min-height: 1000px; */\n position: relative;\n max-width: 860px;\n margin-right: auto;\n padding: 1em 2em;\n display: ", ";\n grid-template-columns: 1fr 1fr;\n flex-direction: column;\n align-items: flex-start;\n grid-gap: 1em;\n justify-content: flex-start;\n align-items: center;\n border-radius: 20px;\n @media only screen and (max-width: 960px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
250
250
  return props.retail ? 'grid' : 'flex';
251
251
  });
252
- var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 2.3em;\n margin-top: 2em;\n\n h1 {\n font-weight: 600;\n font-size: 2.0375em;\n text-transform: capitalize;\n color: inherit;\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 0.875em;\n color: black;\n margin-top: 0.5em;\n }\n"])));
252
+ var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 2.3em;\n margin-top: 2em;\n\n color: ", ";\n h1 {\n font-weight: 600;\n font-size: 2.0375em;\n text-transform: capitalize;\n color: inherit;\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 0.875em;\n color: inherit;\n margin-top: 0.5em;\n }\n"])), function (props) {
253
+ return props.color || 'black';
254
+ });
253
255
  var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
254
256
 
255
- var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n border: none !important;\n /* font-size: 0.75em; */\n font-size: 1em;\n color: rgba(98, 95, 95, 1);\n background: ", ";\n font-family: 'karla-fonts';\n }\n span {\n font-size: 0.75em;\n font-weight: 600;\n }\n"])), function (props) {
257
+ var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n border: none !important;\n /* font-size: 0.75em; */\n font-size: 1em;\n color: rgba(98, 95, 95, 1);\n background: ", ";\n color: ", ";\n font-family: 'karla-fonts';\n }\n span {\n font-size: 0.75em;\n font-weight: 600;\n }\n"])), function (props) {
256
258
  return "" + props.bg;
259
+ }, function (props) {
260
+ return "" + props.color || 'inherit';
257
261
  });
258
262
  var CartTableContainer = styled(material.TableContainer)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 460px;\n padding-right: 1.5em;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n border: 3px solid;\n border-color: #fae8e5;\n }\n @media screen and (max-width: 750px) {\n padding: 0;\n }\n"])), function (props) {
259
263
  return props.retail ? '12px' : '10px';
@@ -1571,7 +1575,8 @@ function EnhancedTableHead(props) {
1571
1575
  zIndex: '3 !important'
1572
1576
  },
1573
1577
  className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
1574
- bg: styles.bg
1578
+ bg: styles.bg,
1579
+ color: styles === null || styles === void 0 ? void 0 : styles.headingColor
1575
1580
  }, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel, {
1576
1581
  active: orderBy === headCell.id,
1577
1582
  direction: orderBy === headCell.id ? order : 'asc',
@@ -1589,7 +1594,7 @@ EnhancedTableHead.propTypes = {
1589
1594
  };
1590
1595
 
1591
1596
  function EnhancedTable(_ref) {
1592
- var _styles$scroll, _styles$scroll2;
1597
+ var _styles$scroll, _styles$scroll2, _styles$Btn, _styles$Btn2;
1593
1598
  var cartData = _ref.cartData,
1594
1599
  loading = _ref.loading,
1595
1600
  imgnotfoundUrl = _ref.imgnotfoundUrl,
@@ -1708,7 +1713,10 @@ function EnhancedTable(_ref) {
1708
1713
  handleIncrementDecrement: handleIncrementDecrement,
1709
1714
  handleRemoveProduct: handleRemoveProduct
1710
1715
  });
1711
- }))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", {
1716
+ }))))), /*#__PURE__*/React.createElement(CartButtonsRow, {
1717
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
1718
+ color: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.color
1719
+ }, /*#__PURE__*/React.createElement("button", {
1712
1720
  onClick: function onClick() {
1713
1721
  new Promise(function (resolve, reject) {
1714
1722
  if (loading) return;
@@ -1807,7 +1815,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1807
1815
  };
1808
1816
 
1809
1817
  var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
1810
- var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
1818
+ var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n @media only screen and (max-width: 1340px) {\n margin-top: 4em;\n }\n"])), function (props) {
1811
1819
  return props.maxWidth || '26.375em';
1812
1820
  }, function (props) {
1813
1821
  return props.background || '#667080';
@@ -1953,7 +1961,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
1953
1961
  return /*#__PURE__*/React__default.createElement(CartPageSection, {
1954
1962
  bg: styles.bg,
1955
1963
  retail: retail
1956
- }, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have ", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
1964
+ }, /*#__PURE__*/React__default.createElement(CartHeading, {
1965
+ color: styles === null || styles === void 0 ? void 0 : styles.headingColor
1966
+ }, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have ", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
1957
1967
  retail: retail,
1958
1968
  loading: loading
1959
1969
  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
@@ -1987,16 +1997,16 @@ var CartPageComponent = function CartPageComponent(_ref) {
1987
1997
  };
1988
1998
 
1989
1999
  var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3;
1990
- var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n background-color: ", ";\n margin: 0 auto;\n padding: 2.375em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n /* max-height: 90vh; */\n overflow: hidden;\n /* background: gainsboro; */\n border-radius: 28px;\n background-color: #fff8f6;\n @media only screen and (max-width: 1508px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 1em 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
2000
+ var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n background-color: ", ";\n margin: 0 auto;\n padding: 2.375em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n /* max-height: 90vh; */\n overflow: hidden;\n /* background: gainsboro; */\n border-radius: 28px;\n /* background-color: #fff8f6; */\n @media only screen and (max-width: 1508px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 1em 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
1991
2001
  return props.maxWidth || '1605px';
1992
2002
  }, function (props) {
1993
- return props.bg || 'rgba(255, 248, 246, 1)';
2003
+ return props.bg || '#fff8f6';
1994
2004
  });
1995
2005
  var Row = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
1996
2006
  var CheckoutMainWithHeader = styled(material.Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
1997
2007
  var CheckoutMain = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 1008px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n margin-right: 2em;\n max-height: 65vh;\n padding-right: 2em;\n overflow-y: auto;\n position: relative;\n padding-top: 2em;\n padding-bottom: 3em;\n /* width */\n ::-webkit-scrollbar {\n width: 10px;\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #ef9687;\n border-radius: 16px;\n border: 3px solid rgba(245, 197, 189, 0.5);\n /* border: 3px solid black; */\n }\n @media only screen and (max-width: 1488px) {\n margin-bottom: 3em;\n min-height: max-content;\n max-height: max-content;\n margin-right: 0;\n overflow: visible;\n }\n @media only screen and (max-width: 788px) {\n max-width: 100vw;\n padding-right: 0;\n width: 98vw;\n min-width: 90vw;\n padding-top: 1em;\n }\n /* overflow: hidden; */\n"])));
1998
2008
  var CheckoutHeading = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.3em;\n font-weight: 600;\n text-transform: capitalize;\n }\n p {\n font-size: 0.875em;\n font-weight: 300;\n margin-top: 0.5em;\n }\n @media only screen and (max-width: 788px) {\n margin-left: 0;\n padding-left: 1em;\n }\n"])));
1999
- var CheckoutHeader = styled(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n justify-content: flex-start;\n min-height: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\n .row {\n display: flex;\n color: inherit;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\n margin-right: 2.4%;\n .icon {\n font-size: 14px;\n font-weight: 400;\n display: grid;\n place-items: center;\n margin-right: 6px;\n color: inherit;\n }\n p,\n span {\n font-size: 0.95em;\n color: inherit;\n font-weight: 300;\n }\n }\n .checked {\n p,\n span {\n color: #323232;\n }\n .icon {\n color: #249937;\n }\n }\n @media only screen and (max-width: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 1em;\n margin: 1.4em 0;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
2009
+ var CheckoutHeader = styled(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n justify-content: flex-start;\n min-height: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\n .row {\n display: flex;\n color: inherit;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\n margin-right: 2.4%;\n .icon {\n font-size: 14px;\n font-weight: 400;\n display: grid;\n place-items: center;\n margin-right: 6px;\n color: inherit;\n }\n p,\n span {\n font-size: 0.95em;\n color: inherit;\n font-weight: 300;\n \n }\n }\n .checked {\n p,\n span {\n color: #323232;\n }\n .icon {\n color: #249937;\n }\n }\n @media only screen and (max-width: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 1em;\n margin: 1.4em 0;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
2000
2010
  var CheckoutStepIcon = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n margin-left: 2px;\n .circle {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n }\n .ic {\n font-size: 8px;\n }\n"])));
2001
2011
 
2002
2012
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
@@ -2011,8 +2021,11 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2011
2021
  billingInformation = _ref.billingInformation,
2012
2022
  shippingInformation = _ref.shippingInformation,
2013
2023
  paymentMethod = _ref.paymentMethod,
2014
- shippingMethod = _ref.shippingMethod;
2015
- return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
2024
+ shippingMethod = _ref.shippingMethod,
2025
+ bg = _ref.bg;
2026
+ return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, {
2027
+ bg: bg
2028
+ }, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
2016
2029
  className: "text"
2017
2030
  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
2018
2031
  className: "total"
@@ -2067,8 +2080,12 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2067
2080
  }, function (props) {
2068
2081
  return props.disabled ? 'not-allowed' : 'pointer';
2069
2082
  });
2070
- var Select = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 54px;\n border-radius: 10px;\n background: rgba(255, 240, 236, 1);\n outline: none;\n border: none;\n padding: 0 1em;\n cursor: pointer;\n select {\n width: 100%;\n height: 100%;\n background: transparent;\n border: none;\n outline: none;\n padding: 0.5em 0;\n color: rgba(107, 106, 106, 0.6);\n }\n"])));
2071
- var SaveButton = styled.button(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2083
+ var Select = styled.div.attrs({
2084
+ className: 'checkout-input'
2085
+ })(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 54px;\n border-radius: 10px;\n /* background: rgba(255, 240, 236, 1); */\n outline: none;\n border: none;\n padding: 0 1em;\n cursor: pointer;\n select {\n width: 100%;\n height: 100%;\n background: transparent;\n border: none;\n outline: none;\n padding: 0.5em 0;\n color: rgba(107, 106, 106, 0.6);\n }\n"])));
2086
+ var SaveButton = styled.button.attrs({
2087
+ className: 'checkout-btn'
2088
+ })(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2072
2089
  return props.color || '#FD0015';
2073
2090
  }, function (props) {
2074
2091
  return props.disabled ? 'not-allowed' : 'pointer';
@@ -2083,12 +2100,24 @@ var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
2083
2100
  }, function (props) {
2084
2101
  return props.marginLeft;
2085
2102
  });
2086
- var DeliveryOption = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 691px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n\n transition: 0.3s;\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: #fff0ec;\n border: 1px solid #fce1d9;\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: #fd0015;\n }\n }\n .amount {\n margin-left: auto;\n color: #fd0015;\n font-weight: ", ";\n font-size: 0.95em;\n }\n"])), function (props) {
2103
+ var DeliveryOption = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 691px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n transition: 0.3s;\n /* background-color: ", ";\n border: ", "; */\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: ", ";\n border: ", ";\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: ", ";\n }\n }\n .amount {\n margin-left: auto;\n color: ", ";\n font-weight: ", ";\n font-size: 0.95em;\n }\n"])), function (props) {
2087
2104
  return props.hovered ? '#fff0ec' : '';
2088
2105
  }, function (props) {
2089
2106
  return props.hovered ? '1px solid #fce1d9' : '';
2107
+ }, function (props) {
2108
+ return props.hovered ? props.bg : '';
2109
+ }, function (props) {
2110
+ return props.hovered ? "1px solid " + props.border : '';
2090
2111
  }, function (props) {
2091
2112
  return props.hovered ? '5px' : '0';
2113
+ }, function (props) {
2114
+ return props.bg || '#fff0ec';
2115
+ }, function (props) {
2116
+ return props.border ? "1px solid " + props.border : '1px solid #fce1d9';
2117
+ }, function (props) {
2118
+ return props.color || '#fd0015';
2119
+ }, function (props) {
2120
+ return props.color || '#fd0015';
2092
2121
  }, function (props) {
2093
2122
  return props.hovered ? '800' : '700';
2094
2123
  });
@@ -2111,7 +2140,9 @@ var CheckoutInput = function CheckoutInput(_ref) {
2111
2140
  autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
2112
2141
  showIcon = controlls.showIcon,
2113
2142
  type = controlls.type;
2114
- return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
2143
+ return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
2144
+ className: "checkout-form-input"
2145
+ }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
2115
2146
  defaultValue: "",
2116
2147
  render: function render(_ref2) {
2117
2148
  var field = _ref2.field;
@@ -2151,13 +2182,10 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
2151
2182
  render: function render(_ref4) {
2152
2183
  var field = _ref4.field;
2153
2184
  return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
2154
- fullWidth: true
2155
- ,
2156
- select: true
2157
- ,
2185
+ fullWidth: true,
2186
+ select: true,
2158
2187
  displayEmpty: true,
2159
- required: true
2160
- ,
2188
+ required: true,
2161
2189
  autoFocus: autoFocus
2162
2190
  }, field), /*#__PURE__*/React__default.createElement(material.MenuItem, {
2163
2191
  value: ""
@@ -2178,7 +2206,8 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2178
2206
  single = _ref.single,
2179
2207
  closed = _ref.closed,
2180
2208
  handleClick = _ref.handleClick,
2181
- withoutIcon = _ref.withoutIcon;
2209
+ withoutIcon = _ref.withoutIcon,
2210
+ primaryColor = _ref.primaryColor;
2182
2211
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2183
2212
  single: single,
2184
2213
  username: username,
@@ -2202,8 +2231,11 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2202
2231
  alt: "vector",
2203
2232
  width: 18,
2204
2233
  height: 18
2205
- }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome ", /*#__PURE__*/React__default.createElement("span", {
2206
- className: "red"
2234
+ }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
2235
+ style: {
2236
+ fontWeight: 700,
2237
+ color: primaryColor
2238
+ }
2207
2239
  }, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2208
2240
  className: "dropIcon",
2209
2241
  style: closed ? {
@@ -2236,7 +2268,7 @@ var Step0 = function Step0(_ref) {
2236
2268
  return clickRedirect('account/register');
2237
2269
  }
2238
2270
  }, "register"), ' ', "| ", /*#__PURE__*/React__default.createElement("span", {
2239
- className: "red"
2271
+ className: "red primaryColor"
2240
2272
  }, "login")), /*#__PURE__*/React__default.createElement(material.Grid, {
2241
2273
  container: true,
2242
2274
  component: 'form',
@@ -2281,7 +2313,8 @@ var Step0 = function Step0(_ref) {
2281
2313
  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2282
2314
  padding: ".8em 3em",
2283
2315
  uppercase: true,
2284
- type: "submit"
2316
+ type: "submit",
2317
+ className: "primaryBgColor"
2285
2318
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
2286
2319
  color: "inherit",
2287
2320
  size: 15
@@ -2311,7 +2344,8 @@ var ButtonRow = function ButtonRow(_ref) {
2311
2344
  onClick: function onClick() {
2312
2345
  if (nextDisabled) return;
2313
2346
  handleNext();
2314
- }
2347
+ },
2348
+ className: "checkout-btn"
2315
2349
  }, "Next"));
2316
2350
  };
2317
2351
 
@@ -2573,7 +2607,9 @@ var Step1 = function Step1(_ref) {
2573
2607
  item: true,
2574
2608
  xs: 12,
2575
2609
  sm: 10
2576
- }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2610
+ }, /*#__PURE__*/React__default.createElement(Select, {
2611
+ className: "checkout-input"
2612
+ }, /*#__PURE__*/React__default.createElement("select", {
2577
2613
  value: selectedStore,
2578
2614
  onChange: function onChange(e) {
2579
2615
  return setSelectedStore(parseInt(e.target.value));
@@ -2654,7 +2690,8 @@ var Step2 = function Step2(_ref) {
2654
2690
  setSelectedCountry = _ref.setSelectedCountry,
2655
2691
  showShipping = _ref.showShipping,
2656
2692
  selectedStore = _ref.selectedStore,
2657
- stores = _ref.stores;
2693
+ stores = _ref.stores,
2694
+ styles = _ref.styles;
2658
2695
  var _useForm = reactHookForm.useForm(),
2659
2696
  control = _useForm.control,
2660
2697
  handleSubmit = _useForm.handleSubmit,
@@ -2730,17 +2767,19 @@ var Step2 = function Step2(_ref) {
2730
2767
  })), /*#__PURE__*/React__default.createElement(material.Stack, {
2731
2768
  flexDirection: "column",
2732
2769
  width: "100%",
2733
- alignItems: 'flex-start'
2734
- ,
2770
+ alignItems: 'flex-start',
2735
2771
  paddingBottom: '2em'
2736
2772
  }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2737
- var _option$amount;
2773
+ var _styles$input, _styles$input2, _option$amount;
2738
2774
  return /*#__PURE__*/React__default.createElement(DeliveryOption, {
2739
2775
  hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
2740
2776
  onClick: function onClick() {
2741
2777
  setmethod(option);
2742
2778
  },
2743
- key: i
2779
+ key: i,
2780
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
2781
+ border: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.border,
2782
+ color: styles === null || styles === void 0 ? void 0 : styles.primaryColor
2744
2783
  }, /*#__PURE__*/React__default.createElement("div", {
2745
2784
  className: "circle"
2746
2785
  }, /*#__PURE__*/React__default.createElement("span", {
@@ -2985,7 +3024,7 @@ var Step3 = function Step3(_ref) {
2985
3024
  }, /*#__PURE__*/React__default.createElement("p", {
2986
3025
  className: "bold"
2987
3026
  }, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
2988
- className: "red"
3027
+ className: "red primaryColor"
2989
3028
  }, " $", total === null || total === void 0 ? void 0 : total.toFixed(2))), storeCredits ? /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2990
3029
  marginLeft: "1em",
2991
3030
  style: {
@@ -3001,7 +3040,7 @@ var Step3 = function Step3(_ref) {
3001
3040
  }), /*#__PURE__*/React__default.createElement("p", {
3002
3041
  className: "medium"
3003
3042
  }, "Store Credits: ", /*#__PURE__*/React__default.createElement("span", {
3004
- className: "bold"
3043
+ className: "bold "
3005
3044
  }, "$", storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
3006
3045
  var _payment$name;
3007
3046
  if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
@@ -3078,7 +3117,8 @@ var Step4 = function Step4(_ref) {
3078
3117
  var _row$standardPrice, _ref2;
3079
3118
  return /*#__PURE__*/React__default.createElement(StyledTableRow, {
3080
3119
  key: row.name,
3081
- colored: i % 2 === 0
3120
+ colored: i % 2 === 0,
3121
+ className: i % 2 === 0 ? 'primaryLightBgColor' : ''
3082
3122
  }, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3083
3123
  noSmall: true
3084
3124
  }, /*#__PURE__*/React__default.createElement("p", {
@@ -3094,8 +3134,8 @@ var Step4 = function Step4(_ref) {
3094
3134
  }, /*#__PURE__*/React__default.createElement("p", {
3095
3135
  className: "price max"
3096
3136
  }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React__default.createElement("span", {
3097
- className: "red"
3098
- }, " x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3137
+ className: "red primaryColor"
3138
+ }, ' ', "x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3099
3139
  align: "center"
3100
3140
  }, /*#__PURE__*/React__default.createElement("p", {
3101
3141
  className: "price max"
@@ -3125,7 +3165,7 @@ var Step4 = function Step4(_ref) {
3125
3165
  }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3126
3166
  align: "right"
3127
3167
  }, /*#__PURE__*/React__default.createElement("p", {
3128
- className: "max sm red"
3168
+ className: "max sm primaryColor"
3129
3169
  }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3130
3170
  colSpan: 1,
3131
3171
  noSmall: true
@@ -3138,7 +3178,7 @@ var Step4 = function Step4(_ref) {
3138
3178
  }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3139
3179
  align: "right"
3140
3180
  }, /*#__PURE__*/React__default.createElement("p", {
3141
- className: "max sm red"
3181
+ className: "max sm primaryColor"
3142
3182
  }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3143
3183
  colSpan: 1,
3144
3184
  noSmall: true
@@ -3152,7 +3192,7 @@ var Step4 = function Step4(_ref) {
3152
3192
  align: "right"
3153
3193
  }, /*#__PURE__*/React__default.createElement("p", {
3154
3194
  className: "max sm price"
3155
- }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : "", /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3195
+ }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : '', /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3156
3196
  colSpan: 1,
3157
3197
  noSmall: true
3158
3198
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3163,14 +3203,14 @@ var Step4 = function Step4(_ref) {
3163
3203
  },
3164
3204
  colSpan: 1
3165
3205
  }, /*#__PURE__*/React__default.createElement("p", {
3166
- className: "max sm bolder red"
3206
+ className: "max sm bolder primaryColor"
3167
3207
  }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3168
3208
  sx: {
3169
3209
  paddingTop: '1em'
3170
3210
  },
3171
3211
  align: "right"
3172
3212
  }, /*#__PURE__*/React__default.createElement("p", {
3173
- className: "max sm total bolder red"
3213
+ className: "max sm total bolder primaryColor"
3174
3214
  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3175
3215
  container: true,
3176
3216
  columnSpacing: 0,
@@ -3186,7 +3226,7 @@ var Step4 = function Step4(_ref) {
3186
3226
  sm: 1,
3187
3227
  md: 0.5
3188
3228
  }, /*#__PURE__*/React__default.createElement(cg.CgProfile, {
3189
- className: "icon"
3229
+ className: "icon primaryColor"
3190
3230
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
3191
3231
  item: true,
3192
3232
  xs: 11,
@@ -3199,7 +3239,8 @@ var Step4 = function Step4(_ref) {
3199
3239
  value: comments,
3200
3240
  onChange: function onChange(e) {
3201
3241
  setComments(e.target.value);
3202
- }
3242
+ },
3243
+ className: "primaryBorderColor"
3203
3244
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
3204
3245
  item: true,
3205
3246
  xs: 12
@@ -3224,7 +3265,8 @@ var Step4 = function Step4(_ref) {
3224
3265
  }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React__default.createElement("span", {
3225
3266
  onClick: function onClick() {
3226
3267
  return clickRedirect('cart');
3227
- }
3268
+ },
3269
+ className: "primaryColor"
3228
3270
  }, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("button", {
3229
3271
  className: "back",
3230
3272
  onClick: function onClick() {
@@ -3239,7 +3281,8 @@ var Step4 = function Step4(_ref) {
3239
3281
  alert('please accept the privacy policy');
3240
3282
  }
3241
3283
  },
3242
- type: "submit"
3284
+ type: "submit",
3285
+ className: "primaryBgColor"
3243
3286
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
3244
3287
  color: "inherit",
3245
3288
  size: 15,
@@ -3286,7 +3329,9 @@ var steps = [{
3286
3329
  }
3287
3330
  }];
3288
3331
  var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3332
+ var _styles$checkoutSumma;
3289
3333
  var currStep = _ref.currStep,
3334
+ styles = _ref.styles,
3290
3335
  handleNext = _ref.handleNext,
3291
3336
  handleBack = _ref.handleBack,
3292
3337
  loading = _ref.loading,
@@ -3320,11 +3365,16 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3320
3365
  selectedPaymentMethod = _ref.selectedPaymentMethod,
3321
3366
  shippingMethod = _ref.shippingMethod;
3322
3367
  return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
3323
- className: "checkout"
3368
+ className: "checkout",
3369
+ bg: styles === null || styles === void 0 ? void 0 : styles.bg
3324
3370
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
3325
3371
  flexDirection: "column",
3326
3372
  alignItems: "flex-start"
3327
- }, /*#__PURE__*/React__default.createElement(CheckoutHeading, null, /*#__PURE__*/React__default.createElement("h5", null, "payment Details"), /*#__PURE__*/React__default.createElement("p", null, "Complete your purchase by providing your payment details")), /*#__PURE__*/React__default.createElement(CheckoutMainWithHeader, {
3373
+ }, /*#__PURE__*/React__default.createElement(CheckoutHeading, {
3374
+ style: {
3375
+ color: styles === null || styles === void 0 ? void 0 : styles.h1Color
3376
+ }
3377
+ }, /*#__PURE__*/React__default.createElement("h5", null, "payment Details"), /*#__PURE__*/React__default.createElement("p", null, "Complete your purchase by providing your payment details")), /*#__PURE__*/React__default.createElement(CheckoutMainWithHeader, {
3328
3378
  flexDirection: "column",
3329
3379
  alignItems: "flex-end"
3330
3380
  }, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
@@ -3341,6 +3391,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3341
3391
  width: '100%'
3342
3392
  }
3343
3393
  }, steps.map(function (item, index) {
3394
+ var _styles$stepperIcon, _styles$stepperIcon2;
3344
3395
  return /*#__PURE__*/React__default.createElement(material.Step, {
3345
3396
  key: index
3346
3397
  }, /*#__PURE__*/React__default.createElement(material.StepLabel, {
@@ -3349,7 +3400,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3349
3400
  },
3350
3401
  icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
3351
3402
  style: currStep >= index ? {
3352
- background: '#ff717c',
3403
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon = styles.stepperIcon) === null || _styles$stepperIcon === void 0 ? void 0 : _styles$stepperIcon.bg,
3353
3404
  color: 'white',
3354
3405
  padding: 0
3355
3406
  } : {
@@ -3360,11 +3411,11 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3360
3411
  }, /*#__PURE__*/React__default.createElement("div", {
3361
3412
  className: "circle",
3362
3413
  style: currStep >= index ? {
3363
- background: 'rgba(253, 0, 21, 1)',
3414
+ background: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3364
3415
  color: 'white',
3365
3416
  padding: 0
3366
3417
  } : {
3367
- background: '#FDD6D0',
3418
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon2 = styles.stepperIcon) === null || _styles$stepperIcon2 === void 0 ? void 0 : _styles$stepperIcon2.opened,
3368
3419
  color: 'inherit',
3369
3420
  padding: 0
3370
3421
  }
@@ -3376,6 +3427,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3376
3427
  Icon: item.Icon,
3377
3428
  single: true,
3378
3429
  username: index === 0 ? userName : '',
3430
+ primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3379
3431
  closed: true,
3380
3432
  icon: index + 1,
3381
3433
  handleClick: function handleClick() {
@@ -3431,7 +3483,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3431
3483
  stores: userStores
3432
3484
  ,
3433
3485
  addShipping: addStoreAddress,
3434
- setSelectedCountry: setSelectedCountry
3486
+ setSelectedCountry: setSelectedCountry,
3487
+ styles: styles
3435
3488
  })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
3436
3489
  sx: {
3437
3490
  padding: 0
@@ -3466,7 +3519,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3466
3519
  shippingInformation: shippingAddress,
3467
3520
  shippingMethod: shippingMethod,
3468
3521
  paymentMethod: selectedPaymentMethod,
3469
- total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
3522
+ total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
3523
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma = styles.checkoutSummary) === null || _styles$checkoutSumma === void 0 ? void 0 : _styles$checkoutSumma.bg
3470
3524
  }));
3471
3525
  };
3472
3526