@trafilea/afrodita-components 2.3.4 → 3.0.0
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/build/index.d.ts +128 -34
- package/build/index.esm.js +379 -274
- package/build/index.esm.js.map +1 -1
- package/build/index.js +380 -273
- package/build/index.js.map +1 -1
- package/package.json +7 -6
package/build/index.js
CHANGED
|
@@ -2651,11 +2651,17 @@ var Shapermint = function (_a) {
|
|
|
2651
2651
|
return (jsxRuntime.jsxs(IconWrapper, __assign({ width: width, height: height, viewBoxX: 204, viewBoxY: 35, title: "Shapermint" }, { children: [jsxRuntime.jsx("path", { d: "M167.389 6.74999C169.252 6.74999 170.762 5.23895 170.762 3.37499C170.762 1.51104 169.252 0 167.389 0C165.525 0 164.015 1.51104 164.015 3.37499C164.015 5.23895 165.525 6.74999 167.389 6.74999Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M71.7943 27.8751H67.0458V25.4637C66.6588 26.527 64.0919 28.3751 61.0478 28.3751C55.914 28.3751 51.8008 23.8688 51.8008 18.3751C51.8008 12.8561 55.9156 8.37512 61.7975 8.37512C67.6537 8.37512 71.7943 12.8561 71.7943 18.3751V27.8751ZM61.6726 12.9574C58.9122 12.9574 56.6742 15.2359 56.6742 18.3751C56.6742 21.4131 58.9122 23.8181 61.6726 23.8181C64.433 23.8181 66.7959 21.3371 66.7959 18.3751C66.7959 15.3371 64.433 12.9574 61.6726 12.9574Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M161.267 27.8751H156.297V16.6017C156.297 15.5099 155.911 12.8439 152.435 12.9708C150.426 13.0216 148.856 14.6974 148.856 16.6778V27.8751H143.886V16.6017C143.886 15.5353 143.551 12.9454 140.255 12.9454C138.041 12.9454 136.496 14.4435 136.496 16.6017V27.8751H131.526V16.9318C131.526 12.0568 134.951 8.37512 140.281 8.37512C142.933 8.37512 145.07 9.41614 146.461 11.0919C147.929 9.41614 150.117 8.37512 152.641 8.37512C158.074 8.37512 161.267 11.9044 161.267 16.9318V27.8751Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M182.26 8.37512C187.689 8.37512 190.88 11.9044 190.88 16.9318V27.8751H185.914V16.8048C185.914 15.713 185.528 12.9454 182.054 12.9454C180.047 12.9454 178.477 14.9005 178.477 16.8556V27.8497H173.511V16.9064C173.511 12.0568 176.959 8.37512 182.26 8.37512Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M80.0468 35.0001V25.9644C81.0013 26.9796 83.0136 28.401 85.8256 28.401C90.9594 28.401 95.0355 23.9085 95.0355 18.3753C95.0355 12.8676 90.9078 8.37512 85.0516 8.37512C79.1697 8.37512 75.042 12.8676 75.042 18.3753V35.0001H80.0468ZM85.0774 23.8323C82.317 23.8323 80.0468 21.4211 80.0468 18.3753C80.0468 15.4057 82.317 12.9438 85.0774 12.9438C87.8378 12.9438 90.0564 15.2788 90.0564 18.3753C90.0564 21.4972 87.8378 23.8323 85.0774 23.8323Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M49.2774 27.875H44.3321V16.8473C44.3321 15.7293 43.9734 12.9596 40.7705 12.9596C38.5669 12.9596 37.0039 14.6875 37.0039 16.8473V27.875H32.0586V1.5H37.0039V10.6982C37.9775 9.22446 40.0274 8.41136 41.6929 8.41136C46.4076 8.41136 49.303 11.8162 49.303 16.8473V27.875H49.2774Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M204 27.8097C197.771 28.3921 194.003 25.024 194.003 19.8072V3.625H198.95V8.56323H204V13.1216H198.95V19.8579C198.95 22.5169 200.975 23.5299 204 23.3779V27.8097Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M116.902 20.2129C116.979 19.6552 117.031 18.7427 117.031 18.3624C117.031 12.1521 112.453 8.37512 107.49 8.37512C101.986 8.37512 97.5371 12.9125 97.5371 18.4385C97.5371 23.9645 102.089 28.3751 108.184 28.3751C111.039 28.3751 114.253 27.3865 115.925 25.6121L113.507 22.0887C112.479 23.0266 111.219 23.8377 108.518 23.8377C104.172 23.8377 102.938 21.1761 102.835 20.2129H116.902ZM102.809 16.6134C103.092 14.8897 104.635 12.9379 107.335 12.9379C110.473 12.9379 111.939 15.0418 112.119 16.6641L102.809 16.6134Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M169.886 27.875H164.888V8.875H169.886V27.875Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M129.899 12.9691C126.732 12.4105 124.621 14.0864 124.621 16.8035V27.875H119.652V16.8035C119.652 11.3693 123.463 7.58573 129.899 8.34753V12.9691Z", fill: "#292929" }, void 0), jsxRuntime.jsx("path", { d: "M21.174 29.1575C26.6159 29.3607 29.5818 26.1339 29.5818 21.713C29.5818 17.3175 24.8879 15.9201 22.5925 15.1579C19.8329 14.2432 17.7181 13.7096 17.7181 12.1598C17.7181 10.9148 18.8529 10.1271 20.6582 10.1271C22.412 10.1271 24.6558 10.864 26.8222 12.1852L26.9769 12.2868L29.1691 8.42483L29.0402 8.34861C26.6159 6.77333 23.5468 5.83325 20.813 5.83325C16.0675 5.83325 12.7405 8.67891 12.7405 12.7695C12.7405 17.3937 17.5118 18.842 19.7814 19.3755C22.5667 20.0107 24.6042 20.6713 24.6042 22.3736C24.6042 23.7456 23.2889 24.9144 21.1998 24.6349C17.8986 24.1267 12.07 20.4426 7.86612 20.4426C4.17807 20.4426 1.49585 22.0433 0 25.016L4.1007 27.074C4.61651 26.0323 5.44181 24.9906 7.35031 24.9906C11.7089 24.9906 15.9128 28.9542 21.174 29.1575Z", fill: "#292929" }, void 0)] }), void 0));
|
|
2652
2652
|
};
|
|
2653
2653
|
|
|
2654
|
+
var McAfee = function (_a) {
|
|
2655
|
+
var height = _a.height, width = _a.width;
|
|
2656
|
+
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 121, viewBoxY: 60, title: "McAfee" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18.2355 14.8201C22.8916 16.9796 27.5054 19.0967 32.0768 21.2562C32.0345 23.331 32.0345 25.4482 32.0768 27.523C29.3678 26.295 26.6588 24.9824 23.9498 23.7121C23.9921 28.0311 23.9498 32.3924 23.9498 36.7114C26.6588 37.9817 29.3678 39.2096 32.0768 40.5223C32.0345 42.5971 31.9921 44.7142 32.1191 46.789C27.5054 44.6719 22.8916 42.47 18.2355 40.3529C18.2355 31.8419 18.2779 23.331 18.2355 14.8201Z", fill: "#C01717" }, void 0), jsxRuntime.jsx("path", { d: "M45.8757 14.8201H45.9604C45.9604 23.331 46.0027 31.8843 45.9604 40.3952C41.3466 42.5124 36.7328 44.6719 32.1614 46.789C32.0768 44.7142 32.0768 42.5971 32.1191 40.5223C34.8281 39.252 37.5794 37.9817 40.2884 36.7114C40.2884 32.3924 40.2884 28.0311 40.2884 23.7121C37.5794 24.9824 34.8704 26.295 32.1191 27.4806C32.0768 25.4058 32.0768 23.2887 32.1191 21.2139C36.6905 19.0967 41.3043 17.0219 45.8757 14.8201Z", fill: "#75150D" }, void 0), jsxRuntime.jsx("path", { d: "M50.1932 16.8518C51.844 18.0798 53.4524 19.3077 55.1032 20.5356C56.754 19.3077 58.3625 18.0374 60.0133 16.8518C60.0133 20.6627 60.0133 24.4312 60.0133 28.2421C59.1667 28.2421 58.3625 28.2421 57.5159 28.2421C57.5159 26.0826 57.5159 23.9231 57.5159 21.7636C56.7117 22.3564 55.9075 22.9492 55.1032 23.542C54.299 22.9492 53.4948 22.3564 52.6905 21.7636C52.6905 23.9231 52.6905 26.0826 52.6905 28.2421C51.844 28.2421 51.0397 28.2421 50.1932 28.2421C50.1932 24.4312 50.1932 20.6203 50.1932 16.8518Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M72.7963 16.8942C73.5582 16.8942 74.3625 16.8942 75.1244 16.8942C76.6905 20.6627 78.2566 24.4312 79.8228 28.1997C78.9339 28.1997 78.0873 28.1997 77.1984 28.1997C76.9445 27.5646 76.6905 26.9295 76.4365 26.252C75.1244 26.252 73.8545 26.252 72.5424 26.252C72.2884 26.8871 72.0344 27.5223 71.7805 28.1574C70.8916 28.1574 70.045 28.1574 69.1561 28.1574C70.5953 24.897 72.0344 21.6366 73.4736 18.3338C73.2196 17.9104 73.008 17.4023 72.7963 16.8942ZM74.4471 21.3825C74.1085 22.2717 73.7275 23.1186 73.3889 24.0078C74.1085 24.0078 74.7857 24.0078 75.5053 24.0078C75.1667 23.1186 74.8281 22.2717 74.4471 21.3825Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M82.9127 17.1058C83.8863 16.8094 84.9445 16.8941 85.8334 17.2752C85.5371 17.995 85.1984 18.6725 84.9022 19.35C84.4789 19.1807 83.9286 18.9689 83.5053 19.2653C82.9974 19.6888 83.209 20.4086 83.1667 21.0014C83.6746 21.0014 84.1826 21.0014 84.6482 21.0014C84.6482 21.7212 84.6482 22.4411 84.6482 23.1609C84.1402 23.1609 83.6746 23.1609 83.1667 23.1609C83.1667 24.8546 83.1667 26.5483 83.1667 28.2421C82.4048 28.2421 81.6429 28.2421 80.881 28.2421C80.881 26.5483 80.881 24.8546 80.881 23.1609C80.5424 23.1609 80.2037 23.1609 79.8651 23.1609C79.8651 22.4411 79.8651 21.7212 79.8651 21.0437C80.2037 21.0437 80.5424 21.0437 80.881 21.0437C80.881 20.3239 80.8387 19.5194 81.135 18.8419C81.4313 17.9951 82.1085 17.3599 82.9127 17.1058Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M63.5265 20.0282C64.7117 19.5625 66.1085 19.5201 67.2937 20.0706C68.098 20.4517 68.6906 21.1292 69.1985 21.849C68.5636 22.2301 67.9286 22.6112 67.2937 22.9923C66.9128 22.3148 66.2355 21.722 65.4313 21.7643C64.2461 21.6796 63.1456 22.7805 63.2302 23.9661C63.1879 25.1517 64.2461 26.168 65.4313 26.1256C66.2355 26.168 66.9128 25.5752 67.2937 24.8977C67.9286 25.2788 68.5636 25.6599 69.1985 26.041C68.7329 26.8031 68.098 27.4383 67.3361 27.777C65.7699 28.5392 63.7382 28.3275 62.426 27.1419C61.3678 26.2103 60.8175 24.686 61.0292 23.2887C61.2408 21.849 62.2144 20.5787 63.5265 20.0282Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M86.2567 21.3831C87.6112 19.5624 90.4895 19.1813 92.2673 20.5786C93.6218 21.5102 94.1297 23.2462 94.0027 24.8129C91.9287 24.8129 89.8123 24.8129 87.7382 24.8129C88.0768 25.7868 89.1773 26.4219 90.1932 26.2102C90.7011 26.1255 91.0821 25.8291 91.4631 25.4904C92.098 25.8291 92.7329 26.1679 93.3255 26.5066C92.6482 27.2265 91.844 27.8193 90.9128 28.0733C89.2197 28.5391 87.2303 27.9463 86.172 26.5066C85.0715 25.0246 85.1139 22.8228 86.2567 21.3831ZM87.8228 22.9075C89.0504 22.9075 90.2355 22.9075 91.4631 22.9075C91.1244 22.23 90.4895 21.6795 89.6853 21.7219C88.881 21.6372 88.1191 22.1876 87.8228 22.9075Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M95.3996 21.7219C96.5002 19.9435 98.9975 19.2237 100.86 20.1552C101.918 20.6634 102.807 21.5949 103.146 22.7382C103.357 23.4157 103.4 24.1355 103.4 24.8553C101.326 24.8553 99.2092 24.8553 97.1351 24.8553C97.4737 25.7869 98.4472 26.422 99.4631 26.2526C100.013 26.2103 100.479 25.8716 100.86 25.5328C101.495 25.8716 102.087 26.2103 102.722 26.549C101.96 27.4382 100.902 28.0734 99.7171 28.2428C98.2779 28.4121 96.7118 27.904 95.7806 26.7608C94.5531 25.3634 94.4261 23.2039 95.3996 21.7219ZM97.1774 22.9075C98.4049 22.9075 99.5901 22.9075 100.818 22.9075C100.479 22.1877 99.7171 21.6373 98.8705 21.6796C98.1086 21.7219 97.4737 22.2301 97.1774 22.9075Z", fill: "#B91E23" }, void 0), jsxRuntime.jsx("path", { d: "M55.6958 32.5617C54.8916 32.2653 54.4683 32.1383 53.6641 32.1383C52.7752 32.1383 51.8016 32.4347 51.8016 33.5356C51.8016 35.5681 56.4577 35.06 56.4577 38.5321C56.4577 40.7763 54.68 41.6231 52.5212 41.6231C51.7593 41.6231 51.0397 41.4114 50.3202 41.1997L50.4895 39.8024C50.9974 40.0141 51.9286 40.3105 52.7329 40.3105C53.6218 40.3105 54.8493 39.8447 54.8493 38.6168C54.8493 36.2879 50.1932 36.9231 50.1932 33.6627C50.1932 31.8419 51.717 30.8257 53.6641 30.8257C54.3837 30.8257 55.2302 30.9527 55.9921 31.2068L55.6958 32.5617Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M58.5741 30.9949H64.627V32.3075H60.0979V35.3562H64.2037V36.6688H60.0979V40.141H64.627V41.4536H58.5741V30.9949Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M73.9392 32.6887C73.2196 32.3077 72.5001 32.1383 71.6958 32.1383C69.1985 32.1383 67.5477 33.8743 67.5477 36.2032C67.5477 38.6591 69.3678 40.2681 71.6112 40.2681C72.4154 40.2681 73.389 40.0988 73.9815 39.76L74.0662 41.1997C73.2196 41.5384 72.2461 41.5808 71.6112 41.5808C68.1826 41.5808 65.9392 39.4213 65.9392 36.1185C65.9392 32.8581 68.3519 30.741 71.6112 30.741C72.4577 30.741 73.262 30.868 74.0239 31.1644L73.9392 32.6887Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M83.7171 37.1346C83.7171 40.0563 82.1933 41.6653 79.5266 41.6653C76.8599 41.6653 75.3361 40.0986 75.3361 37.1346V30.9949H76.8599V36.9652C76.8599 38.9977 77.5372 40.3527 79.4843 40.3527C81.516 40.3527 82.1086 38.9977 82.1086 36.9652V30.9949H83.6324V37.1346H83.7171Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M86.172 30.9949H88.7963C90.9551 30.9949 92.9868 31.3336 92.9868 33.8319C92.9868 35.1021 92.0133 36.0337 90.7434 36.2031V36.2454C91.209 36.4148 91.463 36.6265 91.8016 37.304L93.8757 41.4536H92.1403L90.4895 37.8121C90.0239 36.7959 89.4736 36.7959 88.7117 36.7959H87.7805V41.4536H86.2567V30.9949H86.172ZM87.6958 35.5256H89.008C90.4895 35.5256 91.336 34.9328 91.336 33.9165C91.336 32.9427 90.5741 32.3922 89.1773 32.3922H87.6958V35.5256Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M95.6535 30.9949H101.664V32.3075H97.135V35.3562H101.241V36.6688H97.135V40.141H101.664V41.4536H95.6111V30.9949H95.6535Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M104.034 33.1115V31.4607H103.442V31.1221H105.008V31.4607H104.415V33.1115H104.034Z", fill: "#66676A" }, void 0), jsxRuntime.jsx("path", { d: "M105.262 33.1114V31.1643H105.854L106.193 32.5188L106.532 31.1643H107.124V33.1114H106.743V31.5453L106.362 33.1114H105.981L105.601 31.5453V33.1114H105.262Z", fill: "#66676A" }, void 0)] }, void 0) }), void 0));
|
|
2657
|
+
};
|
|
2658
|
+
|
|
2654
2659
|
var Other = /*#__PURE__*/Object.freeze({
|
|
2655
2660
|
__proto__: null,
|
|
2656
2661
|
FitPredictor: FitPredictor$1,
|
|
2657
2662
|
Loading: Loading,
|
|
2658
|
-
Shapermint: Shapermint
|
|
2663
|
+
Shapermint: Shapermint,
|
|
2664
|
+
McAfee: McAfee
|
|
2659
2665
|
});
|
|
2660
2666
|
|
|
2661
2667
|
var ChevronDown = function (_a) {
|
|
@@ -3526,7 +3532,7 @@ exports.InputValidationType = void 0;
|
|
|
3526
3532
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3527
3533
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3528
3534
|
|
|
3529
|
-
var Section = newStyled.div(templateObject_1$
|
|
3535
|
+
var Section = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
3530
3536
|
return props.type === exports.CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
|
|
3531
3537
|
});
|
|
3532
3538
|
var CardHeader = function (_a) {
|
|
@@ -3537,16 +3543,16 @@ var CardFooter = function (_a) {
|
|
|
3537
3543
|
var children = _a.children;
|
|
3538
3544
|
return (jsxRuntime.jsx(Section, __assign({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3539
3545
|
};
|
|
3540
|
-
var templateObject_1$
|
|
3546
|
+
var templateObject_1$O;
|
|
3541
3547
|
|
|
3542
|
-
var Body = newStyled.div(templateObject_1$
|
|
3548
|
+
var Body = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
3543
3549
|
var CardBody = function (_a) {
|
|
3544
3550
|
var children = _a.children;
|
|
3545
3551
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3546
3552
|
};
|
|
3547
|
-
var templateObject_1$
|
|
3553
|
+
var templateObject_1$N;
|
|
3548
3554
|
|
|
3549
|
-
var Container$
|
|
3555
|
+
var Container$u = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n"])), function (_a) {
|
|
3550
3556
|
var flex = _a.flex;
|
|
3551
3557
|
return flex &&
|
|
3552
3558
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3558,14 +3564,14 @@ var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
3558
3564
|
});
|
|
3559
3565
|
var Card = function (_a) {
|
|
3560
3566
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
3561
|
-
return (jsxRuntime.jsx(Container$
|
|
3567
|
+
return (jsxRuntime.jsx(Container$u, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
|
|
3562
3568
|
};
|
|
3563
3569
|
var Card$1 = Object.assign(Card, {
|
|
3564
3570
|
Header: CardHeader,
|
|
3565
3571
|
Footer: CardFooter,
|
|
3566
3572
|
Body: CardBody,
|
|
3567
3573
|
});
|
|
3568
|
-
var templateObject_1$
|
|
3574
|
+
var templateObject_1$M;
|
|
3569
3575
|
|
|
3570
3576
|
function jsx(type, props, key) {
|
|
3571
3577
|
if (!hasOwnProperty$1.call(props, 'css')) {
|
|
@@ -3595,41 +3601,38 @@ var BaseButton = function (_a) {
|
|
|
3595
3601
|
} }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
3596
3602
|
};
|
|
3597
3603
|
|
|
3598
|
-
var getStylesBySize$d = function (size) {
|
|
3604
|
+
var getStylesBySize$d = function (size, theme) {
|
|
3599
3605
|
switch (size) {
|
|
3600
3606
|
case exports.ComponentSize.Large:
|
|
3601
3607
|
return {
|
|
3602
|
-
|
|
3603
|
-
|
|
3608
|
+
fontSize: theme.component.button.size.large.fontSize,
|
|
3609
|
+
padding: theme.component.button.size.large.padding,
|
|
3604
3610
|
};
|
|
3605
3611
|
case exports.ComponentSize.Medium:
|
|
3606
3612
|
return {
|
|
3607
|
-
|
|
3608
|
-
|
|
3613
|
+
fontSize: theme.component.button.size.medium.fontSize,
|
|
3614
|
+
padding: theme.component.button.size.medium.padding,
|
|
3609
3615
|
};
|
|
3610
3616
|
case exports.ComponentSize.Small:
|
|
3611
3617
|
return {
|
|
3612
|
-
|
|
3613
|
-
|
|
3618
|
+
fontSize: theme.component.button.size.small.fontSize,
|
|
3619
|
+
padding: theme.component.button.size.small.padding,
|
|
3614
3620
|
};
|
|
3615
3621
|
default:
|
|
3616
3622
|
return {
|
|
3617
|
-
|
|
3618
|
-
|
|
3623
|
+
fontSize: theme.component.button.size.small.fontSize,
|
|
3624
|
+
padding: theme.component.button.size.small.padding,
|
|
3619
3625
|
};
|
|
3620
3626
|
}
|
|
3621
3627
|
};
|
|
3622
3628
|
var BaseCTA = function (_a) {
|
|
3623
3629
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d, type = _a.type, className = _a.className;
|
|
3624
3630
|
var theme = useTheme();
|
|
3625
|
-
var stylesBySize = getStylesBySize$d(size);
|
|
3626
|
-
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight:
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
backgroundColor: theme.shades.gray050,
|
|
3631
|
-
color: theme.shades.gray250,
|
|
3632
|
-
cursor: 'default',
|
|
3631
|
+
var stylesBySize = getStylesBySize$d(size, theme);
|
|
3632
|
+
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "" + theme.component.button.borderRadius, cursor: 'pointer', '&:disabled': {
|
|
3633
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3634
|
+
color: theme.colors.text.disabled,
|
|
3635
|
+
cursor: 'not-allowed',
|
|
3633
3636
|
} }) }, { children: text }), void 0));
|
|
3634
3637
|
};
|
|
3635
3638
|
|
|
@@ -3637,16 +3640,16 @@ var ButtonPrimary = function (_a) {
|
|
|
3637
3640
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
|
|
3638
3641
|
var theme = useTheme();
|
|
3639
3642
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
|
|
3640
|
-
backgroundColor: theme.
|
|
3641
|
-
color: theme.
|
|
3642
|
-
border:
|
|
3643
|
+
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
3644
|
+
color: theme.component.button.primary.active.color,
|
|
3645
|
+
border: theme.component.button.border,
|
|
3643
3646
|
'&:hover': {
|
|
3644
|
-
backgroundColor: theme.
|
|
3645
|
-
color: theme.
|
|
3647
|
+
backgroundColor: theme.component.button.primary.hover.backgroundColor,
|
|
3648
|
+
color: theme.component.button.primary.hover.color,
|
|
3646
3649
|
},
|
|
3647
3650
|
'&:disabled': {
|
|
3648
|
-
backgroundColor: theme.
|
|
3649
|
-
color: theme.
|
|
3651
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3652
|
+
color: theme.colors.text.disabled,
|
|
3650
3653
|
},
|
|
3651
3654
|
}, text: text }, void 0));
|
|
3652
3655
|
};
|
|
@@ -3655,15 +3658,15 @@ var ButtonSecondary = function (_a) {
|
|
|
3655
3658
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
|
|
3656
3659
|
var theme = useTheme();
|
|
3657
3660
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
|
|
3658
|
-
backgroundColor: theme.
|
|
3659
|
-
color: theme.
|
|
3660
|
-
border:
|
|
3661
|
+
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3662
|
+
color: theme.component.button.secondary.active.color,
|
|
3663
|
+
border: theme.component.button.border,
|
|
3661
3664
|
'&:hover': {
|
|
3662
|
-
backgroundColor: theme.
|
|
3665
|
+
backgroundColor: theme.component.button.secondary.hover.backgroundColor,
|
|
3663
3666
|
},
|
|
3664
3667
|
'&:disabled': {
|
|
3665
|
-
backgroundColor: theme.
|
|
3666
|
-
color: theme.
|
|
3668
|
+
backgroundColor: theme.colors.neutral50,
|
|
3669
|
+
color: theme.colors.neutral250,
|
|
3667
3670
|
},
|
|
3668
3671
|
}, text: text }, void 0));
|
|
3669
3672
|
};
|
|
@@ -3672,15 +3675,17 @@ var ButtonSecondaryOutline = function (_a) {
|
|
|
3672
3675
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
|
|
3673
3676
|
var theme = useTheme();
|
|
3674
3677
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, className: className, css: {
|
|
3675
|
-
backgroundColor: theme.
|
|
3676
|
-
color: theme.
|
|
3677
|
-
border: "1px solid " + theme.
|
|
3678
|
+
backgroundColor: theme.component.button.secondary.active.color,
|
|
3679
|
+
color: theme.component.button.secondary.active.backgroundColor,
|
|
3680
|
+
border: "1px solid " + theme.component.button.secondary.active.backgroundColor,
|
|
3678
3681
|
'&:hover': {
|
|
3679
|
-
backgroundColor: theme.
|
|
3682
|
+
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3683
|
+
color: theme.component.button.secondary.active.color,
|
|
3680
3684
|
},
|
|
3681
3685
|
'&:disabled': {
|
|
3682
|
-
backgroundColor: theme.
|
|
3683
|
-
|
|
3686
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3687
|
+
color: theme.colors.text.disabled,
|
|
3688
|
+
border: 'none',
|
|
3684
3689
|
},
|
|
3685
3690
|
}, text: text }, void 0));
|
|
3686
3691
|
};
|
|
@@ -6006,7 +6011,7 @@ function BaseSelectOption(_a) {
|
|
|
6006
6011
|
return (jsxRuntime.jsx(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
6007
6012
|
}
|
|
6008
6013
|
|
|
6009
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
6014
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
6010
6015
|
function BaseSelect(_a) {
|
|
6011
6016
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
6012
6017
|
return (jsxRuntime.jsx(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -6016,35 +6021,35 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
6016
6021
|
Options: BaseSelectOptions,
|
|
6017
6022
|
Option: BaseSelectOption,
|
|
6018
6023
|
});
|
|
6019
|
-
var templateObject_1$
|
|
6024
|
+
var templateObject_1$L;
|
|
6020
6025
|
|
|
6021
6026
|
var CustomButton = newStyled.button(function (_a) {
|
|
6022
6027
|
var theme = _a.theme, wide = _a.wide;
|
|
6023
6028
|
return ({
|
|
6024
|
-
border: "0.063rem solid " + theme.
|
|
6029
|
+
border: "0.063rem solid " + theme.colors.neutral200,
|
|
6025
6030
|
boxSizing: 'border-box',
|
|
6026
6031
|
borderRadius: '0.5rem',
|
|
6027
6032
|
display: 'flex',
|
|
6028
6033
|
flexDirection: 'row',
|
|
6029
6034
|
alignItems: 'center',
|
|
6030
|
-
background: theme.
|
|
6035
|
+
background: theme.colors.white,
|
|
6031
6036
|
cursor: 'pointer',
|
|
6032
6037
|
fontWeight: 600,
|
|
6033
6038
|
padding: '0.5rem 0.75rem 0.5rem 1rem',
|
|
6034
|
-
color: theme.
|
|
6035
|
-
fill: theme.
|
|
6039
|
+
color: theme.colors.neutral700,
|
|
6040
|
+
fill: theme.colors.neutral700,
|
|
6036
6041
|
width: wide ? '100%' : 'auto',
|
|
6037
6042
|
justifyContent: wide ? 'space-between' : 'center',
|
|
6038
6043
|
svg: {
|
|
6039
6044
|
marginLeft: '0.75rem',
|
|
6040
6045
|
},
|
|
6041
6046
|
'&:disabled': {
|
|
6042
|
-
borderColor: theme.
|
|
6043
|
-
color: theme.
|
|
6047
|
+
borderColor: theme.colors.neutral200,
|
|
6048
|
+
color: theme.colors.neutral250,
|
|
6044
6049
|
cursor: 'not-allowed',
|
|
6045
6050
|
'*': {
|
|
6046
|
-
color: theme.
|
|
6047
|
-
fill: theme.
|
|
6051
|
+
color: theme.colors.neutral250,
|
|
6052
|
+
fill: theme.colors.neutral250,
|
|
6048
6053
|
cursor: 'not-allowed',
|
|
6049
6054
|
},
|
|
6050
6055
|
},
|
|
@@ -6075,15 +6080,15 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
|
6075
6080
|
display: 'flex',
|
|
6076
6081
|
flexDirection: 'column',
|
|
6077
6082
|
alignItems: 'flex-start',
|
|
6078
|
-
border: "0.063rem solid " + theme.
|
|
6083
|
+
border: "0.063rem solid " + theme.colors.neutral550,
|
|
6079
6084
|
boxSizing: 'border-box',
|
|
6080
6085
|
borderRadius: '0.5rem',
|
|
6081
|
-
background: theme.
|
|
6086
|
+
background: theme.colors.white,
|
|
6082
6087
|
padding: 0,
|
|
6083
6088
|
marginTop: '0.125rem',
|
|
6084
6089
|
position: 'absolute',
|
|
6085
6090
|
width: '100%',
|
|
6086
|
-
color: theme.
|
|
6091
|
+
color: theme.colors.neutral700,
|
|
6087
6092
|
});
|
|
6088
6093
|
});
|
|
6089
6094
|
var BaseDropdownOptions = function (_a) {
|
|
@@ -6107,7 +6112,7 @@ var CustomOption = newStyled.li(function (_a) {
|
|
|
6107
6112
|
width: '100%',
|
|
6108
6113
|
boxSizing: 'border-box',
|
|
6109
6114
|
fontWeight: selected ? 600 : 'inherit',
|
|
6110
|
-
backgroundColor: active ? theme.
|
|
6115
|
+
backgroundColor: active ? theme.colors.neutral10 : 'inherit',
|
|
6111
6116
|
});
|
|
6112
6117
|
});
|
|
6113
6118
|
function BaseDropdownOption(_a) {
|
|
@@ -6127,7 +6132,7 @@ function BaseDropdown(_a) {
|
|
|
6127
6132
|
position: 'relative',
|
|
6128
6133
|
fontSize: '0.88rem',
|
|
6129
6134
|
lineHeight: '1.125rem',
|
|
6130
|
-
color: theme.
|
|
6135
|
+
color: theme.colors.neutral700,
|
|
6131
6136
|
}, disabled: disabled }, { children: children }), void 0));
|
|
6132
6137
|
}
|
|
6133
6138
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
@@ -6174,7 +6179,7 @@ var SimpleSelector = function (_a) {
|
|
|
6174
6179
|
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: '0.75rem', cursor: 'pointer', '&:hover': {
|
|
6175
6180
|
fontWeight: 600,
|
|
6176
6181
|
}, '&:disabled': {
|
|
6177
|
-
color: theme.
|
|
6182
|
+
color: theme.colors.neutral250,
|
|
6178
6183
|
cursor: 'not-allowed',
|
|
6179
6184
|
} }) }, { children: text }), void 0));
|
|
6180
6185
|
};
|
|
@@ -6183,20 +6188,20 @@ var SelectorSecondary = function (_a) {
|
|
|
6183
6188
|
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6184
6189
|
var theme = useTheme();
|
|
6185
6190
|
var stylesByActive = active
|
|
6186
|
-
? { background: theme.
|
|
6187
|
-
: { background: theme.
|
|
6188
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { fontWeight: 600, whiteSpace: 'nowrap', border: "0.063rem solid " + theme.
|
|
6189
|
-
background: theme.
|
|
6190
|
-
color: theme.
|
|
6191
|
+
? { background: theme.colors.secondary, color: theme.colors.white }
|
|
6192
|
+
: { background: theme.colors.white, color: theme.colors.secondary };
|
|
6193
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { fontWeight: 600, whiteSpace: 'nowrap', border: "0.063rem solid " + theme.colors.secondary, '&:hover': {
|
|
6194
|
+
background: theme.colors.secondary,
|
|
6195
|
+
color: theme.colors.white,
|
|
6191
6196
|
}, '&:disabled': {
|
|
6192
6197
|
border: 'inherit',
|
|
6193
|
-
background: theme.
|
|
6194
|
-
color: theme.
|
|
6198
|
+
background: theme.colors.neutral50,
|
|
6199
|
+
color: theme.colors.neutral250,
|
|
6195
6200
|
} }) }, void 0));
|
|
6196
6201
|
};
|
|
6197
6202
|
|
|
6198
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
6199
|
-
var SizeParagraph = newStyled.p(templateObject_2$
|
|
6203
|
+
var ButtonsContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
|
|
6204
|
+
var SizeParagraph = newStyled.p(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0 0 0.63rem 0;\n font-size: 0.88rem;\n"], ["\n margin: 0 0 0.63rem 0;\n font-size: 0.88rem;\n"])));
|
|
6200
6205
|
var getInitialValue$2 = function (options, selectedValue) {
|
|
6201
6206
|
if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
|
|
6202
6207
|
return selectedValue;
|
|
@@ -6221,7 +6226,7 @@ var SizeSelector = function (_a) {
|
|
|
6221
6226
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
|
|
6222
6227
|
}) }, void 0)] }, void 0));
|
|
6223
6228
|
};
|
|
6224
|
-
var templateObject_1$
|
|
6229
|
+
var templateObject_1$K, templateObject_2$x;
|
|
6225
6230
|
|
|
6226
6231
|
var getStylesBySize$b = function (size) {
|
|
6227
6232
|
switch (size) {
|
|
@@ -6242,23 +6247,23 @@ var getStylesBySize$b = function (size) {
|
|
|
6242
6247
|
};
|
|
6243
6248
|
var textButtonStyles$1 = function (theme, size) {
|
|
6244
6249
|
var stylesBySize = getStylesBySize$b(size);
|
|
6245
|
-
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.
|
|
6250
|
+
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.neutral550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
|
|
6246
6251
|
textDecorationLine: 'underline',
|
|
6247
6252
|
}, '&:disabled': {
|
|
6248
|
-
color: theme.
|
|
6253
|
+
color: theme.colors.neutral250,
|
|
6249
6254
|
textDecorationLine: 'none',
|
|
6250
6255
|
} });
|
|
6251
6256
|
};
|
|
6252
6257
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6253
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6258
|
+
return Icon && (jsx("span", __assign({ css: css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
6254
6259
|
};
|
|
6255
6260
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6256
6261
|
if (disabled)
|
|
6257
|
-
return theme.
|
|
6262
|
+
return theme.colors.neutral250;
|
|
6258
6263
|
else if (iconColor)
|
|
6259
6264
|
return iconColor;
|
|
6260
6265
|
else
|
|
6261
|
-
return theme.
|
|
6266
|
+
return theme.colors.neutral550;
|
|
6262
6267
|
};
|
|
6263
6268
|
var TextButton = function (_a) {
|
|
6264
6269
|
var text = _a.text, LeadingIcon = _a.LeadingIcon, TrailingIcon = _a.TrailingIcon, iconColor = _a.iconColor, disabled = _a.disabled, type = _a.type, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
@@ -6266,16 +6271,16 @@ var TextButton = function (_a) {
|
|
|
6266
6271
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6267
6272
|
return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
|
|
6268
6273
|
};
|
|
6269
|
-
var templateObject_1$
|
|
6274
|
+
var templateObject_1$J;
|
|
6270
6275
|
|
|
6271
|
-
var Container$
|
|
6272
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6276
|
+
var Container$t = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
6277
|
+
var P$2 = newStyled.p(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6273
6278
|
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6274
6279
|
var SizeFitGuide = function (_a) {
|
|
6275
6280
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6276
|
-
return (jsxRuntime.jsxs(Container$
|
|
6281
|
+
return (jsxRuntime.jsxs(Container$t, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$2, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6277
6282
|
};
|
|
6278
|
-
var templateObject_1$
|
|
6283
|
+
var templateObject_1$I, templateObject_2$w, templateObject_3$j;
|
|
6279
6284
|
|
|
6280
6285
|
var getStylesBySize$a = function (size) {
|
|
6281
6286
|
switch (size) {
|
|
@@ -6305,7 +6310,7 @@ var getStylesBySize$a = function (size) {
|
|
|
6305
6310
|
};
|
|
6306
6311
|
}
|
|
6307
6312
|
};
|
|
6308
|
-
var Container$
|
|
6313
|
+
var Container$s = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
6309
6314
|
var backgroundColor = _a.backgroundColor;
|
|
6310
6315
|
return backgroundColor;
|
|
6311
6316
|
}, function (_a) {
|
|
@@ -6327,7 +6332,7 @@ var Container$r = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
6327
6332
|
var size = _a.size;
|
|
6328
6333
|
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6329
6334
|
});
|
|
6330
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6335
|
+
var H3$2 = newStyled.h3(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
6331
6336
|
var textColor = _a.textColor;
|
|
6332
6337
|
return textColor;
|
|
6333
6338
|
}, function (_a) {
|
|
@@ -6342,9 +6347,9 @@ var H3$2 = newStyled.h3(templateObject_2$t || (templateObject_2$t = __makeTempla
|
|
|
6342
6347
|
var DiscountTag = function (_a) {
|
|
6343
6348
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6344
6349
|
var theme = useTheme();
|
|
6345
|
-
return (jsxRuntime.jsx(Container$
|
|
6350
|
+
return (jsxRuntime.jsx(Container$s, __assign({ backgroundColor: disabled ? theme.colors.neutral50 : backgroundColor, borderColor: disabled ? theme.colors.neutral50 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.neutral250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6346
6351
|
};
|
|
6347
|
-
var templateObject_1$
|
|
6352
|
+
var templateObject_1$H, templateObject_2$v;
|
|
6348
6353
|
|
|
6349
6354
|
var getStylesBySize$9 = function (size) {
|
|
6350
6355
|
switch (size) {
|
|
@@ -6368,8 +6373,8 @@ var getStylesBySize$9 = function (size) {
|
|
|
6368
6373
|
};
|
|
6369
6374
|
}
|
|
6370
6375
|
};
|
|
6371
|
-
var Container$
|
|
6372
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6376
|
+
var Container$r = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6377
|
+
var Price = newStyled.h1(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6373
6378
|
var weight = _a.weight;
|
|
6374
6379
|
return (weight ? weight : '400');
|
|
6375
6380
|
}, function (_a) {
|
|
@@ -6399,28 +6404,28 @@ var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __ma
|
|
|
6399
6404
|
var PriceLabel = function (_a) {
|
|
6400
6405
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6401
6406
|
var theme = useTheme();
|
|
6402
|
-
return (jsxRuntime.jsxs(Container$
|
|
6407
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.secondary, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.neutral400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6403
6408
|
};
|
|
6404
|
-
var templateObject_1$
|
|
6409
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$i;
|
|
6405
6410
|
|
|
6406
6411
|
var OneColorSelector = function (_a) {
|
|
6407
6412
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6408
6413
|
var theme = useTheme();
|
|
6409
|
-
var outerBorder = selected ? theme.
|
|
6414
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6410
6415
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6411
6416
|
};
|
|
6412
6417
|
|
|
6413
6418
|
var ThreeColorSelector = function (_a) {
|
|
6414
6419
|
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6415
6420
|
var theme = useTheme();
|
|
6416
|
-
var outerBorder = selected ? theme.
|
|
6421
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6417
6422
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsxRuntime.jsx("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6418
6423
|
};
|
|
6419
6424
|
|
|
6420
6425
|
var TwoColorSelector = function (_a) {
|
|
6421
6426
|
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6422
6427
|
var theme = useTheme();
|
|
6423
|
-
var outerBorder = selected ? theme.
|
|
6428
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6424
6429
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsxRuntime.jsx("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign({ mask: "url(#mask0)" }, { children: [jsxRuntime.jsx("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsxRuntime.jsx("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6425
6430
|
};
|
|
6426
6431
|
|
|
@@ -6437,11 +6442,11 @@ var ColorSelector = function (_a) {
|
|
|
6437
6442
|
var OutOfStock = function (_a) {
|
|
6438
6443
|
var title = _a.title;
|
|
6439
6444
|
var theme = useTheme();
|
|
6440
|
-
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.
|
|
6445
|
+
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.neutral300 }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.neutral300, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6441
6446
|
};
|
|
6442
6447
|
|
|
6443
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6444
|
-
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$
|
|
6448
|
+
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6449
|
+
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6445
6450
|
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6446
6451
|
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6447
6452
|
var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n"])));
|
|
@@ -6462,20 +6467,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6462
6467
|
Option: Option,
|
|
6463
6468
|
OptionsContainer: OptionsContainer,
|
|
6464
6469
|
});
|
|
6465
|
-
var templateObject_1$
|
|
6470
|
+
var templateObject_1$F, templateObject_2$t, templateObject_3$h, templateObject_4$d, templateObject_5$7;
|
|
6466
6471
|
|
|
6467
|
-
var Container$
|
|
6472
|
+
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
6468
6473
|
var borderColor = _a.borderColor;
|
|
6469
6474
|
return borderColor;
|
|
6470
6475
|
});
|
|
6471
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
6476
|
+
var Image$3 = newStyled.img(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6472
6477
|
var PatternSelector = function (_a) {
|
|
6473
6478
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6474
6479
|
var theme = useTheme();
|
|
6475
|
-
var outerBorder = selected ? theme.
|
|
6476
|
-
return (jsxRuntime.jsx(Container$
|
|
6480
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'transparent';
|
|
6481
|
+
return (jsxRuntime.jsx(Container$q, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6477
6482
|
};
|
|
6478
|
-
var templateObject_1$
|
|
6483
|
+
var templateObject_1$E, templateObject_2$s;
|
|
6479
6484
|
|
|
6480
6485
|
var renderOptions$1 = function (options) {
|
|
6481
6486
|
if (options.length)
|
|
@@ -6541,38 +6546,38 @@ var MultiColorPicker = function (_a) {
|
|
|
6541
6546
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6542
6547
|
};
|
|
6543
6548
|
|
|
6544
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
6549
|
+
var Image$2 = newStyled.img(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
6545
6550
|
var selected = _a.selected, theme = _a.theme;
|
|
6546
|
-
return selected ? "0.063rem solid " + theme.
|
|
6551
|
+
return selected ? "0.063rem solid " + theme.colors.neutral700 : 'inherit';
|
|
6547
6552
|
});
|
|
6548
6553
|
var ImageSmallPreview = function (_a) {
|
|
6549
6554
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
|
|
6550
6555
|
var theme = useTheme();
|
|
6551
6556
|
return jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6552
6557
|
};
|
|
6553
|
-
var templateObject_1$
|
|
6558
|
+
var templateObject_1$D;
|
|
6554
6559
|
|
|
6555
|
-
var Container$
|
|
6556
|
-
var Button$3 = newStyled.button(templateObject_2$
|
|
6560
|
+
var Container$p = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding-right: 1.25rem;\n overflow: auto;\n"], ["\n display: flex;\n flex-direction: column;\n padding-right: 1.25rem;\n overflow: auto;\n"])));
|
|
6561
|
+
var Button$3 = newStyled.button(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6557
6562
|
var ImagePreviewList = function (_a) {
|
|
6558
6563
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6559
|
-
return (jsx(Container$
|
|
6564
|
+
return (jsx(Container$p, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6560
6565
|
return (jsx(Button$3, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6561
6566
|
}) }), void 0));
|
|
6562
6567
|
};
|
|
6563
|
-
var templateObject_1$
|
|
6568
|
+
var templateObject_1$C, templateObject_2$r;
|
|
6564
6569
|
|
|
6565
|
-
var Container$
|
|
6566
|
-
var Image$1 = newStyled.img(templateObject_2$
|
|
6570
|
+
var Container$o = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: relative;\n max-height: 45rem;\n max-width: 33.125rem;\n"], ["\n position: relative;\n max-height: 45rem;\n max-width: 33.125rem;\n"])));
|
|
6571
|
+
var Image$1 = newStyled.img(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
6567
6572
|
var TopTagContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6568
6573
|
var BottomTagContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6569
6574
|
var ImageProductWithTags = function (_a) {
|
|
6570
6575
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6571
|
-
return (jsxRuntime.jsxs(Container$
|
|
6576
|
+
return (jsxRuntime.jsxs(Container$o, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6572
6577
|
};
|
|
6573
|
-
var templateObject_1$
|
|
6578
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$g, templateObject_4$c;
|
|
6574
6579
|
|
|
6575
|
-
var Container$
|
|
6580
|
+
var Container$n = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n max-height: 45rem;\n"], ["\n display: flex;\n flex-direction: row;\n width: fit-content;\n max-height: 45rem;\n"])));
|
|
6576
6581
|
var ProductGallery = function (_a) {
|
|
6577
6582
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6578
6583
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6580,11 +6585,11 @@ var ProductGallery = function (_a) {
|
|
|
6580
6585
|
React.useEffect(function () {
|
|
6581
6586
|
setSelectedImage(initialValue);
|
|
6582
6587
|
}, [initialValue]);
|
|
6583
|
-
return (jsxRuntime.jsxs(Container$
|
|
6588
|
+
return (jsxRuntime.jsxs(Container$n, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6584
6589
|
setSelectedImage(value);
|
|
6585
6590
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6586
6591
|
};
|
|
6587
|
-
var templateObject_1$
|
|
6592
|
+
var templateObject_1$A;
|
|
6588
6593
|
|
|
6589
6594
|
var getStylesBySize$8 = function (size) {
|
|
6590
6595
|
switch (size) {
|
|
@@ -6659,34 +6664,34 @@ var Rating = function (_a) {
|
|
|
6659
6664
|
return (jsxs("div", __assign({ css: {
|
|
6660
6665
|
display: 'flex',
|
|
6661
6666
|
alignItems: 'center',
|
|
6662
|
-
} }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.
|
|
6667
|
+
} }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.primary }, void 0), jsxs("h1", __assign({ css: {
|
|
6663
6668
|
margin: '0',
|
|
6664
6669
|
fontStyle: 'normal',
|
|
6665
6670
|
fontWeight: 'normal',
|
|
6666
|
-
color: theme.
|
|
6671
|
+
color: theme.colors.secondary,
|
|
6667
6672
|
fontSize: getStylesBySize$7(size).fontSize,
|
|
6668
6673
|
lineHeight: getStylesBySize$7(size).lineHeight,
|
|
6669
6674
|
marginLeft: getStylesBySize$7(size).marginLeft,
|
|
6670
6675
|
} }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
6671
6676
|
};
|
|
6672
6677
|
|
|
6673
|
-
var Container$
|
|
6674
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6678
|
+
var Container$m = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
6679
|
+
var P$1 = newStyled.p(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.neutral550; });
|
|
6675
6680
|
var textButtonStyles = function (theme) { return ({
|
|
6676
6681
|
border: 'none',
|
|
6677
6682
|
background: 'transparent',
|
|
6678
6683
|
padding: 0,
|
|
6679
6684
|
textDecoration: 'underline',
|
|
6680
|
-
color: theme.
|
|
6685
|
+
color: theme.colors.neutral400,
|
|
6681
6686
|
lineHeight: '1.13rem',
|
|
6682
6687
|
cursor: 'pointer',
|
|
6683
6688
|
}); };
|
|
6684
6689
|
var FitPredictor = function (_a) {
|
|
6685
6690
|
var onClick = _a.onClick;
|
|
6686
6691
|
var theme = useTheme();
|
|
6687
|
-
return (jsxs(Container$
|
|
6692
|
+
return (jsxs(Container$m, __assign({ theme: theme }, { children: [jsx(Container$m, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.neutral550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6688
6693
|
};
|
|
6689
|
-
var templateObject_1$
|
|
6694
|
+
var templateObject_1$z, templateObject_2$p;
|
|
6690
6695
|
|
|
6691
6696
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6692
6697
|
var color = _a.color;
|
|
@@ -6700,7 +6705,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6700
6705
|
margin: '0.938rem 4.188rem',
|
|
6701
6706
|
});
|
|
6702
6707
|
});
|
|
6703
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6708
|
+
var Bar = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
6704
6709
|
var backgroundColor = _a.backgroundColor;
|
|
6705
6710
|
return backgroundColor;
|
|
6706
6711
|
}, function (_a) {
|
|
@@ -6723,7 +6728,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6723
6728
|
position: 'absolute',
|
|
6724
6729
|
});
|
|
6725
6730
|
});
|
|
6726
|
-
var Container$
|
|
6731
|
+
var Container$l = newStyled.div(function (_a) {
|
|
6727
6732
|
var widthAuto = _a.widthAuto;
|
|
6728
6733
|
return ({
|
|
6729
6734
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -6737,9 +6742,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
6737
6742
|
var ProgressBar = function (_a) {
|
|
6738
6743
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
6739
6744
|
var theme = useTheme();
|
|
6740
|
-
return (jsxRuntime.jsxs(Container$
|
|
6745
|
+
return (jsxRuntime.jsxs(Container$l, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.neutral100 }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.secondary }, { children: description }), void 0)] }), void 0));
|
|
6741
6746
|
};
|
|
6742
|
-
var templateObject_1$
|
|
6747
|
+
var templateObject_1$y;
|
|
6743
6748
|
|
|
6744
6749
|
var getStylesBySize$6 = function (size) {
|
|
6745
6750
|
switch (size) {
|
|
@@ -6760,7 +6765,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6760
6765
|
};
|
|
6761
6766
|
}
|
|
6762
6767
|
};
|
|
6763
|
-
var Container$
|
|
6768
|
+
var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
6764
6769
|
var backgroundColor = _a.backgroundColor;
|
|
6765
6770
|
return backgroundColor;
|
|
6766
6771
|
}, function (_a) {
|
|
@@ -6788,9 +6793,9 @@ var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __ma
|
|
|
6788
6793
|
var IconButton = function (_a) {
|
|
6789
6794
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
6790
6795
|
var theme = useTheme();
|
|
6791
|
-
return (jsxRuntime.jsx(Container$
|
|
6796
|
+
return (jsxRuntime.jsx(Container$k, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.neutral50, disabledIconColor: theme.colors.neutral200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
6792
6797
|
};
|
|
6793
|
-
var templateObject_1$
|
|
6798
|
+
var templateObject_1$x;
|
|
6794
6799
|
|
|
6795
6800
|
var TooltipArrow = function (_a) {
|
|
6796
6801
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6870,7 +6875,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6870
6875
|
}
|
|
6871
6876
|
};
|
|
6872
6877
|
|
|
6873
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6878
|
+
var Wrapper$5 = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
6874
6879
|
var position = _a.position;
|
|
6875
6880
|
return getWrapperFlexDirection(position);
|
|
6876
6881
|
});
|
|
@@ -6894,7 +6899,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
6894
6899
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6895
6900
|
return actual === expected ? margin : '0';
|
|
6896
6901
|
};
|
|
6897
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
6902
|
+
var ContentWrapper = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
6898
6903
|
var borderColor = _a.borderColor;
|
|
6899
6904
|
return borderColor;
|
|
6900
6905
|
});
|
|
@@ -6918,7 +6923,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
6918
6923
|
return color;
|
|
6919
6924
|
});
|
|
6920
6925
|
var IconContainer$3 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
6921
|
-
var templateObject_1$
|
|
6926
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
6922
6927
|
|
|
6923
6928
|
var Tooltip = function (_a) {
|
|
6924
6929
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -6935,7 +6940,7 @@ var Tooltip = function (_a) {
|
|
|
6935
6940
|
var ref = tooltipRef.current;
|
|
6936
6941
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6937
6942
|
}, [tooltipRef]);
|
|
6938
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.
|
|
6943
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.neutral200 }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: React__default['default'].createElement(header.Icon, { fill: theme.colors.secondary }) }, void 0), jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.secondary }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign({ color: theme.colors.secondary, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.neutral10 }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
6939
6944
|
};
|
|
6940
6945
|
|
|
6941
6946
|
var AccordionButton = function (_a) {
|
|
@@ -6950,7 +6955,7 @@ var AccordionButton = function (_a) {
|
|
|
6950
6955
|
alignItems: 'center',
|
|
6951
6956
|
fontWeight: 700,
|
|
6952
6957
|
padding: 0,
|
|
6953
|
-
color: disabled ? theme.
|
|
6958
|
+
color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6954
6959
|
}, className: className, as: as }, { children: children }), void 0));
|
|
6955
6960
|
};
|
|
6956
6961
|
|
|
@@ -6976,15 +6981,15 @@ var AccordionControlButton = function (_a) {
|
|
|
6976
6981
|
var theme = useTheme();
|
|
6977
6982
|
var controlIcon = disabled ? openIcon : open ? closeIcon : openIcon;
|
|
6978
6983
|
return (jsxs(Accordion$1.Button, __assign({ css: {
|
|
6979
|
-
color: disabled ? theme.
|
|
6984
|
+
color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6980
6985
|
'svg path': {
|
|
6981
|
-
fill: disabled ? theme.
|
|
6986
|
+
fill: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6982
6987
|
},
|
|
6983
6988
|
}, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
|
|
6984
6989
|
};
|
|
6985
6990
|
|
|
6986
|
-
var Container$
|
|
6987
|
-
border: "1px solid " + props.theme.
|
|
6991
|
+
var Container$j = newStyled(Accordion$1)(function (props) { return ({
|
|
6992
|
+
border: "1px solid " + props.theme.colors.neutral100,
|
|
6988
6993
|
padding: '1.25rem 2rem',
|
|
6989
6994
|
}); });
|
|
6990
6995
|
var Button$2 = newStyled(AccordionControlButton)(function () { return ({
|
|
@@ -7005,15 +7010,15 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
7005
7010
|
var AccordionBox = function (_a) {
|
|
7006
7011
|
var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
7007
7012
|
var theme = useTheme();
|
|
7008
|
-
return (jsxRuntime.jsx(Container$
|
|
7013
|
+
return (jsxRuntime.jsx(Container$j, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7009
7014
|
var open = _a.open;
|
|
7010
7015
|
var showPanel = open && !disabled;
|
|
7011
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.
|
|
7016
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsxRuntime.jsx(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.colors.neutral700 }, void 0) }, { children: title }), void 0), showPanel && jsxRuntime.jsx(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7012
7017
|
} }), void 0));
|
|
7013
7018
|
};
|
|
7014
7019
|
|
|
7015
|
-
var Container$
|
|
7016
|
-
borderTop: "1px solid " + props.theme.
|
|
7020
|
+
var Container$i = newStyled(Accordion$1)(function (props) { return ({
|
|
7021
|
+
borderTop: "1px solid " + props.theme.colors.neutral100,
|
|
7017
7022
|
padding: '0.625rem 0',
|
|
7018
7023
|
}); });
|
|
7019
7024
|
var Button$1 = newStyled(AccordionControlButton)(function () { return ({
|
|
@@ -7029,10 +7034,10 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
7029
7034
|
var AccordionIcon = function (_a) {
|
|
7030
7035
|
var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
7031
7036
|
var theme = useTheme();
|
|
7032
|
-
return (jsxRuntime.jsx(Container$
|
|
7037
|
+
return (jsxRuntime.jsx(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7033
7038
|
var open = _a.open;
|
|
7034
7039
|
var showPanel = open && !disabled;
|
|
7035
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$1, __assign({ open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.
|
|
7040
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$1, __assign({ open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsxRuntime.jsx(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.colors.neutral700 }, void 0), disabled: disabled }, { children: jsxRuntime.jsxs("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsxRuntime.jsx(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7036
7041
|
} }), void 0));
|
|
7037
7042
|
};
|
|
7038
7043
|
|
|
@@ -7091,8 +7096,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
7091
7096
|
};
|
|
7092
7097
|
}
|
|
7093
7098
|
};
|
|
7094
|
-
var Container$
|
|
7095
|
-
var CustomCheckbox = newStyled.div(templateObject_2$
|
|
7099
|
+
var Container$h = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
7100
|
+
var CustomCheckbox = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n border: 0.094rem solid ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n margin-right: ", ";\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ", ";\n height: ", ";\n }\n"], ["\n border: 0.094rem solid ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n margin-right: ", ";\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
7096
7101
|
var color = _a.color;
|
|
7097
7102
|
return color;
|
|
7098
7103
|
}, function (_a) {
|
|
@@ -7152,9 +7157,9 @@ var Checkbox = function (_a) {
|
|
|
7152
7157
|
return !checked;
|
|
7153
7158
|
});
|
|
7154
7159
|
};
|
|
7155
|
-
return (jsxRuntime.jsxs(Container$
|
|
7160
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ disabled: disabled }, { children: [jsxRuntime.jsx(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.colors.neutral250 : theme.colors.neutral700, "data-testid": "checkbox" }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.colors.neutral250 : theme.colors.neutral700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
|
|
7156
7161
|
};
|
|
7157
|
-
var templateObject_1$
|
|
7162
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$e, templateObject_4$a;
|
|
7158
7163
|
|
|
7159
7164
|
var getStylesBySize$4 = function (size) {
|
|
7160
7165
|
switch (size) {
|
|
@@ -7199,8 +7204,8 @@ var getStylesBySize$4 = function (size) {
|
|
|
7199
7204
|
};
|
|
7200
7205
|
}
|
|
7201
7206
|
};
|
|
7202
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7203
|
-
var Container$
|
|
7207
|
+
var Wrapper$4 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7208
|
+
var Container$g = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n position: relative;\n height: ", ";\n width: ", ";\n"], ["\n position: relative;\n height: ", ";\n width: ", ";\n"])), function (_a) {
|
|
7204
7209
|
var _b;
|
|
7205
7210
|
var size = _a.size;
|
|
7206
7211
|
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
@@ -7256,9 +7261,9 @@ var RadioInput = function (_a) {
|
|
|
7256
7261
|
var value = event.currentTarget.value;
|
|
7257
7262
|
onChange({ value: value, label: label });
|
|
7258
7263
|
};
|
|
7259
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7264
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$g, __assign({ size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: name + "-" + id, type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.colors.neutral700, disabledColor: theme.colors.neutral250, "data-testid": "custom-radio" }, { children: checked && jsxRuntime.jsx(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Text$3, __assign({ size: size, disabled: disabled, color: theme.colors.neutral700, disabledColor: theme.colors.neutral250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
|
|
7260
7265
|
};
|
|
7261
|
-
var templateObject_1$
|
|
7266
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
7262
7267
|
|
|
7263
7268
|
var RadioGroupInput = function (_a) {
|
|
7264
7269
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7272,8 +7277,8 @@ var RadioGroupInput = function (_a) {
|
|
|
7272
7277
|
}) }), void 0));
|
|
7273
7278
|
};
|
|
7274
7279
|
|
|
7275
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7276
|
-
var Container$
|
|
7280
|
+
var Wrapper$3 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7281
|
+
var Container$f = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7277
7282
|
var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7278
7283
|
var color = _a.color;
|
|
7279
7284
|
return color;
|
|
@@ -7287,32 +7292,32 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
|
|
|
7287
7292
|
var Minimalistic = function (_a) {
|
|
7288
7293
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
|
|
7289
7294
|
var theme = useTheme();
|
|
7290
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7295
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$f, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$2, __assign({ color: theme.colors.secondary, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$f, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$2, __assign({ color: theme.colors.secondary }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7291
7296
|
};
|
|
7292
|
-
var templateObject_1$
|
|
7297
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$c;
|
|
7293
7298
|
|
|
7294
|
-
var Container$
|
|
7295
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7299
|
+
var Container$e = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7300
|
+
var Title$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7296
7301
|
var Details$1 = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7297
7302
|
var PriceContainer$1 = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
7298
7303
|
var Simple = function (_a) {
|
|
7299
7304
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
7300
7305
|
var theme = useTheme();
|
|
7301
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7306
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Title$2, __assign({ color: theme.colors.secondary, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.secondary, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7302
7307
|
};
|
|
7303
|
-
var templateObject_1$
|
|
7308
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$b, templateObject_4$8;
|
|
7304
7309
|
|
|
7305
7310
|
var Bundle = {
|
|
7306
7311
|
Minimalistic: Minimalistic,
|
|
7307
7312
|
Simple: Simple,
|
|
7308
7313
|
};
|
|
7309
7314
|
|
|
7310
|
-
var Container$
|
|
7315
|
+
var Container$d = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
7311
7316
|
var Tag = function (_a) {
|
|
7312
7317
|
var text = _a.text, className = _a.className;
|
|
7313
|
-
return jsxRuntime.jsx(Container$
|
|
7318
|
+
return jsxRuntime.jsx(Container$d, __assign({ className: className }, { children: text }), void 0);
|
|
7314
7319
|
};
|
|
7315
|
-
var templateObject_1$
|
|
7320
|
+
var templateObject_1$r;
|
|
7316
7321
|
|
|
7317
7322
|
var getStylesBySize$3 = function (size) {
|
|
7318
7323
|
switch (size) {
|
|
@@ -7346,7 +7351,7 @@ var CategoryTag = function (_a) {
|
|
|
7346
7351
|
var text = _a.text, size = _a.size, className = _a.className;
|
|
7347
7352
|
var theme = useTheme();
|
|
7348
7353
|
var stylesBySize = getStylesBySize$3(size);
|
|
7349
|
-
return (jsx(Tag, { css: __assign({ backgroundColor: theme.
|
|
7354
|
+
return (jsx(Tag, { css: __assign({ backgroundColor: theme.colors.white, fontWeight: 600, color: theme.colors.neutral700 }, stylesBySize), text: text, className: className }, void 0));
|
|
7350
7355
|
};
|
|
7351
7356
|
|
|
7352
7357
|
var getStylesBySize$2 = function (size) {
|
|
@@ -7413,50 +7418,68 @@ var Timer = function (_a) {
|
|
|
7413
7418
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7414
7419
|
};
|
|
7415
7420
|
|
|
7416
|
-
var Label = newStyled.span(templateObject_1$
|
|
7421
|
+
var Label = newStyled.span(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
7417
7422
|
var color = _a.color;
|
|
7418
7423
|
return color;
|
|
7419
7424
|
});
|
|
7420
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7425
|
+
var MandatoryIcon = newStyled.span(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
7421
7426
|
var color = _a.color;
|
|
7422
7427
|
return color;
|
|
7423
7428
|
});
|
|
7424
7429
|
var InputLabel = function (_a) {
|
|
7425
7430
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
7426
7431
|
var theme = useTheme();
|
|
7427
|
-
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.
|
|
7432
|
+
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.colors.neutral250 : theme.colors.neutral700 }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign({ color: theme.colors.semantic.error }, { children: "*" }), void 0)] }), void 0));
|
|
7428
7433
|
};
|
|
7429
|
-
var templateObject_1$
|
|
7434
|
+
var templateObject_1$q, templateObject_2$j;
|
|
7430
7435
|
|
|
7431
7436
|
var isEmpty = function (value) {
|
|
7432
7437
|
return value.length === 0;
|
|
7433
7438
|
};
|
|
7434
7439
|
|
|
7435
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7436
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7440
|
+
var ErrorText = newStyled.h3(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
7441
|
+
var ErrorContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
7437
7442
|
var Error$1 = function (_a) {
|
|
7438
7443
|
var error = _a.error;
|
|
7439
7444
|
var theme = useTheme();
|
|
7440
|
-
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.semantic.
|
|
7445
|
+
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.error, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign({ color: theme.colors.semantic.error }, { children: error }), void 0)] }, void 0));
|
|
7441
7446
|
};
|
|
7442
|
-
var templateObject_1$
|
|
7447
|
+
var templateObject_1$p, templateObject_2$i;
|
|
7443
7448
|
|
|
7444
|
-
var Container$
|
|
7449
|
+
var Container$c = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: 3rem;\n input {\n border-color: ", ";\n }\n"], ["\n height: 3rem;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7445
7450
|
var color = _a.color;
|
|
7446
7451
|
return color;
|
|
7447
7452
|
});
|
|
7448
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7449
|
-
var
|
|
7450
|
-
return
|
|
7453
|
+
var StyledInput = newStyled.input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
7454
|
+
var padding = _a.padding;
|
|
7455
|
+
return padding;
|
|
7456
|
+
}, function (_a) {
|
|
7457
|
+
var fontSize = _a.fontSize;
|
|
7458
|
+
return fontSize;
|
|
7459
|
+
}, function (_a) {
|
|
7460
|
+
var borderRadius = _a.borderRadius;
|
|
7461
|
+
return borderRadius;
|
|
7462
|
+
}, function (_a) {
|
|
7463
|
+
var border = _a.border;
|
|
7464
|
+
return border;
|
|
7465
|
+
}, function (_a) {
|
|
7466
|
+
var lineHeight = _a.lineHeight;
|
|
7467
|
+
return lineHeight;
|
|
7451
7468
|
}, function (_a) {
|
|
7452
7469
|
var color = _a.color;
|
|
7453
7470
|
return color;
|
|
7471
|
+
}, function (_a) {
|
|
7472
|
+
var fontWeight = _a.fontWeight;
|
|
7473
|
+
return fontWeight;
|
|
7454
7474
|
}, function (_a) {
|
|
7455
7475
|
var placeholderColor = _a.placeholderColor;
|
|
7456
7476
|
return placeholderColor;
|
|
7457
7477
|
}, function (_a) {
|
|
7458
|
-
var
|
|
7459
|
-
return
|
|
7478
|
+
var highlight = _a.highlight;
|
|
7479
|
+
return highlight;
|
|
7480
|
+
}, function (_a) {
|
|
7481
|
+
var boxShadow = _a.boxShadow;
|
|
7482
|
+
return boxShadow;
|
|
7460
7483
|
}, function (_a) {
|
|
7461
7484
|
var disabledBackgroundColor = _a.disabledBackgroundColor;
|
|
7462
7485
|
return disabledBackgroundColor;
|
|
@@ -7471,7 +7494,7 @@ var StyledInput = newStyled.input(templateObject_2$f || (templateObject_2$f = __
|
|
|
7471
7494
|
return disabledColor;
|
|
7472
7495
|
});
|
|
7473
7496
|
var InputWrapper = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: 100%;\n"], ["\n position: relative;\n display: flex;\n height: 100%;\n"])));
|
|
7474
|
-
var templateObject_1$
|
|
7497
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$a;
|
|
7475
7498
|
|
|
7476
7499
|
var BaseInput = function (_a) {
|
|
7477
7500
|
var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
|
|
@@ -7499,67 +7522,82 @@ var BaseInput = function (_a) {
|
|
|
7499
7522
|
return exports.InputValidationType.Valid;
|
|
7500
7523
|
};
|
|
7501
7524
|
var styling = {
|
|
7502
|
-
|
|
7503
|
-
|
|
7504
|
-
|
|
7505
|
-
|
|
7506
|
-
|
|
7525
|
+
border: theme.component.input.border,
|
|
7526
|
+
borderRadius: theme.component.input.borderRadius,
|
|
7527
|
+
color: theme.component.input.color,
|
|
7528
|
+
placeholderColor: theme.component.input.placeholderColor,
|
|
7529
|
+
disabledBackgroundColor: theme.colors.background.disabled,
|
|
7530
|
+
disabledColor: theme.colors.text.disabled,
|
|
7531
|
+
fontSize: theme.component.input.fontSize,
|
|
7532
|
+
fontWeight: theme.component.input.fontWeight,
|
|
7533
|
+
padding: theme.component.input.padding,
|
|
7534
|
+
lineHeight: theme.component.input.lineHeight,
|
|
7535
|
+
highlight: theme.colors.border.highlight,
|
|
7536
|
+
boxShadow: theme.component.input.boxShadow,
|
|
7507
7537
|
};
|
|
7508
|
-
return (jsxRuntime.jsxs(Container$
|
|
7509
|
-
? theme.
|
|
7538
|
+
return (jsxRuntime.jsxs(Container$c, __assign({ color: status === exports.InputValidationType.Valid
|
|
7539
|
+
? theme.colors.neutral700
|
|
7510
7540
|
: status === exports.InputValidationType.Error
|
|
7511
|
-
? theme.semantic.
|
|
7541
|
+
? theme.colors.semantic.error
|
|
7512
7542
|
: '' }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsxRuntime.jsx(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
7513
7543
|
};
|
|
7514
7544
|
|
|
7515
|
-
var Container$
|
|
7516
|
-
var
|
|
7545
|
+
var Container$b = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n input {\n border-radius: ", ";\n }\n"], ["\n input {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
7546
|
+
var theme = _a.theme;
|
|
7547
|
+
return theme.component.inputCustom.input.borderRadius;
|
|
7548
|
+
});
|
|
7549
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 7.125rem;\n height: 100%;\n position: absolute;\n right: 0;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n width: 7.125rem;\n height: 100%;\n position: absolute;\n right: 0;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
7550
|
+
var theme = _a.theme;
|
|
7551
|
+
return theme.component.inputCustom.button.borderRadius;
|
|
7552
|
+
});
|
|
7517
7553
|
var Custom = function (_a) {
|
|
7518
7554
|
var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
|
|
7555
|
+
var theme = useTheme();
|
|
7519
7556
|
var props = {
|
|
7520
7557
|
onClick: onClick,
|
|
7521
7558
|
text: text,
|
|
7522
7559
|
disabled: rest.disabled,
|
|
7523
7560
|
};
|
|
7524
|
-
return (jsxRuntime.jsx(Container$
|
|
7561
|
+
return (jsxRuntime.jsx(Container$b, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsxRuntime.jsx(ButtonPrimary, __assign({}, props), void 0) : jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7525
7562
|
};
|
|
7526
|
-
var templateObject_1$
|
|
7563
|
+
var templateObject_1$n, templateObject_2$g;
|
|
7527
7564
|
|
|
7528
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7529
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7565
|
+
var SuccessContainer = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n height: 3rem;\n display: flex;\n"], ["\n height: 3rem;\n display: flex;\n"])));
|
|
7566
|
+
var SuccessMessage = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
7530
7567
|
var SuccessText = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
7531
7568
|
var Success = function (_a) {
|
|
7532
7569
|
var children = _a.children, successText = _a.successText;
|
|
7533
7570
|
return (jsxRuntime.jsxs(SuccessContainer, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
|
|
7534
7571
|
};
|
|
7535
|
-
var templateObject_1$
|
|
7572
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$9;
|
|
7536
7573
|
|
|
7537
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7538
|
-
var status = _a.status, type = _a.type;
|
|
7539
|
-
return status === exports.InputValidationType.Empty && type === 'primary'
|
|
7574
|
+
var ButtonContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
7575
|
+
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7576
|
+
return status === exports.InputValidationType.Empty && type === 'primary' && theme.colors.neutral400;
|
|
7540
7577
|
});
|
|
7541
7578
|
var BasePlusButton = function (_a) {
|
|
7542
7579
|
var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
|
|
7543
7580
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7544
|
-
var
|
|
7545
|
-
var
|
|
7581
|
+
var theme = useTheme();
|
|
7582
|
+
var SuccessComponent = (jsxRuntime.jsx(Success, __assign({ successText: successText }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
|
|
7583
|
+
var Input = (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7546
7584
|
return success ? SuccessComponent : Input;
|
|
7547
7585
|
};
|
|
7548
|
-
var templateObject_1$
|
|
7586
|
+
var templateObject_1$l;
|
|
7549
7587
|
|
|
7550
|
-
var Container$
|
|
7551
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7588
|
+
var Container$a = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7589
|
+
var IconContainer$2 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7552
7590
|
var BasePlusIcon = function (_a) {
|
|
7553
7591
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7554
7592
|
var theme = useTheme();
|
|
7555
7593
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7556
|
-
return (jsxRuntime.jsx(Container$
|
|
7557
|
-
? theme.
|
|
7594
|
+
return (jsxRuntime.jsx(Container$a, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$2, __assign({ color: status === exports.InputValidationType.Valid
|
|
7595
|
+
? theme.colors.neutral700
|
|
7558
7596
|
: status === exports.InputValidationType.Error
|
|
7559
|
-
? theme.semantic.
|
|
7560
|
-
: '' }, { children: React.createElement(Icon, { fill: theme.
|
|
7597
|
+
? theme.colors.semantic.error
|
|
7598
|
+
: '' }, { children: React.createElement(Icon, { fill: theme.colors.neutral250 }) }), void 0) }), void 0) }, void 0));
|
|
7561
7599
|
};
|
|
7562
|
-
var templateObject_1$
|
|
7600
|
+
var templateObject_1$k, templateObject_2$e;
|
|
7563
7601
|
|
|
7564
7602
|
var Input = {
|
|
7565
7603
|
Simple: BaseInput,
|
|
@@ -7573,7 +7611,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
|
|
|
7573
7611
|
Input: Input
|
|
7574
7612
|
});
|
|
7575
7613
|
|
|
7576
|
-
var Container$
|
|
7614
|
+
var Container$9 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
7577
7615
|
var width = _a.width;
|
|
7578
7616
|
return width;
|
|
7579
7617
|
}, function (_a) {
|
|
@@ -7589,11 +7627,11 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
7589
7627
|
var PaymentMethod = function (_a) {
|
|
7590
7628
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7591
7629
|
var theme = useTheme();
|
|
7592
|
-
return (jsxRuntime.jsx(Container$
|
|
7630
|
+
return (jsxRuntime.jsx(Container$9, __assign({ width: width, height: height, borderColor: theme.colors.neutral100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7593
7631
|
};
|
|
7594
|
-
var templateObject_1$
|
|
7632
|
+
var templateObject_1$j;
|
|
7595
7633
|
|
|
7596
|
-
var Text$1 = newStyled.h3(templateObject_1$
|
|
7634
|
+
var Text$1 = newStyled.h3(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
7597
7635
|
var backgroundColor = _a.backgroundColor;
|
|
7598
7636
|
return backgroundColor;
|
|
7599
7637
|
}, function (_a) {
|
|
@@ -7603,27 +7641,27 @@ var Text$1 = newStyled.h3(templateObject_1$g || (templateObject_1$g = __makeTemp
|
|
|
7603
7641
|
var OfferBanner = function (_a) {
|
|
7604
7642
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7605
7643
|
var theme = useTheme();
|
|
7606
|
-
return (jsxRuntime.jsx(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.
|
|
7644
|
+
return (jsxRuntime.jsx(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.neutral700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7607
7645
|
};
|
|
7608
|
-
var templateObject_1$
|
|
7646
|
+
var templateObject_1$i;
|
|
7609
7647
|
|
|
7610
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7611
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7648
|
+
var Wrapper$2 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
7649
|
+
var GrandTotal = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7612
7650
|
var Currency = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7613
|
-
var Container$
|
|
7651
|
+
var Container$8 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
7614
7652
|
var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7615
7653
|
var Total = function (_a) {
|
|
7616
7654
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7617
7655
|
var theme = useTheme();
|
|
7618
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.
|
|
7656
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.neutral550 }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$8, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7619
7657
|
};
|
|
7620
|
-
var templateObject_1$
|
|
7658
|
+
var templateObject_1$h, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
7621
7659
|
|
|
7622
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7660
|
+
var Wrapper$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7623
7661
|
var color = _a.color;
|
|
7624
7662
|
return color;
|
|
7625
7663
|
});
|
|
7626
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7664
|
+
var ItemContainer = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
7627
7665
|
var Item$1 = newStyled.h4(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7628
7666
|
var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7629
7667
|
var color = _a.color;
|
|
@@ -7632,27 +7670,27 @@ var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = _
|
|
|
7632
7670
|
var Subtotal = function (_a) {
|
|
7633
7671
|
var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7634
7672
|
var theme = useTheme();
|
|
7635
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign({ color: theme.
|
|
7673
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign({ color: theme.colors.neutral700, "data-testid": "subtotal-wrapper" }, { children: [jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$1, { children: subtotal.label }, void 0), jsxRuntime.jsx(Item$1, { children: subtotal.value }, void 0)] }, void 0), jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$1, { children: shipping.label }, void 0), jsxRuntime.jsx(Item$1, { children: shipping.value }, void 0)] }, void 0), jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$1, { children: taxes.label }, void 0), jsxRuntime.jsx(Item$1, { children: taxes.value }, void 0)] }, void 0), coupon &&
|
|
7636
7674
|
coupon.coupons.map(function (c, i) {
|
|
7637
7675
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7638
7676
|
})] }), void 0));
|
|
7639
7677
|
};
|
|
7640
|
-
var templateObject_1$
|
|
7678
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$7, templateObject_4$6;
|
|
7641
7679
|
|
|
7642
7680
|
var Totals = {
|
|
7643
7681
|
Total: Total,
|
|
7644
7682
|
Subtotal: Subtotal,
|
|
7645
7683
|
};
|
|
7646
7684
|
|
|
7647
|
-
var Container$
|
|
7648
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
7685
|
+
var Container$7 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
7686
|
+
var IconContainer$1 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
7649
7687
|
var Text = newStyled.p(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7650
7688
|
var Details = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7651
7689
|
var Note = function (_a) {
|
|
7652
7690
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7653
|
-
return (jsxRuntime.jsxs(Container$
|
|
7691
|
+
return (jsxRuntime.jsxs(Container$7, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$1, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7654
7692
|
};
|
|
7655
|
-
var templateObject_1$
|
|
7693
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$6, templateObject_4$5;
|
|
7656
7694
|
|
|
7657
7695
|
var Breakpoints = {
|
|
7658
7696
|
desktop: 1200,
|
|
@@ -7682,8 +7720,8 @@ var useWindowDimensions = function () {
|
|
|
7682
7720
|
};
|
|
7683
7721
|
};
|
|
7684
7722
|
|
|
7685
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7686
|
-
var Line = newStyled.div(templateObject_2$
|
|
7723
|
+
var Title$1 = newStyled.h1(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7724
|
+
var Line = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7687
7725
|
var Row$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: ", ";\n justify-content: space-between;\n align-items: flex-start;\n"])), function (props) { return (props.isMobile ? 'column' : 'row'); });
|
|
7688
7726
|
var Col$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex: 1;\n margin: 0 1.25rem;\n\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex: 1;\n margin: 0 1.25rem;\n\n ", "\n"])), function (props) {
|
|
7689
7727
|
return props.isMobile &&
|
|
@@ -7700,38 +7738,38 @@ var DeliveryDetails = function (_a) {
|
|
|
7700
7738
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7701
7739
|
var theme = useTheme();
|
|
7702
7740
|
var isMobile = useWindowDimensions().isMobile;
|
|
7703
|
-
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.
|
|
7741
|
+
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.secondary }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.neutral100 }, void 0), note && jsxRuntime.jsx(Note, __assign({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.neutral150 }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7704
7742
|
};
|
|
7705
|
-
var templateObject_1$
|
|
7743
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7706
7744
|
|
|
7707
|
-
var Container$
|
|
7708
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7745
|
+
var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
7746
|
+
var H1$2 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
7709
7747
|
var ScrollToTop = function (_a) {
|
|
7710
7748
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7711
7749
|
var theme = useTheme();
|
|
7712
|
-
return (jsxRuntime.jsxs(Container$
|
|
7750
|
+
return (jsxRuntime.jsxs(Container$6, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.neutral700 }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.primary }, void 0)] }), void 0));
|
|
7713
7751
|
};
|
|
7714
|
-
var templateObject_1$
|
|
7752
|
+
var templateObject_1$d, templateObject_2$9;
|
|
7715
7753
|
|
|
7716
|
-
var Container$
|
|
7717
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7754
|
+
var Container$5 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
7755
|
+
var H1$1 = newStyled.h1(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
7718
7756
|
var OrderBar = function (_a) {
|
|
7719
7757
|
var message = _a.message;
|
|
7720
7758
|
var theme = useTheme();
|
|
7721
|
-
return (jsxRuntime.jsxs(Container$
|
|
7759
|
+
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.neutral700 }, { children: message }), void 0)] }, void 0));
|
|
7722
7760
|
};
|
|
7723
|
-
var templateObject_1$
|
|
7761
|
+
var templateObject_1$c, templateObject_2$8;
|
|
7724
7762
|
|
|
7725
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7726
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7763
|
+
var TableElement = newStyled.table(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
7764
|
+
var TableCell = newStyled.td(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
7727
7765
|
var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
7728
7766
|
var TableRow = newStyled.tr(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
7729
7767
|
var SizeTable = function (_a) {
|
|
7730
7768
|
var headers = _a.headers, data = _a.data;
|
|
7731
7769
|
var theme = useTheme();
|
|
7732
|
-
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.
|
|
7770
|
+
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.colors.neutral700, borderColor: theme.colors.neutral100 }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign({ backgroundColor: theme.colors.neutral10 }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign({ borderColor: theme.colors.neutral100 }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.neutral10 }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign({ borderColor: theme.colors.neutral100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7733
7771
|
};
|
|
7734
|
-
var templateObject_1$
|
|
7772
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$4, templateObject_4$3;
|
|
7735
7773
|
|
|
7736
7774
|
/* eslint-disable no-param-reassign */
|
|
7737
7775
|
var index$2 = function (breakpoints) {
|
|
@@ -7819,15 +7857,15 @@ var breakpoints = {
|
|
|
7819
7857
|
};
|
|
7820
7858
|
var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
|
|
7821
7859
|
|
|
7822
|
-
var Img = newStyled.img(templateObject_1$
|
|
7860
|
+
var Img = newStyled.img(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
7823
7861
|
var Image = function (_a) {
|
|
7824
7862
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7825
7863
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7826
7864
|
};
|
|
7827
|
-
var templateObject_1$
|
|
7865
|
+
var templateObject_1$a;
|
|
7828
7866
|
|
|
7829
|
-
var Container$
|
|
7830
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7867
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
7868
|
+
var DescriptionContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
7831
7869
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7832
7870
|
}));
|
|
7833
7871
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -7861,9 +7899,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
|
|
|
7861
7899
|
var SimpleOrderItem = function (_a) {
|
|
7862
7900
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
7863
7901
|
var theme = useTheme();
|
|
7864
|
-
return (jsxRuntime.jsxs(Container$
|
|
7902
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsxRuntime.jsx(Title, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.neutral700 }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.neutral700, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7865
7903
|
};
|
|
7866
|
-
var templateObject_1$
|
|
7904
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$3;
|
|
7867
7905
|
|
|
7868
7906
|
function formatDate(date) {
|
|
7869
7907
|
var day = date.getDate();
|
|
@@ -7872,8 +7910,8 @@ function formatDate(date) {
|
|
|
7872
7910
|
return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
|
|
7873
7911
|
}
|
|
7874
7912
|
|
|
7875
|
-
var Container$
|
|
7876
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7913
|
+
var Container$3 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
7914
|
+
var Heading = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
7877
7915
|
fontSize: ['14px', '16px'],
|
|
7878
7916
|
lineHeight: ['22px', '24px'],
|
|
7879
7917
|
}));
|
|
@@ -7896,9 +7934,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
7896
7934
|
var P = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
7897
7935
|
var Review = function (_a) {
|
|
7898
7936
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7899
|
-
return (jsxRuntime.jsxs(Container$
|
|
7937
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(H3$1, { children: title }, void 0), jsxRuntime.jsx(P, { children: description }, void 0)] }, void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7900
7938
|
};
|
|
7901
|
-
var templateObject_1$
|
|
7939
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7902
7940
|
|
|
7903
7941
|
var Button = newStyled.button(function () { return ({
|
|
7904
7942
|
background: 'transparent',
|
|
@@ -12151,14 +12189,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12151
12189
|
return Slider;
|
|
12152
12190
|
}(React__default['default'].Component);
|
|
12153
12191
|
|
|
12154
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12192
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
|
|
12155
12193
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12156
12194
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12157
12195
|
}, function (_a) {
|
|
12158
12196
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12159
12197
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12160
12198
|
});
|
|
12161
|
-
var templateObject_1$
|
|
12199
|
+
var templateObject_1$7;
|
|
12162
12200
|
|
|
12163
12201
|
var getStylesBySize$1 = function (size) {
|
|
12164
12202
|
// rem units
|
|
@@ -12208,32 +12246,35 @@ var SliderNavigation = function (_a) {
|
|
|
12208
12246
|
prevArrow: prevArrow,
|
|
12209
12247
|
adaptiveHeight: adaptiveHeight,
|
|
12210
12248
|
// eslint-disable-next-line react/display-name
|
|
12211
|
-
customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.
|
|
12249
|
+
customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.colors.neutral700 : 'none' }, i)); },
|
|
12212
12250
|
afterChange: setActiveIndex,
|
|
12213
12251
|
};
|
|
12214
|
-
return (jsx("div", __assign({ css: {
|
|
12252
|
+
return (jsx("div", __assign({ css: {
|
|
12253
|
+
padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0,
|
|
12254
|
+
maxWidth: '100%',
|
|
12255
|
+
} }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12215
12256
|
};
|
|
12216
12257
|
|
|
12217
|
-
var List = newStyled.ul(templateObject_1$
|
|
12218
|
-
var Item = newStyled.li(templateObject_2$
|
|
12258
|
+
var List = newStyled.ul(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12259
|
+
var Item = newStyled.li(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
12219
12260
|
var DropdownWrapper = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
12220
12261
|
var ArrowContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
12221
12262
|
var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
12222
12263
|
var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
12223
|
-
var templateObject_1$
|
|
12264
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
12224
12265
|
|
|
12225
12266
|
var DropdownListIcons = function (_a) {
|
|
12226
12267
|
var items = _a.items;
|
|
12227
12268
|
var theme = useTheme();
|
|
12228
|
-
return (jsxRuntime.jsx(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxRuntime.jsxs(Item, { children: [React.createElement(item.Icon, { fill: theme.
|
|
12269
|
+
return (jsxRuntime.jsx(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxRuntime.jsxs(Item, { children: [React.createElement(item.Icon, { fill: theme.colors.neutral700 }), jsxRuntime.jsx(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12229
12270
|
};
|
|
12230
12271
|
var Dropdown = function (_a) {
|
|
12231
12272
|
var items = _a.items;
|
|
12232
12273
|
var theme = useTheme();
|
|
12233
|
-
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.
|
|
12274
|
+
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.neutral200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign({ borderColor: theme.colors.neutral200 }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.colors.neutral200, color: theme.colors.neutral550, hoverColor: theme.colors.neutral10 }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12234
12275
|
};
|
|
12235
12276
|
|
|
12236
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12277
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
12237
12278
|
var AmazonButton = function (_a) {
|
|
12238
12279
|
var onClick = _a.onClick;
|
|
12239
12280
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12242,7 +12283,7 @@ var PaypalButton = function (_a) {
|
|
|
12242
12283
|
var onClick = _a.onClick;
|
|
12243
12284
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12244
12285
|
};
|
|
12245
|
-
var templateObject_1$
|
|
12286
|
+
var templateObject_1$5;
|
|
12246
12287
|
|
|
12247
12288
|
var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
12248
12289
|
__proto__: null,
|
|
@@ -12250,8 +12291,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
|
12250
12291
|
PaypalButton: PaypalButton
|
|
12251
12292
|
});
|
|
12252
12293
|
|
|
12253
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12254
|
-
var Col = newStyled.div(templateObject_2$
|
|
12294
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
12295
|
+
var Col = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12255
12296
|
var Row = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
12256
12297
|
return props.rightToLeft &&
|
|
12257
12298
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -12262,9 +12303,9 @@ var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __make
|
|
|
12262
12303
|
var CrossSellCheckbox = function (_a) {
|
|
12263
12304
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12264
12305
|
var theme = useTheme();
|
|
12265
|
-
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.
|
|
12306
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.colors.neutral10, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small }, void 0), jsxRuntime.jsxs(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign({ color: theme.colors.semantic.error }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign({ color: theme.colors.neutral700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12266
12307
|
};
|
|
12267
|
-
var templateObject_1$
|
|
12308
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12268
12309
|
|
|
12269
12310
|
var index = /*#__PURE__*/Object.freeze({
|
|
12270
12311
|
__proto__: null,
|
|
@@ -12279,8 +12320,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12279
12320
|
height: height,
|
|
12280
12321
|
});
|
|
12281
12322
|
});
|
|
12282
|
-
var Container$
|
|
12283
|
-
var H1 = newStyled.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.
|
|
12323
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"])));
|
|
12324
|
+
var H1 = newStyled.h1(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.secondary; }, function (props) { return props.align; });
|
|
12284
12325
|
var getStylesBySize = function (size) {
|
|
12285
12326
|
switch (size) {
|
|
12286
12327
|
case exports.ComponentSize.Medium:
|
|
@@ -12305,27 +12346,91 @@ var ProductItemMobile = function (_a) {
|
|
|
12305
12346
|
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
|
|
12306
12347
|
var theme = useTheme();
|
|
12307
12348
|
var styles = getStylesBySize(size);
|
|
12308
|
-
return (jsxs(Container$
|
|
12349
|
+
return (jsxs(Container$2, { children: [tags ? (jsxs(ImageContainer, __assign({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12309
12350
|
};
|
|
12310
|
-
var templateObject_1$
|
|
12351
|
+
var templateObject_1$3, templateObject_2$2;
|
|
12311
12352
|
|
|
12312
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12353
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12313
12354
|
function withProductGrid(ProductItemComponent, data) {
|
|
12314
12355
|
function WithProductGrid(props) {
|
|
12315
|
-
return (jsxRuntime.jsx(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12356
|
+
return (jsxRuntime.jsx(Container$1, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12316
12357
|
}
|
|
12317
12358
|
/* istanbul ignore next */
|
|
12318
12359
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12319
12360
|
WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
|
|
12320
12361
|
return WithProductGrid;
|
|
12321
12362
|
}
|
|
12322
|
-
var templateObject_1;
|
|
12363
|
+
var templateObject_1$2;
|
|
12323
12364
|
|
|
12324
12365
|
var Collection = {
|
|
12325
12366
|
ProductItemMobile: ProductItemMobile,
|
|
12326
12367
|
withProductGrid: withProductGrid,
|
|
12327
12368
|
};
|
|
12328
12369
|
|
|
12370
|
+
var Backdrop = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
12371
|
+
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12372
|
+
return isOpen ? "background-color: " + backgroundColor + ";" : 'transparent';
|
|
12373
|
+
});
|
|
12374
|
+
var Sidebar = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
12375
|
+
var width = _a.width;
|
|
12376
|
+
return width;
|
|
12377
|
+
}, function (_a) {
|
|
12378
|
+
var position = _a.position;
|
|
12379
|
+
return position;
|
|
12380
|
+
}, function (_a) {
|
|
12381
|
+
var backgroundColor = _a.backgroundColor;
|
|
12382
|
+
return backgroundColor;
|
|
12383
|
+
}, function (_a) {
|
|
12384
|
+
var isOpen = _a.isOpen, position = _a.position;
|
|
12385
|
+
return isOpen
|
|
12386
|
+
? 'transform: translateX(0);'
|
|
12387
|
+
: "transform: translateX(" + (position === 'left' ? '-100%' : '100%') + ");";
|
|
12388
|
+
});
|
|
12389
|
+
var Drawer = function (_a) {
|
|
12390
|
+
var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.backdropColor, backdropColor = _c === void 0 ? 'rgba(0, 0, 0, 0.5)' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.width, width = _e === void 0 ? '33%' : _e, onClickOutside = _a.onClickOutside;
|
|
12391
|
+
var _f = React.useState(isOpen), isOpenState = _f[0], setIsOpen = _f[1];
|
|
12392
|
+
var _g = React.useState(isOpen), isMounted = _g[0], setIsMounted = _g[1];
|
|
12393
|
+
React.useEffect(function () {
|
|
12394
|
+
if (isOpen === false) {
|
|
12395
|
+
setIsOpen(isOpen);
|
|
12396
|
+
var timeout_1 = setTimeout(function () {
|
|
12397
|
+
setIsMounted(isOpen);
|
|
12398
|
+
onClose && onClose();
|
|
12399
|
+
}, 300);
|
|
12400
|
+
return function () {
|
|
12401
|
+
clearTimeout(timeout_1);
|
|
12402
|
+
};
|
|
12403
|
+
}
|
|
12404
|
+
setIsMounted(isOpen);
|
|
12405
|
+
var timeout = setTimeout(function () {
|
|
12406
|
+
setIsOpen(isOpen);
|
|
12407
|
+
onOpen && onOpen();
|
|
12408
|
+
}, 100);
|
|
12409
|
+
return function () {
|
|
12410
|
+
clearTimeout(timeout);
|
|
12411
|
+
};
|
|
12412
|
+
}, [isOpen, onClose, onOpen]);
|
|
12413
|
+
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12414
|
+
};
|
|
12415
|
+
var templateObject_1$1, templateObject_2$1;
|
|
12416
|
+
|
|
12417
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12418
|
+
var size = _a.size;
|
|
12419
|
+
return (size ? size : '100%');
|
|
12420
|
+
}, function (_a) {
|
|
12421
|
+
var size = _a.size;
|
|
12422
|
+
return (size ? size : '100%');
|
|
12423
|
+
});
|
|
12424
|
+
var Animation = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
12425
|
+
var animationDuration = _a.animationDuration;
|
|
12426
|
+
return animationDuration;
|
|
12427
|
+
});
|
|
12428
|
+
var Spinner = function (_a) {
|
|
12429
|
+
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12430
|
+
return (jsxRuntime.jsx(Container, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12431
|
+
};
|
|
12432
|
+
var templateObject_1, templateObject_2;
|
|
12433
|
+
|
|
12329
12434
|
exports.Accordion = Accordion$1;
|
|
12330
12435
|
exports.AccordionBox = AccordionBox;
|
|
12331
12436
|
exports.AccordionIcon = AccordionIcon;
|
|
@@ -12341,6 +12446,7 @@ exports.Collection = Collection;
|
|
|
12341
12446
|
exports.CrossSell = index;
|
|
12342
12447
|
exports.DeliveryDetails = DeliveryDetails;
|
|
12343
12448
|
exports.DiscountTag = DiscountTag;
|
|
12449
|
+
exports.Drawer = Drawer;
|
|
12344
12450
|
exports.DropdownListIcons = DropdownListIcons;
|
|
12345
12451
|
exports.FitPredictor = FitPredictor;
|
|
12346
12452
|
exports.Icon = Icon;
|
|
@@ -12366,6 +12472,7 @@ exports.SizeFitGuide = SizeFitGuide;
|
|
|
12366
12472
|
exports.SizeSelector = SizeSelector;
|
|
12367
12473
|
exports.SizeTable = SizeTable;
|
|
12368
12474
|
exports.SliderNavigation = SliderNavigation;
|
|
12475
|
+
exports.Spinner = Spinner;
|
|
12369
12476
|
exports.StarList = StarList;
|
|
12370
12477
|
exports.TextButton = TextButton;
|
|
12371
12478
|
exports.ThemeProvider = ThemeProvider;
|