@salesgenterp/ui-components 0.4.113 → 0.4.114

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 +92 -48
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +92 -48
  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
+ /* /////////inputs 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
@@ -1987,16 +1987,16 @@ var CartPageComponent = function CartPageComponent(_ref) {
1987
1987
  };
1988
1988
 
1989
1989
  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) {
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) {
1991
1991
  return props.maxWidth || '1605px';
1992
1992
  }, function (props) {
1993
- return props.bg || 'rgba(255, 248, 246, 1)';
1993
+ return props.bg || '#fff8f6';
1994
1994
  });
1995
1995
  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
1996
  var CheckoutMainWithHeader = styled(material.Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
1997
1997
  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
1998
  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"])));
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 }\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
2000
  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
2001
 
2002
2002
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
@@ -2011,8 +2011,11 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2011
2011
  billingInformation = _ref.billingInformation,
2012
2012
  shippingInformation = _ref.shippingInformation,
2013
2013
  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", {
2014
+ shippingMethod = _ref.shippingMethod,
2015
+ bg = _ref.bg;
2016
+ return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, {
2017
+ bg: bg
2018
+ }, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
2016
2019
  className: "text"
2017
2020
  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
2018
2021
  className: "total"
@@ -2067,8 +2070,12 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2067
2070
  }, function (props) {
2068
2071
  return props.disabled ? 'not-allowed' : 'pointer';
2069
2072
  });
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) {
2073
+ var Select = styled.div.attrs({
2074
+ className: 'checkout-input'
2075
+ })(_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"])));
2076
+ var SaveButton = styled.button.attrs({
2077
+ className: 'checkout-btn'
2078
+ })(_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
2079
  return props.color || '#FD0015';
2073
2080
  }, function (props) {
2074
2081
  return props.disabled ? 'not-allowed' : 'pointer';
@@ -2083,12 +2090,24 @@ var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _tagged
2083
2090
  }, function (props) {
2084
2091
  return props.marginLeft;
2085
2092
  });
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) {
2093
+ 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
2094
  return props.hovered ? '#fff0ec' : '';
2088
2095
  }, function (props) {
2089
2096
  return props.hovered ? '1px solid #fce1d9' : '';
2097
+ }, function (props) {
2098
+ return props.hovered ? props.bg : '';
2099
+ }, function (props) {
2100
+ return props.hovered ? "1px solid " + props.border : '';
2090
2101
  }, function (props) {
2091
2102
  return props.hovered ? '5px' : '0';
2103
+ }, function (props) {
2104
+ return props.bg || '#fff0ec';
2105
+ }, function (props) {
2106
+ return props.border ? "1px solid " + props.border : '1px solid #fce1d9';
2107
+ }, function (props) {
2108
+ return props.color || '#fd0015';
2109
+ }, function (props) {
2110
+ return props.color || '#fd0015';
2092
2111
  }, function (props) {
2093
2112
  return props.hovered ? '800' : '700';
2094
2113
  });
@@ -2111,7 +2130,9 @@ var CheckoutInput = function CheckoutInput(_ref) {
2111
2130
  autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
2112
2131
  showIcon = controlls.showIcon,
2113
2132
  type = controlls.type;
2114
- return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
2133
+ return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
2134
+ className: "checkout-form-input"
2135
+ }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
2115
2136
  defaultValue: "",
2116
2137
  render: function render(_ref2) {
2117
2138
  var field = _ref2.field;
@@ -2151,13 +2172,10 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
2151
2172
  render: function render(_ref4) {
2152
2173
  var field = _ref4.field;
2153
2174
  return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
2154
- fullWidth: true
2155
- ,
2156
- select: true
2157
- ,
2175
+ fullWidth: true,
2176
+ select: true,
2158
2177
  displayEmpty: true,
2159
- required: true
2160
- ,
2178
+ required: true,
2161
2179
  autoFocus: autoFocus
2162
2180
  }, field), /*#__PURE__*/React__default.createElement(material.MenuItem, {
2163
2181
  value: ""
@@ -2178,7 +2196,8 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2178
2196
  single = _ref.single,
2179
2197
  closed = _ref.closed,
2180
2198
  handleClick = _ref.handleClick,
2181
- withoutIcon = _ref.withoutIcon;
2199
+ withoutIcon = _ref.withoutIcon,
2200
+ primaryColor = _ref.primaryColor;
2182
2201
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2183
2202
  single: single,
2184
2203
  username: username,
@@ -2202,8 +2221,11 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2202
2221
  alt: "vector",
2203
2222
  width: 18,
2204
2223
  height: 18
2205
- }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome ", /*#__PURE__*/React__default.createElement("span", {
2206
- className: "red"
2224
+ }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
2225
+ style: {
2226
+ fontWeight: 700,
2227
+ color: primaryColor
2228
+ }
2207
2229
  }, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2208
