@salesgenterp/ui-components 0.4.176 → 0.4.179

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.
package/dist/index.js CHANGED
@@ -2070,7 +2070,7 @@ var CheckoutSummaryContainer = styled__default.div(_templateObject$7 || (_templa
2070
2070
  return props.bg || 'rgba(255, 240, 236, 1)';
2071
2071
  });
2072
2072
  var TextRow = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 90%;\n margin-bottom: 1em;\n padding-bottom: 1em;\n width: 90%;\n border-bottom: 1px solid rgba(250, 232, 229, 1);\n .text {\n font-size: 1.1em;\n font-weight: 300;\n text-transform: capitalize;\n }\n .total {\n font-size: 1.65em;\n font-weight: 800;\n }\n"])));
2073
- var FilledInfo = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 60%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: 0.8em;\n max-width: 300px;\n width: fit-content;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
2073
+ var FilledInfo = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 60%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: 0.8em;\n max-width: 300px;\n width: fit-content;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n opacity: 0;\n }\n"])));
2074
2074
 
2075
2075
  var CheckoutSummary = function CheckoutSummary(_ref) {
2076
2076
  var total = _ref.total,
@@ -2124,7 +2124,7 @@ var StepsHeaderContainer = styled__default.div(_templateObject3$8 || (_templateO
2124
2124
  }, function (props) {
2125
2125
  return props.username ? 'not-allowed' : 'pointer';
2126
2126
  });
2127
- var TextFeildContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n /* height: 24px; */\n color: rgba(107, 106, 106, 1);\n &::placeholder {\n font-size: 0.975em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1em;\n }\n }\n"])));
2127
+ var TextFeildContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n\n color: rgba(107, 106, 106, 1);\n color: black;\n &::placeholder {\n font-size: 0.975em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1em;\n }\n }\n"])));
2128
2128
  var CommonCheckoutBtn = styled__default.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n width: ", ";\n height: ", ";\n\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n font-weight: 500;\n letter-spacing: 1px;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2129
2129
  return props.width || '8.05em';
2130
2130
  }, function (props) {
@@ -2138,7 +2138,7 @@ var CommonCheckoutBtn = styled__default.button(_templateObject5$6 || (_templateO
2138
2138
  });
2139
2139
  var Select = styled__default.div.attrs({
2140
2140
  className: 'checkout-input'
2141
- })(_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"])));
2141
+ })(_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: #525252;\n /* color:black; */\n }\n"])));
2142
2142
  var SaveButton = styled__default.button.attrs({
2143
2143
  className: 'checkout-btn'
2144
2144
  })(_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) {
@@ -2146,21 +2146,17 @@ var SaveButton = styled__default.button.attrs({
2146
2146
  }, function (props) {
2147
2147
  return props.disabled ? 'not-allowed' : 'pointer';
2148
2148
  });
2149
- var ButtonRowContainer = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 700;\n letter-spacing: 1px;\n color: white;\n background-color: #fd0015;\n border: 2px solid rgba(254, 81, 96, 0.87);\n cursor: ", ";\n }\n .back {\n font-size: 0.875em;\n font-weight: 500;\n justify-content: flex-start;\n margin-right: 0.2em;\n color: #323232;\n background: transparent;\n border: none;\n cursor: ", ";\n font-size: 0.8em;\n transition: 0.4s;\n .icon {\n font-size: 1.2em;\n margin-right: 2px;\n }\n &:hover,\n &:focus {\n letter-spacing: 1px;\n outline: none;\n }\n }\n"])), function (props) {
2149
+ var ButtonRowContainer = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n letter-spacing: 1px;\n color: white;\n background-color: #fd0015;\n border: 2px solid rgba(254, 81, 96, 0.87);\n cursor: ", ";\n }\n .back {\n font-size: 0.875em;\n font-weight: 500;\n justify-content: flex-start;\n margin-right: 0.2em;\n color: #323232;\n background: transparent;\n border: none;\n cursor: ", ";\n font-size: 0.8em;\n transition: 0.4s;\n .icon {\n font-size: 1.2em;\n margin-right: 2px;\n }\n &:hover,\n &:focus {\n letter-spacing: 1px;\n outline: none;\n }\n }\n"])), function (props) {
2150
2150
  return props.disabledNext ? 'not-allowed' : 'pointer';
2151
2151
  }, function (props) {
2152
2152
  return props.disabledBack ? 'not-allowed' : 'pointer';
2153
2153
  });
2154
- var CheckBoxRow = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n .medium {\n font-weight: 600;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
2154
+ var CheckBoxRow = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 600;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n .medium {\n font-weight: 600;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
2155
2155
  return props.padding;
2156
2156
  }, function (props) {
2157
2157
  return props.marginLeft;
2158
2158
  });
