@trafilea/afrodita-components 5.0.0-beta.294 → 5.0.0-beta.296
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 +32 -1
- package/build/index.esm.js +519 -448
- package/build/index.esm.js.map +1 -1
- package/build/index.js +519 -447
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -505,6 +505,11 @@ var ShapermintClubIcon = function (_a) {
|
|
|
505
505
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 345, viewBoxY: 26, title: "ShapermintClubIcon", fill: "none" }, { children: [jsxs$1("g", __assign$1({ clipPath: "url(#clip0_246_7947)" }, { children: [jsx$1("path", { d: "M193.143 5.00589C194.528 5.00589 195.65 3.88529 195.65 2.50295C195.65 1.12061 194.528 0 193.143 0C191.759 0 190.636 1.12061 190.636 2.50295C190.636 3.88529 191.759 5.00589 193.143 5.00589Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M122.951 20.6874H119.498L119.523 18.9251C119.242 19.7169 117.349 21.096 115.098 21.096C111.338 21.096 108.293 17.7758 108.293 13.6894C108.293 9.57737 111.312 6.20605 115.635 6.20605C119.932 6.20605 122.925 9.57737 122.925 13.6894V20.6874H122.951ZM115.635 9.60291C113.614 9.60291 111.951 11.3652 111.951 13.7149C111.951 15.988 113.614 17.6992 115.635 17.6992C117.656 17.6992 119.293 15.9369 119.293 13.7149C119.293 11.4673 117.656 9.60291 115.635 9.60291Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M188.641 20.6879H184.983V12.3107C184.983 11.4934 184.702 9.52678 182.144 9.6034C180.686 9.65448 179.534 10.8804 179.534 12.3362V20.6879H175.902V12.3107C175.902 11.5189 175.646 9.6034 173.242 9.6034C171.605 9.6034 170.479 10.7016 170.479 12.3107V20.6879H166.821V12.5661C166.821 8.93935 169.328 6.20654 173.242 6.20654C175.186 6.20654 176.746 6.97275 177.769 8.22423C178.844 6.97275 180.455 6.20654 182.297 6.20654C186.288 6.20654 188.641 8.83719 188.641 12.5661V20.6879Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M204.015 6.23193C208.005 6.23193 210.359 8.83704 210.359 12.5659V20.6877H206.701V12.4893C206.701 11.672 206.419 9.62879 203.861 9.62879C202.403 9.62879 201.252 11.0846 201.252 12.5404V20.7133H197.594V12.5659C197.62 8.9392 200.152 6.23193 204.015 6.23193Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M129.013 26.0003V19.2832C129.704 20.0238 131.188 21.0965 133.234 21.0965C136.994 21.0965 139.987 17.7507 139.987 13.6388C139.987 9.55232 136.969 6.20654 132.697 6.20654C128.374 6.20654 125.355 9.55232 125.355 13.6388V25.9747L129.013 26.0003ZM132.697 17.6997C130.676 17.6997 129.013 15.9118 129.013 13.6388C129.013 11.4423 130.676 9.6034 132.697 9.6034C134.718 9.6034 136.355 11.3401 136.355 13.6388C136.355 15.9629 134.718 17.6997 132.697 17.6997Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M106.426 20.687H102.768V12.5142C102.768 11.6969 102.512 9.62811 100.133 9.62811C98.4962 9.62811 97.3706 10.9051 97.3706 12.5142V20.687H93.7126V1.09766H97.3706V7.91691C98.0869 6.81868 99.5961 6.23125 100.824 6.23125C104.303 6.23125 106.426 8.75974 106.426 12.4886V20.687Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M220.002 20.9683C215.424 21.4025 212.635 18.8995 212.635 14.9919V2.9624H216.293V6.6402H220.002V10.0371H216.293V15.043C216.293 17.0351 217.777 17.7758 220.002 17.6736V20.9683Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M156.026 15.0179C156.077 14.6093 156.128 13.9197 156.128 13.6388C156.128 9.01597 152.752 6.20654 149.119 6.20654C145.078 6.20654 141.829 9.57786 141.829 13.6898C141.829 17.8018 145.18 21.071 149.657 21.071C151.754 21.071 154.108 20.3303 155.361 19.0278L153.57 16.3971C152.829 17.0867 151.882 17.6997 149.912 17.6997C146.715 17.6997 145.82 15.7331 145.743 14.9924H156.026V15.0179ZM145.666 12.3362C145.871 11.0592 146.996 9.6034 148.992 9.6034C151.294 9.6034 152.368 11.1614 152.496 12.3617L145.666 12.3362Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M194.959 20.6878H193.143H191.327V13.6642V6.64062H193.143H194.959V13.6642V20.6878Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M165.619 9.60342C163.291 9.19477 161.756 10.4207 161.756 12.4384V20.6879H158.098V12.4639C158.098 8.42856 160.886 5.61913 165.619 6.20656V9.60342Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M85.5016 21.5305C89.4921 21.6838 91.6665 19.283 91.6665 16.0138C91.6665 12.7447 88.2387 11.723 86.5504 11.1612C84.5296 10.4716 82.9692 10.0885 82.9692 8.93916C82.9692 8.01971 83.7877 7.43228 85.1179 7.43228C86.3969 7.43228 88.0341 7.99417 89.62 8.9647L89.7224 9.04132L91.3083 6.18081L91.2316 6.10419C89.4666 4.92933 87.2155 4.23975 85.1947 4.23975C81.7157 4.23975 79.2856 6.35959 79.2856 9.37334C79.2856 12.8213 82.7645 13.8684 84.4528 14.2771C86.4993 14.7623 87.9829 15.2476 87.9829 16.4991C87.9829 17.5207 87.0364 18.3891 85.5016 18.1592C83.0971 17.8272 78.8508 15.0944 75.7556 15.0944C73.0696 15.0944 71.1 16.2692 70 18.4657L72.9929 19.9981C73.351 19.2319 73.9649 18.4657 75.3718 18.4657C78.5694 18.4657 81.6646 21.4028 85.5016 21.5305Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M230.593 21.0201C226.347 21.0201 223.302 17.7509 223.302 13.6645C223.302 9.57805 226.347 6.25781 230.593 6.25781C233.995 6.25781 236.553 8.17333 237.372 11.3403H233.509C233.023 10.3953 231.897 9.55251 230.567 9.55251C228.572 9.55251 226.96 11.4169 226.96 13.69C226.96 15.912 228.572 17.7254 230.567 17.7254C231.897 17.7254 233.049 16.9081 233.535 15.912H237.397C236.579 19.1556 234.021 21.0201 230.593 21.0201Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M251.773 21.0199C247.834 21.0199 245.506 18.4148 245.506 14.737V6.61523H249.113V14.8392C249.113 15.6309 249.395 17.5209 251.773 17.5209C253.359 17.5209 254.511 16.3972 254.511 14.8392V6.61523H258.117V14.737C258.143 18.3127 255.611 21.0199 251.773 21.0199Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M267.761 21.0191C263.489 21.0191 260.496 17.7499 260.496 13.6635V1.09766H264.154V7.96799C265.229 6.84422 266.61 6.33341 268.273 6.33341C272.007 6.33341 275 9.65365 275 13.689C275 17.7499 272.007 21.0191 267.761 21.0191ZM267.761 9.65365C265.766 9.65365 264.154 11.467 264.154 13.689C264.154 15.8855 265.766 17.6478 267.761 17.6478C269.756 17.6478 271.368 15.9366 271.368 13.689C271.368 11.3904 269.756 9.65365 267.761 9.65365Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M242.616 20.687H240.799H238.983V13.6635V1.09766H240.799H242.616V13.6635V20.687Z", fill: "#882A2B" }, void 0)] }), void 0), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0_246_7947" }, { children: jsx$1("rect", { width: "205", height: "26", fill: "white", transform: "translate(70)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
506
506
|
};
|
|
507
507
|
|
|
508
|
+
var ShapermintClubIcon2 = function (_a) {
|
|
509
|
+
var height = _a.height, width = _a.width;
|
|
510
|
+
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 86, viewBoxY: 26, title: "ShapermintClubIcon2", fill: "none" }, { children: [jsxs$1("g", { children: [jsx$1("path", { d: "M14.9977 26C22.1774 26 27.9977 20.1797 27.9977 13C27.9977 5.8203 22.1774 0 14.9977 0C7.81804 0 1.99774 5.8203 1.99774 13C1.99774 20.1797 7.81804 26 14.9977 26Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M17.0591 22.0644C21.17 22.255 23.3689 19.7765 23.3689 16.4401C23.3689 13.1036 19.8316 12.055 18.1107 11.483C16.0075 10.8158 14.4778 10.3391 14.4778 9.19519C14.4778 8.24192 15.3382 7.66995 16.6767 7.66995C18.0151 7.66995 19.6404 8.24192 21.2657 9.19519L21.3613 9.29052L22.9865 6.33537L22.8909 6.24004C21.0744 5.00079 18.78 4.3335 16.6767 4.3335C13.1394 4.3335 10.6537 6.52602 10.6537 9.5765C10.6537 13.1036 14.191 14.1522 15.9119 14.6288C18.0151 15.1055 19.5448 15.5821 19.5448 16.9167C19.5448 17.9653 18.5888 18.8232 16.9635 18.6326C14.4778 18.2513 10.1757 15.4868 6.92515 15.4868C4.15265 15.4868 2.14498 16.726 0.997742 18.9186L4.05705 20.5391C4.43946 19.7765 5.10869 18.9186 6.54274 18.9186C9.98446 18.9186 13.1394 21.969 17.0591 22.0644Z", fill: "white" }, void 0)] }, void 0), jsx$1("path", { d: "M40.6664 21.4508C36.4269 21.4508 33.3877 18.1816 33.3877 14.0952C33.3877 10.0087 36.4269 6.68848 40.6664 6.68848C44.0631 6.68848 46.617 8.604 47.4343 11.771H43.5779C43.0926 10.826 41.9689 9.98317 40.6409 9.98317C38.6488 9.98317 37.0398 11.8476 37.0398 14.1207C37.0398 16.3427 38.6488 18.1561 40.6409 18.1561C41.9689 18.1561 43.1181 17.3388 43.6034 16.3427H47.4598C46.6425 19.5863 44.0886 21.4508 40.6664 21.4508Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M61.8127 21.4511C57.8797 21.4511 55.5556 18.846 55.5556 15.1682V7.04639H59.1567V15.2704C59.1567 16.0621 59.4376 17.9521 61.8127 17.9521C63.3961 17.9521 64.5454 16.8283 64.5454 15.2704V7.04639H68.1464V15.1682C68.172 18.7438 65.6436 21.4511 61.8127 21.4511Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M77.7746 21.4507C73.5096 21.4507 70.5215 18.1816 70.5215 14.0951V1.5293H74.1736V8.39963C75.2463 7.27586 76.6254 6.76505 78.2854 6.76505C82.0141 6.76505 85.0022 10.0853 85.0022 14.1207C85.0022 18.1816 82.0141 21.4507 77.7746 21.4507ZM77.7746 10.0853C75.7826 10.0853 74.1736 11.8986 74.1736 14.1207C74.1736 16.3171 75.7826 18.0794 77.7746 18.0794C79.7667 18.0794 81.3757 16.3682 81.3757 14.1207C81.3757 11.822 79.7667 10.0853 77.7746 10.0853Z", fill: "#882A2B" }, void 0), jsx$1("path", { d: "M52.6702 21.1187H50.857H49.0437V14.0951V1.5293H50.857H52.6702V14.0951V21.1187Z", fill: "#882A2B" }, void 0), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0_246_7947" }, { children: jsx$1("rect", { width: "205", height: "26", fill: "white", transform: "translate(70)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
511
|
+
};
|
|
512
|
+
|
|
508
513
|
var BodConLabel = function (_a) {
|
|
509
514
|
var height = _a.height, width = _a.width;
|
|
510
515
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 695, viewBoxY: 62, title: "BodConLabel", fill: "none" }, { children: [jsx$1("rect", { width: "773", height: "62", fill: "#FBFF44" }, void 0), jsxs$1("g", __assign$1({ clipPath: "url(#clip0_246_8374)" }, { children: [jsx$1("path", { d: "M365.331 23.8356C364.993 24.0729 364.654 24.2406 364.188 24.2406C363.271 24.2406 363.172 23.606 363.172 23.25V20.5568H362.706V20.4097L363.157 20.4033H363.172V19.4023H363.174C363.202 19.4023 363.227 19.4023 363.254 19.4062C363.508 19.4256 363.735 19.5352 363.905 19.7029C364.08 19.8757 364.192 20.1092 364.206 20.3697C364.206 20.3801 364.208 20.3904 364.208 20.4007V20.4033H364.21V20.42H365.22L365.227 21.0895H365.216C364.786 20.7335 364.608 20.5503 364.286 20.5503H364.21V23.2848C364.21 23.4589 364.21 23.9259 364.705 23.9259C364.86 23.9259 365.05 23.8768 365.276 23.7517L365.332 23.8356H365.331Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M369.496 21.652V24.1569H368.453V21.5552C368.453 21.296 368.446 20.6407 367.797 20.6407C367.526 20.6407 367.275 20.7491 366.992 21.0264C366.988 21.0303 366.982 21.0354 366.979 21.0393V24.1582H365.934V18.7988H366.055C366.514 18.8491 366.885 19.1845 366.973 19.6166C366.976 19.6385 366.979 19.6721 366.98 19.694V20.8987C367.311 20.5582 367.684 20.3196 368.249 20.3196C369.04 20.3196 369.498 20.7388 369.498 21.652H369.496Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M371.447 22.7936C371.425 22.8594 371.419 22.9484 371.447 23.0645C371.453 23.0954 371.462 23.129 371.475 23.1651C371.479 23.178 371.483 23.1909 371.488 23.2038C371.488 23.2038 371.488 23.2051 371.488 23.2063C371.688 23.6255 372.022 23.8281 372.437 23.8281C372.818 23.8281 373.227 23.6462 373.559 23.1999L373.644 23.2489C373.242 23.8564 372.712 24.2395 371.979 24.2395C370.961 24.2395 370.166 23.5069 370.166 22.3344C370.166 21.287 370.81 20.566 371.668 20.3725C371.822 20.3364 371.984 20.3184 372.149 20.3184C372.164 20.3184 372.18 20.3184 372.196 20.3196C372.409 20.3119 372.653 20.3429 372.912 20.4461C372.969 20.4693 373.028 20.4951 373.088 20.526C373.758 20.8756 374.006 21.4496 373.726 21.9771C373.327 22.7317 372.19 22.4453 371.684 22.5885C371.684 22.5885 371.684 22.5885 371.682 22.5885C371.61 22.6091 371.551 22.6388 371.509 22.6814C371.503 22.6865 371.499 22.6943 371.494 22.7007C371.478 22.7214 371.464 22.7459 371.453 22.7755C371.452 22.7807 371.449 22.7859 371.448 22.791L371.447 22.7936ZM371.708 22.3086C371.718 22.3034 371.73 22.2996 371.742 22.2944C371.753 22.2893 371.766 22.2841 371.779 22.2802C372.147 22.1435 372.616 22.0493 372.847 21.616C372.899 21.5166 372.931 21.4173 372.942 21.3206C373.032 20.5738 372.49 20.4486 372.308 20.428C372.297 20.4267 372.292 20.4267 372.292 20.4267C372.282 20.4254 372.271 20.4241 372.262 20.4241C372.25 20.4241 372.242 20.4241 372.241 20.4241C372.137 20.4241 372.038 20.4435 371.949 20.4809C371.53 20.6563 371.281 21.229 371.281 22.0842C371.281 22.2789 371.294 22.4569 371.319 22.6195C371.323 22.6504 371.328 22.6814 371.335 22.7123C371.338 22.7407 371.345 22.7691 371.351 22.7962C371.351 22.7613 371.355 22.4698 371.709 22.3099L371.708 22.3086Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M385.81 24.2069C385.81 26.2372 384.003 27.4716 380.816 27.4716H376.084V15.6475H380.864C383.608 15.6475 385.168 16.5891 385.168 18.3278C385.168 19.9517 383.64 20.9268 381.834 21.1861V21.2183C384.134 21.3486 385.809 22.2902 385.81 24.2069ZM378.696 21.2506H380.339C381.702 21.2506 382.442 20.0807 382.442 18.587C382.442 17.0934 381.751 15.9067 380.125 15.9067H378.695V21.2506H378.696ZM382.967 24.4507C382.967 22.6965 382.08 21.5111 380.568 21.5111H378.695V27.0988C378.941 27.1801 379.647 27.2123 379.993 27.2123C382.079 27.2123 382.966 26.1894 382.966 24.4507H382.967Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M393.028 27.4817C390.472 28.2724 388.071 27.2121 387.227 24.546C386.388 21.8954 387.793 19.5375 390.396 18.7313C392.951 17.9407 395.353 19.0009 396.197 21.6671C397.036 24.3177 395.615 26.6807 393.028 27.4817V27.4817ZM393.785 22.5325C392.99 20.0212 391.703 18.565 390.369 18.9777C388.989 19.4047 388.863 21.2311 389.648 23.7115C390.439 26.2073 391.721 27.6481 393.039 27.2405C394.419 26.8136 394.561 24.982 393.786 22.5325H393.785Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M406.679 27.4781H404.232L404.263 26.2901C403.491 27.1362 402.588 27.6715 401.423 27.6715C399.303 27.6715 397.644 25.8696 397.644 23.286C397.644 20.4935 399.615 18.5432 402.047 18.5432C402.935 18.5432 403.656 18.8012 404.232 19.2578V15C404.965 15.0052 405.621 15.3199 406.07 15.8152C406.46 16.246 406.649 16.8187 406.649 17.3978V23.731L406.648 24.7565C406.648 25.5355 406.68 26.7596 406.68 27.4781H406.679ZM404.232 20.4754C404.225 20.4574 404.22 20.438 404.214 20.4213C403.908 19.4758 403.244 18.8025 402.358 18.8025C400.961 18.8025 400.205 20.4109 400.205 23.108C400.205 25.9651 401.011 26.9582 402.275 26.9582C402.949 26.9582 403.573 26.6642 404.23 25.9018V20.4741L404.232 20.4754Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M389.861 38.2546C388.792 39.992 387.035 41.0806 384.8 41.0806C381.432 41.0806 379.067 38.6441 379.067 35.1035C379.067 31.2532 381.663 28.8657 385.211 28.8657C387.15 28.8657 388.777 29.8241 389.696 30.7657L387.651 32.5728C386.993 31.1913 386.706 29.125 385.162 29.125C382.961 29.125 381.909 31.5615 381.909 34.5179C381.909 38.2533 383.584 40.1055 385.934 40.1055C387.117 40.1055 388.628 39.667 389.664 38.1398L389.861 38.2533V38.2546Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M396.832 40.8963C394.277 41.687 391.875 40.6267 391.031 37.9606C390.192 35.3099 391.597 32.9521 394.2 32.1459C396.755 31.3552 399.157 32.4155 400.001 35.0816C400.84 37.7323 399.419 40.0953 396.832 40.8963V40.8963ZM397.589 35.9471C396.794 33.4358 395.507 31.9795 394.174 32.3923C392.793 32.8192 392.667 34.6456 393.452 37.126C394.243 39.6219 395.525 41.0627 396.841 40.6551C398.222 40.2281 398.364 38.3965 397.589 35.9471V35.9471Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M410.068 35.0349V40.865H407.655V34.8053C407.655 34.2042 407.637 32.6783 406.109 32.6783C405.47 32.6783 404.878 32.9388 404.204 33.6044V40.865H401.79V33.1285H402.251C403.252 34.3048 404.206 33.2961 404.206 33.2961C404.991 32.5184 405.831 31.9302 407.179 31.9302C409.018 31.9302 410.068 32.9053 410.068 35.0349V35.0349Z", fill: "#142541" }, void 0), jsx$1("path", { d: "M362.817 29.49C362.811 29.3796 362.782 29.2639 362.803 29.1586C362.985 28.2125 363.558 27.6744 364.309 27.3391C364.999 27.0311 365.702 27.0597 366.394 27.3222C367.286 27.6601 368.165 28.0461 369.06 28.371C369.474 28.5218 369.913 28.618 370.347 28.67C371.088 28.7596 371.768 28.4919 372.409 28.0877C372.751 27.872 373.111 27.7147 373.5 27.6523C374.284 27.5276 375.006 27.7355 375.666 28.206C376.789 29.0079 377.462 30.1776 377.773 31.6319C377.922 32.3246 377.952 33.0316 377.95 33.7373C377.944 35.0694 377.914 36.4016 377.895 37.7337C377.883 38.6837 377.904 39.6286 378.072 40.5656C378.45 42.6659 379.536 44.1059 381.231 44.987C382.363 45.5758 383.558 45.798 384.796 45.7772C386.194 45.7525 387.547 45.4198 388.897 45.0455C389.73 44.8142 390.56 44.5621 391.401 44.3749C392.629 44.102 393.854 44.1124 395.041 44.6348C395.964 45.0416 396.649 45.7538 397.096 46.7585C397.125 46.8247 397.128 46.9053 397.147 47.0002C396.952 46.9677 396.863 46.8689 396.791 46.7156C396.3 45.6577 395.492 45.0715 394.512 44.7375C393.567 44.4152 392.608 44.3944 391.654 44.6218C390.44 44.9117 389.236 45.2522 388.028 45.5693C386.926 45.8578 385.815 46.0774 384.68 46.0735C383.441 46.0696 382.232 45.8435 381.101 45.2522C379.382 44.3541 378.298 42.8595 377.869 40.7476C377.628 39.5571 377.596 38.3588 377.64 37.1476C377.682 36.0403 377.74 34.933 377.739 33.827C377.739 32.6794 377.595 31.5474 377.155 30.4947C376.599 29.1664 375.691 28.3035 374.443 27.9266C373.834 27.742 373.251 27.9006 372.706 28.2372C372.259 28.514 371.801 28.7557 371.303 28.8883C370.654 29.0625 370.014 29.0001 369.39 28.7622C368.597 28.4594 367.811 28.1306 367.021 27.8135C366.387 27.5588 365.739 27.3742 365.06 27.4418C364.309 27.5172 363.69 27.8889 363.261 28.6063C363.152 28.7908 363.107 29.0248 363.029 29.2353C362.994 29.3289 362.952 29.4199 362.912 29.5108C362.881 29.5043 362.85 29.4965 362.818 29.49H362.817Z", fill: "#142541" }, void 0)] }), void 0), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0_246_8374" }, { children: jsx$1("rect", { width: "52", height: "32", fill: "white", transform: "translate(360.5 15)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
@@ -538,6 +543,7 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
538
543
|
ShapermintClubLabel: ShapermintClubLabel,
|
|
539
544
|
ShapermintClubMobileLabel: ShapermintClubMobileLabel,
|
|
540
545
|
ShapermintClubIcon: ShapermintClubIcon,
|
|
546
|
+
ShapermintClubIcon2: ShapermintClubIcon2,
|
|
541
547
|
BodConLabel: BodConLabel,
|
|
542
548
|
BodConMobileLabel: BodConMobileLabel
|
|
543
549
|
});
|
|
@@ -4202,7 +4208,7 @@ var InputValidationType;
|
|
|
4202
4208
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4203
4209
|
})(InputValidationType || (InputValidationType = {}));
|
|
4204
4210
|
|
|
4205
|
-
var Section = newStyled.div(templateObject_1$
|
|
4211
|
+
var Section = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
4206
4212
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4207
4213
|
});
|
|
4208
4214
|
var CardHeader = function (_a) {
|
|
@@ -4213,14 +4219,14 @@ var CardFooter = function (_a) {
|
|
|
4213
4219
|
var children = _a.children;
|
|
4214
4220
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4215
4221
|
};
|
|
4216
|
-
var templateObject_1$
|
|
4222
|
+
var templateObject_1$1F;
|
|
4217
4223
|
|
|
4218
|
-
var Body = newStyled.div(templateObject_1$
|
|
4224
|
+
var Body = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
4219
4225
|
var CardBody = function (_a) {
|
|
4220
4226
|
var children = _a.children;
|
|
4221
4227
|
return jsx$1(Body, { children: children }, void 0);
|
|
4222
4228
|
};
|
|
4223
|
-
var templateObject_1$
|
|
4229
|
+
var templateObject_1$1E;
|
|
4224
4230
|
|
|
4225
4231
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4226
4232
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4365,7 +4371,7 @@ var AssetsProvider = function (_a) {
|
|
|
4365
4371
|
};
|
|
4366
4372
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4367
4373
|
|
|
4368
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4374
|
+
var Container$14 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
4369
4375
|
var flex = _a.flex;
|
|
4370
4376
|
return flex &&
|
|
4371
4377
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4387,7 +4393,7 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
4387
4393
|
Footer: CardFooter,
|
|
4388
4394
|
Body: CardBody,
|
|
4389
4395
|
});
|
|
4390
|
-
var templateObject_1$
|
|
4396
|
+
var templateObject_1$1D;
|
|
4391
4397
|
|
|
4392
4398
|
var Fragment = Fragment$1;
|
|
4393
4399
|
function jsx(type, props, key) {
|
|
@@ -4533,7 +4539,7 @@ function BaseSelectOption(_a) {
|
|
|
4533
4539
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4534
4540
|
}
|
|
4535
4541
|
|
|
4536
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4542
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4537
4543
|
function BaseSelect(_a) {
|
|
4538
4544
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4539
4545
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4543,7 +4549,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4543
4549
|
Options: BaseSelectOptions,
|
|
4544
4550
|
Option: BaseSelectOption,
|
|
4545
4551
|
});
|
|
4546
|
-
var templateObject_1$
|
|
4552
|
+
var templateObject_1$1C;
|
|
4547
4553
|
|
|
4548
4554
|
var CustomButton = newStyled.button(function (_a) {
|
|
4549
4555
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4600,14 +4606,14 @@ var withLabel = function (Button, label) {
|
|
|
4600
4606
|
};
|
|
4601
4607
|
};
|
|
4602
4608
|
|
|
4603
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4604
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4609
|
+
var ErrorText = newStyled.h3(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
4610
|
+
var ErrorContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4605
4611
|
var Error$1 = function (_a) {
|
|
4606
4612
|
var error = _a.error;
|
|
4607
4613
|
var theme = useTheme();
|
|
4608
4614
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4609
4615
|
};
|
|
4610
|
-
var templateObject_1$
|
|
4616
|
+
var templateObject_1$1B, templateObject_2$14;
|
|
4611
4617
|
|
|
4612
4618
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4613
4619
|
var theme = _a.theme;
|
|
@@ -4773,7 +4779,7 @@ var CustomCheckboxStyles = {
|
|
|
4773
4779
|
},
|
|
4774
4780
|
};
|
|
4775
4781
|
|
|
4776
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4782
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
4777
4783
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4778
4784
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4779
4785
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4784,7 +4790,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4784
4790
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4785
4791
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4786
4792
|
]; });
|
|
4787
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4793
|
+
var Input$5 = newStyled.input(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4788
4794
|
var disabled = _a.disabled;
|
|
4789
4795
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4790
4796
|
});
|
|
@@ -4800,7 +4806,7 @@ var Checkbox = function (_a) {
|
|
|
4800
4806
|
};
|
|
4801
4807
|
return (jsxs$1(Container$13, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4802
4808
|
};
|
|
4803
|
-
var templateObject_1$
|
|
4809
|
+
var templateObject_1$1A, templateObject_2$13;
|
|
4804
4810
|
|
|
4805
4811
|
var CustomOption = newStyled.li(function (_a) {
|
|
4806
4812
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4847,8 +4853,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4847
4853
|
Option: BaseDropdownOption,
|
|
4848
4854
|
});
|
|
4849
4855
|
|
|
4850
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4851
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4856
|
+
var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject([""], [""])));
|
|
4857
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4852
4858
|
function SimpleDropdown(_a) {
|
|
4853
4859
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4854
4860
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4881,12 +4887,12 @@ function SimpleDropdown(_a) {
|
|
|
4881
4887
|
var DropdownContainer = showRequiredPlaceholder ? Container$12 : Fragment$2;
|
|
4882
4888
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4883
4889
|
}
|
|
4884
|
-
var templateObject_1$
|
|
4890
|
+
var templateObject_1$1z, templateObject_2$12;
|
|
4885
4891
|
|
|
4886
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4887
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4888
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4889
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4892
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4893
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4894
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4895
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4890
4896
|
var DropdownDialog = function (_a) {
|
|
4891
4897
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4892
4898
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4894,7 +4900,7 @@ var DropdownDialog = function (_a) {
|
|
|
4894
4900
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4895
4901
|
}) }), void 0) }), void 0));
|
|
4896
4902
|
};
|
|
4897
|
-
var templateObject_1$
|
|
4903
|
+
var templateObject_1$1y, templateObject_2$11, templateObject_3$R, templateObject_4$B;
|
|
4898
4904
|
|
|
4899
4905
|
var getStylesBySize$a = function (size, theme) {
|
|
4900
4906
|
switch (size) {
|
|
@@ -4962,16 +4968,16 @@ var SelectorSecondary = function (_a) {
|
|
|
4962
4968
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4963
4969
|
// `variants` styles that are consistent through all themes.
|
|
4964
4970
|
var TAGS = {
|
|
4965
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4966
|
-
hero2: newStyled.h2(templateObject_2
|
|
4967
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4968
|
-
display1: newStyled.h1(templateObject_4$
|
|
4969
|
-
display2: newStyled.h2(templateObject_5$
|
|
4970
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4971
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4972
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4973
|
-
heading4: newStyled.h4(templateObject_9$
|
|
4974
|
-
heading5: newStyled.h5(templateObject_10$
|
|
4971
|
+
hero1: newStyled.h1(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject([""], [""]))),
|
|
4972
|
+
hero2: newStyled.h2(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject([""], [""]))),
|
|
4973
|
+
hero3: newStyled.h3(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject([""], [""]))),
|
|
4974
|
+
display1: newStyled.h1(templateObject_4$A || (templateObject_4$A = __makeTemplateObject([""], [""]))),
|
|
4975
|
+
display2: newStyled.h2(templateObject_5$n || (templateObject_5$n = __makeTemplateObject([""], [""]))),
|
|
4976
|
+
heading1: newStyled.h1(templateObject_6$l || (templateObject_6$l = __makeTemplateObject([""], [""]))),
|
|
4977
|
+
heading2: newStyled.h2(templateObject_7$d || (templateObject_7$d = __makeTemplateObject([""], [""]))),
|
|
4978
|
+
heading3: newStyled.h3(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject([""], [""]))),
|
|
4979
|
+
heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4980
|
+
heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
|
|
4975
4981
|
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4976
4982
|
heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
4977
4983
|
heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -5094,9 +5100,9 @@ var DEFAULTS = {
|
|
|
5094
5100
|
size: 'regular',
|
|
5095
5101
|
},
|
|
5096
5102
|
};
|
|
5097
|
-
var templateObject_1$
|
|
5103
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$Q, templateObject_4$A, templateObject_5$n, templateObject_6$l, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$4, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
|
|
5098
5104
|
|
|
5099
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5105
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
5100
5106
|
var inline = _a.inline;
|
|
5101
5107
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5102
5108
|
});
|
|
@@ -5115,7 +5121,7 @@ var SizeSelector = function (_a) {
|
|
|
5115
5121
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5116
5122
|
}) }), void 0)] }), void 0));
|
|
5117
5123
|
};
|
|
5118
|
-
var templateObject_1$
|
|
5124
|
+
var templateObject_1$1w;
|
|
5119
5125
|
|
|
5120
5126
|
var getStylesBySize$9 = function (size) {
|
|
5121
5127
|
switch (size) {
|
|
@@ -5142,7 +5148,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5142
5148
|
} });
|
|
5143
5149
|
};
|
|
5144
5150
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5145
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5151
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1v || (templateObject_1$1v = __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));
|
|
5146
5152
|
};
|
|
5147
5153
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5148
5154
|
if (disabled)
|
|
@@ -5158,16 +5164,16 @@ var TextButton = function (_a) {
|
|
|
5158
5164
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5159
5165
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
5160
5166
|
};
|
|
5161
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$1v;
|
|
5162
5168
|
|
|
5163
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
5164
|
-
var P$3 = newStyled.p(templateObject_2
|
|
5165
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5169
|
+
var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
5170
|
+
var P$3 = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5171
|
+
var PercentageSpan = newStyled.span(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
5166
5172
|
var SizeFitGuide = function (_a) {
|
|
5167
5173
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5168
5174
|
return (jsxs$1(Container$11, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5169
5175
|
};
|
|
5170
|
-
var templateObject_1$
|
|
5176
|
+
var templateObject_1$1u, templateObject_2$$, templateObject_3$P;
|
|
5171
5177
|
|
|
5172
5178
|
var getStylesBySize$8 = function (size) {
|
|
5173
5179
|
switch (size) {
|
|
@@ -5197,7 +5203,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5197
5203
|
};
|
|
5198
5204
|
}
|
|
5199
5205
|
};
|
|
5200
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5206
|
+
var Container$10 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
5201
5207
|
var backgroundColor = _a.backgroundColor;
|
|
5202
5208
|
return backgroundColor;
|
|
5203
5209
|
}, function (_a) {
|
|
@@ -5219,7 +5225,7 @@ var Container$10 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = _
|
|
|
5219
5225
|
var size = _a.size;
|
|
5220
5226
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5221
5227
|
});
|
|
5222
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5228
|
+
var H3$3 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
5223
5229
|
var textColor = _a.textColor;
|
|
5224
5230
|
return textColor;
|
|
5225
5231
|
}, function (_a) {
|
|
@@ -5231,13 +5237,13 @@ var H3$3 = newStyled.h3(templateObject_2$Z || (templateObject_2$Z = __makeTempla
|
|
|
5231
5237
|
var size = _a.size;
|
|
5232
5238
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5233
5239
|
});
|
|
5234
|
-
var Now = newStyled(H3$3)(templateObject_3$
|
|
5240
|
+
var Now = newStyled(H3$3)(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: none;\n margin-right: 0.25rem;\n"], ["\n display: none;\n margin-right: 0.25rem;\n"])));
|
|
5235
5241
|
var DiscountTag = function (_a) {
|
|
5236
5242
|
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, style = _a.style;
|
|
5237
5243
|
var theme = useTheme();
|
|
5238
5244
|
return (jsxs$1(Container$10, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: [jsx$1(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
|
|
5239
5245
|
};
|
|
5240
|
-
var templateObject_1$
|
|
5246
|
+
var templateObject_1$1t, templateObject_2$_, templateObject_3$O;
|
|
5241
5247
|
|
|
5242
5248
|
var getStylesBySize$7 = function (size) {
|
|
5243
5249
|
switch (size) {
|
|
@@ -5267,8 +5273,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5267
5273
|
};
|
|
5268
5274
|
}
|
|
5269
5275
|
};
|
|
5270
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5271
|
-
var Price = newStyled.p(templateObject_2$
|
|
5276
|
+
var Container$$ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5277
|
+
var Price = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5272
5278
|
var weight = _a.weight;
|
|
5273
5279
|
return (weight ? weight : '400');
|
|
5274
5280
|
}, function (_a) {
|
|
@@ -5297,7 +5303,7 @@ var Price = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5297
5303
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5298
5304
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5299
5305
|
});
|
|
5300
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5306
|
+
var TagContainer = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5301
5307
|
var _b;
|
|
5302
5308
|
var size = _a.size;
|
|
5303
5309
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5320,7 +5326,7 @@ var PriceLabel = function (_a) {
|
|
|
5320
5326
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5321
5327
|
return (jsxs$1(Container$$, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5322
5328
|
};
|
|
5323
|
-
var templateObject_1$
|
|
5329
|
+
var templateObject_1$1s, templateObject_2$Z, templateObject_3$N;
|
|
5324
5330
|
|
|
5325
5331
|
var getStylesBySize$6 = function (size) {
|
|
5326
5332
|
switch (size) {
|
|
@@ -5350,7 +5356,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5350
5356
|
};
|
|
5351
5357
|
}
|
|
5352
5358
|
};
|
|
5353
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5359
|
+
var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
5354
5360
|
var backgroundColor = _a.backgroundColor;
|
|
5355
5361
|
return backgroundColor;
|
|
5356
5362
|
}, function (_a) {
|
|
@@ -5372,7 +5378,7 @@ var Container$_ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __
|
|
|
5372
5378
|
var size = _a.size;
|
|
5373
5379
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5374
5380
|
});
|
|
5375
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5381
|
+
var H3$2 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __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) {
|
|
5376
5382
|
var textColor = _a.textColor;
|
|
5377
5383
|
return textColor;
|
|
5378
5384
|
}, function (_a) {
|
|
@@ -5389,9 +5395,9 @@ var ClubOfferTag = function (_a) {
|
|
|
5389
5395
|
var theme = useTheme();
|
|
5390
5396
|
return (jsx$1(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5391
5397
|
};
|
|
5392
|
-
var templateObject_1$
|
|
5398
|
+
var templateObject_1$1r, templateObject_2$Y;
|
|
5393
5399
|
|
|
5394
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5400
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5395
5401
|
var PriceLabelV2 = function (_a) {
|
|
5396
5402
|
var _b;
|
|
5397
5403
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5432,7 +5438,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5432
5438
|
lineHeight: '22px',
|
|
5433
5439
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5434
5440
|
};
|
|
5435
|
-
var templateObject_1$
|
|
5441
|
+
var templateObject_1$1q;
|
|
5436
5442
|
|
|
5437
5443
|
var OneColorSelector = function (_a) {
|
|
5438
5444
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5473,11 +5479,11 @@ var OutOfStock = function (_a) {
|
|
|
5473
5479
|
return (jsxs$1("svg", __assign$1({ 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$1({ 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.shades['300'].color }, 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.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5474
5480
|
};
|
|
5475
5481
|
|
|
5476
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5477
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5478
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5479
|
-
var Span = newStyled.span(templateObject_4$
|
|
5480
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5482
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5483
|
+
newStyled(lt.Label)(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5484
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
5485
|
+
var Span = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5486
|
+
var OptionsContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
5481
5487
|
var Label$3 = function (_a) {
|
|
5482
5488
|
var label = _a.label, values = _a.values;
|
|
5483
5489
|
return (jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5495,23 +5501,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5495
5501
|
Option: Option,
|
|
5496
5502
|
OptionsContainer: OptionsContainer,
|
|
5497
5503
|
});
|
|
5498
|
-
var templateObject_1$
|
|
5504
|
+
var templateObject_1$1p, templateObject_2$X, templateObject_3$M, templateObject_4$z, templateObject_5$m;
|
|
5499
5505
|
|
|
5500
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5506
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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 opacity: ", ";\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 opacity: ", ";\n"])), function (_a) {
|
|
5501
5507
|
var borderColor = _a.borderColor;
|
|
5502
5508
|
return borderColor;
|
|
5503
5509
|
}, function (_a) {
|
|
5504
5510
|
var noStock = _a.noStock;
|
|
5505
5511
|
return (noStock ? '0.4' : '1');
|
|
5506
5512
|
});
|
|
5507
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5513
|
+
var Image$3 = newStyled.img(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5508
5514
|
var PatternSelector = function (_a) {
|
|
5509
5515
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5510
5516
|
var theme = useTheme();
|
|
5511
5517
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5512
5518
|
return (jsx$1(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5513
5519
|
};
|
|
5514
|
-
var templateObject_1$
|
|
5520
|
+
var templateObject_1$1o, templateObject_2$W;
|
|
5515
5521
|
|
|
5516
5522
|
var renderOptions$1 = function (options) {
|
|
5517
5523
|
if (options.length === 0) {
|
|
@@ -5716,7 +5722,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5716
5722
|
literal: true,
|
|
5717
5723
|
});
|
|
5718
5724
|
|
|
5719
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5725
|
+
var Image$2 = newStyled.img(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5720
5726
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5721
5727
|
return borderRadiusVariant &&
|
|
5722
5728
|
"\nborder-radius: 20px;\n";
|
|
@@ -5731,7 +5737,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5731
5737
|
var theme = useTheme();
|
|
5732
5738
|
return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5733
5739
|
};
|
|
5734
|
-
var templateObject_1$
|
|
5740
|
+
var templateObject_1$1n;
|
|
5735
5741
|
|
|
5736
5742
|
var Button$5 = newStyled.button(function () { return ({
|
|
5737
5743
|
background: 'transparent',
|
|
@@ -9975,14 +9981,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9975
9981
|
return Slider;
|
|
9976
9982
|
}(React__default.Component);
|
|
9977
9983
|
|
|
9978
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9984
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1m || (templateObject_1$1m = __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 "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
9979
9985
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9980
9986
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9981
9987
|
}, function (_a) {
|
|
9982
9988
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9983
9989
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9984
9990
|
});
|
|
9985
|
-
var templateObject_1$
|
|
9991
|
+
var templateObject_1$1m;
|
|
9986
9992
|
|
|
9987
9993
|
var getStylesBySize$5 = function (size) {
|
|
9988
9994
|
// rem units
|
|
@@ -10041,13 +10047,13 @@ var SliderNavigation = function (_a) {
|
|
|
10041
10047
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
10042
10048
|
};
|
|
10043
10049
|
|
|
10044
|
-
var horizontalStyles = css(templateObject_1$
|
|
10045
|
-
var verticalStyles = css(templateObject_2$
|
|
10046
|
-
var Container$Y = newStyled.div(templateObject_3$
|
|
10050
|
+
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
10051
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
10052
|
+
var Container$Y = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
10047
10053
|
var position = _a.position;
|
|
10048
10054
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10049
10055
|
});
|
|
10050
|
-
var Button$4 = newStyled.button(templateObject_4$
|
|
10056
|
+
var Button$4 = newStyled.button(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
10051
10057
|
var ImagePreviewList = function (_a) {
|
|
10052
10058
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10053
10059
|
return (jsx$1(Container$Y, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
@@ -10056,7 +10062,7 @@ var ImagePreviewList = function (_a) {
|
|
|
10056
10062
|
arrowPadding: 1.625,
|
|
10057
10063
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10058
10064
|
};
|
|
10059
|
-
var templateObject_1$
|
|
10065
|
+
var templateObject_1$1l, templateObject_2$V, templateObject_3$L, templateObject_4$y;
|
|
10060
10066
|
|
|
10061
10067
|
var propTypes = {exports: {}};
|
|
10062
10068
|
|
|
@@ -11649,17 +11655,17 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11649
11655
|
afterZoomOut: PropTypes.func
|
|
11650
11656
|
} : {};
|
|
11651
11657
|
|
|
11652
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
11658
|
+
var Container$X = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11653
11659
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11654
11660
|
return borderRadiusVariant &&
|
|
11655
11661
|
"\n border-radius: 40px;\n ";
|
|
11656
11662
|
});
|
|
11657
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11658
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11659
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11660
|
-
var Video$1 = newStyled.div(templateObject_5$
|
|
11661
|
-
var VideoTag$1 = newStyled.div(templateObject_6$
|
|
11662
|
-
var Text$7 = newStyled.div(templateObject_7$
|
|
11663
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11664
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11665
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11666
|
+
var Video$1 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11667
|
+
var VideoTag$1 = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
11668
|
+
var Text$7 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11663
11669
|
var ImageProductWithTags$1 = function (_a) {
|
|
11664
11670
|
var _b, _c;
|
|
11665
11671
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
@@ -11668,9 +11674,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11668
11674
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11669
11675
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11670
11676
|
};
|
|
11671
|
-
var templateObject_1$
|
|
11677
|
+
var templateObject_1$1k, templateObject_2$U, templateObject_3$K, templateObject_4$x, templateObject_5$l, templateObject_6$k, templateObject_7$c;
|
|
11672
11678
|
|
|
11673
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
11679
|
+
var Container$W = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11674
11680
|
var ProductGallery = function (_a) {
|
|
11675
11681
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c;
|
|
11676
11682
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11682,7 +11688,7 @@ var ProductGallery = function (_a) {
|
|
|
11682
11688
|
setSelectedImage(value);
|
|
11683
11689
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11684
11690
|
};
|
|
11685
|
-
var templateObject_1$
|
|
11691
|
+
var templateObject_1$1j;
|
|
11686
11692
|
|
|
11687
11693
|
/* base styles & size variants */
|
|
11688
11694
|
var StarStyles = {
|
|
@@ -11728,8 +11734,8 @@ var StarStyles = {
|
|
|
11728
11734
|
});
|
|
11729
11735
|
},
|
|
11730
11736
|
};
|
|
11731
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
11732
|
-
var templateObject_1$
|
|
11737
|
+
var Container$V = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11738
|
+
var templateObject_1$1i;
|
|
11733
11739
|
|
|
11734
11740
|
var StarContainer = newStyled.div(function (_a) {
|
|
11735
11741
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11791,8 +11797,8 @@ var LabelStyles = {
|
|
|
11791
11797
|
});
|
|
11792
11798
|
},
|
|
11793
11799
|
};
|
|
11794
|
-
var Container$U = newStyled.a(templateObject_1$
|
|
11795
|
-
var templateObject_1$
|
|
11800
|
+
var Container$U = newStyled.a(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11801
|
+
var templateObject_1$1h;
|
|
11796
11802
|
|
|
11797
11803
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11798
11804
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11835,8 +11841,8 @@ var Rating = function (_a) {
|
|
|
11835
11841
|
return (jsxs$1(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11836
11842
|
};
|
|
11837
11843
|
|
|
11838
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
11839
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11844
|
+
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
11845
|
+
var P$2 = newStyled.p(templateObject_2$T || (templateObject_2$T = __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.shades['550'].color; });
|
|
11840
11846
|
var textButtonStyles = function (theme) { return ({
|
|
11841
11847
|
border: 'none',
|
|
11842
11848
|
background: 'transparent',
|
|
@@ -11851,7 +11857,7 @@ var FitPredictor = function (_a) {
|
|
|
11851
11857
|
var theme = useTheme();
|
|
11852
11858
|
return (jsxs(Container$T, __assign$1({ theme: theme }, { children: [jsx(Container$T, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11853
11859
|
};
|
|
11854
|
-
var templateObject_1$
|
|
11860
|
+
var templateObject_1$1g, templateObject_2$T;
|
|
11855
11861
|
|
|
11856
11862
|
var P$1 = newStyled.p(function (_a) {
|
|
11857
11863
|
var color = _a.color;
|
|
@@ -11865,7 +11871,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11865
11871
|
margin: '0.938rem 4.188rem',
|
|
11866
11872
|
});
|
|
11867
11873
|
});
|
|
11868
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
11874
|
+
var Bar$2 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\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: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11869
11875
|
var height = _a.height;
|
|
11870
11876
|
return height || '0.5rem';
|
|
11871
11877
|
}, function (_a) {
|
|
@@ -11910,9 +11916,9 @@ var ProgressBar = function (_a) {
|
|
|
11910
11916
|
var theme = useTheme();
|
|
11911
11917
|
return (jsxs$1(Container$S, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11912
11918
|
};
|
|
11913
|
-
var templateObject_1$
|
|
11919
|
+
var templateObject_1$1f;
|
|
11914
11920
|
|
|
11915
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
11921
|
+
var Bar$1 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\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: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11916
11922
|
var height = _a.height;
|
|
11917
11923
|
return height || '0.5rem';
|
|
11918
11924
|
}, function (_a) {
|
|
@@ -11984,7 +11990,7 @@ var MotivatorProgressBar = function (_a) {
|
|
|
11984
11990
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
11985
11991
|
return (jsxs$1(Container$R, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
11986
11992
|
};
|
|
11987
|
-
var templateObject_1$
|
|
11993
|
+
var templateObject_1$1e;
|
|
11988
11994
|
|
|
11989
11995
|
var getStylesBySize$4 = function (size) {
|
|
11990
11996
|
switch (size) {
|
|
@@ -12005,7 +12011,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
12005
12011
|
};
|
|
12006
12012
|
}
|
|
12007
12013
|
};
|
|
12008
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
12014
|
+
var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
12009
12015
|
var backgroundColor = _a.backgroundColor;
|
|
12010
12016
|
return backgroundColor;
|
|
12011
12017
|
}, function (_a) {
|
|
@@ -12035,7 +12041,7 @@ var IconButton = function (_a) {
|
|
|
12035
12041
|
var theme = useTheme();
|
|
12036
12042
|
return (jsx$1(Container$Q, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
12037
12043
|
};
|
|
12038
|
-
var templateObject_1$
|
|
12044
|
+
var templateObject_1$1d;
|
|
12039
12045
|
|
|
12040
12046
|
var TooltipArrow = function (_a) {
|
|
12041
12047
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12115,7 +12121,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12115
12121
|
}
|
|
12116
12122
|
};
|
|
12117
12123
|
|
|
12118
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12124
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
12119
12125
|
var position = _a.position;
|
|
12120
12126
|
return getWrapperFlexDirection(position);
|
|
12121
12127
|
});
|
|
@@ -12140,14 +12146,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12140
12146
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12141
12147
|
return actual === expected ? margin : '0';
|
|
12142
12148
|
};
|
|
12143
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12149
|
+
var ContentWrapper = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
12144
12150
|
var borderColor = _a.borderColor;
|
|
12145
12151
|
return borderColor;
|
|
12146
12152
|
}, function (_a) {
|
|
12147
12153
|
var backgroundColor = _a.backgroundColor;
|
|
12148
12154
|
return backgroundColor;
|
|
12149
12155
|
});
|
|
12150
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12156
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
12151
12157
|
var position = _a.position;
|
|
12152
12158
|
return getArrowRotation(position);
|
|
12153
12159
|
}, function (_a) {
|
|
@@ -12157,17 +12163,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$I || (templateObject_
|
|
|
12157
12163
|
var position = _a.position;
|
|
12158
12164
|
return getArrowContainerMargin(position);
|
|
12159
12165
|
});
|
|
12160
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12166
|
+
var TooltipText = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12161
12167
|
var color = _a.color;
|
|
12162
12168
|
return color;
|
|
12163
12169
|
});
|
|
12164
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12165
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
12170
|
+
var TopSection = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
12171
|
+
var Title$7 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12166
12172
|
var color = _a.color;
|
|
12167
12173
|
return color;
|
|
12168
12174
|
});
|
|
12169
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12170
|
-
var templateObject_1$
|
|
12175
|
+
var IconContainer$5 = newStyled.div(templateObject_7$b || (templateObject_7$b = __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"])));
|
|
12176
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$J, templateObject_4$w, templateObject_5$k, templateObject_6$j, templateObject_7$b;
|
|
12171
12177
|
|
|
12172
12178
|
var Tooltip = function (_a) {
|
|
12173
12179
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -12254,7 +12260,7 @@ var AccordionDetailsStyles = {
|
|
|
12254
12260
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12255
12261
|
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
12256
12262
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12257
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12263
|
+
var StyledContent = newStyled.button(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
12258
12264
|
var Accordion$1 = function (_a) {
|
|
12259
12265
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
12260
12266
|
var theme = useTheme();
|
|
@@ -12266,7 +12272,7 @@ var Accordion$1 = function (_a) {
|
|
|
12266
12272
|
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12267
12273
|
} }), void 0));
|
|
12268
12274
|
};
|
|
12269
|
-
var templateObject_1$
|
|
12275
|
+
var templateObject_1$1b;
|
|
12270
12276
|
|
|
12271
12277
|
/* base styles & size variants */
|
|
12272
12278
|
var CustomRadioStyles$2 = {
|
|
@@ -12335,9 +12341,9 @@ var ContainerStyles$2 = {
|
|
|
12335
12341
|
},
|
|
12336
12342
|
};
|
|
12337
12343
|
|
|
12338
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12344
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12339
12345
|
var Container$P = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12340
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12346
|
+
var Input$4 = newStyled.input(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
12341
12347
|
var disabled = _a.disabled;
|
|
12342
12348
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12343
12349
|
});
|
|
@@ -12345,7 +12351,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12345
12351
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12346
12352
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12347
12353
|
]; });
|
|
12348
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12354
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
12349
12355
|
var RadioPrimary = function (_a) {
|
|
12350
12356
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
12351
12357
|
var theme = useTheme();
|
|
@@ -12355,7 +12361,7 @@ var RadioPrimary = function (_a) {
|
|
|
12355
12361
|
};
|
|
12356
12362
|
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12357
12363
|
};
|
|
12358
|
-
var templateObject_1$
|
|
12364
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12359
12365
|
|
|
12360
12366
|
/* base styles & size variants */
|
|
12361
12367
|
var CustomRadioStyles$1 = {
|
|
@@ -12420,9 +12426,9 @@ var ContainerStyles$1 = {
|
|
|
12420
12426
|
},
|
|
12421
12427
|
};
|
|
12422
12428
|
|
|
12423
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12429
|
+
var Wrapper$5 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12424
12430
|
var Container$O = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12425
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12431
|
+
var Input$3 = newStyled.input(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
12426
12432
|
var disabled = _a.disabled;
|
|
12427
12433
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12428
12434
|
});
|
|
@@ -12430,7 +12436,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12430
12436
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12431
12437
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12432
12438
|
]; });
|
|
12433
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12439
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12434
12440
|
var theme = _a.theme;
|
|
12435
12441
|
return theme.component.radio.textSize;
|
|
12436
12442
|
}, function (_a) {
|
|
@@ -12446,7 +12452,7 @@ var RadioInput = function (_a) {
|
|
|
12446
12452
|
};
|
|
12447
12453
|
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$O, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$3, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12448
12454
|
};
|
|
12449
|
-
var templateObject_1$
|
|
12455
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$H;
|
|
12450
12456
|
|
|
12451
12457
|
var RadioGroupInput = function (_a) {
|
|
12452
12458
|
var style = _a.style, 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;
|
|
@@ -12525,9 +12531,9 @@ var ContainerStyles = {
|
|
|
12525
12531
|
},
|
|
12526
12532
|
};
|
|
12527
12533
|
|
|
12528
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12534
|
+
var Wrapper$4 = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
12529
12535
|
var Container$N = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12530
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12536
|
+
var Input$2 = newStyled.input(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
12531
12537
|
var disabled = _a.disabled;
|
|
12532
12538
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12533
12539
|
});
|
|
@@ -12535,7 +12541,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12535
12541
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12536
12542
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12537
12543
|
]; });
|
|
12538
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12544
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12539
12545
|
var theme = _a.theme;
|
|
12540
12546
|
return theme.component.radio.textSize;
|
|
12541
12547
|
}, function (_a) {
|
|
@@ -12551,7 +12557,7 @@ var ClubRadioInput = function (_a) {
|
|
|
12551
12557
|
};
|
|
12552
12558
|
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$N, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12553
12559
|
};
|
|
12554
|
-
var templateObject_1$
|
|
12560
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$G;
|
|
12555
12561
|
|
|
12556
12562
|
var ClubRadioGroupInput = function (_a) {
|
|
12557
12563
|
var style = _a.style, 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;
|
|
@@ -12565,37 +12571,37 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12565
12571
|
}) }), void 0));
|
|
12566
12572
|
};
|
|
12567
12573
|
|
|
12568
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12569
|
-
var Container$M = newStyled.div(templateObject_2$
|
|
12574
|
+
var Wrapper$3 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
12575
|
+
var Container$M = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
12570
12576
|
var Minimalistic = function (_a) {
|
|
12571
12577
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _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, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
12572
12578
|
var theme = useTheme();
|
|
12573
12579
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12574
12580
|
};
|
|
12575
|
-
var templateObject_1$
|
|
12581
|
+
var templateObject_1$17, templateObject_2$O;
|
|
12576
12582
|
|
|
12577
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
12578
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
12579
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12580
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12583
|
+
var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12584
|
+
var Title$6 = newStyled.h1(templateObject_2$N || (templateObject_2$N = __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; });
|
|
12585
|
+
var Details$1 = newStyled.span(templateObject_3$F || (templateObject_3$F = __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; });
|
|
12586
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
12581
12587
|
var Simple = function (_a) {
|
|
12582
12588
|
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;
|
|
12583
12589
|
var theme = useTheme();
|
|
12584
12590
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$L, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "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));
|
|
12585
12591
|
};
|
|
12586
|
-
var templateObject_1$
|
|
12592
|
+
var templateObject_1$16, templateObject_2$N, templateObject_3$F, templateObject_4$v;
|
|
12587
12593
|
|
|
12588
12594
|
var Bundle = {
|
|
12589
12595
|
Minimalistic: Minimalistic,
|
|
12590
12596
|
Simple: Simple,
|
|
12591
12597
|
};
|
|
12592
12598
|
|
|
12593
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
12599
|
+
var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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"])));
|
|
12594
12600
|
var Tag$2 = function (_a) {
|
|
12595
12601
|
var text = _a.text, className = _a.className;
|
|
12596
12602
|
return jsx$1(Container$K, __assign$1({ className: className }, { children: text }), void 0);
|
|
12597
12603
|
};
|
|
12598
|
-
var templateObject_1$
|
|
12604
|
+
var templateObject_1$15;
|
|
12599
12605
|
|
|
12600
12606
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12601
12607
|
switch (size) {
|
|
@@ -12698,11 +12704,11 @@ var Timer = function (_a) {
|
|
|
12698
12704
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12699
12705
|
};
|
|
12700
12706
|
|
|
12701
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12707
|
+
var Label$2 = newStyled.span(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
12702
12708
|
var color = _a.color;
|
|
12703
12709
|
return color;
|
|
12704
12710
|
});
|
|
12705
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12711
|
+
var MandatoryIcon = newStyled.span(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12706
12712
|
var color = _a.color;
|
|
12707
12713
|
return color;
|
|
12708
12714
|
});
|
|
@@ -12711,7 +12717,7 @@ var InputLabel = function (_a) {
|
|
|
12711
12717
|
var theme = useTheme();
|
|
12712
12718
|
return (jsxs$1(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12713
12719
|
};
|
|
12714
|
-
var templateObject_1$
|
|
12720
|
+
var templateObject_1$14, templateObject_2$M;
|
|
12715
12721
|
|
|
12716
12722
|
var containerByStatus = function (theme, status) {
|
|
12717
12723
|
if (status === InputValidationType.Valid)
|
|
@@ -12720,12 +12726,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12720
12726
|
return theme.colors.semantic.urgent.color;
|
|
12721
12727
|
return '';
|
|
12722
12728
|
};
|
|
12723
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
12729
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12724
12730
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12725
12731
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12726
12732
|
});
|
|
12727
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12728
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12733
|
+
var StyledLabel = newStyled.label(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
12734
|
+
var StyledInput = newStyled.input(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12729
12735
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12730
12736
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12731
12737
|
}, function (_a) {
|
|
@@ -12780,11 +12786,11 @@ var StyledInput = newStyled.input(templateObject_3$D || (templateObject_3$D = __
|
|
|
12780
12786
|
return hasValue &&
|
|
12781
12787
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12782
12788
|
});
|
|
12783
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12789
|
+
var InputWrapper = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12784
12790
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12785
12791
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12786
12792
|
});
|
|
12787
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
12793
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
12788
12794
|
var theme = _a.theme;
|
|
12789
12795
|
return theme.component.input.placeholderColor;
|
|
12790
12796
|
}, function (_a) {
|
|
@@ -12797,8 +12803,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$i || (templateObject_5
|
|
|
12797
12803
|
var theme = _a.theme;
|
|
12798
12804
|
return theme.component.input.lineHeight;
|
|
12799
12805
|
});
|
|
12800
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12801
|
-
var templateObject_1$
|
|
12806
|
+
var ClearInput = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12807
|
+
var templateObject_1$13, templateObject_2$L, templateObject_3$E, templateObject_4$u, templateObject_5$j, templateObject_6$i;
|
|
12802
12808
|
|
|
12803
12809
|
var BaseInput = function (_a) {
|
|
12804
12810
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -12842,11 +12848,11 @@ var Button$3 = function (_a) {
|
|
|
12842
12848
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12843
12849
|
};
|
|
12844
12850
|
|
|
12845
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
12851
|
+
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
12846
12852
|
var theme = _a.theme;
|
|
12847
12853
|
return theme.component.inputCustom.input.borderRadius;
|
|
12848
12854
|
});
|
|
12849
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12855
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
12850
12856
|
var theme = _a.theme;
|
|
12851
12857
|
return theme.component.inputCustom.button.borderRadius;
|
|
12852
12858
|
});
|
|
@@ -12861,21 +12867,21 @@ var Custom = function (_a) {
|
|
|
12861
12867
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12862
12868
|
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12863
12869
|
};
|
|
12864
|
-
var templateObject_1$
|
|
12870
|
+
var templateObject_1$12, templateObject_2$K;
|
|
12865
12871
|
|
|
12866
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12872
|
+
var SuccessContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12867
12873
|
var size = _a.size;
|
|
12868
12874
|
return (size === 'small' ? '36px' : '');
|
|
12869
12875
|
});
|
|
12870
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12871
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12876
|
+
var SuccessMessage = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\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 flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
12877
|
+
var SuccessText = newStyled.span(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
12872
12878
|
var Success = function (_a) {
|
|
12873
12879
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12874
12880
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { 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));
|
|
12875
12881
|
};
|
|
12876
|
-
var templateObject_1$
|
|
12882
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$D;
|
|
12877
12883
|
|
|
12878
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
12884
|
+
var ButtonContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12879
12885
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12880
12886
|
return status === InputValidationType.Empty &&
|
|
12881
12887
|
type === 'primary' &&
|
|
@@ -12892,10 +12898,10 @@ var BasePlusButton = function (_a) {
|
|
|
12892
12898
|
}
|
|
12893
12899
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12894
12900
|
};
|
|
12895
|
-
var templateObject_1
|
|
12901
|
+
var templateObject_1$10;
|
|
12896
12902
|
|
|
12897
|
-
var Container$H = newStyled.div(templateObject_1
|
|
12898
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12903
|
+
var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12904
|
+
var IconContainer$4 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12899
12905
|
var BasePlusIcon = function (_a) {
|
|
12900
12906
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12901
12907
|
var theme = useTheme();
|
|
@@ -12906,7 +12912,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12906
12912
|
? theme.colors.semantic.urgent.color
|
|
12907
12913
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12908
12914
|
};
|
|
12909
|
-
var templateObject_1
|
|
12915
|
+
var templateObject_1$$, templateObject_2$I;
|
|
12910
12916
|
|
|
12911
12917
|
var Input$1 = {
|
|
12912
12918
|
Simple: BaseInput,
|
|
@@ -12915,7 +12921,7 @@ var Input$1 = {
|
|
|
12915
12921
|
SimplePlusIcon: BasePlusIcon,
|
|
12916
12922
|
};
|
|
12917
12923
|
|
|
12918
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
12924
|
+
var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
12919
12925
|
var width = _a.width;
|
|
12920
12926
|
return width;
|
|
12921
12927
|
}, function (_a) {
|
|
@@ -12933,9 +12939,9 @@ var PaymentMethod = function (_a) {
|
|
|
12933
12939
|
var theme = useTheme();
|
|
12934
12940
|
return (jsx$1(Container$G, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
12935
12941
|
};
|
|
12936
|
-
var templateObject_1$
|
|
12942
|
+
var templateObject_1$_;
|
|
12937
12943
|
|
|
12938
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
12944
|
+
var Text$6 = newStyled.h3(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
12939
12945
|
var backgroundColor = _a.backgroundColor;
|
|
12940
12946
|
return backgroundColor;
|
|
12941
12947
|
}, function (_a) {
|
|
@@ -12947,11 +12953,11 @@ var OfferBanner = function (_a) {
|
|
|
12947
12953
|
var theme = useTheme();
|
|
12948
12954
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12949
12955
|
};
|
|
12950
|
-
var templateObject_1$
|
|
12956
|
+
var templateObject_1$Z;
|
|
12951
12957
|
|
|
12952
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12953
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12954
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12958
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
12959
|
+
var GrandTotal = newStyled.h1(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\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: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12960
|
+
var Currency = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12955
12961
|
var theme = _a.theme;
|
|
12956
12962
|
return theme.component.total.basicTotal.currency.color;
|
|
12957
12963
|
}, function (_a) {
|
|
@@ -12964,9 +12970,9 @@ var Currency = newStyled.span(templateObject_3$B || (templateObject_3$B = __make
|
|
|
12964
12970
|
var theme = _a.theme;
|
|
12965
12971
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12966
12972
|
});
|
|
12967
|
-
var Container$F = newStyled.div(templateObject_4$
|
|
12968
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12969
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12973
|
+
var Container$F = newStyled.div(templateObject_4$t || (templateObject_4$t = __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; });
|
|
12974
|
+
var DiscountText = newStyled.h3(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
12975
|
+
var DiscountAmount = newStyled.h3(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
12970
12976
|
var theme = _a.theme;
|
|
12971
12977
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
12972
12978
|
});
|
|
@@ -12975,21 +12981,21 @@ var Total = function (_a) {
|
|
|
12975
12981
|
var theme = useTheme();
|
|
12976
12982
|
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12977
12983
|
};
|
|
12978
|
-
var templateObject_1$
|
|
12984
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$t, templateObject_5$i, templateObject_6$h;
|
|
12979
12985
|
|
|
12980
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12986
|
+
var Wrapper$1 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12981
12987
|
var color = _a.color;
|
|
12982
12988
|
return color;
|
|
12983
12989
|
});
|
|
12984
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12985
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12990
|
+
var ItemContainer = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
12991
|
+
var Item$2 = newStyled.h4(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12986
12992
|
var theme = _a.theme;
|
|
12987
12993
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12988
12994
|
}, function (_a) {
|
|
12989
12995
|
var theme = _a.theme;
|
|
12990
12996
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12991
12997
|
});
|
|
12992
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12998
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12993
12999
|
var color = _a.color;
|
|
12994
13000
|
return color;
|
|
12995
13001
|
});
|
|
@@ -13002,51 +13008,51 @@ var Subtotal = function (_a) {
|
|
|
13002
13008
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
13003
13009
|
})] }), void 0));
|
|
13004
13010
|
};
|
|
13005
|
-
var templateObject_1$
|
|
13011
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$B, templateObject_4$s;
|
|
13006
13012
|
|
|
13007
13013
|
var Totals = {
|
|
13008
13014
|
Total: Total,
|
|
13009
13015
|
Subtotal: Subtotal,
|
|
13010
13016
|
};
|
|
13011
13017
|
|
|
13012
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
13013
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13014
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13015
|
-
var Details = newStyled.span(templateObject_4$
|
|
13018
|
+
var Container$E = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
13019
|
+
var IconContainer$3 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
13020
|
+
var Text$5 = newStyled.p(templateObject_3$A || (templateObject_3$A = __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; });
|
|
13021
|
+
var Details = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
13016
13022
|
var Note = function (_a) {
|
|
13017
13023
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13018
13024
|
var theme = useTheme();
|
|
13019
13025
|
return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13020
13026
|
};
|
|
13021
|
-
var templateObject_1$
|
|
13027
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r;
|
|
13022
13028
|
|
|
13023
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
13029
|
+
var Title$5 = newStyled.h1(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
13024
13030
|
var theme = _a.theme;
|
|
13025
13031
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
13026
13032
|
});
|
|
13027
|
-
var Line = newStyled.div(templateObject_2$
|
|
13028
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13033
|
+
var Line = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
13034
|
+
var Row$1 = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
13029
13035
|
flexDirection: ['column', 'row'],
|
|
13030
13036
|
}));
|
|
13031
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
13037
|
+
var Col$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
13032
13038
|
margin: ['0', '0 1.25rem'],
|
|
13033
13039
|
marginBottom: ['1.875rem', '0'],
|
|
13034
13040
|
alignItems: ['center', 'flex-start'],
|
|
13035
13041
|
textAlign: ['center', 'inherit'],
|
|
13036
13042
|
width: ['100%', 'inherit'],
|
|
13037
13043
|
}));
|
|
13038
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
13044
|
+
var IconContainer$2 = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
13039
13045
|
marginRight: ['0', '0.438rem'],
|
|
13040
13046
|
marginBottom: ['10px', '0'],
|
|
13041
13047
|
width: ['auto', '1.5rem'],
|
|
13042
13048
|
}));
|
|
13043
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
13049
|
+
var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
13044
13050
|
display: ['block', 'flex'],
|
|
13045
13051
|
}), function (_a) {
|
|
13046
13052
|
var theme = _a.theme;
|
|
13047
13053
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
13048
13054
|
});
|
|
13049
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
13055
|
+
var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
13050
13056
|
var theme = _a.theme;
|
|
13051
13057
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
13052
13058
|
}, function (_a) {
|
|
@@ -13057,51 +13063,51 @@ var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __m
|
|
|
13057
13063
|
})
|
|
13058
13064
|
: '';
|
|
13059
13065
|
});
|
|
13060
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
13066
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
13061
13067
|
var DeliveryDetails = function (_a) {
|
|
13062
13068
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
13063
13069
|
var theme = useTheme();
|
|
13064
13070
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { 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));
|
|
13065
13071
|
};
|
|
13066
|
-
var templateObject_1$
|
|
13072
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$z, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$a, templateObject_8$8;
|
|
13067
13073
|
|
|
13068
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
13069
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13074
|
+
var Container$D = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
13075
|
+
var Text$4 = newStyled.p(templateObject_2$D || (templateObject_2$D = __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; });
|
|
13070
13076
|
var ScrollToTop = function (_a) {
|
|
13071
13077
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13072
13078
|
var theme = useTheme();
|
|
13073
13079
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13074
13080
|
return (jsxs$1(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
13075
13081
|
};
|
|
13076
|
-
var templateObject_1$
|
|
13082
|
+
var templateObject_1$U, templateObject_2$D;
|
|
13077
13083
|
|
|
13078
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
13084
|
+
var Container$C = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
13079
13085
|
var theme = _a.theme;
|
|
13080
13086
|
return theme.component.orderBar.backgroundColor;
|
|
13081
13087
|
});
|
|
13082
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13088
|
+
var H1 = newStyled.h1(templateObject_2$C || (templateObject_2$C = __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; });
|
|
13083
13089
|
var OrderBar = function (_a) {
|
|
13084
13090
|
var message = _a.message, color = _a.color;
|
|
13085
13091
|
var theme = useTheme();
|
|
13086
13092
|
return (jsxs$1(Container$C, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
13087
13093
|
};
|
|
13088
|
-
var templateObject_1$
|
|
13094
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13089
13095
|
|
|
13090
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13091
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13092
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13093
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
13096
|
+
var TableElement$1 = newStyled.table(templateObject_1$S || (templateObject_1$S = __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; });
|
|
13097
|
+
var TableCell$1 = newStyled.td(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\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: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\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; });
|
|
13098
|
+
var TableHead$1 = newStyled.th(templateObject_3$y || (templateObject_3$y = __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; });
|
|
13099
|
+
var TableRow$1 = newStyled.tr(templateObject_4$p || (templateObject_4$p = __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; });
|
|
13094
13100
|
var SizeTable = function (_a) {
|
|
13095
13101
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13096
13102
|
var theme = useTheme();
|
|
13097
13103
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
13098
13104
|
};
|
|
13099
|
-
var templateObject_1$
|
|
13105
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$y, templateObject_4$p;
|
|
13100
13106
|
|
|
13101
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13102
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13103
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13104
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
13107
|
+
var TableElement = newStyled.table(templateObject_1$R || (templateObject_1$R = __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; });
|
|
13108
|
+
var TableCell = newStyled.td(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
13109
|
+
var TableHead = newStyled.th(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
13110
|
+
var TableRow = newStyled.tr(templateObject_4$o || (templateObject_4$o = __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; });
|
|
13105
13111
|
var SizeChartTable = function (_a) {
|
|
13106
13112
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
13107
13113
|
var theme = useTheme();
|
|
@@ -13134,19 +13140,19 @@ var SizeChartTable = function (_a) {
|
|
|
13134
13140
|
backgroundColor: getCellColor(index, cell),
|
|
13135
13141
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13136
13142
|
};
|
|
13137
|
-
var templateObject_1$
|
|
13143
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$x, templateObject_4$o;
|
|
13138
13144
|
|
|
13139
|
-
var Img = newStyled.img(templateObject_1$
|
|
13145
|
+
var Img = newStyled.img(templateObject_1$Q || (templateObject_1$Q = __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; });
|
|
13140
13146
|
var Image = function (_a) {
|
|
13141
13147
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
13142
13148
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
13143
13149
|
};
|
|
13144
|
-
var templateObject_1$
|
|
13150
|
+
var templateObject_1$Q;
|
|
13145
13151
|
|
|
13146
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13152
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
13147
13153
|
var IMAGE_WIDTH = '63px';
|
|
13148
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13149
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13154
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
13155
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
13150
13156
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13151
13157
|
}), IMAGE_WIDTH);
|
|
13152
13158
|
var Title$4 = newStyled.h2(function (_a) {
|
|
@@ -13169,7 +13175,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13169
13175
|
margin: '0.063rem 0',
|
|
13170
13176
|
});
|
|
13171
13177
|
});
|
|
13172
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13178
|
+
var PriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
13173
13179
|
var withTag = _a.withTag; _a.theme;
|
|
13174
13180
|
return withTag
|
|
13175
13181
|
? mediaQueries({
|
|
@@ -13178,14 +13184,14 @@ var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = _
|
|
|
13178
13184
|
})
|
|
13179
13185
|
: 'justify-content: end';
|
|
13180
13186
|
});
|
|
13181
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13182
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
13187
|
+
var Quantity = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
13188
|
+
var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
13183
13189
|
var SimpleOrderItem = function (_a) {
|
|
13184
13190
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
13185
13191
|
var theme = useTheme();
|
|
13186
13192
|
return (jsxs$1(Container$B, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { 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.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13187
13193
|
};
|
|
13188
|
-
var templateObject_1$
|
|
13194
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13189
13195
|
|
|
13190
13196
|
function formatDate(date) {
|
|
13191
13197
|
var day = date.getDate();
|
|
@@ -13196,16 +13202,16 @@ function formatDate(date) {
|
|
|
13196
13202
|
|
|
13197
13203
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13198
13204
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13199
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13200
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13201
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13202
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13203
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13204
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13205
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13206
|
-
var ReviewTitle$1 = newStyled.h3(templateObject_8$
|
|
13207
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
13208
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
13205
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
13206
|
+
var Heading = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13207
|
+
var Content$2 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13208
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13209
|
+
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13210
|
+
var VariantText = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13211
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
13212
|
+
var ReviewTitle$1 = newStyled.h3(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13213
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
13214
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
13209
13215
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
13210
13216
|
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
13211
13217
|
var ImageSpace = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
@@ -13248,15 +13254,15 @@ var Review$1 = function (_a) {
|
|
|
13248
13254
|
: description,
|
|
13249
13255
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13250
13256
|
};
|
|
13251
|
-
var templateObject_1$
|
|
13257
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$v, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$9, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1;
|
|
13252
13258
|
|
|
13253
|
-
var List = newStyled.ul(templateObject_1$
|
|
13254
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13255
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13256
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13257
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13258
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13259
|
-
var templateObject_1$
|
|
13259
|
+
var List = newStyled.ul(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13260
|
+
var Item$1 = newStyled.li(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
13261
|
+
var DropdownWrapper = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
13262
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
13263
|
+
var StyledDropdown = newStyled.ul(templateObject_5$e || (templateObject_5$e = __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; });
|
|
13264
|
+
var DropdownItem = newStyled.li(templateObject_6$d || (templateObject_6$d = __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; });
|
|
13265
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e, templateObject_6$d;
|
|
13260
13266
|
|
|
13261
13267
|
var DropdownListIcons = function (_a) {
|
|
13262
13268
|
var items = _a.items;
|
|
@@ -13269,7 +13275,7 @@ var Dropdown = function (_a) {
|
|
|
13269
13275
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
13270
13276
|
};
|
|
13271
13277
|
|
|
13272
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13278
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$M || (templateObject_1$M = __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; });
|
|
13273
13279
|
var AmazonButton = function (_a) {
|
|
13274
13280
|
var onClick = _a.onClick;
|
|
13275
13281
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13278,23 +13284,23 @@ var PaypalButton = function (_a) {
|
|
|
13278
13284
|
var onClick = _a.onClick;
|
|
13279
13285
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13280
13286
|
};
|
|
13281
|
-
var templateObject_1$
|
|
13287
|
+
var templateObject_1$M;
|
|
13282
13288
|
|
|
13283
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13284
|
-
var Col = newStyled.div(templateObject_2$
|
|
13285
|
-
var Row = newStyled.div(templateObject_3$
|
|
13289
|
+
var Wrapper = newStyled.div(templateObject_1$L || (templateObject_1$L = __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'); });
|
|
13290
|
+
var Col = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13291
|
+
var Row = newStyled.div(templateObject_3$t || (templateObject_3$t = __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) {
|
|
13286
13292
|
return props.rightToLeft &&
|
|
13287
13293
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13288
13294
|
});
|
|
13289
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13290
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13291
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13295
|
+
var H5 = newStyled.h5(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13296
|
+
var H3$1 = newStyled.h3(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13297
|
+
var FreeShipping = newStyled.span(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13292
13298
|
var CrossSellCheckbox = function (_a) {
|
|
13293
13299
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13294
13300
|
var theme = useTheme();
|
|
13295
13301
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ 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$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13296
13302
|
};
|
|
13297
|
-
var templateObject_1$
|
|
13303
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$t, templateObject_4$k, templateObject_5$d, templateObject_6$c;
|
|
13298
13304
|
|
|
13299
13305
|
var index = /*#__PURE__*/Object.freeze({
|
|
13300
13306
|
__proto__: null,
|
|
@@ -13307,7 +13313,7 @@ var Spacing = function (_a) {
|
|
|
13307
13313
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13308
13314
|
};
|
|
13309
13315
|
|
|
13310
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
13316
|
+
var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
13311
13317
|
var height = _a.height;
|
|
13312
13318
|
return (height ? height : '1.5em');
|
|
13313
13319
|
}, function (_a) {
|
|
@@ -13334,14 +13340,14 @@ var SkeletonBox = function (_a) {
|
|
|
13334
13340
|
var theme = useTheme();
|
|
13335
13341
|
return jsx$1(Container$z, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13336
13342
|
};
|
|
13337
|
-
var templateObject_1$
|
|
13343
|
+
var templateObject_1$K;
|
|
13338
13344
|
|
|
13339
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
13345
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
13340
13346
|
var displayBNPL = _a.displayBNPL;
|
|
13341
13347
|
return (displayBNPL ? 'flex' : 'none');
|
|
13342
13348
|
});
|
|
13343
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13344
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13349
|
+
var TextContainer$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
13350
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13345
13351
|
var BuyNowPayLater = function (_a) {
|
|
13346
13352
|
var _b;
|
|
13347
13353
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -13353,12 +13359,12 @@ var BuyNowPayLater = function (_a) {
|
|
|
13353
13359
|
}
|
|
13354
13360
|
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13355
13361
|
};
|
|
13356
|
-
var templateObject_1$
|
|
13362
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$s;
|
|
13357
13363
|
|
|
13358
|
-
var Container$x = newStyled('div')(templateObject_1$
|
|
13359
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13360
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13361
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13364
|
+
var Container$x = newStyled('div')(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
13365
|
+
var Content$1 = newStyled('div')(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
13366
|
+
var BarContainer = newStyled('div')(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
13367
|
+
var Bar = newStyled('div')(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
13362
13368
|
var index = _a.index;
|
|
13363
13369
|
return "".concat(6 + 3 * index, "px");
|
|
13364
13370
|
}, function (_a) {
|
|
@@ -13369,7 +13375,7 @@ var StrengthBars = function (_a) {
|
|
|
13369
13375
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13370
13376
|
return (jsxs$1(Container$x, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13371
13377
|
};
|
|
13372
|
-
var templateObject_1$
|
|
13378
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j;
|
|
13373
13379
|
|
|
13374
13380
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13375
13381
|
var width = _a.width, height = _a.height;
|
|
@@ -13379,10 +13385,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13379
13385
|
height: height,
|
|
13380
13386
|
});
|
|
13381
13387
|
});
|
|
13382
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
13383
|
-
var Container$w = newStyled.a(templateObject_2$
|
|
13384
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
13385
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13388
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
13389
|
+
var Container$w = newStyled.a(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
13390
|
+
var ProdCardContainer = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
13391
|
+
var Title$3 = newStyled.p(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
13386
13392
|
var getStylesBySize$1 = function (size) {
|
|
13387
13393
|
switch (size) {
|
|
13388
13394
|
case ComponentSize.Medium:
|
|
@@ -13408,15 +13414,15 @@ var getStylesBySize$1 = function (size) {
|
|
|
13408
13414
|
};
|
|
13409
13415
|
}
|
|
13410
13416
|
};
|
|
13411
|
-
var TopTagContainer$2 = newStyled.div(templateObject_5$
|
|
13417
|
+
var TopTagContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13412
13418
|
var style = _a.style;
|
|
13413
13419
|
return style.width;
|
|
13414
13420
|
});
|
|
13415
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_6$
|
|
13421
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13416
13422
|
var style = _a.style;
|
|
13417
13423
|
return style.width;
|
|
13418
13424
|
});
|
|
13419
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
13425
|
+
var MarginTopContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13420
13426
|
var ProductItemMobile = function (_a) {
|
|
13421
13427
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
13422
13428
|
display: false,
|
|
@@ -13451,9 +13457,9 @@ var ProductItemMobile = function (_a) {
|
|
|
13451
13457
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13452
13458
|
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ 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, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), 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)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
13453
13459
|
};
|
|
13454
|
-
var templateObject_1$
|
|
13460
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13455
13461
|
|
|
13456
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
13462
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
13457
13463
|
function withProductGrid(ProductItemComponent, data) {
|
|
13458
13464
|
function WithProductGrid(props) {
|
|
13459
13465
|
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -13463,18 +13469,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
13463
13469
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
13464
13470
|
return WithProductGrid;
|
|
13465
13471
|
}
|
|
13466
|
-
var templateObject_1$
|
|
13472
|
+
var templateObject_1$G;
|
|
13467
13473
|
|
|
13468
13474
|
var Collection = {
|
|
13469
13475
|
ProductItemMobile: ProductItemMobile,
|
|
13470
13476
|
withProductGrid: withProductGrid,
|
|
13471
13477
|
};
|
|
13472
13478
|
|
|
13473
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
13479
|
+
var Backdrop = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
13474
13480
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
13475
13481
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
13476
13482
|
});
|
|
13477
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
13483
|
+
var Sidebar = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\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: 30;\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) {
|
|
13478
13484
|
var width = _a.width;
|
|
13479
13485
|
return width;
|
|
13480
13486
|
}, function (_a) {
|
|
@@ -13515,16 +13521,16 @@ var Drawer = function (_a) {
|
|
|
13515
13521
|
}, [isOpen, onClose, onOpen]);
|
|
13516
13522
|
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$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
13517
13523
|
};
|
|
13518
|
-
var templateObject_1$
|
|
13524
|
+
var templateObject_1$F, templateObject_2$s;
|
|
13519
13525
|
|
|
13520
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
13526
|
+
var Container$u = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
13521
13527
|
var size = _a.size;
|
|
13522
13528
|
return (size ? size : '100%');
|
|
13523
13529
|
}, function (_a) {
|
|
13524
13530
|
var size = _a.size;
|
|
13525
13531
|
return (size ? size : '100%');
|
|
13526
13532
|
});
|
|
13527
|
-
var Animation = newStyled.div(templateObject_2$
|
|
13533
|
+
var Animation = newStyled.div(templateObject_2$r || (templateObject_2$r = __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) {
|
|
13528
13534
|
var animationDuration = _a.animationDuration;
|
|
13529
13535
|
return animationDuration;
|
|
13530
13536
|
});
|
|
@@ -13532,11 +13538,11 @@ var Spinner = function (_a) {
|
|
|
13532
13538
|
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;
|
|
13533
13539
|
return (jsx$1(Container$u, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
13534
13540
|
};
|
|
13535
|
-
var templateObject_1$
|
|
13541
|
+
var templateObject_1$E, templateObject_2$r;
|
|
13536
13542
|
|
|
13537
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13538
|
-
var LI = newStyled.li(templateObject_2$
|
|
13539
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
13543
|
+
var UL = newStyled.ul(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
13544
|
+
var LI = newStyled.li(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
13545
|
+
var CloseIconContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
13540
13546
|
var Tags = function (_a) {
|
|
13541
13547
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
13542
13548
|
var theme = useTheme();
|
|
@@ -13544,7 +13550,7 @@ var Tags = function (_a) {
|
|
|
13544
13550
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
13545
13551
|
}) }), void 0));
|
|
13546
13552
|
};
|
|
13547
|
-
var templateObject_1$
|
|
13553
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$p;
|
|
13548
13554
|
|
|
13549
13555
|
function FilteringDropdown(_a) {
|
|
13550
13556
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -13577,12 +13583,12 @@ function FilteringDropdown(_a) {
|
|
|
13577
13583
|
}) }, void 0)] }), void 0));
|
|
13578
13584
|
}
|
|
13579
13585
|
|
|
13580
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
13581
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13582
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13586
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
13587
|
+
var IconContainer$1 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13588
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13583
13589
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13584
13590
|
}));
|
|
13585
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13591
|
+
var PageNumber = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
13586
13592
|
var bold = _a.bold;
|
|
13587
13593
|
return (bold ? '700' : '500');
|
|
13588
13594
|
}, function (_a) {
|
|
@@ -13599,7 +13605,7 @@ var PageNumber = newStyled.span(templateObject_4$g || (templateObject_4$g = __ma
|
|
|
13599
13605
|
var background = _a.background;
|
|
13600
13606
|
return background || 'unset';
|
|
13601
13607
|
});
|
|
13602
|
-
var templateObject_1$
|
|
13608
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$o, templateObject_4$h;
|
|
13603
13609
|
|
|
13604
13610
|
var Pagination = function (_a) {
|
|
13605
13611
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -13664,7 +13670,7 @@ var PaginatorBlog = function (_a) {
|
|
|
13664
13670
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13665
13671
|
};
|
|
13666
13672
|
|
|
13667
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
13673
|
+
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
13668
13674
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13669
13675
|
}));
|
|
13670
13676
|
var Description$2 = newStyled.div({
|
|
@@ -13683,7 +13689,7 @@ var ProductItem = function (_a) {
|
|
|
13683
13689
|
var theme = useTheme();
|
|
13684
13690
|
return (jsxs$1(Container$s, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$2, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13685
13691
|
};
|
|
13686
|
-
var templateObject_1$
|
|
13692
|
+
var templateObject_1$B;
|
|
13687
13693
|
|
|
13688
13694
|
var Container$r = newStyled.div({
|
|
13689
13695
|
display: 'flex',
|
|
@@ -13699,7 +13705,7 @@ var Ul = newStyled.ul({
|
|
|
13699
13705
|
margin: '0px',
|
|
13700
13706
|
padding: '0px',
|
|
13701
13707
|
});
|
|
13702
|
-
var Li = newStyled.li(templateObject_1$
|
|
13708
|
+
var Li = newStyled.li(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
13703
13709
|
padding: [0, '0rem 1rem'],
|
|
13704
13710
|
borderRadius: [0, '0.5rem'],
|
|
13705
13711
|
}));
|
|
@@ -13711,12 +13717,12 @@ var Anchor = newStyled.a({
|
|
|
13711
13717
|
padding: 0,
|
|
13712
13718
|
textDecoration: 'none',
|
|
13713
13719
|
});
|
|
13714
|
-
var Container$q = newStyled.div(templateObject_2$
|
|
13720
|
+
var Container$q = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
13715
13721
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13716
13722
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13717
13723
|
borderRadius: ['0', '0.5rem'],
|
|
13718
13724
|
}));
|
|
13719
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13725
|
+
var Header$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13720
13726
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13721
13727
|
}));
|
|
13722
13728
|
var ResultsPanel = function (_a) {
|
|
@@ -13724,7 +13730,7 @@ var ResultsPanel = function (_a) {
|
|
|
13724
13730
|
var theme = useTheme();
|
|
13725
13731
|
return (jsxs$1(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13726
13732
|
};
|
|
13727
|
-
var templateObject_1$
|
|
13733
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$n;
|
|
13728
13734
|
|
|
13729
13735
|
var Input = newStyled.input(function (props) { return ({
|
|
13730
13736
|
padding: props.theme.component.input.padding,
|
|
@@ -13755,7 +13761,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13755
13761
|
},
|
|
13756
13762
|
}); });
|
|
13757
13763
|
|
|
13758
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13764
|
+
var Button$2 = newStyled.button(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13759
13765
|
right: ['1rem', '7.75rem'],
|
|
13760
13766
|
top: ['0.75rem', '0.75rem'],
|
|
13761
13767
|
}));
|
|
@@ -13764,7 +13770,7 @@ var ClearButton = function (_a) {
|
|
|
13764
13770
|
var theme = useTheme();
|
|
13765
13771
|
return (jsx$1(Button$2, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13766
13772
|
};
|
|
13767
|
-
var templateObject_1$
|
|
13773
|
+
var templateObject_1$z;
|
|
13768
13774
|
|
|
13769
13775
|
var useOnClickOutside = function (ref, handler) {
|
|
13770
13776
|
useEffect(function () {
|
|
@@ -13904,20 +13910,20 @@ var SearchBar = function (_a) {
|
|
|
13904
13910
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13905
13911
|
};
|
|
13906
13912
|
|
|
13907
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
13913
|
+
var Container$o = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13908
13914
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13909
13915
|
return borderRadiusVariant &&
|
|
13910
13916
|
"\n border-radius: 40px;\n ";
|
|
13911
13917
|
});
|
|
13912
13918
|
// max-height: 31.875rem;
|
|
13913
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13914
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13915
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
13916
|
-
var Video = newStyled.div(templateObject_5$
|
|
13917
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
13918
|
-
var Text$3 = newStyled.div(templateObject_7$
|
|
13919
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13920
|
-
var Button$1 = newStyled.button(templateObject_9$
|
|
13919
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13920
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13921
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
13922
|
+
var Video = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
13923
|
+
var VideoTag = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13924
|
+
var Text$3 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13925
|
+
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13926
|
+
var Button$1 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13921
13927
|
var settings = {
|
|
13922
13928
|
dots: true,
|
|
13923
13929
|
infinite: false,
|
|
@@ -14010,14 +14016,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14010
14016
|
};
|
|
14011
14017
|
}, [preventTouch, ref, touchStart]);
|
|
14012
14018
|
}
|
|
14013
|
-
var templateObject_1$
|
|
14019
|
+
var templateObject_1$y, templateObject_2$n, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4;
|
|
14014
14020
|
|
|
14015
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
14021
|
+
var Container$n = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14016
14022
|
var ProductGalleryMobile = function (_a) {
|
|
14017
14023
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14018
14024
|
return (jsx$1(Container$n, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14019
14025
|
};
|
|
14020
|
-
var templateObject_1$
|
|
14026
|
+
var templateObject_1$x;
|
|
14021
14027
|
|
|
14022
14028
|
var Portal = function (_a) {
|
|
14023
14029
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -14150,17 +14156,17 @@ var react = __toCommonJS(react_exports);
|
|
|
14150
14156
|
var visibleStyle = function (_a) {
|
|
14151
14157
|
var opened = _a.opened;
|
|
14152
14158
|
return opened
|
|
14153
|
-
? css(templateObject_1$
|
|
14159
|
+
? css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14154
14160
|
};
|
|
14155
14161
|
var transformStyle = function (_a) {
|
|
14156
14162
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14157
14163
|
return opened
|
|
14158
|
-
? css(templateObject_3$
|
|
14164
|
+
? css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14159
14165
|
};
|
|
14160
|
-
var Container$m = newStyled.div(templateObject_5$
|
|
14166
|
+
var Container$m = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14161
14167
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14162
14168
|
}), visibleStyle, transformStyle);
|
|
14163
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14169
|
+
var Overlay = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14164
14170
|
var Modal = function (_a) {
|
|
14165
14171
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14166
14172
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14198,39 +14204,39 @@ var useModal = function (id) {
|
|
|
14198
14204
|
close: close,
|
|
14199
14205
|
}); }, [close, open, opened]);
|
|
14200
14206
|
};
|
|
14201
|
-
var templateObject_1$
|
|
14207
|
+
var templateObject_1$w, templateObject_2$m, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
14202
14208
|
|
|
14203
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
14209
|
+
var Text$2 = newStyled.span(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
14204
14210
|
var Title$2 = function (_a) {
|
|
14205
14211
|
var title = _a.title;
|
|
14206
14212
|
var theme = useTheme();
|
|
14207
14213
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
14208
14214
|
};
|
|
14209
|
-
var templateObject_1$
|
|
14215
|
+
var templateObject_1$v;
|
|
14210
14216
|
|
|
14211
|
-
var P = newStyled.p(templateObject_1$
|
|
14217
|
+
var P = newStyled.p(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
14212
14218
|
var Promo = function (_a) {
|
|
14213
14219
|
var text = _a.text;
|
|
14214
14220
|
var theme = useTheme();
|
|
14215
14221
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
14216
14222
|
};
|
|
14217
|
-
var templateObject_1$
|
|
14223
|
+
var templateObject_1$u;
|
|
14218
14224
|
|
|
14219
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
14225
|
+
var Text$1 = newStyled.span(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
14220
14226
|
var Description$1 = function (_a) {
|
|
14221
14227
|
var text = _a.text;
|
|
14222
14228
|
var theme = useTheme();
|
|
14223
14229
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
14224
14230
|
};
|
|
14225
|
-
var templateObject_1$
|
|
14231
|
+
var templateObject_1$t;
|
|
14226
14232
|
|
|
14227
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
14233
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
14228
14234
|
var CloseButton$1 = function (_a) {
|
|
14229
14235
|
var onClick = _a.onClick, size = _a.size;
|
|
14230
14236
|
var theme = useTheme();
|
|
14231
14237
|
return (jsx$1(Container$l, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
14232
14238
|
};
|
|
14233
|
-
var templateObject_1$
|
|
14239
|
+
var templateObject_1$s;
|
|
14234
14240
|
|
|
14235
14241
|
var CartProductItem = {
|
|
14236
14242
|
Title: Title$2,
|
|
@@ -14240,10 +14246,10 @@ var CartProductItem = {
|
|
|
14240
14246
|
CloseButton: CloseButton$1,
|
|
14241
14247
|
};
|
|
14242
14248
|
|
|
14243
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
14244
|
-
var Item = newStyled.span(templateObject_2$
|
|
14245
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
14246
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
14249
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
14250
|
+
var Item = newStyled.span(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
14251
|
+
var Number$1 = newStyled(Item)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
14252
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
14247
14253
|
var QuantityPicker = function (_a) {
|
|
14248
14254
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
14249
14255
|
var theme = useTheme();
|
|
@@ -14268,7 +14274,7 @@ var QuantityPicker = function (_a) {
|
|
|
14268
14274
|
}, [value, clamp]);
|
|
14269
14275
|
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
14270
14276
|
};
|
|
14271
|
-
var templateObject_1$
|
|
14277
|
+
var templateObject_1$r, templateObject_2$l, templateObject_3$k, templateObject_4$e;
|
|
14272
14278
|
|
|
14273
14279
|
var htmlReactParser = {exports: {}};
|
|
14274
14280
|
|
|
@@ -18049,14 +18055,14 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18049
18055
|
HTMLReactParser$1.attributesToProps;
|
|
18050
18056
|
HTMLReactParser$1.Element;
|
|
18051
18057
|
|
|
18052
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
18053
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18054
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18055
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18056
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
18057
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
18058
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18059
|
-
var DiscountContainer$1 = newStyled.div(templateObject_8$
|
|
18058
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18059
|
+
var Card$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
18060
|
+
var Tag$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18061
|
+
var Label$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18062
|
+
var Check$1 = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18063
|
+
var IconContainer = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18064
|
+
var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18065
|
+
var DiscountContainer$1 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
18060
18066
|
var PackSelector = function (_a) {
|
|
18061
18067
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18062
18068
|
return (jsx$1(Container$j, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -18085,14 +18091,14 @@ var PackCard$1 = function (_a) {
|
|
|
18085
18091
|
currency: currencyCode || 'USD',
|
|
18086
18092
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18087
18093
|
};
|
|
18088
|
-
var templateObject_1$
|
|
18089
|
-
|
|
18090
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
18091
|
-
var Card = newStyled.div(templateObject_2$
|
|
18092
|
-
var Tag = newStyled.div(templateObject_3$
|
|
18093
|
-
var Label = newStyled.div(templateObject_4$
|
|
18094
|
-
var Check = newStyled.div(templateObject_5$
|
|
18095
|
-
var DiscountContainer = newStyled.div(templateObject_6$
|
|
18094
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$5;
|
|
18095
|
+
|
|
18096
|
+
var Container$i = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
18097
|
+
var Card = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
18098
|
+
var Tag = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18099
|
+
var Label = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18100
|
+
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18101
|
+
var DiscountContainer = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
18096
18102
|
var PackSelectorV2 = function (_a) {
|
|
18097
18103
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18098
18104
|
return (jsx$1(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -18116,31 +18122,31 @@ var PackCard = function (_a) {
|
|
|
18116
18122
|
currency: currencyCode || 'USD',
|
|
18117
18123
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
18118
18124
|
};
|
|
18119
|
-
var templateObject_1$
|
|
18125
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$7;
|
|
18120
18126
|
|
|
18121
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
18122
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
18123
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
18124
|
-
var Container$h = newStyled.div(templateObject_4$
|
|
18127
|
+
var Title$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
18128
|
+
var H3 = newStyled.h3(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
18129
|
+
var ArrowContainer = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
18130
|
+
var Container$h = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
18125
18131
|
var Accordion = function (_a) {
|
|
18126
18132
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
18127
18133
|
var theme = useTheme();
|
|
18128
18134
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
18129
18135
|
return (jsxs$1(Container$h, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
18130
18136
|
};
|
|
18131
|
-
var templateObject_1$
|
|
18132
|
-
|
|
18133
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
18134
|
-
var Header = newStyled.div(templateObject_2$
|
|
18135
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
18136
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
18137
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
18138
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
18139
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
18140
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
18141
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
18142
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
18143
|
-
var templateObject_1$
|
|
18137
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$h, templateObject_4$b;
|
|
18138
|
+
|
|
18139
|
+
var SectionContent = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
18140
|
+
var Header = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
18141
|
+
var MobileHeader = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
18142
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
18143
|
+
var H4 = newStyled.h4(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
18144
|
+
var FilterLink = newStyled.a(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
18145
|
+
var OptionContainer = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
18146
|
+
var ClearAll = newStyled.span(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
18147
|
+
var MobileFooter = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
18148
|
+
var MobileClearContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
18149
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2;
|
|
18144
18150
|
|
|
18145
18151
|
var Filters = function (_a) {
|
|
18146
18152
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -18257,20 +18263,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
18257
18263
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
18258
18264
|
};
|
|
18259
18265
|
|
|
18260
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18261
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
18262
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
18263
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
18264
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
18266
|
+
var Container$g = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
18267
|
+
var BackArrow = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
18268
|
+
var BoldSpan = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
18269
|
+
var NormalSpan = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
18270
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
18265
18271
|
var SearchNavigation = function (_a) {
|
|
18266
18272
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18267
18273
|
return (jsxs$1(Container$g, { children: [jsxs$1(Text$8, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
18268
18274
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18269
18275
|
}) }, void 0)] }, void 0));
|
|
18270
18276
|
};
|
|
18271
|
-
var templateObject_1$
|
|
18277
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9, templateObject_5$6;
|
|
18272
18278
|
|
|
18273
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
18279
|
+
var TabContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
18274
18280
|
var titleSize = _a.titleSize;
|
|
18275
18281
|
return titleSize;
|
|
18276
18282
|
}, function (_a) {
|
|
@@ -18287,15 +18293,15 @@ var Tab = function (_a) {
|
|
|
18287
18293
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
18288
18294
|
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
18289
18295
|
};
|
|
18290
|
-
var templateObject_1$
|
|
18296
|
+
var templateObject_1$l;
|
|
18291
18297
|
|
|
18292
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
18293
|
-
var TabList = newStyled.div(templateObject_2$
|
|
18298
|
+
var Container$f = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18299
|
+
var TabList = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
18294
18300
|
var backgroundColor = _a.backgroundColor;
|
|
18295
18301
|
return backgroundColor;
|
|
18296
18302
|
});
|
|
18297
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
18298
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
18303
|
+
var TabContent = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18304
|
+
var TabSeparator = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
18299
18305
|
var Tabs = function (_a) {
|
|
18300
18306
|
var _b;
|
|
18301
18307
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -18306,7 +18312,7 @@ var Tabs = function (_a) {
|
|
|
18306
18312
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18307
18313
|
return (jsxs$1(Container$f, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18308
18314
|
};
|
|
18309
|
-
var templateObject_1$
|
|
18315
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$8;
|
|
18310
18316
|
|
|
18311
18317
|
var Container$e = newStyled.div(function (props) { return ({
|
|
18312
18318
|
height: 'auto',
|
|
@@ -18361,9 +18367,9 @@ var IconsWithTitle = function (_a) {
|
|
|
18361
18367
|
return (jsx$1(Fragment$1, { children: jsxs$1(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18362
18368
|
};
|
|
18363
18369
|
|
|
18364
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
18365
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
18366
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
18370
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
18371
|
+
var VideoOverlay = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
18372
|
+
var FullscreenVideo = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
18367
18373
|
var ImageVideo = function (_a) {
|
|
18368
18374
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
18369
18375
|
var video = useRef(null);
|
|
@@ -18383,12 +18389,12 @@ var ImageVideo = function (_a) {
|
|
|
18383
18389
|
height: '100%',
|
|
18384
18390
|
} }, void 0)] }, void 0))] }, void 0));
|
|
18385
18391
|
};
|
|
18386
|
-
var templateObject_1$
|
|
18392
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$d;
|
|
18387
18393
|
|
|
18388
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18389
|
-
var ContainerMobile = css(templateObject_2$
|
|
18390
|
-
var Container$d = newStyled.div(templateObject_3$
|
|
18391
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
18394
|
+
var ContainerDesktop = css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
18395
|
+
var ContainerMobile = css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
18396
|
+
var Container$d = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
18397
|
+
var TextContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
18392
18398
|
var TextWithImage = function (_a) {
|
|
18393
18399
|
var _b, _c, _d, _e;
|
|
18394
18400
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -18418,9 +18424,9 @@ var TextWithImage = function (_a) {
|
|
|
18418
18424
|
},
|
|
18419
18425
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
18420
18426
|
};
|
|
18421
|
-
var templateObject_1$
|
|
18427
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$7;
|
|
18422
18428
|
|
|
18423
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
18429
|
+
var Container$c = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
18424
18430
|
var AccordionOptions = function (_a) {
|
|
18425
18431
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
18426
18432
|
var _b = useState({
|
|
@@ -18444,9 +18450,9 @@ var AccordionOptions = function (_a) {
|
|
|
18444
18450
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
18445
18451
|
}) }, void 0));
|
|
18446
18452
|
};
|
|
18447
|
-
var templateObject_1$
|
|
18453
|
+
var templateObject_1$h;
|
|
18448
18454
|
|
|
18449
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
18455
|
+
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
18450
18456
|
var alignCenter = _a.alignCenter;
|
|
18451
18457
|
return alignCenter &&
|
|
18452
18458
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18456,14 +18462,14 @@ var Container$b = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
18456
18462
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18457
18463
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18458
18464
|
});
|
|
18459
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18460
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
18465
|
+
var TitleText = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
18466
|
+
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
18461
18467
|
var ShortBanner = function (_a) {
|
|
18462
18468
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
18463
18469
|
var theme = useTheme();
|
|
18464
18470
|
return (jsxs$1(Container$b, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18465
18471
|
};
|
|
18466
|
-
var templateObject_1$
|
|
18472
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b;
|
|
18467
18473
|
|
|
18468
18474
|
/* base styles & size variants */
|
|
18469
18475
|
var getStylesBySize = function (size, theme) {
|
|
@@ -18519,10 +18525,10 @@ var getStylesBySize = function (size, theme) {
|
|
|
18519
18525
|
}
|
|
18520
18526
|
};
|
|
18521
18527
|
|
|
18522
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
18523
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
18524
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
18525
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
18528
|
+
var Container$a = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
18529
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
18530
|
+
var ImageCard = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
18531
|
+
var UserInfoText = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (props) { return props.color; }, function (props) { return props.styles.userInfoTextFontSize; }, function (props) { return (props.alignCenter ? 'center' : 'left'); }, function (props) { return props.styles.userInfoTextMobileFontSize; });
|
|
18526
18532
|
var BeforeAfterCard = function (_a) {
|
|
18527
18533
|
var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Small : _d;
|
|
18528
18534
|
var theme = useTheme();
|
|
@@ -18531,11 +18537,11 @@ var BeforeAfterCard = function (_a) {
|
|
|
18531
18537
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
18532
18538
|
return (jsxs$1(Container$a, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
|
|
18533
18539
|
};
|
|
18534
|
-
var templateObject_1$
|
|
18540
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$a, templateObject_4$6;
|
|
18535
18541
|
|
|
18536
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
18537
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18538
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
18542
|
+
var Container$9 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
18543
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
18544
|
+
var StyledTitle = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
18539
18545
|
var titlePosition = _a.titlePosition;
|
|
18540
18546
|
return titlePosition == 'center' &&
|
|
18541
18547
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -18545,18 +18551,18 @@ var ImageCardWithDescription = function (_a) {
|
|
|
18545
18551
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18546
18552
|
return (jsxs$1(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18547
18553
|
};
|
|
18548
|
-
var templateObject_1$
|
|
18549
|
-
|
|
18550
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
18551
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
18552
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
18553
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
18554
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_5$
|
|
18555
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$
|
|
18554
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9;
|
|
18555
|
+
|
|
18556
|
+
var Container$8 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18557
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18558
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
18559
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
18560
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
18561
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
18556
18562
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
18557
18563
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
18558
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_7$
|
|
18559
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
18564
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
18565
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
18560
18566
|
var TrackingProgress = function (_a) {
|
|
18561
18567
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
18562
18568
|
var theme = useTheme();
|
|
@@ -18585,25 +18591,25 @@ var TrackingProgress = function (_a) {
|
|
|
18585
18591
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus$1, { finishedTrack: false }, void 0)] }), index));
|
|
18586
18592
|
})] }), void 0));
|
|
18587
18593
|
};
|
|
18588
|
-
var templateObject_1$
|
|
18594
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$5, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
18589
18595
|
|
|
18590
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
18591
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
18592
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
18593
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
18594
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
18596
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18597
|
+
var CheckpointContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18598
|
+
var CheckpointDate = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
18599
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
18600
|
+
var CheckpointStatus = newStyled.p(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) {
|
|
18595
18601
|
return props.finishedTrack
|
|
18596
18602
|
? props.finishedTrackColor
|
|
18597
18603
|
: props.activeTrack
|
|
18598
18604
|
? props.activeTrackColor
|
|
18599
18605
|
: '';
|
|
18600
18606
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
18601
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
18607
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
18602
18608
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
18603
18609
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
18604
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
18605
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_8$
|
|
18606
|
-
var WarningIconWrapper = newStyled.div(templateObject_9$
|
|
18610
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
18611
|
+
var LastActiveCheckpointDot = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
18612
|
+
var WarningIconWrapper = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
18607
18613
|
var TrackingProgressV2 = function (_a) {
|
|
18608
18614
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, warning = _a.warning;
|
|
18609
18615
|
var theme = useTheme();
|
|
@@ -18635,15 +18641,15 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18635
18641
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
18636
18642
|
})] }), void 0));
|
|
18637
18643
|
};
|
|
18638
|
-
var templateObject_1$
|
|
18639
|
-
|
|
18640
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18641
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18642
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18643
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18644
|
-
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$
|
|
18645
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18646
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18644
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2;
|
|
18645
|
+
|
|
18646
|
+
var Container$6 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18647
|
+
var ReviewsContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18648
|
+
var ReviewsCount = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18649
|
+
var ReviewsStars = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18650
|
+
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
18651
|
+
var ReviewsImages = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18652
|
+
var SummaryItem = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18647
18653
|
var backgroundUrl = _a.backgroundUrl;
|
|
18648
18654
|
return "url(".concat(backgroundUrl, ")");
|
|
18649
18655
|
});
|
|
@@ -18653,18 +18659,18 @@ var ReviewsHeader = function (_a) {
|
|
|
18653
18659
|
var theme = useTheme();
|
|
18654
18660
|
return (jsxs$1(Container$6, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18655
18661
|
};
|
|
18656
|
-
var templateObject_1$
|
|
18657
|
-
|
|
18658
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18659
|
-
var Content = newStyled.div(templateObject_2$
|
|
18660
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18661
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18662
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18663
|
-
var ReviewerName = newStyled.h1(templateObject_6$
|
|
18664
|
-
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18665
|
-
var ReviewTitle = newStyled.h2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18666
|
-
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18667
|
-
var ImageContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18662
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
18663
|
+
|
|
18664
|
+
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18665
|
+
var Content = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18666
|
+
var StarsContent = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18667
|
+
var ReviewContainer = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18668
|
+
var DateText = newStyled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
18669
|
+
var ReviewerName = newStyled.h1(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18670
|
+
var VerifiedText = newStyled.h1(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18671
|
+
var ReviewTitle = newStyled.h2(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18672
|
+
var ReviewDescription = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18673
|
+
var ImageContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18668
18674
|
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18669
18675
|
var VideoWrapper = newStyled.video(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18670
18676
|
var ProductContainer = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
@@ -18696,7 +18702,7 @@ var Review = function (_a) {
|
|
|
18696
18702
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$5, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18697
18703
|
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18698
18704
|
};
|
|
18699
|
-
var templateObject_1$
|
|
18705
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18700
18706
|
|
|
18701
18707
|
function _extends() {
|
|
18702
18708
|
_extends = Object.assign || function (target) {
|
|
@@ -18963,28 +18969,28 @@ function useSwipeable(options) {
|
|
|
18963
18969
|
return handlers;
|
|
18964
18970
|
}
|
|
18965
18971
|
|
|
18966
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
18972
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
18967
18973
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18968
18974
|
return borderRadiusVariant &&
|
|
18969
18975
|
"\n border-radius: 40px;\n ";
|
|
18970
18976
|
});
|
|
18971
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18972
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18977
|
+
var TopTagContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
18978
|
+
var BottomTagContainer = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18973
18979
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18974
18980
|
var _b, _c;
|
|
18975
18981
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18976
18982
|
return (jsxs$1(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
18977
18983
|
});
|
|
18978
|
-
var templateObject_1$
|
|
18984
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4;
|
|
18979
18985
|
|
|
18980
|
-
var Button = newStyled.button(templateObject_1$
|
|
18986
|
+
var Button = newStyled.button(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
18981
18987
|
var ArrowButton = function (_a) {
|
|
18982
18988
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18983
18989
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18984
18990
|
};
|
|
18985
|
-
var templateObject_1$
|
|
18991
|
+
var templateObject_1$8;
|
|
18986
18992
|
|
|
18987
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
18993
|
+
var Container$3 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
18988
18994
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18989
18995
|
var SlideDots = function (_a) {
|
|
18990
18996
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -18993,11 +18999,11 @@ var SlideDots = function (_a) {
|
|
|
18993
18999
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18994
19000
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18995
19001
|
};
|
|
18996
|
-
var templateObject_1$
|
|
19002
|
+
var templateObject_1$7;
|
|
18997
19003
|
|
|
18998
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18999
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
19000
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
19004
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
19005
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
19006
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
19001
19007
|
var SlideNavigation = function (_a) {
|
|
19002
19008
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
19003
19009
|
var theme = useTheme();
|
|
@@ -19009,9 +19015,9 @@ var SlideNavigation = function (_a) {
|
|
|
19009
19015
|
onNavigate(selectedIndex + 1);
|
|
19010
19016
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
19011
19017
|
};
|
|
19012
|
-
var templateObject_1$
|
|
19018
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3;
|
|
19013
19019
|
|
|
19014
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19020
|
+
var Container$2 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
19015
19021
|
var ProductGalleryMobileV2 = function (_a) {
|
|
19016
19022
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
19017
19023
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -19035,29 +19041,29 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
19035
19041
|
}, [index, images]);
|
|
19036
19042
|
return (jsxs$1(Container$2, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
19037
19043
|
};
|
|
19038
|
-
var templateObject_1$
|
|
19044
|
+
var templateObject_1$5;
|
|
19039
19045
|
|
|
19040
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
19041
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
19046
|
+
var Container$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
19047
|
+
var DropContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19042
19048
|
var DropList = function (_a) {
|
|
19043
19049
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
19044
19050
|
return (jsx$1(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
19045
19051
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
19046
19052
|
}) }, void 0));
|
|
19047
19053
|
};
|
|
19048
|
-
var templateObject_1$
|
|
19054
|
+
var templateObject_1$4, templateObject_2$3;
|
|
19049
19055
|
|
|
19050
19056
|
var DROPS_TOTAL = 5;
|
|
19051
|
-
var Container = newStyled.div(templateObject_1$
|
|
19052
|
-
var Title = newStyled.p(templateObject_2$
|
|
19053
|
-
var Description = newStyled.p(templateObject_3$
|
|
19057
|
+
var Container = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
19058
|
+
var Title = newStyled.p(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
19059
|
+
var Description = newStyled.p(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
19054
19060
|
var AbsorbencyLevel = function (_a) {
|
|
19055
19061
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
19056
19062
|
return (jsxs$1(Container, { children: [jsx$1(Title, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
19057
19063
|
};
|
|
19058
|
-
var templateObject_1$
|
|
19064
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
|
|
19059
19065
|
|
|
19060
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19066
|
+
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"])), function (_a) {
|
|
19061
19067
|
var textPosition = _a.textPosition;
|
|
19062
19068
|
return textPosition;
|
|
19063
19069
|
}, function (_a) {
|
|
@@ -19084,15 +19090,15 @@ var HurryUp = function (_a) {
|
|
|
19084
19090
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
19085
19091
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
19086
19092
|
};
|
|
19087
|
-
var templateObject_1$
|
|
19093
|
+
var templateObject_1$2;
|
|
19088
19094
|
|
|
19089
|
-
var DropdownContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
19090
|
-
var DropdownLabel = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
19091
|
-
var SizeLabel = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
19092
|
-
var DetailLabel = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
19093
|
-
var DropdownOptions = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
19094
|
-
var DropdownOption = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
19095
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
19095
|
+
var DropdownContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
19096
|
+
var DropdownLabel = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
19097
|
+
var SizeLabel = newStyled.span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
19098
|
+
var DetailLabel = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
19099
|
+
var DropdownOptions = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
19100
|
+
var DropdownOption = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
19101
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
19096
19102
|
|
|
19097
19103
|
var SizeDropdown = function (_a) {
|
|
19098
19104
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -19115,5 +19121,70 @@ var SizeDropdown = function (_a) {
|
|
|
19115
19121
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
19116
19122
|
};
|
|
19117
19123
|
|
|
19118
|
-
|
|
19124
|
+
var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19125
|
+
var SinglePurchaseContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--colors-pallete-primary-80-color);\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--colors-pallete-primary-80-color);\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"])));
|
|
19126
|
+
var SubscriptionContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"], ["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"])));
|
|
19127
|
+
var SubscriptionHeader = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"])));
|
|
19128
|
+
var BenefitsContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19129
|
+
var Benefit = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n"], ["\n display: flex;\n padding: 8px 0px;\n"])));
|
|
19130
|
+
var BenefitText = newStyled(Text$8)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
19131
|
+
var SubscriptionDetails = newStyled(Text$8)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
19132
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
19133
|
+
var DeliveryFrequencyLabel = newStyled(Text$8)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n"])));
|
|
19134
|
+
var radioIds = {
|
|
19135
|
+
oneTime: {
|
|
19136
|
+
id: 'one-time-purchase',
|
|
19137
|
+
},
|
|
19138
|
+
autoship: {
|
|
19139
|
+
id: 'autoship-subscribe-and-save',
|
|
19140
|
+
},
|
|
19141
|
+
};
|
|
19142
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
19143
|
+
var Autoship = function (_a) {
|
|
19144
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, frequencyUnit = _a.frequencyUnit, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel;
|
|
19145
|
+
var unit = frequencyUnit || 'months';
|
|
19146
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
19147
|
+
? frequencyValues.map(function (value) {
|
|
19148
|
+
var label = "".concat(value, " ").concat(value === 1 ? unit.slice(0, -1) : unit);
|
|
19149
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
19150
|
+
})
|
|
19151
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
19152
|
+
var _b = useState(radioIds.autoship), radioCheck = _b[0], setRadioCheck = _b[1];
|
|
19153
|
+
var _c = useState(dropdownOptions[0].value), subscriptionPeriod = _c[0], setSubscriptionPeriod = _c[1];
|
|
19154
|
+
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
19155
|
+
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
19156
|
+
var discount = (discountedProdPrice * (100 - ((pricing === null || pricing === void 0 ? void 0 : pricing.discountPercentage) || 0))) / 100;
|
|
19157
|
+
var discountedAutoshipPrice = discountedProdPrice !== discount ? discount.toFixed(2) : 0;
|
|
19158
|
+
var createDataObject = function () {
|
|
19159
|
+
return {
|
|
19160
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
19161
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
19162
|
+
originalPrice: discountedProdPrice,
|
|
19163
|
+
discountedPrice: Number(discountedAutoshipPrice),
|
|
19164
|
+
};
|
|
19165
|
+
};
|
|
19166
|
+
useEffect(function () {
|
|
19167
|
+
onChange(createDataObject());
|
|
19168
|
+
}, []);
|
|
19169
|
+
var handleChange = function (value, type) {
|
|
19170
|
+
var dataObj = createDataObject();
|
|
19171
|
+
if (type === 'radio') {
|
|
19172
|
+
setRadioCheck(value);
|
|
19173
|
+
dataObj.autoship = value.id === radioIds.autoship.id;
|
|
19174
|
+
}
|
|
19175
|
+
else {
|
|
19176
|
+
setSubscriptionPeriod(value);
|
|
19177
|
+
dataObj.subscriptionPeriod = value;
|
|
19178
|
+
}
|
|
19179
|
+
onChange(__assign$1({}, dataObj));
|
|
19180
|
+
};
|
|
19181
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(SinglePurchaseContainer, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19182
|
+
? 'var(--colors-pallete-secondary-color)'
|
|
19183
|
+
: 'var(--colors-shades-400-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxs$1(SubscriptionContainer, { children: [jsxs$1(SubscriptionHeader, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19184
|
+
? 'var(--colors-shades-400-color)'
|
|
19185
|
+
: 'var(--colors-pallete-secondary-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: "var(--colors-pallete-secondary-color)" }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$1, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxs$1(SubscriptionDetailsContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "link", underline: true, weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0) }), void 0)] }, void 0)] }, void 0))] }, void 0)] }, void 0));
|
|
19186
|
+
};
|
|
19187
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
19188
|
+
|
|
19189
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19119
19190
|
//# sourceMappingURL=index.esm.js.map
|