2230
  className: "dropIcon",
2209
2231
  style: closed ? {
@@ -2236,7 +2258,7 @@ var Step0 = function Step0(_ref) {
2236
2258
  return clickRedirect('account/register');
2237
2259
  }
2238
2260
  }, "register"), ' ', "| ", /*#__PURE__*/React__default.createElement("span", {
2239
- className: "red"
2261
+ className: "red primaryColor"
2240
2262
  }, "login")), /*#__PURE__*/React__default.createElement(material.Grid, {
2241
2263
  container: true,
2242
2264
  component: 'form',
@@ -2281,7 +2303,8 @@ var Step0 = function Step0(_ref) {
2281
2303
  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2282
2304
  padding: ".8em 3em",
2283
2305
  uppercase: true,
2284
- type: "submit"
2306
+ type: "submit",
2307
+ className: "primaryBgColor"
2285
2308
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
2286
2309
  color: "inherit",
2287
2310
  size: 15
@@ -2311,7 +2334,8 @@ var ButtonRow = function ButtonRow(_ref) {
2311
2334
  onClick: function onClick() {
2312
2335
  if (nextDisabled) return;
2313
2336
  handleNext();
2314
- }
2337
+ },
2338
+ className: "checkout-btn"
2315
2339
  }, "Next"));
2316
2340
  };
2317
2341
 