2159
- var DeliveryOption = styled__default.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) {
2160
- return props.hovered ? '#fff0ec' : '';
2161
- }, function (props) {
2162
- return props.hovered ? '1px solid #fce1d9' : '';
2163
- }, function (props) {
2159
+ var DeliveryOption = styled__default.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\n background-color: ", ";\n border-bottom: 1px solid rgba(255, 240, 236, 1);\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) {
2164
2160
  return props.hovered ? props.bg : '';
2165
2161
  }, function (props) {
2166
2162
  return props.hovered ? "1px solid " + props.border : '';
@@ -2175,13 +2171,13 @@ var DeliveryOption = styled__default.div(_templateObject10 || (_templateObject10
2175
2171
  }, function (props) {
2176
2172
  return props.color || '#fd0015';
2177
2173
  }, function (props) {
2178
- return props.hovered ? '800' : '700';
2174
+ return props.hovered ? '700' : '700';
2179
2175
  });
2180
2176
 
2181
2177
  var CreditCard = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n border: 1px solid transparent;\n text-align: center;\n p {\n font-size: 10px;\n }\n"])));
2182
2178
  var PaymentLi = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 1.5em;\n cursor: pointer;\n .circle {\n /* background: #323232; */\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n border: 1px solid #323232;\n margin-right: 1em;\n }\n .innerCircle {\n background: #323232;\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n p {\n font-size: 1em;\n color: black;\n text-transform: capitalize;\n font-weight: 500;\n }\n"])));
2183
2179
 
2184
- var StyledTableRow = styled__default(material.TableRow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 700;\n }\n /* .sm {\n font-weight: 600;\n } */\n .bolder {\n font-weight: 800;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
2180
+ var StyledTableRow = styled__default(material.TableRow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .light {\n font-weight: 300;\n }\n .price {\n font-weight: 600;\n }\n .sm {\n font-weight: 500;\n }\n .bolder {\n font-weight: 700;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
2185
2181
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2186
2182
  });
2187
2183
  var StyledTableCell = styled__default(material.TableCell)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n font-size: 1em;\n .noAboveSm {\n display: none;\n }\n @media only screen and (max-width: 748px) {\n display: ", ";\n padding: 0.5em 0.3em;\n .noAboveSm {\n display: inline-block;\n margin-right: 6px;\n }\n }\n }\n"])), function (props) {
@@ -2260,8 +2256,7 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2260
2256
  single = _ref.single,
2261
2257
  closed = _ref.closed,
2262
2258
  handleClick = _ref.handleClick,
2263
- withoutIcon = _ref.withoutIcon,
2264
- primaryColor = _ref.primaryColor;
2259
+ withoutIcon = _ref.withoutIcon;
2265
2260
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2266
2261
  single: single,
2267
2262
  username: username,
@@ -2286,9 +2281,9 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2286
2281
  width: 18,
2287
2282
  height: 18
2288
2283
  }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
2284
+ className: "primaryColor",
2289
2285
  style: {
2290
- fontWeight: 700,
2291
- color: primaryColor
2286
+ fontWeight: 700
2292
2287
  }
2293
2288
  }, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2294
2289
  className: "dropIcon",
