@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.modern.js CHANGED
@@ -223,7 +223,7 @@ var CartDrawer = function CartDrawer(_ref) {
223
223
  };
224
224
 
225
225
  var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
226
- 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) {
226
+ 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) {
227
227
  return props.bg;
228
228
  }, function (props) {
229
229
  return props.bg || '#FAE8E5';
@@ -246,11 +246,15 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
246
246
  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) {
247
247
  return props.retail ? 'grid' : 'flex';
248
248
  });
249
- 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"])));
249
+ 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) {
250
+ return props.color || 'black';
251
+ });
250
252
  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"])));
251
253
 
252
- var CartTableCell = styled(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) {
254
+ var CartTableCell = styled(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) {
253
255
  return "" + props.bg;
256
+ }, function (props) {
257
+ return "" + props.color || 'inherit';
254
258
  });
255
259
  var CartTableContainer = styled(TableContainer$1)(_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) {
256
260
  return props.retail ? '12px' : '10px';
@@ -1568,7 +1572,8 @@ function EnhancedTableHead(props) {
1568
1572
  zIndex: '3 !important'
1569
1573
  },
1570
1574
  className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
1571
- bg: styles.bg
1575
+ bg: styles.bg,
1576
+ color: styles === null || styles === void 0 ? void 0 : styles.headingColor
1572
1577
  }, headCell.filter ? /*#__PURE__*/createElement(TableSortLabel, {
1573
1578
  active: orderBy === headCell.id,
1574
1579
  direction: orderBy === headCell.id ? order : 'asc',
@@ -1586,7 +1591,7 @@ EnhancedTableHead.propTypes = {
1586
1591
  };
1587
1592
 
1588
1593
  function EnhancedTable(_ref) {
1589
- var _styles$scroll, _styles$scroll2;
1594
+ var _styles$scroll, _styles$scroll2, _styles$Btn, _styles$Btn2;
1590
1595
  var cartData = _ref.cartData,
1591
1596
  loading = _ref.loading,
1592
1597
  imgnotfoundUrl = _ref.imgnotfoundUrl,
@@ -1705,7 +1710,10 @@ function EnhancedTable(_ref) {
1705
1710
  handleIncrementDecrement: handleIncrementDecrement,
1706
1711
  handleRemoveProduct: handleRemoveProduct
1707
1712
  });
1708
- }))))), /*#__PURE__*/createElement(CartButtonsRow, null, /*#__PURE__*/createElement("button", {
1713
+ }))))), /*#__PURE__*/createElement(CartButtonsRow, {
1714
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
1715
+ color: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.color
1716
+ }, /*#__PURE__*/createElement("button", {
1709
1717
  onClick: function onClick() {
1710
1718
  new Promise(function (resolve, reject) {
1711
1719
  if (loading) return;
@@ -1804,7 +1812,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1804
1812
  };
1805
1813
 
1806
1814
  var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
1807
- 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) {
1815
+ 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) {
1808
1816
  return props.maxWidth || '26.375em';
1809
1817
  }, function (props) {
1810
1818
  return props.background || '#667080';
@@ -1950,7 +1958,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
1950
1958
  return /*#__PURE__*/React__default.createElement(CartPageSection, {
1951
1959
  bg: styles.bg,
1952
1960
  retail: retail
1953
- }, /*#__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, {
1961
+ }, /*#__PURE__*/React__default.createElement(CartHeading, {
1962
+ color: styles === null || styles === void 0 ? void 0 : styles.headingColor
1963
+ }, /*#__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, {
1954
1964
  retail: retail,
1955
1965
  loading: loading
1956
1966
  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
@@ -1984,16 +1994,16 @@ var CartPageComponent = function CartPageComponent(_ref) {
1984
1994
  };
1985
1995
 
1986
1996
  var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3;
1987
- 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) {
1997
+ 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) {
1988
1998
  return props.maxWidth || '1605px';
1989
1999
  }, function (props) {
1990
- return props.bg || 'rgba(255, 248, 246, 1)';
2000
+ return props.bg || '#fff8f6';
1991
2001
  });
1992
2002
  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"])));
1993
2003
  var CheckoutMainWithHeader = styled(Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
1994
2004
  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"])));
1995
2005
  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"])));
1996
- 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"])));
2006
+ 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"])));
1997
2007
  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"])));
1998
2008
 
1999
2009
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
@@ -2008,8 +2018,11 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2008
2018
  billingInformation = _ref.billingInformation,
2009
2019
  shippingInformation = _ref.shippingInformation,
2010
2020
  paymentMethod = _ref.paymentMethod,
2011
- shippingMethod = _ref.shippingMethod;
2012
- return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
2021
+ shippingMethod = _ref.shippingMethod,
2022
+ bg = _ref.bg;
2023
+ return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, {
2024
+ bg: bg
2025
+ }, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
2013
2026
  className: "text"
2014
2027
  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
2015
2028
  className: "total"
@@ -2064,8 +2077,12 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2064
2077
  }, function (props) {
2065
2078
  return props.disabled ? 'not-allowed' : 'pointer';
2066
2079
  });
2067
- 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"])));
2068
- 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) {
2080
+ var Select = styled.div.attrs({
2081
+ className: 'checkout-input'
2082
+ })(_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"])));
2083
+ var SaveButton = styled.button.attrs({
2084
+ className: 'checkout-btn'
2085
+ })(_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) {
2069
2086
  return props.color || '#FD0015';
2070
2087
  }, function (props) {
2071
2088
  return props.disabled ? 'not-allowed' : 'pointer';
@@ -2080,12 +2097,24 @@ var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
2080
2097
  }, function (props) {
2081
2098
  return props.marginLeft;
2082
2099
  });
2083
- 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) {
2100
+ 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) {
2084
2101
  return props.hovered ? '#fff0ec' : '';
2085
2102
  }, function (props) {
2086
2103
  return props.hovered ? '1px solid #fce1d9' : '';
2104
+ }, function (props) {
2105
+ return props.hovered ? props.bg : '';
2106
+ }, function (props) {
2107
+ return props.hovered ? "1px solid " + props.border : '';
2087
2108
  }, function (props) {
2088
2109
  return props.hovered ? '5px' : '0';
2110
+ }, function (props) {
2111
+ return props.bg || '#fff0ec';
2112
+ }, function (props) {
2113
+ return props.border ? "1px solid " + props.border : '1px solid #fce1d9';
2114
+ }, function (props) {
2115
+ return props.color || '#fd0015';
2116
+ }, function (props) {
2117
+ return props.color || '#fd0015';
2089
2118
  }, function (props) {
2090
2119
  return props.hovered ? '800' : '700';
2091
2120
  });
@@ -2108,7 +2137,9 @@ var CheckoutInput = function CheckoutInput(_ref) {
2108
2137
  autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
2109
2138
  showIcon = controlls.showIcon,
2110
2139
  type = controlls.type;
2111
- return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(Controller, _extends({}, controlls, {
2140
+ return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
2141
+ className: "checkout-form-input"
2142
+ }, /*#__PURE__*/React__default.createElement(Controller, _extends({}, controlls, {
2112
2143
  defaultValue: "",
2113
2144
  render: function render(_ref2) {
2114
2145
  var field = _ref2.field;
@@ -2148,13 +2179,10 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
2148
2179
  render: function render(_ref4) {
2149
2180
  var field = _ref4.field;
2150
2181
  return /*#__PURE__*/React__default.createElement(TextField, _extends({
2151
- fullWidth: true
2152
- ,
2153
- select: true
2154
- ,
2182
+ fullWidth: true,
2183
+ select: true,
2155
2184
  displayEmpty: true,
2156
- required: true
2157
- ,
2185
+ required: true,
2158
2186
  autoFocus: autoFocus
2159
2187
  }, field), /*#__PURE__*/React__default.createElement(MenuItem, {
2160
2188
  value: ""
@@ -2175,7 +2203,8 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2175
2203
  single = _ref.single,
2176
2204
  closed = _ref.closed,
2177
2205
  handleClick = _ref.handleClick,
2178
- withoutIcon = _ref.withoutIcon;
2206
+ withoutIcon = _ref.withoutIcon,
2207
+ primaryColor = _ref.primaryColor;
2179
2208
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2180
2209
  single: single,
2181
2210
  username: username,
@@ -2199,8 +2228,11 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2199
2228
  alt: "vector",
2200
2229
  width: 18,
2201
2230
  height: 18
2202
- }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome ", /*#__PURE__*/React__default.createElement("span", {
2203
- className: "red"
2231
+ }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
2232
+ style: {
2233
+ fontWeight: 700,
2234
+ color: primaryColor
2235
+ }
2204
2236
  }, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(HiOutlineChevronDown, {
2205
2237
  className: "dropIcon",
2206
2238
  style: closed ? {
@@ -2233,7 +2265,7 @@ var Step0 = function Step0(_ref) {
2233
2265
  return clickRedirect('account/register');
2234
2266
  }
2235
2267
  }, "register"), ' ', "| ", /*#__PURE__*/React__default.createElement("span", {
2236
- className: "red"
2268
+ className: "red primaryColor"
2237
2269
  }, "login")), /*#__PURE__*/React__default.createElement(Grid, {
2238
2270
  container: true,
2239
2271
  component: 'form',
@@ -2278,7 +2310,8 @@ var Step0 = function Step0(_ref) {
2278
2310
  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2279
2311
  padding: ".8em 3em",
2280
2312
  uppercase: true,
2281
- type: "submit"
2313
+ type: "submit",
2314
+ className: "primaryBgColor"
2282
2315
  }, loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
2283
2316
  color: "inherit",
2284
2317
  size: 15
@@ -2308,7 +2341,8 @@ var ButtonRow = function ButtonRow(_ref) {
2308
2341
  onClick: function onClick() {
2309
2342
  if (nextDisabled) return;
2310
2343
  handleNext();
2311
- }
2344
+ },
2345
+ className: "checkout-btn"
2312
2346
  }, "Next"));
2313
2347
  };
2314
2348
 
@@ -2570,7 +2604,9 @@ var Step1 = function Step1(_ref) {
2570
2604
  item: true,
2571
2605
  xs: 12,
2572
2606
  sm: 10
2573
- }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2607
+ }, /*#__PURE__*/React__default.createElement(Select, {
2608
+ className: "checkout-input"
2609
+ }, /*#__PURE__*/React__default.createElement("select", {
2574
2610
  value: selectedStore,
2575
2611
  onChange: function onChange(e) {
2576
2612
  return setSelectedStore(parseInt(e.target.value));
@@ -2651,7 +2687,8 @@ var Step2 = function Step2(_ref) {
2651
2687
  setSelectedCountry = _ref.setSelectedCountry,
2652
2688
  showShipping = _ref.showShipping,
2653
2689
  selectedStore = _ref.selectedStore,
2654
- stores = _ref.stores;
2690
+ stores = _ref.stores,
2691
+ styles = _ref.styles;
2655
2692
  var _useForm = useForm(),
2656
2693
  control = _useForm.control,
2657
2694
  handleSubmit = _useForm.handleSubmit,
@@ -2727,17 +2764,19 @@ var Step2 = function Step2(_ref) {
2727
2764
  })), /*#__PURE__*/React__default.createElement(Stack, {
2728
2765
  flexDirection: "column",
2729
2766
  width: "100%",
2730
- alignItems: 'flex-start'
2731
- ,
2767
+ alignItems: 'flex-start',
2732
2768
  paddingBottom: '2em'
2733
2769
  }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2734
- var _option$amount;
2770
+ var _styles$input, _styles$input2, _option$amount;
2735
2771
  return /*#__PURE__*/React__default.createElement(DeliveryOption, {
2736
2772
  hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
2737
2773
  onClick: function onClick() {
2738
2774
  setmethod(option);
2739
2775
  },
2740
- key: i
2776
+ key: i,
2777
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
2778
+ border: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.border,
2779
+ color: styles === null || styles === void 0 ? void 0 : styles.primaryColor
2741
2780
  }, /*#__PURE__*/React__default.createElement("div", {
2742
2781
  className: "circle"
2743
2782
  }, /*#__PURE__*/React__default.createElement("span", {
@@ -2982,7 +3021,7 @@ var Step3 = function Step3(_ref) {
2982
3021
  }, /*#__PURE__*/React__default.createElement("p", {
2983
3022
  className: "bold"
2984
3023
  }, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
2985
- className: "red"
3024
+ className: "red primaryColor"
2986
3025
  }, " $", total === null || total === void 0 ? void 0 : total.toFixed(2))), storeCredits ? /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2987
3026
  marginLeft: "1em",
2988
3027
  style: {
@@ -2998,7 +3037,7 @@ var Step3 = function Step3(_ref) {
2998
3037
  }), /*#__PURE__*/React__default.createElement("p", {
2999
3038
  className: "medium"
3000
3039
  }, "Store Credits: ", /*#__PURE__*/React__default.createElement("span", {
3001
- className: "bold"
3040
+ className: "bold "
3002
3041
  }, "$", 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) {
3003
3042
  var _payment$name;
3004
3043
  if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
@@ -3075,7 +3114,8 @@ var Step4 = function Step4(_ref) {
3075
3114
  var _row$standardPrice, _ref2;
3076
3115
  return /*#__PURE__*/React__default.createElement(StyledTableRow, {
3077
3116
  key: row.name,
3078
- colored: i % 2 === 0
3117
+ colored: i % 2 === 0,
3118
+ className: i % 2 === 0 ? 'primaryLightBgColor' : ''
3079
3119
  }, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3080
3120
  noSmall: true
3081
3121
  }, /*#__PURE__*/React__default.createElement("p", {
@@ -3091,8 +3131,8 @@ var Step4 = function Step4(_ref) {
3091
3131
  }, /*#__PURE__*/React__default.createElement("p", {
3092
3132
  className: "price max"
3093
3133
  }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React__default.createElement("span", {
3094
- className: "red"
3095
- }, " x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3134
+ className: "red primaryColor"
3135
+ }, ' ', "x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3096
3136
  align: "center"
3097
3137
  }, /*#__PURE__*/React__default.createElement("p", {
3098
3138
  className: "price max"
@@ -3122,7 +3162,7 @@ var Step4 = function Step4(_ref) {
3122
3162
  }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3123
3163
  align: "right"
3124
3164
  }, /*#__PURE__*/React__default.createElement("p", {
3125
- className: "max sm red"
3165
+ className: "max sm primaryColor"
3126
3166
  }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3127
3167
  colSpan: 1,
3128
3168
  noSmall: true
@@ -3135,7 +3175,7 @@ var Step4 = function Step4(_ref) {
3135
3175
  }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3136
3176
  align: "right"
3137
3177
  }, /*#__PURE__*/React__default.createElement("p", {
3138
- className: "max sm red"
3178
+ className: "max sm primaryColor"
3139
3179
  }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3140
3180
  colSpan: 1,
3141
3181
  noSmall: true
@@ -3149,7 +3189,7 @@ var Step4 = function Step4(_ref) {
3149
3189
  align: "right"
3150
3190
  }, /*#__PURE__*/React__default.createElement("p", {
3151
3191
  className: "max sm price"
3152
- }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : "", /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3192
+ }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : '', /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3153
3193
  colSpan: 1,
3154
3194
  noSmall: true
3155
3195
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3160,14 +3200,14 @@ var Step4 = function Step4(_ref) {
3160
3200
  },
3161
3201
  colSpan: 1
3162
3202
  }, /*#__PURE__*/React__default.createElement("p", {
3163
- className: "max sm bolder red"
3203
+ className: "max sm bolder primaryColor"
3164
3204
  }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3165
3205
  sx: {
3166
3206
  paddingTop: '1em'
3167
3207
  },
3168
3208
  align: "right"
3169
3209
  }, /*#__PURE__*/React__default.createElement("p", {
3170
- className: "max sm total bolder red"
3210
+ className: "max sm total bolder primaryColor"
3171
3211
  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3172
3212
  container: true,
3173
3213
  columnSpacing: 0,
@@ -3183,7 +3223,7 @@ var Step4 = function Step4(_ref) {
3183
3223
  sm: 1,
3184
3224
  md: 0.5
3185
3225
  }, /*#__PURE__*/React__default.createElement(CgProfile, {
3186
- className: "icon"
3226
+ className: "icon primaryColor"
3187
3227
  })), /*#__PURE__*/React__default.createElement(Grid, {
3188
3228
  item: true,
3189
3229
  xs: 11,
@@ -3196,7 +3236,8 @@ var Step4 = function Step4(_ref) {
3196
3236
  value: comments,
3197
3237
  onChange: function onChange(e) {
3198
3238
  setComments(e.target.value);
3199
- }
3239
+ },
3240
+ className: "primaryBorderColor"
3200
3241
  })), /*#__PURE__*/React__default.createElement(Grid, {
3201
3242
  item: true,
3202
3243
  xs: 12
@@ -3221,7 +3262,8 @@ var Step4 = function Step4(_ref) {
3221
3262
  }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React__default.createElement("span", {
3222
3263
  onClick: function onClick() {
3223
3264
  return clickRedirect('cart');
3224
- }
3265
+ },
3266
+ className: "primaryColor"
3225
3267
  }, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("button", {
3226
3268
  className: "back",
3227
3269
  onClick: function onClick() {
@@ -3236,7 +3278,8 @@ var Step4 = function Step4(_ref) {
3236
3278
  alert('please accept the privacy policy');
3237
3279
  }
3238
3280
  },
3239
- type: "submit"
3281
+ type: "submit",
3282
+ className: "primaryBgColor"
3240
3283
  }, loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
3241
3284
  color: "inherit",
3242
3285
  size: 15,
@@ -3283,7 +3326,9 @@ var steps = [{
3283
3326
  }
3284
3327
  }];
3285
3328
  var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3329
+ var _styles$checkoutSumma;
3286
3330
  var currStep = _ref.currStep,
3331
+ styles = _ref.styles,
3287
3332
  handleNext = _ref.handleNext,
3288
3333
  handleBack = _ref.handleBack,
3289
3334
  loading = _ref.loading,
@@ -3317,11 +3362,16 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3317
3362
  selectedPaymentMethod = _ref.selectedPaymentMethod,
3318
3363
  shippingMethod = _ref.shippingMethod;
3319
3364
  return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
3320
- className: "checkout"
3365
+ className: "checkout",
3366
+ bg: styles === null || styles === void 0 ? void 0 : styles.bg
3321
3367
  }, /*#__PURE__*/React__default.createElement(Stack, {
3322
3368
  flexDirection: "column",
3323
3369
  alignItems: "flex-start"
3324
- }, /*#__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, {
3370
+ }, /*#__PURE__*/React__default.createElement(CheckoutHeading, {
3371
+ style: {
3372
+ color: styles === null || styles === void 0 ? void 0 : styles.h1Color
3373
+ }
3374
+ }, /*#__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, {
3325
3375
  flexDirection: "column",
3326
3376
  alignItems: "flex-end"
3327
3377
  }, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
@@ -3338,6 +3388,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3338
3388
  width: '100%'
3339
3389
  }
3340
3390
  }, steps.map(function (item, index) {
3391
+ var _styles$stepperIcon, _styles$stepperIcon2;
3341
3392
  return /*#__PURE__*/React__default.createElement(Step, {
3342
3393
  key: index
3343
3394
  }, /*#__PURE__*/React__default.createElement(StepLabel, {
@@ -3346,7 +3397,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3346
3397
  },
3347
3398
  icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
3348
3399
  style: currStep >= index ? {
3349
- background: '#ff717c',
3400
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon = styles.stepperIcon) === null || _styles$stepperIcon === void 0 ? void 0 : _styles$stepperIcon.bg,
3350
3401
  color: 'white',
3351
3402
  padding: 0
3352
3403
  } : {
@@ -3357,11 +3408,11 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3357
3408
  }, /*#__PURE__*/React__default.createElement("div", {
3358
3409
  className: "circle",
3359
3410
  style: currStep >= index ? {
3360
- background: 'rgba(253, 0, 21, 1)',
3411
+ background: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3361
3412
  color: 'white',
3362
3413
  padding: 0
3363
3414
  } : {
3364
- background: '#FDD6D0',
3415
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon2 = styles.stepperIcon) === null || _styles$stepperIcon2 === void 0 ? void 0 : _styles$stepperIcon2.opened,
3365
3416
  color: 'inherit',
3366
3417
  padding: 0
3367
3418
  }
@@ -3373,6 +3424,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3373
3424
  Icon: item.Icon,
3374
3425
  single: true,
3375
3426
  username: index === 0 ? userName : '',
3427
+ primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3376
3428
  closed: true,
3377
3429
  icon: index + 1,
3378
3430
  handleClick: function handleClick() {
@@ -3428,7 +3480,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3428
3480
  stores: userStores
3429
3481
  ,
3430
3482
  addShipping: addStoreAddress,
3431
- setSelectedCountry: setSelectedCountry
3483
+ setSelectedCountry: setSelectedCountry,
3484
+ styles: styles
3432
3485
  })), index === 3 && /*#__PURE__*/React__default.createElement(StepContent, {
3433
3486
  sx: {
3434
3487
  padding: 0
@@ -3463,7 +3516,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3463
3516
  shippingInformation: shippingAddress,
3464
3517
  shippingMethod: shippingMethod,
3465
3518
  paymentMethod: selectedPaymentMethod,
3466
- total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
3519
+ total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
3520
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma = styles.checkoutSummary) === null || _styles$checkoutSumma === void 0 ? void 0 : _styles$checkoutSumma.bg
3467
3521
  }));
3468
3522
  };
3469
3523