@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.esm.js
CHANGED
|
@@ -2643,11 +2643,17 @@ var Shapermint = function (_a) {
|
|
|
2643
2643
|
return (jsxs$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 204, viewBoxY: 35, title: "Shapermint" }, { children: [jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("path", { d: "M169.886 27.875H164.888V8.875H169.886V27.875Z", fill: "#292929" }, void 0), jsx$1("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), jsx$1("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));
|
|
2644
2644
|
};
|
|
2645
2645
|
|
|
2646
|
+
var McAfee = function (_a) {
|
|
2647
|
+
var height = _a.height, width = _a.width;
|
|
2648
|
+
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 121, viewBoxY: 60, title: "McAfee" }, { children: jsxs$1(Fragment$1, { children: [jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("path", { d: "M58.5741 30.9949H64.627V32.3075H60.0979V35.3562H64.2037V36.6688H60.0979V40.141H64.627V41.4536H58.5741V30.9949Z", fill: "#66676A" }, void 0), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("path", { d: "M95.6535 30.9949H101.664V32.3075H97.135V35.3562H101.241V36.6688H97.135V40.141H101.664V41.4536H95.6111V30.9949H95.6535Z", fill: "#66676A" }, void 0), jsx$1("path", { d: "M104.034 33.1115V31.4607H103.442V31.1221H105.008V31.4607H104.415V33.1115H104.034Z", fill: "#66676A" }, void 0), jsx$1("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));
|
|
2649
|
+
};
|
|
2650
|
+
|
|
2646
2651
|
var Other = /*#__PURE__*/Object.freeze({
|
|
2647
2652
|
__proto__: null,
|
|
2648
2653
|
FitPredictor: FitPredictor$1,
|
|
2649
2654
|
Loading: Loading,
|
|
2650
|
-
Shapermint: Shapermint
|
|
2655
|
+
Shapermint: Shapermint,
|
|
2656
|
+
McAfee: McAfee
|
|
2651
2657
|
});
|
|
2652
2658
|
|
|
2653
2659
|
var ChevronDown = function (_a) {
|
|
@@ -3518,7 +3524,7 @@ var InputValidationType;
|
|
|
3518
3524
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3519
3525
|
})(InputValidationType || (InputValidationType = {}));
|
|
3520
3526
|
|
|
3521
|
-
var Section = newStyled.div(templateObject_1$
|
|
3527
|
+
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) {
|
|
3522
3528
|
return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
|
|
3523
3529
|
});
|
|
3524
3530
|
var CardHeader = function (_a) {
|
|
@@ -3529,16 +3535,16 @@ var CardFooter = function (_a) {
|
|
|
3529
3535
|
var children = _a.children;
|
|
3530
3536
|
return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3531
3537
|
};
|
|
3532
|
-
var templateObject_1$
|
|
3538
|
+
var templateObject_1$O;
|
|
3533
3539
|
|
|
3534
|
-
var Body = newStyled.div(templateObject_1$
|
|
3540
|
+
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"])));
|
|
3535
3541
|
var CardBody = function (_a) {
|
|
3536
3542
|
var children = _a.children;
|
|
3537
3543
|
return jsx$1(Body, { children: children }, void 0);
|
|
3538
3544
|
};
|
|
3539
|
-
var templateObject_1$
|
|
3545
|
+
var templateObject_1$N;
|
|
3540
3546
|
|
|
3541
|
-
var Container$
|
|
3547
|
+
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) {
|
|
3542
3548
|
var flex = _a.flex;
|
|
3543
3549
|
return flex &&
|
|
3544
3550
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3550,14 +3556,14 @@ var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
3550
3556
|
});
|
|
3551
3557
|
var Card = function (_a) {
|
|
3552
3558
|
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;
|
|
3553
|
-
return (jsx$1(Container$
|
|
3559
|
+
return (jsx$1(Container$u, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
|
|
3554
3560
|
};
|
|
3555
3561
|
var Card$1 = Object.assign(Card, {
|
|
3556
3562
|
Header: CardHeader,
|
|
3557
3563
|
Footer: CardFooter,
|
|
3558
3564
|
Body: CardBody,
|
|
3559
3565
|
});
|
|
3560
|
-
var templateObject_1$
|
|
3566
|
+
var templateObject_1$M;
|
|
3561
3567
|
|
|
3562
3568
|
function jsx(type, props, key) {
|
|
3563
3569
|
if (!hasOwnProperty$1.call(props, 'css')) {
|
|
@@ -3587,41 +3593,38 @@ var BaseButton = function (_a) {
|
|
|
3587
3593
|
} }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
3588
3594
|
};
|
|
3589
3595
|
|
|
3590
|
-
var getStylesBySize$d = function (size) {
|
|
3596
|
+
var getStylesBySize$d = function (size, theme) {
|
|
3591
3597
|
switch (size) {
|
|
3592
3598
|
case ComponentSize.Large:
|
|
3593
3599
|
return {
|
|
3594
|
-
|
|
3595
|
-
|
|
3600
|
+
fontSize: theme.component.button.size.large.fontSize,
|
|
3601
|
+
padding: theme.component.button.size.large.padding,
|
|
3596
3602
|
};
|
|
3597
3603
|
case ComponentSize.Medium:
|
|
3598
3604
|
return {
|
|
3599
|
-
|
|
3600
|
-
|
|
3605
|
+
fontSize: theme.component.button.size.medium.fontSize,
|
|
3606
|
+
padding: theme.component.button.size.medium.padding,
|
|
3601
3607
|
};
|
|
3602
3608
|
case ComponentSize.Small:
|
|
3603
3609
|
return {
|
|
3604
|
-
|
|
3605
|
-
|
|
3610
|
+
fontSize: theme.component.button.size.small.fontSize,
|
|
3611
|
+
padding: theme.component.button.size.small.padding,
|
|
3606
3612
|
};
|
|
3607
3613
|
default:
|
|
3608
3614
|
return {
|
|
3609
|
-
|
|
3610
|
-
|
|
3615
|
+
fontSize: theme.component.button.size.small.fontSize,
|
|
3616
|
+
padding: theme.component.button.size.small.padding,
|
|
3611
3617
|
};
|
|
3612
3618
|
}
|
|
3613
3619
|
};
|
|
3614
3620
|
var BaseCTA = function (_a) {
|
|
3615
3621
|
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 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
|
|
3616
3622
|
var theme = useTheme();
|
|
3617
|
-
var stylesBySize = getStylesBySize$d(size);
|
|
3618
|
-
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight:
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
backgroundColor: theme.shades.gray050,
|
|
3623
|
-
color: theme.shades.gray250,
|
|
3624
|
-
cursor: 'default',
|
|
3623
|
+
var stylesBySize = getStylesBySize$d(size, theme);
|
|
3624
|
+
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': {
|
|
3625
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3626
|
+
color: theme.colors.text.disabled,
|
|
3627
|
+
cursor: 'not-allowed',
|
|
3625
3628
|
} }) }, { children: text }), void 0));
|
|
3626
3629
|
};
|
|
3627
3630
|
|
|
@@ -3629,16 +3632,16 @@ var ButtonPrimary = function (_a) {
|
|
|
3629
3632
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
|
|
3630
3633
|
var theme = useTheme();
|
|
3631
3634
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
|
|
3632
|
-
backgroundColor: theme.
|
|
3633
|
-
color: theme.
|
|
3634
|
-
border:
|
|
3635
|
+
backgroundColor: theme.component.button.primary.active.backgroundColor,
|
|
3636
|
+
color: theme.component.button.primary.active.color,
|
|
3637
|
+
border: theme.component.button.border,
|
|
3635
3638
|
'&:hover': {
|
|
3636
|
-
backgroundColor: theme.
|
|
3637
|
-
color: theme.
|
|
3639
|
+
backgroundColor: theme.component.button.primary.hover.backgroundColor,
|
|
3640
|
+
color: theme.component.button.primary.hover.color,
|
|
3638
3641
|
},
|
|
3639
3642
|
'&:disabled': {
|
|
3640
|
-
backgroundColor: theme.
|
|
3641
|
-
color: theme.
|
|
3643
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3644
|
+
color: theme.colors.text.disabled,
|
|
3642
3645
|
},
|
|
3643
3646
|
}, text: text }, void 0));
|
|
3644
3647
|
};
|
|
@@ -3647,15 +3650,15 @@ var ButtonSecondary = function (_a) {
|
|
|
3647
3650
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size;
|
|
3648
3651
|
var theme = useTheme();
|
|
3649
3652
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
|
|
3650
|
-
backgroundColor: theme.
|
|
3651
|
-
color: theme.
|
|
3652
|
-
border:
|
|
3653
|
+
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3654
|
+
color: theme.component.button.secondary.active.color,
|
|
3655
|
+
border: theme.component.button.border,
|
|
3653
3656
|
'&:hover': {
|
|
3654
|
-
backgroundColor: theme.
|
|
3657
|
+
backgroundColor: theme.component.button.secondary.hover.backgroundColor,
|
|
3655
3658
|
},
|
|
3656
3659
|
'&:disabled': {
|
|
3657
|
-
backgroundColor: theme.
|
|
3658
|
-
color: theme.
|
|
3660
|
+
backgroundColor: theme.colors.neutral50,
|
|
3661
|
+
color: theme.colors.neutral250,
|
|
3659
3662
|
},
|
|
3660
3663
|
}, text: text }, void 0));
|
|
3661
3664
|
};
|
|
@@ -3664,15 +3667,17 @@ var ButtonSecondaryOutline = function (_a) {
|
|
|
3664
3667
|
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;
|
|
3665
3668
|
var theme = useTheme();
|
|
3666
3669
|
return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, className: className, css: {
|
|
3667
|
-
backgroundColor: theme.
|
|
3668
|
-
color: theme.
|
|
3669
|
-
border: "1px solid " + theme.
|
|
3670
|
+
backgroundColor: theme.component.button.secondary.active.color,
|
|
3671
|
+
color: theme.component.button.secondary.active.backgroundColor,
|
|
3672
|
+
border: "1px solid " + theme.component.button.secondary.active.backgroundColor,
|
|
3670
3673
|
'&:hover': {
|
|
3671
|
-
backgroundColor: theme.
|
|
3674
|
+
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
3675
|
+
color: theme.component.button.secondary.active.color,
|
|
3672
3676
|
},
|
|
3673
3677
|
'&:disabled': {
|
|
3674
|
-
backgroundColor: theme.
|
|
3675
|
-
|
|
3678
|
+
backgroundColor: theme.colors.background.disabled,
|
|
3679
|
+
color: theme.colors.text.disabled,
|
|
3680
|
+
border: 'none',
|
|
3676
3681
|
},
|
|
3677
3682
|
}, text: text }, void 0));
|
|
3678
3683
|
};
|
|
@@ -5998,7 +6003,7 @@ function BaseSelectOption(_a) {
|
|
|
5998
6003
|
return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5999
6004
|
}
|
|
6000
6005
|
|
|
6001
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
6006
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
6002
6007
|
function BaseSelect(_a) {
|
|
6003
6008
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
6004
6009
|
return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -6008,35 +6013,35 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
6008
6013
|
Options: BaseSelectOptions,
|
|
6009
6014
|
Option: BaseSelectOption,
|
|
6010
6015
|
});
|
|
6011
|
-
var templateObject_1$
|
|
6016
|
+
var templateObject_1$L;
|
|
6012
6017
|
|
|
6013
6018
|
var CustomButton = newStyled.button(function (_a) {
|
|
6014
6019
|
var theme = _a.theme, wide = _a.wide;
|
|
6015
6020
|
return ({
|
|
6016
|
-
border: "0.063rem solid " + theme.
|
|
6021
|
+
border: "0.063rem solid " + theme.colors.neutral200,
|
|
6017
6022
|
boxSizing: 'border-box',
|
|
6018
6023
|
borderRadius: '0.5rem',
|
|
6019
6024
|
display: 'flex',
|
|
6020
6025
|
flexDirection: 'row',
|
|
6021
6026
|
alignItems: 'center',
|
|
6022
|
-
background: theme.
|
|
6027
|
+
background: theme.colors.white,
|
|
6023
6028
|
cursor: 'pointer',
|
|
6024
6029
|
fontWeight: 600,
|
|
6025
6030
|
padding: '0.5rem 0.75rem 0.5rem 1rem',
|
|
6026
|
-
color: theme.
|
|
6027
|
-
fill: theme.
|
|
6031
|
+
color: theme.colors.neutral700,
|
|
6032
|
+
fill: theme.colors.neutral700,
|
|
6028
6033
|
width: wide ? '100%' : 'auto',
|
|
6029
6034
|
justifyContent: wide ? 'space-between' : 'center',
|
|
6030
6035
|
svg: {
|
|
6031
6036
|
marginLeft: '0.75rem',
|
|
6032
6037
|
},
|
|
6033
6038
|
'&:disabled': {
|
|
6034
|
-
borderColor: theme.
|
|
6035
|
-
color: theme.
|
|
6039
|
+
borderColor: theme.colors.neutral200,
|
|
6040
|
+
color: theme.colors.neutral250,
|
|
6036
6041
|
cursor: 'not-allowed',
|
|
6037
6042
|
'*': {
|
|
6038
|
-
color: theme.
|
|
6039
|
-
fill: theme.
|
|
6043
|
+
color: theme.colors.neutral250,
|
|
6044
|
+
fill: theme.colors.neutral250,
|
|
6040
6045
|
cursor: 'not-allowed',
|
|
6041
6046
|
},
|
|
6042
6047
|
},
|
|
@@ -6067,15 +6072,15 @@ var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
|
6067
6072
|
display: 'flex',
|
|
6068
6073
|
flexDirection: 'column',
|
|
6069
6074
|
alignItems: 'flex-start',
|
|
6070
|
-
border: "0.063rem solid " + theme.
|
|
6075
|
+
border: "0.063rem solid " + theme.colors.neutral550,
|
|
6071
6076
|
boxSizing: 'border-box',
|
|
6072
6077
|
borderRadius: '0.5rem',
|
|
6073
|
-
background: theme.
|
|
6078
|
+
background: theme.colors.white,
|
|
6074
6079
|
padding: 0,
|
|
6075
6080
|
marginTop: '0.125rem',
|
|
6076
6081
|
position: 'absolute',
|
|
6077
6082
|
width: '100%',
|
|
6078
|
-
color: theme.
|
|
6083
|
+
color: theme.colors.neutral700,
|
|
6079
6084
|
});
|
|
6080
6085
|
});
|
|
6081
6086
|
var BaseDropdownOptions = function (_a) {
|
|
@@ -6099,7 +6104,7 @@ var CustomOption = newStyled.li(function (_a) {
|
|
|
6099
6104
|
width: '100%',
|
|
6100
6105
|
boxSizing: 'border-box',
|
|
6101
6106
|
fontWeight: selected ? 600 : 'inherit',
|
|
6102
|
-
backgroundColor: active ? theme.
|
|
6107
|
+
backgroundColor: active ? theme.colors.neutral10 : 'inherit',
|
|
6103
6108
|
});
|
|
6104
6109
|
});
|
|
6105
6110
|
function BaseDropdownOption(_a) {
|
|
@@ -6119,7 +6124,7 @@ function BaseDropdown(_a) {
|
|
|
6119
6124
|
position: 'relative',
|
|
6120
6125
|
fontSize: '0.88rem',
|
|
6121
6126
|
lineHeight: '1.125rem',
|
|
6122
|
-
color: theme.
|
|
6127
|
+
color: theme.colors.neutral700,
|
|
6123
6128
|
}, disabled: disabled }, { children: children }), void 0));
|
|
6124
6129
|
}
|
|
6125
6130
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
@@ -6166,7 +6171,7 @@ var SimpleSelector = function (_a) {
|
|
|
6166
6171
|
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': {
|
|
6167
6172
|
fontWeight: 600,
|
|
6168
6173
|
}, '&:disabled': {
|
|
6169
|
-
color: theme.
|
|
6174
|
+
color: theme.colors.neutral250,
|
|
6170
6175
|
cursor: 'not-allowed',
|
|
6171
6176
|
} }) }, { children: text }), void 0));
|
|
6172
6177
|
};
|
|
@@ -6175,20 +6180,20 @@ var SelectorSecondary = function (_a) {
|
|
|
6175
6180
|
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
|
|
6176
6181
|
var theme = useTheme();
|
|
6177
6182
|
var stylesByActive = active
|
|
6178
|
-
? { background: theme.
|
|
6179
|
-
: { background: theme.
|
|
6180
|
-
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.
|
|
6181
|
-
background: theme.
|
|
6182
|
-
color: theme.
|
|
6183
|
+
? { background: theme.colors.secondary, color: theme.colors.white }
|
|
6184
|
+
: { background: theme.colors.white, color: theme.colors.secondary };
|
|
6185
|
+
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': {
|
|
6186
|
+
background: theme.colors.secondary,
|
|
6187
|
+
color: theme.colors.white,
|
|
6183
6188
|
}, '&:disabled': {
|
|
6184
6189
|
border: 'inherit',
|
|
6185
|
-
background: theme.
|
|
6186
|
-
color: theme.
|
|
6190
|
+
background: theme.colors.neutral50,
|
|
6191
|
+
color: theme.colors.neutral250,
|
|
6187
6192
|
} }) }, void 0));
|
|
6188
6193
|
};
|
|
6189
6194
|
|
|
6190
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
6191
|
-
var SizeParagraph = newStyled.p(templateObject_2$
|
|
6195
|
+
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"])));
|
|
6196
|
+
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"])));
|
|
6192
6197
|
var getInitialValue$2 = function (options, selectedValue) {
|
|
6193
6198
|
if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
|
|
6194
6199
|
return selectedValue;
|
|
@@ -6213,7 +6218,7 @@ var SizeSelector = function (_a) {
|
|
|
6213
6218
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
|
|
6214
6219
|
}) }, void 0)] }, void 0));
|
|
6215
6220
|
};
|
|
6216
|
-
var templateObject_1$
|
|
6221
|
+
var templateObject_1$K, templateObject_2$x;
|
|
6217
6222
|
|
|
6218
6223
|
var getStylesBySize$b = function (size) {
|
|
6219
6224
|
switch (size) {
|
|
@@ -6234,23 +6239,23 @@ var getStylesBySize$b = function (size) {
|
|
|
6234
6239
|
};
|
|
6235
6240
|
var textButtonStyles$1 = function (theme, size) {
|
|
6236
6241
|
var stylesBySize = getStylesBySize$b(size);
|
|
6237
|
-
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.
|
|
6242
|
+
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.neutral550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
|
|
6238
6243
|
textDecorationLine: 'underline',
|
|
6239
6244
|
}, '&:disabled': {
|
|
6240
|
-
color: theme.
|
|
6245
|
+
color: theme.colors.neutral250,
|
|
6241
6246
|
textDecorationLine: 'none',
|
|
6242
6247
|
} });
|
|
6243
6248
|
};
|
|
6244
6249
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6245
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6250
|
+
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));
|
|
6246
6251
|
};
|
|
6247
6252
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6248
6253
|
if (disabled)
|
|
6249
|
-
return theme.
|
|
6254
|
+
return theme.colors.neutral250;
|
|
6250
6255
|
else if (iconColor)
|
|
6251
6256
|
return iconColor;
|
|
6252
6257
|
else
|
|
6253
|
-
return theme.
|
|
6258
|
+
return theme.colors.neutral550;
|
|
6254
6259
|
};
|
|
6255
6260
|
var TextButton = function (_a) {
|
|
6256
6261
|
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 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
@@ -6258,16 +6263,16 @@ var TextButton = function (_a) {
|
|
|
6258
6263
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6259
6264
|
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));
|
|
6260
6265
|
};
|
|
6261
|
-
var templateObject_1$
|
|
6266
|
+
var templateObject_1$J;
|
|
6262
6267
|
|
|
6263
|
-
var Container$
|
|
6264
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6268
|
+
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"])));
|
|
6269
|
+
var P$2 = newStyled.p(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6265
6270
|
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"])));
|
|
6266
6271
|
var SizeFitGuide = function (_a) {
|
|
6267
6272
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6268
|
-
return (jsxs$1(Container$
|
|
6273
|
+
return (jsxs$1(Container$t, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6269
6274
|
};
|
|
6270
|
-
var templateObject_1$
|
|
6275
|
+
var templateObject_1$I, templateObject_2$w, templateObject_3$j;
|
|
6271
6276
|
|
|
6272
6277
|
var getStylesBySize$a = function (size) {
|
|
6273
6278
|
switch (size) {
|
|
@@ -6297,7 +6302,7 @@ var getStylesBySize$a = function (size) {
|
|
|
6297
6302
|
};
|
|
6298
6303
|
}
|
|
6299
6304
|
};
|
|
6300
|
-
var Container$
|
|
6305
|
+
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) {
|
|
6301
6306
|
var backgroundColor = _a.backgroundColor;
|
|
6302
6307
|
return backgroundColor;
|
|
6303
6308
|
}, function (_a) {
|
|
@@ -6319,7 +6324,7 @@ var Container$r = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
6319
6324
|
var size = _a.size;
|
|
6320
6325
|
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6321
6326
|
});
|
|
6322
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6327
|
+
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) {
|
|
6323
6328
|
var textColor = _a.textColor;
|
|
6324
6329
|
return textColor;
|
|
6325
6330
|
}, function (_a) {
|
|
@@ -6334,9 +6339,9 @@ var H3$2 = newStyled.h3(templateObject_2$t || (templateObject_2$t = __makeTempla
|
|
|
6334
6339
|
var DiscountTag = function (_a) {
|
|
6335
6340
|
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 ? ComponentSize.Medium : _e;
|
|
6336
6341
|
var theme = useTheme();
|
|
6337
|
-
return (jsx$1(Container$
|
|
6342
|
+
return (jsx$1(Container$s, __assign({ backgroundColor: disabled ? theme.colors.neutral50 : backgroundColor, borderColor: disabled ? theme.colors.neutral50 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.neutral250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6338
6343
|
};
|
|
6339
|
-
var templateObject_1$
|
|
6344
|
+
var templateObject_1$H, templateObject_2$v;
|
|
6340
6345
|
|
|
6341
6346
|
var getStylesBySize$9 = function (size) {
|
|
6342
6347
|
switch (size) {
|
|
@@ -6360,8 +6365,8 @@ var getStylesBySize$9 = function (size) {
|
|
|
6360
6365
|
};
|
|
6361
6366
|
}
|
|
6362
6367
|
};
|
|
6363
|
-
var Container$
|
|
6364
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6368
|
+
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"])));
|
|
6369
|
+
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) {
|
|
6365
6370
|
var weight = _a.weight;
|
|
6366
6371
|
return (weight ? weight : '400');
|
|
6367
6372
|
}, function (_a) {
|
|
@@ -6391,28 +6396,28 @@ var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __ma
|
|
|
6391
6396
|
var PriceLabel = function (_a) {
|
|
6392
6397
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6393
6398
|
var theme = useTheme();
|
|
6394
|
-
return (jsxs$1(Container$
|
|
6399
|
+
return (jsxs$1(Container$r, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.secondary, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.neutral400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6395
6400
|
};
|
|
6396
|
-
var templateObject_1$
|
|
6401
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$i;
|
|
6397
6402
|
|
|
6398
6403
|
var OneColorSelector = function (_a) {
|
|
6399
6404
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6400
6405
|
var theme = useTheme();
|
|
6401
|
-
var outerBorder = selected ? theme.
|
|
6406
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6402
6407
|
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6403
6408
|
};
|
|
6404
6409
|
|
|
6405
6410
|
var ThreeColorSelector = function (_a) {
|
|
6406
6411
|
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6407
6412
|
var theme = useTheme();
|
|
6408
|
-
var outerBorder = selected ? theme.
|
|
6413
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6409
6414
|
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6410
6415
|
};
|
|
6411
6416
|
|
|
6412
6417
|
var TwoColorSelector = function (_a) {
|
|
6413
6418
|
var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6414
6419
|
var theme = useTheme();
|
|
6415
|
-
var outerBorder = selected ? theme.
|
|
6420
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'none';
|
|
6416
6421
|
return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
|
|
6417
6422
|
};
|
|
6418
6423
|
|
|
@@ -6429,11 +6434,11 @@ var ColorSelector = function (_a) {
|
|
|
6429
6434
|
var OutOfStock = function (_a) {
|
|
6430
6435
|
var title = _a.title;
|
|
6431
6436
|
var theme = useTheme();
|
|
6432
|
-
return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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.
|
|
6437
|
+
return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.neutral300, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6433
6438
|
};
|
|
6434
6439
|
|
|
6435
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6436
|
-
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$
|
|
6440
|
+
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"])));
|
|
6441
|
+
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6437
6442
|
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"])));
|
|
6438
6443
|
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6439
6444
|
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"])));
|
|
@@ -6454,20 +6459,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6454
6459
|
Option: Option,
|
|
6455
6460
|
OptionsContainer: OptionsContainer,
|
|
6456
6461
|
});
|
|
6457
|
-
var templateObject_1$
|
|
6462
|
+
var templateObject_1$F, templateObject_2$t, templateObject_3$h, templateObject_4$d, templateObject_5$7;
|
|
6458
6463
|
|
|
6459
|
-
var Container$
|
|
6464
|
+
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) {
|
|
6460
6465
|
var borderColor = _a.borderColor;
|
|
6461
6466
|
return borderColor;
|
|
6462
6467
|
});
|
|
6463
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
6468
|
+
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"])));
|
|
6464
6469
|
var PatternSelector = function (_a) {
|
|
6465
6470
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6466
6471
|
var theme = useTheme();
|
|
6467
|
-
var outerBorder = selected ? theme.
|
|
6468
|
-
return (jsx$1(Container$
|
|
6472
|
+
var outerBorder = selected ? theme.colors.neutral550 : 'transparent';
|
|
6473
|
+
return (jsx$1(Container$q, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6469
6474
|
};
|
|
6470
|
-
var templateObject_1$
|
|
6475
|
+
var templateObject_1$E, templateObject_2$s;
|
|
6471
6476
|
|
|
6472
6477
|
var renderOptions$1 = function (options) {
|
|
6473
6478
|
if (options.length)
|
|
@@ -6533,38 +6538,38 @@ var MultiColorPicker = function (_a) {
|
|
|
6533
6538
|
return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6534
6539
|
};
|
|
6535
6540
|
|
|
6536
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
6541
|
+
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) {
|
|
6537
6542
|
var selected = _a.selected, theme = _a.theme;
|
|
6538
|
-
return selected ? "0.063rem solid " + theme.
|
|
6543
|
+
return selected ? "0.063rem solid " + theme.colors.neutral700 : 'inherit';
|
|
6539
6544
|
});
|
|
6540
6545
|
var ImageSmallPreview = function (_a) {
|
|
6541
6546
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className;
|
|
6542
6547
|
var theme = useTheme();
|
|
6543
6548
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6544
6549
|
};
|
|
6545
|
-
var templateObject_1$
|
|
6550
|
+
var templateObject_1$D;
|
|
6546
6551
|
|
|
6547
|
-
var Container$
|
|
6548
|
-
var Button$3 = newStyled.button(templateObject_2$
|
|
6552
|
+
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"])));
|
|
6553
|
+
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"])));
|
|
6549
6554
|
var ImagePreviewList = function (_a) {
|
|
6550
6555
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6551
|
-
return (jsx(Container$
|
|
6556
|
+
return (jsx(Container$p, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6552
6557
|
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));
|
|
6553
6558
|
}) }), void 0));
|
|
6554
6559
|
};
|
|
6555
|
-
var templateObject_1$
|
|
6560
|
+
var templateObject_1$C, templateObject_2$r;
|
|
6556
6561
|
|
|
6557
|
-
var Container$
|
|
6558
|
-
var Image$1 = newStyled.img(templateObject_2$
|
|
6562
|
+
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"])));
|
|
6563
|
+
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"])));
|
|
6559
6564
|
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"])));
|
|
6560
6565
|
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"])));
|
|
6561
6566
|
var ImageProductWithTags = function (_a) {
|
|
6562
6567
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6563
|
-
return (jsxs$1(Container$
|
|
6568
|
+
return (jsxs$1(Container$o, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6564
6569
|
};
|
|
6565
|
-
var templateObject_1$
|
|
6570
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$g, templateObject_4$c;
|
|
6566
6571
|
|
|
6567
|
-
var Container$
|
|
6572
|
+
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"])));
|
|
6568
6573
|
var ProductGallery = function (_a) {
|
|
6569
6574
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6570
6575
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6572,11 +6577,11 @@ var ProductGallery = function (_a) {
|
|
|
6572
6577
|
useEffect(function () {
|
|
6573
6578
|
setSelectedImage(initialValue);
|
|
6574
6579
|
}, [initialValue]);
|
|
6575
|
-
return (jsxs$1(Container$
|
|
6580
|
+
return (jsxs$1(Container$n, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6576
6581
|
setSelectedImage(value);
|
|
6577
6582
|
} }, void 0), jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6578
6583
|
};
|
|
6579
|
-
var templateObject_1$
|
|
6584
|
+
var templateObject_1$A;
|
|
6580
6585
|
|
|
6581
6586
|
var getStylesBySize$8 = function (size) {
|
|
6582
6587
|
switch (size) {
|
|
@@ -6651,34 +6656,34 @@ var Rating = function (_a) {
|
|
|
6651
6656
|
return (jsxs("div", __assign({ css: {
|
|
6652
6657
|
display: 'flex',
|
|
6653
6658
|
alignItems: 'center',
|
|
6654
|
-
} }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.
|
|
6659
|
+
} }, { children: [jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.primary }, void 0), jsxs("h1", __assign({ css: {
|
|
6655
6660
|
margin: '0',
|
|
6656
6661
|
fontStyle: 'normal',
|
|
6657
6662
|
fontWeight: 'normal',
|
|
6658
|
-
color: theme.
|
|
6663
|
+
color: theme.colors.secondary,
|
|
6659
6664
|
fontSize: getStylesBySize$7(size).fontSize,
|
|
6660
6665
|
lineHeight: getStylesBySize$7(size).lineHeight,
|
|
6661
6666
|
marginLeft: getStylesBySize$7(size).marginLeft,
|
|
6662
6667
|
} }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
6663
6668
|
};
|
|
6664
6669
|
|
|
6665
|
-
var Container$
|
|
6666
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6670
|
+
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"])));
|
|
6671
|
+
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; });
|
|
6667
6672
|
var textButtonStyles = function (theme) { return ({
|
|
6668
6673
|
border: 'none',
|
|
6669
6674
|
background: 'transparent',
|
|
6670
6675
|
padding: 0,
|
|
6671
6676
|
textDecoration: 'underline',
|
|
6672
|
-
color: theme.
|
|
6677
|
+
color: theme.colors.neutral400,
|
|
6673
6678
|
lineHeight: '1.13rem',
|
|
6674
6679
|
cursor: 'pointer',
|
|
6675
6680
|
}); };
|
|
6676
6681
|
var FitPredictor = function (_a) {
|
|
6677
6682
|
var onClick = _a.onClick;
|
|
6678
6683
|
var theme = useTheme();
|
|
6679
|
-
return (jsxs(Container$
|
|
6684
|
+
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));
|
|
6680
6685
|
};
|
|
6681
|
-
var templateObject_1$
|
|
6686
|
+
var templateObject_1$z, templateObject_2$p;
|
|
6682
6687
|
|
|
6683
6688
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6684
6689
|
var color = _a.color;
|
|
@@ -6692,7 +6697,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6692
6697
|
margin: '0.938rem 4.188rem',
|
|
6693
6698
|
});
|
|
6694
6699
|
});
|
|
6695
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6700
|
+
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) {
|
|
6696
6701
|
var backgroundColor = _a.backgroundColor;
|
|
6697
6702
|
return backgroundColor;
|
|
6698
6703
|
}, function (_a) {
|
|
@@ -6715,7 +6720,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6715
6720
|
position: 'absolute',
|
|
6716
6721
|
});
|
|
6717
6722
|
});
|
|
6718
|
-
var Container$
|
|
6723
|
+
var Container$l = newStyled.div(function (_a) {
|
|
6719
6724
|
var widthAuto = _a.widthAuto;
|
|
6720
6725
|
return ({
|
|
6721
6726
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -6729,9 +6734,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
6729
6734
|
var ProgressBar = function (_a) {
|
|
6730
6735
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
6731
6736
|
var theme = useTheme();
|
|
6732
|
-
return (jsxs$1(Container$
|
|
6737
|
+
return (jsxs$1(Container$l, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.neutral100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.secondary }, { children: description }), void 0)] }), void 0));
|
|
6733
6738
|
};
|
|
6734
|
-
var templateObject_1$
|
|
6739
|
+
var templateObject_1$y;
|
|
6735
6740
|
|
|
6736
6741
|
var getStylesBySize$6 = function (size) {
|
|
6737
6742
|
switch (size) {
|
|
@@ -6752,7 +6757,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6752
6757
|
};
|
|
6753
6758
|
}
|
|
6754
6759
|
};
|
|
6755
|
-
var Container$
|
|
6760
|
+
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) {
|
|
6756
6761
|
var backgroundColor = _a.backgroundColor;
|
|
6757
6762
|
return backgroundColor;
|
|
6758
6763
|
}, function (_a) {
|
|
@@ -6780,9 +6785,9 @@ var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __ma
|
|
|
6780
6785
|
var IconButton = function (_a) {
|
|
6781
6786
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
6782
6787
|
var theme = useTheme();
|
|
6783
|
-
return (jsx$1(Container$
|
|
6788
|
+
return (jsx$1(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));
|
|
6784
6789
|
};
|
|
6785
|
-
var templateObject_1$
|
|
6790
|
+
var templateObject_1$x;
|
|
6786
6791
|
|
|
6787
6792
|
var TooltipArrow = function (_a) {
|
|
6788
6793
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6862,7 +6867,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6862
6867
|
}
|
|
6863
6868
|
};
|
|
6864
6869
|
|
|
6865
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6870
|
+
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) {
|
|
6866
6871
|
var position = _a.position;
|
|
6867
6872
|
return getWrapperFlexDirection(position);
|
|
6868
6873
|
});
|
|
@@ -6886,7 +6891,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
6886
6891
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6887
6892
|
return actual === expected ? margin : '0';
|
|
6888
6893
|
};
|
|
6889
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
6894
|
+
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) {
|
|
6890
6895
|
var borderColor = _a.borderColor;
|
|
6891
6896
|
return borderColor;
|
|
6892
6897
|
});
|
|
@@ -6910,7 +6915,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
6910
6915
|
return color;
|
|
6911
6916
|
});
|
|
6912
6917
|
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"])));
|
|
6913
|
-
var templateObject_1$
|
|
6918
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
6914
6919
|
|
|
6915
6920
|
var Tooltip = function (_a) {
|
|
6916
6921
|
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;
|
|
@@ -6927,7 +6932,7 @@ var Tooltip = function (_a) {
|
|
|
6927
6932
|
var ref = tooltipRef.current;
|
|
6928
6933
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6929
6934
|
}, [tooltipRef]);
|
|
6930
|
-
return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.
|
|
6935
|
+
return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.neutral200 }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$3, { children: React.createElement(header.Icon, { fill: theme.colors.secondary }) }, void 0), jsx$1(Title$3, __assign({ color: theme.colors.secondary }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.colors.secondary, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.neutral10 }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
6931
6936
|
};
|
|
6932
6937
|
|
|
6933
6938
|
var AccordionButton = function (_a) {
|
|
@@ -6942,7 +6947,7 @@ var AccordionButton = function (_a) {
|
|
|
6942
6947
|
alignItems: 'center',
|
|
6943
6948
|
fontWeight: 700,
|
|
6944
6949
|
padding: 0,
|
|
6945
|
-
color: disabled ? theme.
|
|
6950
|
+
color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6946
6951
|
}, className: className, as: as }, { children: children }), void 0));
|
|
6947
6952
|
};
|
|
6948
6953
|
|
|
@@ -6968,15 +6973,15 @@ var AccordionControlButton = function (_a) {
|
|
|
6968
6973
|
var theme = useTheme();
|
|
6969
6974
|
var controlIcon = disabled ? openIcon : open ? closeIcon : openIcon;
|
|
6970
6975
|
return (jsxs(Accordion$1.Button, __assign({ css: {
|
|
6971
|
-
color: disabled ? theme.
|
|
6976
|
+
color: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6972
6977
|
'svg path': {
|
|
6973
|
-
fill: disabled ? theme.
|
|
6978
|
+
fill: disabled ? theme.colors.neutral250 : theme.colors.secondary,
|
|
6974
6979
|
},
|
|
6975
6980
|
}, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
|
|
6976
6981
|
};
|
|
6977
6982
|
|
|
6978
|
-
var Container$
|
|
6979
|
-
border: "1px solid " + props.theme.
|
|
6983
|
+
var Container$j = newStyled(Accordion$1)(function (props) { return ({
|
|
6984
|
+
border: "1px solid " + props.theme.colors.neutral100,
|
|
6980
6985
|
padding: '1.25rem 2rem',
|
|
6981
6986
|
}); });
|
|
6982
6987
|
var Button$2 = newStyled(AccordionControlButton)(function () { return ({
|
|
@@ -6997,15 +7002,15 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
6997
7002
|
var AccordionBox = function (_a) {
|
|
6998
7003
|
var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
6999
7004
|
var theme = useTheme();
|
|
7000
|
-
return (jsx$1(Container$
|
|
7005
|
+
return (jsx$1(Container$j, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7001
7006
|
var open = _a.open;
|
|
7002
7007
|
var showPanel = open && !disabled;
|
|
7003
|
-
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.
|
|
7008
|
+
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.colors.neutral700 }, void 0) }, { children: title }), void 0), showPanel && jsx$1(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7004
7009
|
} }), void 0));
|
|
7005
7010
|
};
|
|
7006
7011
|
|
|
7007
|
-
var Container$
|
|
7008
|
-
borderTop: "1px solid " + props.theme.
|
|
7012
|
+
var Container$i = newStyled(Accordion$1)(function (props) { return ({
|
|
7013
|
+
borderTop: "1px solid " + props.theme.colors.neutral100,
|
|
7009
7014
|
padding: '0.625rem 0',
|
|
7010
7015
|
}); });
|
|
7011
7016
|
var Button$1 = newStyled(AccordionControlButton)(function () { return ({
|
|
@@ -7021,10 +7026,10 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
7021
7026
|
var AccordionIcon = function (_a) {
|
|
7022
7027
|
var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
7023
7028
|
var theme = useTheme();
|
|
7024
|
-
return (jsx$1(Container$
|
|
7029
|
+
return (jsx$1(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7025
7030
|
var open = _a.open;
|
|
7026
7031
|
var showPanel = open && !disabled;
|
|
7027
|
-
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.
|
|
7032
|
+
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.colors.neutral700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.colors.neutral700 }, void 0), disabled: disabled }, { children: jsxs$1("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsx$1(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7028
7033
|
} }), void 0));
|
|
7029
7034
|
};
|
|
7030
7035
|
|
|
@@ -7083,8 +7088,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
7083
7088
|
};
|
|
7084
7089
|
}
|
|
7085
7090
|
};
|
|
7086
|
-
var Container$
|
|
7087
|
-
var CustomCheckbox = newStyled.div(templateObject_2$
|
|
7091
|
+
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"])));
|
|
7092
|
+
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) {
|
|
7088
7093
|
var color = _a.color;
|
|
7089
7094
|
return color;
|
|
7090
7095
|
}, function (_a) {
|
|
@@ -7144,9 +7149,9 @@ var Checkbox = function (_a) {
|
|
|
7144
7149
|
return !checked;
|
|
7145
7150
|
});
|
|
7146
7151
|
};
|
|
7147
|
-
return (jsxs$1(Container$
|
|
7152
|
+
return (jsxs$1(Container$h, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.colors.neutral250 : theme.colors.neutral700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(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));
|
|
7148
7153
|
};
|
|
7149
|
-
var templateObject_1$
|
|
7154
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$e, templateObject_4$a;
|
|
7150
7155
|
|
|
7151
7156
|
var getStylesBySize$4 = function (size) {
|
|
7152
7157
|
switch (size) {
|
|
@@ -7191,8 +7196,8 @@ var getStylesBySize$4 = function (size) {
|
|
|
7191
7196
|
};
|
|
7192
7197
|
}
|
|
7193
7198
|
};
|
|
7194
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7195
|
-
var Container$
|
|
7199
|
+
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"])));
|
|
7200
|
+
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) {
|
|
7196
7201
|
var _b;
|
|
7197
7202
|
var size = _a.size;
|
|
7198
7203
|
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
@@ -7248,9 +7253,9 @@ var RadioInput = function (_a) {
|
|
|
7248
7253
|
var value = event.currentTarget.value;
|
|
7249
7254
|
onChange({ value: value, label: label });
|
|
7250
7255
|
};
|
|
7251
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
7256
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$g, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.colors.neutral700, disabledColor: theme.colors.neutral250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(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));
|
|
7252
7257
|
};
|
|
7253
|
-
var templateObject_1$
|
|
7258
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
7254
7259
|
|
|
7255
7260
|
var RadioGroupInput = function (_a) {
|
|
7256
7261
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7264,8 +7269,8 @@ var RadioGroupInput = function (_a) {
|
|
|
7264
7269
|
}) }), void 0));
|
|
7265
7270
|
};
|
|
7266
7271
|
|
|
7267
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7268
|
-
var Container$
|
|
7272
|
+
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"])));
|
|
7273
|
+
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"])));
|
|
7269
7274
|
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) {
|
|
7270
7275
|
var color = _a.color;
|
|
7271
7276
|
return color;
|
|
@@ -7279,32 +7284,32 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
|
|
|
7279
7284
|
var Minimalistic = function (_a) {
|
|
7280
7285
|
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;
|
|
7281
7286
|
var theme = useTheme();
|
|
7282
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
7287
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$f, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.colors.secondary, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$f, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.colors.secondary }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7283
7288
|
};
|
|
7284
|
-
var templateObject_1$
|
|
7289
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$c;
|
|
7285
7290
|
|
|
7286
|
-
var Container$
|
|
7287
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7291
|
+
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"])));
|
|
7292
|
+
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; });
|
|
7288
7293
|
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; });
|
|
7289
7294
|
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"])));
|
|
7290
7295
|
var Simple = function (_a) {
|
|
7291
7296
|
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;
|
|
7292
7297
|
var theme = useTheme();
|
|
7293
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
7298
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$e, { children: [jsx$1(Title$2, __assign({ color: theme.colors.secondary, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.secondary, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7294
7299
|
};
|
|
7295
|
-
var templateObject_1$
|
|
7300
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$b, templateObject_4$8;
|
|
7296
7301
|
|
|
7297
7302
|
var Bundle = {
|
|
7298
7303
|
Minimalistic: Minimalistic,
|
|
7299
7304
|
Simple: Simple,
|
|
7300
7305
|
};
|
|
7301
7306
|
|
|
7302
|
-
var Container$
|
|
7307
|
+
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"])));
|
|
7303
7308
|
var Tag = function (_a) {
|
|
7304
7309
|
var text = _a.text, className = _a.className;
|
|
7305
|
-
return jsx$1(Container$
|
|
7310
|
+
return jsx$1(Container$d, __assign({ className: className }, { children: text }), void 0);
|
|
7306
7311
|
};
|
|
7307
|
-
var templateObject_1$
|
|
7312
|
+
var templateObject_1$r;
|
|
7308
7313
|
|
|
7309
7314
|
var getStylesBySize$3 = function (size) {
|
|
7310
7315
|
switch (size) {
|
|
@@ -7338,7 +7343,7 @@ var CategoryTag = function (_a) {
|
|
|
7338
7343
|
var text = _a.text, size = _a.size, className = _a.className;
|
|
7339
7344
|
var theme = useTheme();
|
|
7340
7345
|
var stylesBySize = getStylesBySize$3(size);
|
|
7341
|
-
return (jsx(Tag, { css: __assign({ backgroundColor: theme.
|
|
7346
|
+
return (jsx(Tag, { css: __assign({ backgroundColor: theme.colors.white, fontWeight: 600, color: theme.colors.neutral700 }, stylesBySize), text: text, className: className }, void 0));
|
|
7342
7347
|
};
|
|
7343
7348
|
|
|
7344
7349
|
var getStylesBySize$2 = function (size) {
|
|
@@ -7405,50 +7410,68 @@ var Timer = function (_a) {
|
|
|
7405
7410
|
return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7406
7411
|
};
|
|
7407
7412
|
|
|
7408
|
-
var Label = newStyled.span(templateObject_1$
|
|
7413
|
+
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) {
|
|
7409
7414
|
var color = _a.color;
|
|
7410
7415
|
return color;
|
|
7411
7416
|
});
|
|
7412
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7417
|
+
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) {
|
|
7413
7418
|
var color = _a.color;
|
|
7414
7419
|
return color;
|
|
7415
7420
|
});
|
|
7416
7421
|
var InputLabel = function (_a) {
|
|
7417
7422
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
7418
7423
|
var theme = useTheme();
|
|
7419
|
-
return (jsxs$1(Label, __assign({ color: isDisabled ? theme.
|
|
7424
|
+
return (jsxs$1(Label, __assign({ color: isDisabled ? theme.colors.neutral250 : theme.colors.neutral700 }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.colors.semantic.error }, { children: "*" }), void 0)] }), void 0));
|
|
7420
7425
|
};
|
|
7421
|
-
var templateObject_1$
|
|
7426
|
+
var templateObject_1$q, templateObject_2$j;
|
|
7422
7427
|
|
|
7423
7428
|
var isEmpty = function (value) {
|
|
7424
7429
|
return value.length === 0;
|
|
7425
7430
|
};
|
|
7426
7431
|
|
|
7427
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7428
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7432
|
+
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; });
|
|
7433
|
+
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"])));
|
|
7429
7434
|
var Error$1 = function (_a) {
|
|
7430
7435
|
var error = _a.error;
|
|
7431
7436
|
var theme = useTheme();
|
|
7432
|
-
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.semantic.
|
|
7437
|
+
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.error, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.colors.semantic.error }, { children: error }), void 0)] }, void 0));
|
|
7433
7438
|
};
|
|
7434
|
-
var templateObject_1$
|
|
7439
|
+
var templateObject_1$p, templateObject_2$i;
|
|
7435
7440
|
|
|
7436
|
-
var Container$
|
|
7441
|
+
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) {
|
|
7437
7442
|
var color = _a.color;
|
|
7438
7443
|
return color;
|
|
7439
7444
|
});
|
|
7440
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7441
|
-
var
|
|
7442
|
-
return
|
|
7445
|
+
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) {
|
|
7446
|
+
var padding = _a.padding;
|
|
7447
|
+
return padding;
|
|
7448
|
+
}, function (_a) {
|
|
7449
|
+
var fontSize = _a.fontSize;
|
|
7450
|
+
return fontSize;
|
|
7451
|
+
}, function (_a) {
|
|
7452
|
+
var borderRadius = _a.borderRadius;
|
|
7453
|
+
return borderRadius;
|
|
7454
|
+
}, function (_a) {
|
|
7455
|
+
var border = _a.border;
|
|
7456
|
+
return border;
|
|
7457
|
+
}, function (_a) {
|
|
7458
|
+
var lineHeight = _a.lineHeight;
|
|
7459
|
+
return lineHeight;
|
|
7443
7460
|
}, function (_a) {
|
|
7444
7461
|
var color = _a.color;
|
|
7445
7462
|
return color;
|
|
7463
|
+
}, function (_a) {
|
|
7464
|
+
var fontWeight = _a.fontWeight;
|
|
7465
|
+
return fontWeight;
|
|
7446
7466
|
}, function (_a) {
|
|
7447
7467
|
var placeholderColor = _a.placeholderColor;
|
|
7448
7468
|
return placeholderColor;
|
|
7449
7469
|
}, function (_a) {
|
|
7450
|
-
var
|
|
7451
|
-
return
|
|
7470
|
+
var highlight = _a.highlight;
|
|
7471
|
+
return highlight;
|
|
7472
|
+
}, function (_a) {
|
|
7473
|
+
var boxShadow = _a.boxShadow;
|
|
7474
|
+
return boxShadow;
|
|
7452
7475
|
}, function (_a) {
|
|
7453
7476
|
var disabledBackgroundColor = _a.disabledBackgroundColor;
|
|
7454
7477
|
return disabledBackgroundColor;
|
|
@@ -7463,7 +7486,7 @@ var StyledInput = newStyled.input(templateObject_2$f || (templateObject_2$f = __
|
|
|
7463
7486
|
return disabledColor;
|
|
7464
7487
|
});
|
|
7465
7488
|
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"])));
|
|
7466
|
-
var templateObject_1$
|
|
7489
|
+
var templateObject_1$o, templateObject_2$h, templateObject_3$a;
|
|
7467
7490
|
|
|
7468
7491
|
var BaseInput = function (_a) {
|
|
7469
7492
|
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"]);
|
|
@@ -7491,67 +7514,82 @@ var BaseInput = function (_a) {
|
|
|
7491
7514
|
return InputValidationType.Valid;
|
|
7492
7515
|
};
|
|
7493
7516
|
var styling = {
|
|
7494
|
-
|
|
7495
|
-
|
|
7496
|
-
|
|
7497
|
-
|
|
7498
|
-
|
|
7517
|
+
border: theme.component.input.border,
|
|
7518
|
+
borderRadius: theme.component.input.borderRadius,
|
|
7519
|
+
color: theme.component.input.color,
|
|
7520
|
+
placeholderColor: theme.component.input.placeholderColor,
|
|
7521
|
+
disabledBackgroundColor: theme.colors.background.disabled,
|
|
7522
|
+
disabledColor: theme.colors.text.disabled,
|
|
7523
|
+
fontSize: theme.component.input.fontSize,
|
|
7524
|
+
fontWeight: theme.component.input.fontWeight,
|
|
7525
|
+
padding: theme.component.input.padding,
|
|
7526
|
+
lineHeight: theme.component.input.lineHeight,
|
|
7527
|
+
highlight: theme.colors.border.highlight,
|
|
7528
|
+
boxShadow: theme.component.input.boxShadow,
|
|
7499
7529
|
};
|
|
7500
|
-
return (jsxs$1(Container$
|
|
7501
|
-
? theme.
|
|
7530
|
+
return (jsxs$1(Container$c, __assign({ color: status === InputValidationType.Valid
|
|
7531
|
+
? theme.colors.neutral700
|
|
7502
7532
|
: status === InputValidationType.Error
|
|
7503
|
-
? theme.semantic.
|
|
7533
|
+
? theme.colors.semantic.error
|
|
7504
7534
|
: '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(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 === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
7505
7535
|
};
|
|
7506
7536
|
|
|
7507
|
-
var Container$
|
|
7508
|
-
var
|
|
7537
|
+
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) {
|
|
7538
|
+
var theme = _a.theme;
|
|
7539
|
+
return theme.component.inputCustom.input.borderRadius;
|
|
7540
|
+
});
|
|
7541
|
+
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) {
|
|
7542
|
+
var theme = _a.theme;
|
|
7543
|
+
return theme.component.inputCustom.button.borderRadius;
|
|
7544
|
+
});
|
|
7509
7545
|
var Custom = function (_a) {
|
|
7510
7546
|
var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
|
|
7547
|
+
var theme = useTheme();
|
|
7511
7548
|
var props = {
|
|
7512
7549
|
onClick: onClick,
|
|
7513
7550
|
text: text,
|
|
7514
7551
|
disabled: rest.disabled,
|
|
7515
7552
|
};
|
|
7516
|
-
return (jsx$1(Container$
|
|
7553
|
+
return (jsx$1(Container$b, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7517
7554
|
};
|
|
7518
|
-
var templateObject_1$
|
|
7555
|
+
var templateObject_1$n, templateObject_2$g;
|
|
7519
7556
|
|
|
7520
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7521
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7557
|
+
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"])));
|
|
7558
|
+
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"])));
|
|
7522
7559
|
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"])));
|
|
7523
7560
|
var Success = function (_a) {
|
|
7524
7561
|
var children = _a.children, successText = _a.successText;
|
|
7525
7562
|
return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
|
|
7526
7563
|
};
|
|
7527
|
-
var templateObject_1$
|
|
7564
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$9;
|
|
7528
7565
|
|
|
7529
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7530
|
-
var status = _a.status, type = _a.type;
|
|
7531
|
-
return status === InputValidationType.Empty && type === 'primary'
|
|
7566
|
+
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) {
|
|
7567
|
+
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7568
|
+
return status === InputValidationType.Empty && type === 'primary' && theme.colors.neutral400;
|
|
7532
7569
|
});
|
|
7533
7570
|
var BasePlusButton = function (_a) {
|
|
7534
7571
|
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"]);
|
|
7535
7572
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7536
|
-
var
|
|
7537
|
-
var
|
|
7573
|
+
var theme = useTheme();
|
|
7574
|
+
var SuccessComponent = (jsx$1(Success, __assign({ successText: successText }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
|
|
7575
|
+
var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7538
7576
|
return success ? SuccessComponent : Input;
|
|
7539
7577
|
};
|
|
7540
|
-
var templateObject_1$
|
|
7578
|
+
var templateObject_1$l;
|
|
7541
7579
|
|
|
7542
|
-
var Container$
|
|
7543
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7580
|
+
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"])));
|
|
7581
|
+
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; });
|
|
7544
7582
|
var BasePlusIcon = function (_a) {
|
|
7545
7583
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7546
7584
|
var theme = useTheme();
|
|
7547
7585
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7548
|
-
return (jsx$1(Container$
|
|
7549
|
-
? theme.
|
|
7586
|
+
return (jsx$1(Container$a, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
|
|
7587
|
+
? theme.colors.neutral700
|
|
7550
7588
|
: status === InputValidationType.Error
|
|
7551
|
-
? theme.semantic.
|
|
7552
|
-
: '' }, { children: createElement(Icon, { fill: theme.
|
|
7589
|
+
? theme.colors.semantic.error
|
|
7590
|
+
: '' }, { children: createElement(Icon, { fill: theme.colors.neutral250 }) }), void 0) }), void 0) }, void 0));
|
|
7553
7591
|
};
|
|
7554
|
-
var templateObject_1$
|
|
7592
|
+
var templateObject_1$k, templateObject_2$e;
|
|
7555
7593
|
|
|
7556
7594
|
var Input = {
|
|
7557
7595
|
Simple: BaseInput,
|
|
@@ -7565,7 +7603,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
|
|
|
7565
7603
|
Input: Input
|
|
7566
7604
|
});
|
|
7567
7605
|
|
|
7568
|
-
var Container$
|
|
7606
|
+
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) {
|
|
7569
7607
|
var width = _a.width;
|
|
7570
7608
|
return width;
|
|
7571
7609
|
}, function (_a) {
|
|
@@ -7581,11 +7619,11 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
7581
7619
|
var PaymentMethod = function (_a) {
|
|
7582
7620
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7583
7621
|
var theme = useTheme();
|
|
7584
|
-
return (jsx$1(Container$
|
|
7622
|
+
return (jsx$1(Container$9, __assign({ width: width, height: height, borderColor: theme.colors.neutral100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7585
7623
|
};
|
|
7586
|
-
var templateObject_1$
|
|
7624
|
+
var templateObject_1$j;
|
|
7587
7625
|
|
|
7588
|
-
var Text$1 = newStyled.h3(templateObject_1$
|
|
7626
|
+
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) {
|
|
7589
7627
|
var backgroundColor = _a.backgroundColor;
|
|
7590
7628
|
return backgroundColor;
|
|
7591
7629
|
}, function (_a) {
|
|
@@ -7595,27 +7633,27 @@ var Text$1 = newStyled.h3(templateObject_1$g || (templateObject_1$g = __makeTemp
|
|
|
7595
7633
|
var OfferBanner = function (_a) {
|
|
7596
7634
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7597
7635
|
var theme = useTheme();
|
|
7598
|
-
return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.
|
|
7636
|
+
return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.neutral700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7599
7637
|
};
|
|
7600
|
-
var templateObject_1$
|
|
7638
|
+
var templateObject_1$i;
|
|
7601
7639
|
|
|
7602
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7603
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7640
|
+
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"])));
|
|
7641
|
+
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; });
|
|
7604
7642
|
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"])));
|
|
7605
|
-
var Container$
|
|
7643
|
+
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; });
|
|
7606
7644
|
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"])));
|
|
7607
7645
|
var Total = function (_a) {
|
|
7608
7646
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7609
7647
|
var theme = useTheme();
|
|
7610
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.
|
|
7648
|
+
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.neutral550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$8, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7611
7649
|
};
|
|
7612
|
-
var templateObject_1$
|
|
7650
|
+
var templateObject_1$h, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
7613
7651
|
|
|
7614
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7652
|
+
var Wrapper$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7615
7653
|
var color = _a.color;
|
|
7616
7654
|
return color;
|
|
7617
7655
|
});
|
|
7618
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7656
|
+
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"])));
|
|
7619
7657
|
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"])));
|
|
7620
7658
|
var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7621
7659
|
var color = _a.color;
|
|
@@ -7624,27 +7662,27 @@ var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = _
|
|
|
7624
7662
|
var Subtotal = function (_a) {
|
|
7625
7663
|
var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7626
7664
|
var theme = useTheme();
|
|
7627
|
-
return (jsxs$1(Wrapper$1, __assign({ color: theme.
|
|
7665
|
+
return (jsxs$1(Wrapper$1, __assign({ color: theme.colors.neutral700, "data-testid": "subtotal-wrapper" }, { children: [jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: subtotal.label }, void 0), jsx$1(Item$1, { children: subtotal.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: shipping.label }, void 0), jsx$1(Item$1, { children: shipping.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$1, { children: taxes.label }, void 0), jsx$1(Item$1, { children: taxes.value }, void 0)] }, void 0), coupon &&
|
|
7628
7666
|
coupon.coupons.map(function (c, i) {
|
|
7629
7667
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7630
7668
|
})] }), void 0));
|
|
7631
7669
|
};
|
|
7632
|
-
var templateObject_1$
|
|
7670
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$7, templateObject_4$6;
|
|
7633
7671
|
|
|
7634
7672
|
var Totals = {
|
|
7635
7673
|
Total: Total,
|
|
7636
7674
|
Subtotal: Subtotal,
|
|
7637
7675
|
};
|
|
7638
7676
|
|
|
7639
|
-
var Container$
|
|
7640
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
7677
|
+
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; });
|
|
7678
|
+
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"])));
|
|
7641
7679
|
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; });
|
|
7642
7680
|
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; });
|
|
7643
7681
|
var Note = function (_a) {
|
|
7644
7682
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7645
|
-
return (jsxs$1(Container$
|
|
7683
|
+
return (jsxs$1(Container$7, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7646
7684
|
};
|
|
7647
|
-
var templateObject_1$
|
|
7685
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$6, templateObject_4$5;
|
|
7648
7686
|
|
|
7649
7687
|
var Breakpoints = {
|
|
7650
7688
|
desktop: 1200,
|
|
@@ -7674,8 +7712,8 @@ var useWindowDimensions = function () {
|
|
|
7674
7712
|
};
|
|
7675
7713
|
};
|
|
7676
7714
|
|
|
7677
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7678
|
-
var Line = newStyled.div(templateObject_2$
|
|
7715
|
+
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; });
|
|
7716
|
+
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; });
|
|
7679
7717
|
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'); });
|
|
7680
7718
|
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) {
|
|
7681
7719
|
return props.isMobile &&
|
|
@@ -7692,38 +7730,38 @@ var DeliveryDetails = function (_a) {
|
|
|
7692
7730
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7693
7731
|
var theme = useTheme();
|
|
7694
7732
|
var isMobile = useWindowDimensions().isMobile;
|
|
7695
|
-
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.
|
|
7733
|
+
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.secondary }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.neutral100 }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.colors.neutral700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.neutral700 }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.neutral150 }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7696
7734
|
};
|
|
7697
|
-
var templateObject_1$
|
|
7735
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7698
7736
|
|
|
7699
|
-
var Container$
|
|
7700
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7737
|
+
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"])));
|
|
7738
|
+
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; });
|
|
7701
7739
|
var ScrollToTop = function (_a) {
|
|
7702
7740
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7703
7741
|
var theme = useTheme();
|
|
7704
|
-
return (jsxs$1(Container$
|
|
7742
|
+
return (jsxs$1(Container$6, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.neutral700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.primary }, void 0)] }), void 0));
|
|
7705
7743
|
};
|
|
7706
|
-
var templateObject_1$
|
|
7744
|
+
var templateObject_1$d, templateObject_2$9;
|
|
7707
7745
|
|
|
7708
|
-
var Container$
|
|
7709
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7746
|
+
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"])));
|
|
7747
|
+
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; });
|
|
7710
7748
|
var OrderBar = function (_a) {
|
|
7711
7749
|
var message = _a.message;
|
|
7712
7750
|
var theme = useTheme();
|
|
7713
|
-
return (jsxs$1(Container$
|
|
7751
|
+
return (jsxs$1(Container$5, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.neutral700 }, { children: message }), void 0)] }, void 0));
|
|
7714
7752
|
};
|
|
7715
|
-
var templateObject_1$
|
|
7753
|
+
var templateObject_1$c, templateObject_2$8;
|
|
7716
7754
|
|
|
7717
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7718
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7755
|
+
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; });
|
|
7756
|
+
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; });
|
|
7719
7757
|
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; });
|
|
7720
7758
|
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; });
|
|
7721
7759
|
var SizeTable = function (_a) {
|
|
7722
7760
|
var headers = _a.headers, data = _a.data;
|
|
7723
7761
|
var theme = useTheme();
|
|
7724
|
-
return (jsxs$1(TableElement, __assign({ color: theme.
|
|
7762
|
+
return (jsxs$1(TableElement, __assign({ color: theme.colors.neutral700, borderColor: theme.colors.neutral100 }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.colors.neutral10 }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.colors.neutral100 }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.neutral10 }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.colors.neutral100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7725
7763
|
};
|
|
7726
|
-
var templateObject_1$
|
|
7764
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$4, templateObject_4$3;
|
|
7727
7765
|
|
|
7728
7766
|
/* eslint-disable no-param-reassign */
|
|
7729
7767
|
var index$2 = function (breakpoints) {
|
|
@@ -7811,15 +7849,15 @@ var breakpoints = {
|
|
|
7811
7849
|
};
|
|
7812
7850
|
var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
|
|
7813
7851
|
|
|
7814
|
-
var Img = newStyled.img(templateObject_1$
|
|
7852
|
+
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; });
|
|
7815
7853
|
var Image = function (_a) {
|
|
7816
7854
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7817
7855
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7818
7856
|
};
|
|
7819
|
-
var templateObject_1$
|
|
7857
|
+
var templateObject_1$a;
|
|
7820
7858
|
|
|
7821
|
-
var Container$
|
|
7822
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7859
|
+
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"])));
|
|
7860
|
+
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({
|
|
7823
7861
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7824
7862
|
}));
|
|
7825
7863
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -7853,9 +7891,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
|
|
|
7853
7891
|
var SimpleOrderItem = function (_a) {
|
|
7854
7892
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
7855
7893
|
var theme = useTheme();
|
|
7856
|
-
return (jsxs$1(Container$
|
|
7894
|
+
return (jsxs$1(Container$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.neutral700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.neutral700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7857
7895
|
};
|
|
7858
|
-
var templateObject_1$
|
|
7896
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$3;
|
|
7859
7897
|
|
|
7860
7898
|
function formatDate(date) {
|
|
7861
7899
|
var day = date.getDate();
|
|
@@ -7864,8 +7902,8 @@ function formatDate(date) {
|
|
|
7864
7902
|
return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
|
|
7865
7903
|
}
|
|
7866
7904
|
|
|
7867
|
-
var Container$
|
|
7868
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7905
|
+
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"])));
|
|
7906
|
+
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({
|
|
7869
7907
|
fontSize: ['14px', '16px'],
|
|
7870
7908
|
lineHeight: ['22px', '24px'],
|
|
7871
7909
|
}));
|
|
@@ -7888,9 +7926,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
7888
7926
|
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"])));
|
|
7889
7927
|
var Review = function (_a) {
|
|
7890
7928
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7891
|
-
return (jsxs$1(Container$
|
|
7929
|
+
return (jsxs$1(Container$3, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7892
7930
|
};
|
|
7893
|
-
var templateObject_1$
|
|
7931
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7894
7932
|
|
|
7895
7933
|
var Button = newStyled.button(function () { return ({
|
|
7896
7934
|
background: 'transparent',
|
|
@@ -12143,14 +12181,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12143
12181
|
return Slider;
|
|
12144
12182
|
}(React.Component);
|
|
12145
12183
|
|
|
12146
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12184
|
+
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) {
|
|
12147
12185
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12148
12186
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12149
12187
|
}, function (_a) {
|
|
12150
12188
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12151
12189
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12152
12190
|
});
|
|
12153
|
-
var templateObject_1$
|
|
12191
|
+
var templateObject_1$7;
|
|
12154
12192
|
|
|
12155
12193
|
var getStylesBySize$1 = function (size) {
|
|
12156
12194
|
// rem units
|
|
@@ -12200,32 +12238,35 @@ var SliderNavigation = function (_a) {
|
|
|
12200
12238
|
prevArrow: prevArrow,
|
|
12201
12239
|
adaptiveHeight: adaptiveHeight,
|
|
12202
12240
|
// eslint-disable-next-line react/display-name
|
|
12203
|
-
customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.
|
|
12241
|
+
customPaging: function (i) { return (jsx(Icon.SlideDots.SlideDot, { width: styles.dotWidth, height: styles.dotHeight, fill: activeIndex === i ? theme.colors.neutral700 : 'none' }, i)); },
|
|
12204
12242
|
afterChange: setActiveIndex,
|
|
12205
12243
|
};
|
|
12206
|
-
return (jsx("div", __assign({ css: {
|
|
12244
|
+
return (jsx("div", __assign({ css: {
|
|
12245
|
+
padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0,
|
|
12246
|
+
maxWidth: '100%',
|
|
12247
|
+
} }, { 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));
|
|
12207
12248
|
};
|
|
12208
12249
|
|
|
12209
|
-
var List = newStyled.ul(templateObject_1$
|
|
12210
|
-
var Item = newStyled.li(templateObject_2$
|
|
12250
|
+
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"])));
|
|
12251
|
+
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"])));
|
|
12211
12252
|
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"])));
|
|
12212
12253
|
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"])));
|
|
12213
12254
|
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; });
|
|
12214
12255
|
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; });
|
|
12215
|
-
var templateObject_1$
|
|
12256
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
12216
12257
|
|
|
12217
12258
|
var DropdownListIcons = function (_a) {
|
|
12218
12259
|
var items = _a.items;
|
|
12219
12260
|
var theme = useTheme();
|
|
12220
|
-
return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item, { children: [createElement(item.Icon, { fill: theme.
|
|
12261
|
+
return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item, { children: [createElement(item.Icon, { fill: theme.colors.neutral700 }), jsx$1(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12221
12262
|
};
|
|
12222
12263
|
var Dropdown = function (_a) {
|
|
12223
12264
|
var items = _a.items;
|
|
12224
12265
|
var theme = useTheme();
|
|
12225
|
-
return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.
|
|
12266
|
+
return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.neutral200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.colors.neutral200 }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
12226
12267
|
};
|
|
12227
12268
|
|
|
12228
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12269
|
+
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; });
|
|
12229
12270
|
var AmazonButton = function (_a) {
|
|
12230
12271
|
var onClick = _a.onClick;
|
|
12231
12272
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12234,7 +12275,7 @@ var PaypalButton = function (_a) {
|
|
|
12234
12275
|
var onClick = _a.onClick;
|
|
12235
12276
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12236
12277
|
};
|
|
12237
|
-
var templateObject_1$
|
|
12278
|
+
var templateObject_1$5;
|
|
12238
12279
|
|
|
12239
12280
|
var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
12240
12281
|
__proto__: null,
|
|
@@ -12242,8 +12283,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
|
12242
12283
|
PaypalButton: PaypalButton
|
|
12243
12284
|
});
|
|
12244
12285
|
|
|
12245
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12246
|
-
var Col = newStyled.div(templateObject_2$
|
|
12286
|
+
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'); });
|
|
12287
|
+
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"])));
|
|
12247
12288
|
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) {
|
|
12248
12289
|
return props.rightToLeft &&
|
|
12249
12290
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -12254,9 +12295,9 @@ var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __make
|
|
|
12254
12295
|
var CrossSellCheckbox = function (_a) {
|
|
12255
12296
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12256
12297
|
var theme = useTheme();
|
|
12257
|
-
return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.
|
|
12298
|
+
return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.neutral10, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.neutral700 }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.error }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.neutral700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12258
12299
|
};
|
|
12259
|
-
var templateObject_1$
|
|
12300
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12260
12301
|
|
|
12261
12302
|
var index = /*#__PURE__*/Object.freeze({
|
|
12262
12303
|
__proto__: null,
|
|
@@ -12271,8 +12312,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12271
12312
|
height: height,
|
|
12272
12313
|
});
|
|
12273
12314
|
});
|
|
12274
|
-
var Container$
|
|
12275
|
-
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.
|
|
12315
|
+
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"])));
|
|
12316
|
+
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; });
|
|
12276
12317
|
var getStylesBySize = function (size) {
|
|
12277
12318
|
switch (size) {
|
|
12278
12319
|
case ComponentSize.Medium:
|
|
@@ -12297,26 +12338,90 @@ var ProductItemMobile = function (_a) {
|
|
|
12297
12338
|
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;
|
|
12298
12339
|
var theme = useTheme();
|
|
12299
12340
|
var styles = getStylesBySize(size);
|
|
12300
|
-
return (jsxs(Container$
|
|
12341
|
+
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: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: 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: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12301
12342
|
};
|
|
12302
|
-
var templateObject_1$
|
|
12343
|
+
var templateObject_1$3, templateObject_2$2;
|
|
12303
12344
|
|
|
12304
|
-
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"])));
|
|
12345
|
+
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"])));
|
|
12305
12346
|
function withProductGrid(ProductItemComponent, data) {
|
|
12306
12347
|
function WithProductGrid(props) {
|
|
12307
|
-
return (jsx$1(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12348
|
+
return (jsx$1(Container$1, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12308
12349
|
}
|
|
12309
12350
|
/* istanbul ignore next */
|
|
12310
12351
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12311
12352
|
WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
|
|
12312
12353
|
return WithProductGrid;
|
|
12313
12354
|
}
|
|
12314
|
-
var templateObject_1;
|
|
12355
|
+
var templateObject_1$2;
|
|
12315
12356
|
|
|
12316
12357
|
var Collection = {
|
|
12317
12358
|
ProductItemMobile: ProductItemMobile,
|
|
12318
12359
|
withProductGrid: withProductGrid,
|
|
12319
12360
|
};
|
|
12320
12361
|
|
|
12321
|
-
|
|
12362
|
+
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) {
|
|
12363
|
+
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12364
|
+
return isOpen ? "background-color: " + backgroundColor + ";" : 'transparent';
|
|
12365
|
+
});
|
|
12366
|
+
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) {
|
|
12367
|
+
var width = _a.width;
|
|
12368
|
+
return width;
|
|
12369
|
+
}, function (_a) {
|
|
12370
|
+
var position = _a.position;
|
|
12371
|
+
return position;
|
|
12372
|
+
}, function (_a) {
|
|
12373
|
+
var backgroundColor = _a.backgroundColor;
|
|
12374
|
+
return backgroundColor;
|
|
12375
|
+
}, function (_a) {
|
|
12376
|
+
var isOpen = _a.isOpen, position = _a.position;
|
|
12377
|
+
return isOpen
|
|
12378
|
+
? 'transform: translateX(0);'
|
|
12379
|
+
: "transform: translateX(" + (position === 'left' ? '-100%' : '100%') + ");";
|
|
12380
|
+
});
|
|
12381
|
+
var Drawer = function (_a) {
|
|
12382
|
+
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;
|
|
12383
|
+
var _f = useState(isOpen), isOpenState = _f[0], setIsOpen = _f[1];
|
|
12384
|
+
var _g = useState(isOpen), isMounted = _g[0], setIsMounted = _g[1];
|
|
12385
|
+
useEffect(function () {
|
|
12386
|
+
if (isOpen === false) {
|
|
12387
|
+
setIsOpen(isOpen);
|
|
12388
|
+
var timeout_1 = setTimeout(function () {
|
|
12389
|
+
setIsMounted(isOpen);
|
|
12390
|
+
onClose && onClose();
|
|
12391
|
+
}, 300);
|
|
12392
|
+
return function () {
|
|
12393
|
+
clearTimeout(timeout_1);
|
|
12394
|
+
};
|
|
12395
|
+
}
|
|
12396
|
+
setIsMounted(isOpen);
|
|
12397
|
+
var timeout = setTimeout(function () {
|
|
12398
|
+
setIsOpen(isOpen);
|
|
12399
|
+
onOpen && onOpen();
|
|
12400
|
+
}, 100);
|
|
12401
|
+
return function () {
|
|
12402
|
+
clearTimeout(timeout);
|
|
12403
|
+
};
|
|
12404
|
+
}, [isOpen, onClose, onOpen]);
|
|
12405
|
+
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12406
|
+
};
|
|
12407
|
+
var templateObject_1$1, templateObject_2$1;
|
|
12408
|
+
|
|
12409
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12410
|
+
var size = _a.size;
|
|
12411
|
+
return (size ? size : '100%');
|
|
12412
|
+
}, function (_a) {
|
|
12413
|
+
var size = _a.size;
|
|
12414
|
+
return (size ? size : '100%');
|
|
12415
|
+
});
|
|
12416
|
+
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) {
|
|
12417
|
+
var animationDuration = _a.animationDuration;
|
|
12418
|
+
return animationDuration;
|
|
12419
|
+
});
|
|
12420
|
+
var Spinner = function (_a) {
|
|
12421
|
+
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;
|
|
12422
|
+
return (jsx$1(Container, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12423
|
+
};
|
|
12424
|
+
var templateObject_1, templateObject_2;
|
|
12425
|
+
|
|
12426
|
+
export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, TextButton, ThemeProvider, Timer, Tooltip, Totals };
|
|
12322
12427
|
//# sourceMappingURL=index.esm.js.map
|