@@ -2887,6 +2882,7 @@ var CreditCardForm = function CreditCardForm(_ref) {
2887
2882
  onFocus: handleFocus,
2888
2883
  name: "name",
2889
2884
  type: "text",
2885
+ value: name,
2890
2886
  placeholder: "Card Holder's Name*"
2891
2887
  }), showError && name.length < 3 ? /*#__PURE__*/React__default.createElement("p", {
2892
2888
  style: {
@@ -2906,6 +2902,7 @@ var CreditCardForm = function CreditCardForm(_ref) {
2906
2902
  onFocus: handleFocus,
2907
2903
  name: "number",
2908
2904
  type: "number",
2905
+ value: number,
2909
2906
  placeholder: "Card Nubmers xxxx-xxxx-xxxx-xxxx"
2910
2907
  }), showError && number.length < 14 || showError && number.length > 16 ? /*#__PURE__*/React__default.createElement("p", {
2911
2908
  style: {
@@ -2925,6 +2922,7 @@ var CreditCardForm = function CreditCardForm(_ref) {
2925
2922
  onFocus: handleFocus,
2926
2923
  name: "expiry",
2927
2924
  type: "number",
2925
+ value: expiry,
2928
2926
  placeholder: "Expiration Date MM/YYYY "
2929
2927
  }), showError && expiry.length < 4 || showError && expiry.length > 6 ? /*#__PURE__*/React__default.createElement("p", {
2930
2928
  style: {
@@ -2944,7 +2942,8 @@ var CreditCardForm = function CreditCardForm(_ref) {
2944
2942
  onFocus: handleFocus,
2945
2943
  name: "cvc",
2946
2944
  type: "number",
2947
- placeholder: "CVC/CVV ***"
2945
+ placeholder: "CVC/CVV ***",
2946
+ value: cvc
2948
2947
  }), showError && cvc.length < 3 || showError && cvc.length > 4 ? /*#__PURE__*/React__default.createElement("p", {
2949
2948
  style: {
2950
2949
  color: 'red',
@@ -2995,6 +2994,7 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
2995
2994
  var _e$target = e.target,
2996
2995
  name = _e$target.name,
2997
2996
  value = _e$target.value;
2997
+ console.log(name);
2998
2998
  _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
2999
2999
  };
3000
3000
  _this.handleSave = function (e) {
@@ -3185,7 +3185,9 @@ var Step4 = function Step4(_ref) {
3185
3185
  scope: "row"
3186
3186
  }, /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("span", {
3187
3187
  className: "noAboveSm price"
3188
- }, "ID: #", row === null || row === void 0 ? void 0 : row.productId), row.productName)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3188
+ }, "ID: #", row === null || row === void 0 ? void 0 : row.productId), /*#__PURE__*/React__default.createElement("span", {
3189
+ className: "light"
3190
+ }, row.productName))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3189
3191
  align: "left"
3190
3192
  }, /*#__PURE__*/React__default.createElement("p", {
3191
3193
  className: "price max"
@@ -3309,17 +3311,17 @@ var Step4 = function Step4(_ref) {
3309
3311
  });
3310
3312
  },
3311
3313
  required: true
3312
- }), /*#__PURE__*/React__default.createElement("p", null, "I Accept the", /*#__PURE__*/React__default.createElement("span", {
3314
+ }), /*#__PURE__*/React__default.createElement("p", null, "I Accept the \xA0", /*#__PURE__*/React__default.createElement("span", {
3313
3315
  className: "ul",
3314
3316
  onClick: function onClick() {
3315
3317
  clickRedirect('terms-conditions');
3316
3318
  }
3317
- }, "&npsp; Tearms and Conditions \xA0"), "&", /*#__PURE__*/React__default.createElement("span", {
3319
+ }, "Tearms and Conditions"), "\xA0 & \xA0", /*#__PURE__*/React__default.createElement("span", {
3318
3320
  className: "ul",
3319
3321
  onClick: function onClick() {
3320
3322
  return clickRedirect('privacy-policy');
3321
3323
  }
3322
- }, "&npsp; Privacy Policy? &npsp;")))), /*#__PURE__*/React__default.createElement(material.Grid, {
3324
+ }, "Privacy Policy?")))), /*#__PURE__*/React__default.createElement(material.Grid, {
3323
3325
  item: true,
3324
3326
  xs: 12
3325
3327
  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", {
@@ -5112,7 +5114,7 @@ var TypographyContainer = styled__default(material.Typography)(_templateObject4$
5112
5114
  });
5113
5115
  var CardMediaContainer = styled__default(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n border-radius: 50%;\n max-width: 80px;\n margin: 1.5rem 0;\n"])));
5114
5116
  var DividerContainer = styled__default(material.Divider)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose([""])));
5115
- var CardContainer = styled__default(material.Stack)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n background-color: ", " !important;\n border-radius: 14px !important;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n max-width: 300px;\n"])), function (props) {
5117
+ var CardContainer = styled__default(material.Stack)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n border-radius: 14px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n max-width: 300px;\n"])), function (props) {
5116
5118
  return props.isNightMode ? props.secondaryColor : "rgba(" + hexToRgbA(props.primaryColor) + ",0.1)";
5117
5119
  });