@@ -2573,7 +2597,9 @@ var Step1 = function Step1(_ref) {
2573
2597
  item: true,
2574
2598
  xs: 12,
2575
2599
  sm: 10
2576
- }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2600
+ }, /*#__PURE__*/React__default.createElement(Select, {
2601
+ className: "checkout-input"
2602
+ }, /*#__PURE__*/React__default.createElement("select", {
2577
2603
  value: selectedStore,
2578
2604
  onChange: function onChange(e) {
2579
2605
  return setSelectedStore(parseInt(e.target.value));
@@ -2654,7 +2680,8 @@ var Step2 = function Step2(_ref) {
2654
2680
  setSelectedCountry = _ref.setSelectedCountry,
2655
2681
  showShipping = _ref.showShipping,
2656
2682
  selectedStore = _ref.selectedStore,
2657
- stores = _ref.stores;
2683
+ stores = _ref.stores,
2684
+ styles = _ref.styles;
2658
2685
  var _useForm = reactHookForm.useForm(),
2659
2686
  control = _useForm.control,
2660
2687
  handleSubmit = _useForm.handleSubmit,
@@ -2730,17 +2757,19 @@ var Step2 = function Step2(_ref) {
2730
2757
  })), /*#__PURE__*/React__default.createElement(material.Stack, {
2731
2758
  flexDirection: "column",
2732
2759
  width: "100%",
2733
- alignItems: 'flex-start'
2734
- ,
2760
+ alignItems: 'flex-start',
2735
2761
  paddingBottom: '2em'
2736
2762
  }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2737
- var _option$amount;
2763
+ var _styles$input, _styles$input2, _option$amount;
2738
2764
  return /*#__PURE__*/React__default.createElement(DeliveryOption, {
2739
2765
  hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
2740
2766
  onClick: function onClick() {
2741
2767
  setmethod(option);
2742
2768
  },
2743
- key: i
2769
+ key: i,
2770
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
2771
+ border: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.border,
2772
+ color: styles === null || styles === void 0 ? void 0 : styles.primaryColor
2744
2773
  }, /*#__PURE__*/React__default.createElement("div", {
2745
2774
  className: "circle"
2746
2775
  }, /*#__PURE__*/React__default.createElement("span", {
@@ -2985,7 +3014,7 @@ var Step3 = function Step3(_ref) {
2985
3014
  }, /*#__PURE__*/React__default.createElement("p", {
2986
3015
  className: "bold"
2987
3016
  }, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
2988
- className: "red"
3017
+ className: "red primaryColor"
2989
3018
  }, " $", total === null || total === void 0 ? void 0 : total.toFixed(2))), storeCredits ? /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2990
3019
  marginLeft: "1em",
2991
3020
  style: {
@@ -3001,7 +3030,7 @@ var Step3 = function Step3(_ref) {
3001
3030
  }), /*#__PURE__*/React__default.createElement("p", {
3002
3031
  className: "medium"
3003
3032
  }, "Store Credits: ", /*#__PURE__*/React__default.createElement("span", {
3004
- className: "bold"
3033
+ className: "bold "
3005
3034
  }, "$", 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
3035
  var _payment$name;
3007
3036
  if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
@@ -3078,7 +3107,8 @@ var Step4 = function Step4(_ref) {
3078
3107
  var _row$standardPrice, _ref2;
3079
3108
  return /*#__PURE__*/React__default.createElement(StyledTableRow, {
3080
3109
  key: row.name,
3081
- colored: i % 2 === 0
3110
+ colored: i % 2 === 0,
3111
+ className: i % 2 === 0 ? 'primaryLightBgColor' : ''
3082
3112
  }, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3083
3113
  noSmall: true
3084
3114
  }, /*#__PURE__*/React__default.createElement("p", {
@@ -3094,8 +3124,8 @@ var Step4 = function Step4(_ref) {
3094
3124
  }, /*#__PURE__*/React__default.createElement("p", {
3095
3125
  className: "price max"
3096
3126
  }, (_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, {
3127
+ className: "red primaryColor"
3128
+ }, ' ', "x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3099
3129
  align: "center"
3100
3130
  }, /*#__PURE__*/React__default.createElement("p", {
3101
3131
  className: "price max"
@@ -3125,7 +3155,7 @@ var Step4 = function Step4(_ref) {
3125
3155
  }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3126
3156
  align: "right"
3127
3157
  }, /*#__PURE__*/React__default.createElement("p", {
3128
- className: "max sm red"
3158
+ className: "max sm primaryColor"
3129
3159
  }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3130
3160
  colSpan: 1,
3131
3161
  noSmall: true
@@ -3138,7 +3168,7 @@ var Step4 = function Step4(_ref) {
3138
3168
  }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3139
3169
  align: "right"
3140
3170
  }, /*#__PURE__*/React__default.createElement("p", {
3141
- className: "max sm red"
3171
+ className: "max sm primaryColor"
3142
3172
  }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3143
3173
  colSpan: 1,
3144
3174
  noSmall: true
@@ -3152,7 +3182,7 @@ var Step4 = function Step4(_ref) {
3152
3182
  align: "right"
3153
3183
  }, /*#__PURE__*/React__default.createElement("p", {
3154
3184
  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, {
3185
+ }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : '', /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3156
3186
  colSpan: 1,
3157
3187
  noSmall: true
3158
3188
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3163,14 +3193,14 @@ var Step4 = function Step4(_ref) {
3163
3193
  },
3164
3194
  colSpan: 1
3165
3195
  }, /*#__PURE__*/React__default.createElement("p", {
3166
- className: "max sm bolder red"
3196
+ className: "max sm bolder primaryColor"
3167
3197
  }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3168
3198
  sx: {
3169
3199
  paddingTop: '1em'
3170
3200
  },
3171
3201
  align: "right"
3172
3202
  }, /*#__PURE__*/React__default.createElement("p", {
3173
- className: "max sm total bolder red"
3203
+ className: "max sm total bolder primaryColor"
3174
3204
  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3175
3205
  container: true,
3176
3206
  columnSpacing: 0,
@@ -3186,7 +3216,7 @@ var Step4 = function Step4(_ref) {
3186
3216
  sm: 1,
3187
3217
  md: 0.5
3188
3218
  }, /*#__PURE__*/React__default.createElement(cg.CgProfile, {
3189
- className: "icon"
3219
+ className: "icon primaryColor"
3190
3220
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
3191
3221
  item: true,
3192
3222
  xs: 11,
@@ -3199,7 +3229,8 @@ var Step4 = function Step4(_ref) {
3199
3229
  value: comments,
3200
3230
  onChange: function onChange(e) {
3201
3231
  setComments(e.target.value);
3202
- }
3232
+ },
3233
+ className: "primaryBorderColor"
3203
3234
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
3204
3235
  item: true,
3205
3236
  xs: 12
@@ -3224,7 +3255,8 @@ var Step4 = function Step4(_ref) {
3224
3255
  }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React__default.createElement("span", {
3225
3256
  onClick: function onClick() {
3226
3257
  return clickRedirect('cart');
3227
- }
3258
+ },
3259
+ className: "primaryColor"
3228
3260
  }, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("button", {
3229
3261
  className: "back",
3230
3262
  onClick: function onClick() {
@@ -3239,7 +3271,8 @@ var Step4 = function Step4(_ref) {
3239
3271
  alert('please accept the privacy policy');
3240
3272
  }
3241
3273
  },
3242
- type: "submit"
3274
+ type: "submit",
3275
+ className: "primaryBgColor"
3243
3276
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
3244
3277
  color: "inherit",
3245
3278
  size: 15,
@@ -3286,7 +3319,9 @@ var steps = [{
3286
3319
  }
3287
3320
  }];
3288
3321
  var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3322
+ var _styles$checkoutSumma;
3289
3323
  var currStep = _ref.currStep,
3324
+ styles = _ref.styles,
3290
3325
  handleNext = _ref.handleNext,
3291
3326
  handleBack = _ref.handleBack,
3292
3327
  loading = _ref.loading,
@@ -3320,11 +3355,16 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3320
3355
  selectedPaymentMethod = _ref.selectedPaymentMethod,
3321
3356
  shippingMethod = _ref.shippingMethod;
3322
3357
  return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
3323
- className: "checkout"
3358
+ className: "checkout",
3359
+ bg: styles === null || styles === void 0 ? void 0 : styles.bg
3324
3360
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
3325
3361
  flexDirection: "column",
3326
3362
  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, {
3363
+ }, /*#__PURE__*/React__default.createElement(CheckoutHeading, {
3364
+ style: {
3365
+ color: styles === null || styles === void 0 ? void 0 : styles.h1Color
3366
+ }
3367
+ }, /*#__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
3368
  flexDirection: "column",
3329
3369
  alignItems: "flex-end"
3330
3370
  }, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
@@ -3341,6 +3381,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3341
3381
  width: '100%'
3342
3382
  }
3343
3383
  }, steps.map(function (item, index) {
3384
+ var _styles$stepperIcon, _styles$stepperIcon2;
3344
3385
  return /*#__PURE__*/React__default.createElement(material.Step, {
3345
3386
  key: index
3346
3387
  }, /*#__PURE__*/React__default.createElement(material.StepLabel, {
@@ -3349,7 +3390,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3349
3390
  },
3350
3391
  icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
3351
3392
  style: currStep >= index ? {
3352
- background: '#ff717c',
3393
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon = styles.stepperIcon) === null || _styles$stepperIcon === void 0 ? void 0 : _styles$stepperIcon.bg,
3353
3394
  color: 'white',
3354
3395
  padding: 0
3355
3396
  } : {
@@ -3360,11 +3401,11 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3360
3401
  }, /*#__PURE__*/React__default.createElement("div", {
3361
3402
  className: "circle",
3362
3403
  style: currStep >= index ? {
3363
- background: 'rgba(253, 0, 21, 1)',
3404
+ background: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3364
3405
  color: 'white',
3365
3406
  padding: 0
3366
3407
  } : {
3367
- background: '#FDD6D0',
3408
+ background: styles === null || styles === void 0 ? void 0 : (_styles$stepperIcon2 = styles.stepperIcon) === null || _styles$stepperIcon2 === void 0 ? void 0 : _styles$stepperIcon2.opened,
3368
3409
  color: 'inherit',
3369
3410
  padding: 0
3370
3411
  }
@@ -3376,6 +3417,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3376
3417
  Icon: item.Icon,
3377
3418
  single: true,
3378
3419
  username: index === 0 ? userName : '',
3420
+ primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
3379
3421
  closed: true,
3380
3422
  icon: index + 1,
3381
3423
  handleClick: function handleClick() {
@@ -3431,7 +3473,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3431
3473
  stores: userStores
3432
3474
  ,
3433
3475
  addShipping: addStoreAddress,
3434
- setSelectedCountry: setSelectedCountry
3476
+ setSelectedCountry: setSelectedCountry,
3477
+ styles: styles
3435
3478
  })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
3436
3479
  sx: {
3437
3480
  padding: 0
@@ -3466,7 +3509,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3466
3509
  shippingInformation: shippingAddress,
3467
3510
  shippingMethod: shippingMethod,
3468
3511
  paymentMethod: selectedPaymentMethod,
3469
- total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
3512
+ total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
3513
+ bg: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma = styles.checkoutSummary) === null || _styles$checkoutSumma === void 0 ? void 0 : _styles$checkoutSumma.bg
3470
3514
  }));
3471
3515
  };
3472
3516