@salesgenterp/ui-components 0.4.40 → 0.4.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +9 -9
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +9 -9
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1965,9 +1965,9 @@ var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 =
1965
1965
  return props.bg || 'rgba(255, 248, 246, 1)';
1966
1966
  });
1967
1967
  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"])));
1968
- var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _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 /* 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 }\n /* overflow: hidden; */\n"])));
1969
- var CheckoutHeading = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.735em;\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"])));
1970
- var CheckoutHeader = styled(Row)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\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: 2em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\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: 1646px) {\n margin-right: 1em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1968
+ var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _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 /* 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: 92vw;\n min-width: 90vw;\n }\n /* overflow: hidden; */\n"])));
1969
+ var CheckoutHeading = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.735em;\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 }\n"])));
1970
+ var CheckoutHeader = styled(Row)(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\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: 2em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\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: 1646px) {\n margin-right: 1em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n margin-right: -0.2em;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1971
1971
  var CheckoutStepIcon = styled.div(_templateObject6$5 || (_templateObject6$5 = _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"])));
1972
1972
 
1973
1973
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
@@ -2022,7 +2022,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2022
2022
  };
2023
2023
 
2024
2024
  var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2025
- var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n @media screen and (max-width: 1305px) {\n width: 80vw;\n min-width: 0;\n }\n @media screen and (max-width: 768px) {\n width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n"])));
2025
+ var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n @media screen and (max-width: 1305px) {\n width: 80vw;\n min-width: 0;\n }\n @media screen and (max-width: 768px) {\n width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 540px) {\n width: 98%;\n margin-left: 0.4em;\n }\n"])));
2026
2026
  var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
2027
2027
  var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n font-family: 'karla-fonts';\n color: #323232;\n /* padding: ", "; */\n margin-bottom: ", ";\n margin-top: ", ";\n margin-left: ", ";\n /* color: grey; */\n border-bottom: 1px solid #fff0ec;\n background: #ffffff;\n border-radius: 20px;\n max-width: 919px;\n\n min-height: 4.35em;\n max-height: 4.35em;\n padding: ", ";\n h5 {\n font-size: 16px;\n font-weight: 600;\n text-transform: capitalize;\n margin-left: 0.6em;\n }\n .icon {\n font-size: 1.3em;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4em;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n }\n .red {\n font-weight: 600;\n color: #fd0015;\n font-size: inherit;\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
2028
2028
  return props.single ? '1.8em 2em' : '1em 0';
@@ -2057,10 +2057,10 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
2057
2057
  }, function (props) {
2058
2058
  return props.disabledBack ? 'not-allowed' : 'pointer';
2059
2059
  });
2060
- var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\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 &: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"])), function (props) {
2060
+ var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\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 @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 }\n"])), function (props) {
2061
2061
  return props.padding;
2062
2062
  });
2063
- var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 705px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\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 cursor: pointer;\n height: 14px;\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: 700;\n font-size: 0.95em;\n }\n"])), function (props) {
2063
+ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 705px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\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: 700;\n font-size: 0.95em;\n }\n"])), function (props) {
2064
2064
  return props.hovered ? '#fff0ec' : '';
2065
2065
  }, function (props) {
2066
2066
  return props.hovered ? '1px solid #fce1d9' : '';
@@ -2386,7 +2386,7 @@ var AddressForm = function AddressForm(_ref) {
2386
2386
  }
2387
2387
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2388
2388
  item: true,
2389
- xs: 12,
2389
+ xs: 6,
2390
2390
  sm: 3.34
2391
2391
  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2392
2392
  controlls: {
@@ -2408,7 +2408,7 @@ var AddressForm = function AddressForm(_ref) {
2408
2408
  }
2409
2409
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2410
2410
  item: true,
2411
- xs: 12,
2411
+ xs: 6,
2412
2412
  sm: 3.34
2413
2413
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2414
2414
  controlls: {
@@ -2418,7 +2418,7 @@ var AddressForm = function AddressForm(_ref) {
2418
2418
  }
2419
2419
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2420
2420
  item: true,
2421
- xs: 12,
2421
+ xs: 6,
2422
2422
  sm: 3.34
2423
2423
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2424
2424
  controlls: {