5118
5120
  var SocialIconContainer = styled__default.a(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n margin: 0.4rem;\n margin-left: ", ";\n &:hover {\n svg {\n color: ", ";\n }\n }\n svg {\n font-size: 1.5rem;\n color: ", ";\n }\n"])), function (props) {
@@ -5133,7 +5135,7 @@ var TotalContainer = styled__default(material.Stack)(_templateObject11$1 || (_te
5133
5135
  }, function (props) {
5134
5136
  return props.fontColor;
5135
5137
  }, function (props) {
5136
- return "rgba(" + hexToRgbA(props.primaryColor) + ",0.2)";
5138
+ return "rgba(" + hexToRgbA(props.primaryColor) + ",0.1)";
5137
5139
  }, function (props) {
5138
5140
  return props.primaryColor;
5139
5141
  });
@@ -5152,12 +5154,12 @@ var CategoryText = styled__default.div(_templateObject14$1 || (_templateObject14
5152
5154
  var _props$theme4;
5153
5155
  return (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.primaryColor;
5154
5156
  });
5155
- var DiscoverContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n background: ", ";\n padding: 1.8rem;\n border-radius: 14px;\n h3,\n svg {\n color: ", ";\n font-size: 2rem;\n font-weight: 700;\n line-height: 2rem;\n }\n"])), function (props) {
5156
- var _props$theme5;
5157
- return "rgba(" + hexToRgbA((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.primaryColor) + ",0.2)";
5157
+ var DiscoverContainer = styled__default.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n padding: 1.8rem;\n border-radius: 14px;\n h3,\n svg {\n color: ", ";\n font-size: 2rem;\n font-weight: 700;\n line-height: 2rem;\n }\n"])), function (props) {
5158
+ var _props$theme5, _props$theme6, _props$theme7;
5159
+ return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.isNightMode ? (_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.secondaryColor : "rgba(" + hexToRgbA((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.primaryColor) + ",0.1)";
5158
5160
  }, function (props) {
5159
- var _props$theme6;
5160
- return (_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.fontColor;
5161
+ var _props$theme8;
5162
+ return (_props$theme8 = props.theme) === null || _props$theme8 === void 0 ? void 0 : _props$theme8.fontColor;
5161
5163
  });
5162
5164
  var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n padding: 4px 8px;\n border-radius: 6px;\n background-color: ", ";\n color: #fff;\n"])), function (props) {
5163
5165
  return props.primaryColor;
@@ -7162,7 +7164,7 @@ var ChangePassword = function ChangePassword(_ref) {
7162
7164
  var RootContainer$3 = styled__default(material.Stack)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n background-color: ", " !important;\n border-radius: 14px !important;\n padding: 1.3rem;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
7163
7165
  return props.secondaryColor;
7164
7166
  });
7165
- var TypographyContainer$6 = styled__default(material.Typography)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n font-size: 18px !important;\n align-items: center;\n"])), function (props) {
7167
+ var TypographyContainer$6 = styled__default(material.Typography)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n font-size: 1.2rem !important;\n align-items: center;\n"])), function (props) {
7166
7168
  return props.fontColor;
7167
7169
  });
7168
7170
 
@@ -7239,7 +7241,8 @@ var AccountDetails = function AccountDetails(_ref) {
7239
7241
  secondaryColor: secondaryColor || colors.secondaryColor,
7240
7242
  backgroundColor: backgroundColor || colors.backgroundColor,
7241
7243
  fontColor: fontColor || colors.fontColor,
7242
- backgroundImage: backgroundImage || colors.backgroundImage
7244
+ backgroundImage: backgroundImage || colors.backgroundImage,
7245
+ isNightMode: isNightMode
7243
7246
  });
7244
7247
  }, [primaryColor, secondaryColor, backgroundColor, fontColor, backgroundImage]);
7245
7248
  React.useEffect(function () {
@@ -7266,13 +7269,15 @@ var AccountDetails = function AccountDetails(_ref) {
7266
7269
  secondaryColor: secondaryColor || '#26232F',
7267
7270
  backgroundColor: backgroundColor || '#1F1B1B',
7268
7271
  fontColor: fontColor || '#fff',
7269
- backgroundImage: backgroundImage || '/images/backgroundDark.png'
7272
+ backgroundImage: backgroundImage || '/images/backgroundDark.png',
7273
+ isNightMode: isNightMode
7270
7274
  }) : setColors({
7271
7275
  primaryColor: primaryColor || '#BF262D',
7272
7276
  secondaryColor: secondaryColor || '#FFFFFF',
7273
7277
  backgroundColor: backgroundColor || '#F5F5F5',
7274
7278
  fontColor: fontColor || '#391111',
7275
- backgroundImage: backgroundImage || '/images/backgroundLight.png'
7279
+ backgroundImage: backgroundImage || '/images/backgroundLight.png',
7280
+ isNightMode: isNightMode
7276
7281
  });
7277
7282
  };
7278
7283
  React.useEffect(function () {
@@ -7436,7 +7441,7 @@ var AccountDetails = function AccountDetails(_ref) {
7436
7441
  }
7437
7442
  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && renderListItemComponent()))))));
7438
7443
  };
7439
- var Root$4 = styled__default(material.Box)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n // background-image: url(", ");\n // background-position: center;\n // background-repeat: no-repeat;\n // background-size: cover;\n padding: 1.4rem;\n background-color: ", ";\n * {\n font-family: Poppins;\n }\n"])), function (props) {
7444
+ var Root$4 = styled__default(material.Box)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n // background-image: url(", ");\n // background-position: center;\n // background-repeat: no-repeat;\n // background-size: cover;\n padding: 1.4rem;\n background-color: ", ";\n"])), function (props) {
7440
7445
  return props.backgroundImage;
7441
7446
  }, function (props) {
7442
7447
  return props.isNightMode ? '#40404f' : "rgba(" + hexToRgbA(props.primaryColor) + ",0.1)";