@trafilea/afrodita-components 5.0.0-beta.193 → 5.0.0-beta.195
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 +39 -1
- package/build/index.esm.js +437 -374
- package/build/index.esm.js.map +1 -1
- package/build/index.js +437 -373
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -458,6 +458,11 @@ var FitGuarantee = function (_a) {
|
|
|
458
458
|
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 65, viewBoxY: 65, title: "fit guarantee", testId: testId }, { children: [jsxRuntime.jsx("mask", __assign$1({ id: "mask0_160_13321", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "65", height: "65" }, { children: jsxRuntime.jsx("circle", { cx: "32.5", cy: "32.5", r: "32.5", fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign$1({ mask: "url(#mask0_160_13321)" }, { children: [jsxRuntime.jsx("path", { d: "M67.3715 -1.48547H-2.22679V67.0832H67.3715V-1.48547Z", fill: "#F7A08B" }, void 0), jsxRuntime.jsx("g", __assign$1({ opacity: "0.2" }, { children: jsxRuntime.jsx("path", { d: "M32.5292 39.7135C52.5279 39.7135 68.74 28.9192 68.74 15.6038C68.74 2.28841 52.5279 -8.50586 32.5292 -8.50586C12.5305 -8.50586 -3.68164 2.28841 -3.68164 15.6038C-3.68164 28.9192 12.5305 39.7135 32.5292 39.7135Z", fill: "white" }, void 0) }), void 0), jsxRuntime.jsx("path", { d: "M34.4666 19.0809C34.4477 17.8915 34.5734 16.7043 34.8411 15.5452C35.0453 14.6673 35.3777 13.8241 35.8275 13.043C36.1938 12.4145 36.6743 11.8599 37.2443 11.4078C37.7471 11.0128 38.3026 10.6897 38.8947 10.4481C39.4399 10.2284 40.0106 10.0783 40.5933 10.0012C41.1109 9.93093 41.6325 9.89404 42.1548 9.89075C42.6591 9.89448 43.1628 9.92839 43.663 9.99231C44.2378 10.064 44.8018 10.2051 45.3426 10.4125C45.936 10.6389 46.4922 10.9526 46.993 11.3431C47.5593 11.7946 48.0352 12.3489 48.3958 12.977C48.8461 13.7648 49.1789 14.6142 49.3835 15.4983C49.6324 16.4978 49.7568 17.6916 49.7568 19.0796V32.2739C49.7761 33.4628 49.6507 34.6496 49.3835 35.8082C49.1755 36.6954 48.8398 37.5477 48.387 38.3384C48.0165 38.9819 47.5341 39.5541 46.9626 40.0282C46.4621 40.4388 45.9066 40.7772 45.3122 41.0336C44.7771 41.2637 44.2154 41.4262 43.6402 41.5173C43.1477 41.597 42.6499 41.6394 42.151 41.6443C41.6188 41.6409 41.0876 41.5984 40.5616 41.5173C39.9748 41.4266 39.4013 41.2641 38.8541 41.0336C38.2592 40.7823 37.7035 40.4472 37.2037 40.0383C36.6379 39.5695 36.1644 38.9995 35.8072 38.3575C35.3657 37.5612 35.0395 36.7063 34.8385 35.8184C34.5751 34.6557 34.4503 33.4659 34.4666 32.2739V19.0809ZM39.3086 34.2607C39.3086 35.5514 39.543 36.4891 40.0119 37.074C40.4807 37.6588 41.1959 37.9512 42.1574 37.9512C43.096 37.9512 43.7963 37.6588 44.2585 37.074C44.7206 36.4891 44.9503 35.5514 44.9478 34.2607V17.3632C44.9478 15.9997 44.7163 15.007 44.2534 14.3849C43.7904 13.7628 43.0909 13.4522 42.1548 13.4531C41.1925 13.4531 40.4774 13.7637 40.0093 14.3849C39.5413 15.0061 39.3069 15.9989 39.306 17.3632L39.3086 34.2607Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M15.44 44.0871H18.6329C19.3751 44.0818 20.1152 44.1671 20.8368 44.3411C21.4939 44.4956 22.113 44.781 22.6573 45.1802C23.1842 45.5759 23.6079 46.0928 23.8926 46.6872C24.1972 47.305 24.3496 48.0553 24.3496 48.938C24.3641 49.652 24.2124 50.3596 23.9065 51.0048C23.6227 51.5862 23.2149 52.0984 22.7119 52.5054C22.197 52.9183 21.6092 53.2309 20.979 53.4271C20.3142 53.6396 19.6203 53.7471 18.9223 53.7457H15.44V44.0871ZM17.569 51.7818H18.6684C19.1298 51.7849 19.5899 51.7342 20.0395 51.6307C20.4364 51.5437 20.8106 51.3742 21.1377 51.133C21.4532 50.8938 21.7041 50.5796 21.8677 50.219C22.0573 49.7825 22.1483 49.3096 22.1343 48.8339C22.1443 48.4073 22.053 47.9844 21.8677 47.5999C21.6991 47.2595 21.454 46.9628 21.1516 46.7329C20.8341 46.4987 20.4754 46.3264 20.0941 46.225C19.6806 46.1109 19.2535 46.0536 18.8246 46.0549H17.569V51.7818Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M28.9745 44.0872H30.729L34.9311 53.7458H32.5343L31.7027 51.698H27.9513L27.1464 53.7445H24.799L28.9745 44.0872ZM29.7921 46.8966L28.619 49.8991H30.9829L29.7921 46.8966Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M37.2684 49.6261L33.64 44.0872H36.287L38.3335 47.7015L40.5044 44.0872H43.0282L39.3999 49.6261V53.7458H37.2684V49.6261Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M48.5101 46.4472C48.327 46.222 48.0835 46.0537 47.808 45.9622C47.5392 45.863 47.2554 45.8102 46.9689 45.8061C46.8082 45.8065 46.6481 45.8249 46.4915 45.8607C46.3299 45.8955 46.174 45.9528 46.0282 46.0308C45.8873 46.104 45.7655 46.2092 45.6727 46.338C45.5576 46.5167 45.5135 46.7319 45.549 46.9414C45.5845 47.1509 45.6969 47.3396 45.8644 47.4704C46.1183 47.6423 46.3964 47.7754 46.6896 47.8653C47.0205 47.9744 47.3773 48.0836 47.7598 48.1928C48.136 48.2995 48.4963 48.4557 48.8313 48.6574C49.1644 48.8589 49.4468 49.1343 49.6565 49.4623C49.8748 49.8009 49.984 50.2511 49.984 50.8131C49.9949 51.2981 49.8923 51.7789 49.6844 52.2172C49.493 52.607 49.2151 52.9478 48.8719 53.2138C48.5181 53.4846 48.1149 53.6838 47.6849 53.8003C46.6409 54.0838 45.5362 54.0506 44.5111 53.7051C43.953 53.5009 43.4424 53.1851 43.0105 52.7771L44.5238 51.1127C44.7399 51.402 45.0237 51.6339 45.3502 51.7881C45.8325 52.0253 46.382 52.0881 46.9054 51.9658C47.0726 51.9279 47.2334 51.8659 47.3827 51.7818C47.5188 51.7038 47.6355 51.5962 47.7243 51.4669C47.8115 51.3336 47.8558 51.1768 47.8512 51.0175C47.8559 50.884 47.8278 50.7513 47.7694 50.6311C47.711 50.5109 47.624 50.4069 47.516 50.3281C47.2599 50.143 46.9769 49.9983 46.6769 49.899C46.3383 49.7797 45.9748 49.6612 45.5864 49.5436C45.2043 49.4297 44.8376 49.2694 44.4946 49.0662C44.1597 48.868 43.8731 48.5979 43.6554 48.2753C43.432 47.9478 43.3207 47.5157 43.3215 46.9791C43.3105 46.5059 43.416 46.0372 43.6287 45.6144C43.8267 45.2314 44.1057 44.8961 44.4463 44.6318C44.7998 44.3627 45.2001 44.1617 45.627 44.0389C46.0741 43.9066 46.5381 43.8399 47.0044 43.8408C47.5407 43.8394 48.0743 43.9177 48.5875 44.0732C49.0978 44.2286 49.568 44.4938 49.965 44.8501L48.5101 46.4472Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M29.4455 23.0447L21.1326 23.0662C21.0006 23.0664 20.8698 23.0406 20.7478 22.9902C20.6257 22.9398 20.5148 22.8659 20.4213 22.7726C20.3278 22.6794 20.2536 22.5686 20.2029 22.4467C20.1522 22.3248 20.1261 22.1941 20.1259 22.062V17.6745C20.1259 16.1029 20.4031 14.9603 20.9574 14.2468C21.5118 13.5333 22.3146 13.1779 23.3657 13.1804C23.8118 13.1702 24.2564 13.235 24.681 13.3721C25.0525 13.504 25.3705 13.7542 25.5862 14.0843C25.8562 14.5157 26.0362 14.9971 26.1155 15.4998C26.2436 16.2665 26.3006 17.0434 26.2857 17.8205V19.217C26.2857 19.5411 26.414 19.8519 26.6427 20.0815C26.8713 20.3111 27.1816 20.4408 27.5057 20.4421L29.1256 20.4485C29.2903 20.4495 29.4535 20.4178 29.6059 20.3554C29.7583 20.293 29.8968 20.201 30.0134 20.0847C30.13 19.9684 30.2225 19.8302 30.2854 19.678C30.3483 19.5258 30.3804 19.3627 30.3799 19.198C30.3799 17.5565 30.3799 16.1219 30.3799 15.8274C30.3839 15.0562 30.255 14.29 29.999 13.5625C29.7434 12.8438 29.3209 12.196 28.7663 11.6722C28.1368 11.0924 27.393 10.6505 26.5827 10.3747C25.6941 10.0523 24.6222 9.89062 23.367 9.88977C22.8301 9.89323 22.2937 9.92374 21.7598 9.98118C21.1569 10.0477 20.5645 10.1888 19.9964 10.4014C19.381 10.6346 18.8005 10.9511 18.2711 11.3421C17.6708 11.7938 17.1649 12.3588 16.782 13.0052C16.3068 13.8095 15.9558 14.6809 15.7409 15.59C15.4777 16.6132 15.3465 17.8434 15.3474 19.2805V32.1028C15.3474 33.8446 15.5209 35.3214 15.8679 36.5334C16.2149 37.7454 16.7253 38.7297 17.3989 39.4864C18.0719 40.239 18.9276 40.8052 19.8834 41.1304C20.9767 41.4873 22.1219 41.659 23.2718 41.6382C24.3115 41.6528 25.3462 41.4923 26.3326 41.1634C27.227 40.8543 28.0281 40.3231 28.661 39.6197C29.3067 38.907 29.8031 37.9782 30.1501 36.833C30.4971 35.6879 30.6706 34.2813 30.6706 32.6131V24.2634C30.6706 24.1028 30.6389 23.9438 30.5773 23.7955C30.5156 23.6473 30.4253 23.5126 30.3114 23.3994C30.1976 23.2861 30.0625 23.1965 29.9139 23.1356C29.7653 23.0747 29.6061 23.0438 29.4455 23.0447ZM20.866 37.5909L21.7547 30.7698C21.345 30.5147 21.0281 30.1349 20.8506 29.6861C20.6731 29.2374 20.6444 28.7435 20.7688 28.2772C20.8932 27.811 21.1641 27.397 21.5415 27.0963C21.9189 26.7956 22.383 26.6241 22.8652 26.607C23.3475 26.59 23.8225 26.7283 24.2202 27.0015C24.618 27.2748 24.9174 27.6686 25.0744 28.1249C25.2315 28.5812 25.2378 29.0759 25.0924 29.5361C24.9471 29.9963 24.6578 30.3976 24.2671 30.6809L25.2827 37.61L20.866 37.5909Z", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
459
459
|
};
|
|
460
460
|
|
|
461
|
+
var QuestionWithCircle = function (_a) {
|
|
462
|
+
var height = _a.height, width = _a.width; _a.fill; var testId = _a.testId;
|
|
463
|
+
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ viewBoxX: 256, viewBoxY: 256, width: width, height: height, title: "QuestionWithCircle", testId: testId }, { children: [jsxRuntime.jsx("defs", {}, void 0), jsxRuntime.jsxs("g", __assign$1({ transform: "translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" }, { children: [jsxRuntime.jsx("path", { d: "M 45 61.898 c -1.657 0 -3 -1.344 -3 -3 v -6.612 c 0 -0.825 0.34 -1.614 0.94 -2.182 l 9.553 -9.019 c 1.873 -1.946 2.903 -4.502 2.903 -7.206 v -0.357 c 0 -2.827 -1.115 -5.471 -3.141 -7.445 c -2.025 -1.974 -4.693 -3.031 -7.532 -2.947 c -5.58 0.144 -10.12 4.941 -10.12 10.694 c 0 1.657 -1.343 3 -3 3 s -3 -1.343 -3 -3 c 0 -8.978 7.162 -16.465 15.965 -16.692 c 4.467 -0.122 8.68 1.536 11.874 4.648 c 3.194 3.113 4.953 7.283 4.953 11.742 v 0.357 c 0 4.295 -1.649 8.356 -4.646 11.434 c -0.029 0.03 -0.06 0.06 -0.09 0.089 L 48 53.579 v 5.319 C 48 60.555 46.657 61.898 45 61.898 z", transform: " matrix(1 0 0 1 0 0) ", strokeLinecap: "round" }, void 0), jsxRuntime.jsx("path", { d: "M 45 73.87 c -0.26 0 -0.52 -0.021 -0.78 -0.07 c -0.26 -0.06 -0.51 -0.13 -0.75 -0.23 c -0.24 -0.1 -0.47 -0.229 -0.69 -0.369 c -0.22 -0.15 -0.42 -0.311 -0.61 -0.5 C 41.43 71.96 41 70.93 41 69.87 c 0 -0.261 0.03 -0.521 0.08 -0.78 c 0.05 -0.25 0.13 -0.51 0.23 -0.75 s 0.22 -0.47 0.36 -0.69 c 0.15 -0.22 0.32 -0.42 0.5 -0.609 c 0.19 -0.181 0.39 -0.351 0.61 -0.49 c 0.22 -0.15 0.45 -0.27 0.69 -0.37 c 0.24 -0.1 0.49 -0.18 0.75 -0.229 c 0.51 -0.101 1.05 -0.101 1.56 0 c 0.26 0.05 0.51 0.13 0.75 0.229 c 0.239 0.101 0.47 0.22 0.689 0.37 c 0.22 0.14 0.42 0.31 0.61 0.49 c 0.18 0.189 0.35 0.39 0.5 0.609 c 0.14 0.221 0.26 0.45 0.359 0.69 c 0.101 0.24 0.181 0.5 0.23 0.75 c 0.05 0.26 0.08 0.52 0.08 0.78 c 0 1.06 -0.431 2.09 -1.17 2.83 C 47.08 73.45 46.05 73.87 45 73.87 z", transform: " matrix(1 0 0 1 0 0) ", strokeLinecap: "round" }, void 0), jsxRuntime.jsx("path", { d: "M 45 90 C 20.187 90 0 69.813 0 45 S 20.187 0 45 0 s 45 20.187 45 45 S 69.813 90 45 90 z M 45 6 C 23.495 6 6 23.495 6 45 s 17.495 39 39 39 s 39 -17.495 39 -39 S 66.505 6 45 6 z", transform: " matrix(1 0 0 1 0 0) ", strokeLinecap: "round" }, void 0)] }), void 0)] }), void 0));
|
|
464
|
+
};
|
|
465
|
+
|
|
461
466
|
var Other = /*#__PURE__*/Object.freeze({
|
|
462
467
|
__proto__: null,
|
|
463
468
|
FitPredictor: FitPredictor$1,
|
|
@@ -475,7 +480,8 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
475
480
|
ShopNow: ShopNow,
|
|
476
481
|
HasselFreeReturns: HasselFreeReturns,
|
|
477
482
|
Play: Play,
|
|
478
|
-
FitGuarantee: FitGuarantee
|
|
483
|
+
FitGuarantee: FitGuarantee,
|
|
484
|
+
QuestionWithCircle: QuestionWithCircle
|
|
479
485
|
});
|
|
480
486
|
|
|
481
487
|
var ChevronDown = function (_a) {
|
|
@@ -670,6 +676,16 @@ var ShippingEmpty = function (_a) {
|
|
|
670
676
|
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "Shipping empty" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M36.5585 17.0681L38.769 19.9111C38.9306 20.1163 39.0187 20.3728 38.9967 20.6366V28.3085C38.9967 28.9607 38.4679 29.4882 37.8143 29.4882H33.9588C33.4227 31.5107 31.5721 32.9981 29.3837 32.9981C27.1952 32.9981 25.3519 31.5033 24.8085 29.4882H17.7732C17.2371 31.5107 15.3864 32.9981 13.198 32.9981C11.0095 32.9981 9.16625 31.5033 8.62281 29.4882H5.53843C4.88483 29.4882 4.35608 28.9607 4.35608 28.3085C4.35608 27.6564 4.88483 27.1288 5.53843 27.1288H8.60813C9.12219 25.0771 10.9875 23.5456 13.2053 23.5456C15.4231 23.5456 17.2885 25.0697 17.8025 27.1288H24.8011C25.3152 25.0771 27.1805 23.5456 29.3983 23.5456C31.6162 23.5456 33.4815 25.0697 33.9955 27.1288H36.6466V21.0323L34.9209 18.812H25.7044C25.0508 18.812 24.5221 18.2844 24.5221 17.6323V9.35947H5.95703C5.30343 9.35947 4.77468 8.83189 4.77468 8.17974C4.77468 7.52758 5.30343 7 5.95703 7H25.7118C26.3654 7 26.8941 7.52758 26.8941 8.17974V9.35947H31.9466C32.3946 9.35947 32.8059 9.61593 33.0041 10.0116L36.5585 17.0681ZM31.2196 11.7263H26.8941V16.4525H33.599L31.2196 11.7263ZM10.8333 28.2792C10.8333 29.5835 11.8981 30.646 13.2053 30.646C14.5125 30.646 15.5774 29.5835 15.5774 28.2792C15.5774 26.9749 14.5125 25.9124 13.2053 25.9124C11.8981 25.9124 10.8333 26.9749 10.8333 28.2792ZM27.0263 28.2792C27.0263 29.5835 28.0912 30.646 29.3983 30.646C30.7055 30.646 31.7704 29.5835 31.7704 28.2792C31.7704 26.9749 30.7055 25.9124 29.3983 25.9124C28.0912 25.9124 27.0263 26.9749 27.0263 28.2792ZM9.57019 21.1495C10.2238 21.1495 10.7525 21.6771 10.7525 22.3292C10.7525 22.9814 10.2238 23.509 9.57019 23.509H4.12111C3.46751 23.509 2.93876 22.9814 2.93876 22.3292C2.93876 21.6771 3.46751 21.1495 4.12111 21.1495H9.57019ZM13.4771 17.6763C13.4771 17.0241 12.9483 16.4965 12.2947 16.4965H2.18235C1.52875 16.4965 1 17.0241 1 17.6763C1 18.3284 1.52875 18.856 2.18235 18.856H12.2947C12.9483 18.8633 13.4771 18.3357 13.4771 17.6763ZM14.2335 14.2103H4.12111C3.46751 14.2103 2.93876 13.6827 2.93876 13.0306C2.93876 12.3784 3.46751 11.8508 4.12111 11.8508H14.2335C14.8871 11.8508 15.4158 12.3784 15.4158 13.0306C15.4158 13.6827 14.8871 14.2103 14.2335 14.2103Z", fill: fill }, void 0) }), void 0));
|
|
671
677
|
};
|
|
672
678
|
|
|
679
|
+
var Drop = function (_a) {
|
|
680
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b;
|
|
681
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 14, viewBoxY: 14, title: "Drop", testId: "drop" }, { children: jsxRuntime.jsx("path", { d: "M7.00012 14C9.7116 14 11.9178 11.7944 11.9178 9.08303C11.9178 6.42765 7.309 0.400954 7.11273 0.145787L7.00012 0L6.88751 0.14674C6.69151 0.40143 2.08252 6.42855 2.08252 9.08351C2.08257 11.7944 4.28869 14 7.00012 14Z", fill: fill }, void 0) }), void 0));
|
|
682
|
+
};
|
|
683
|
+
|
|
684
|
+
var DropEmpty = function (_a) {
|
|
685
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b;
|
|
686
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 14, viewBoxY: 14, title: "DropEmpty", testId: "drop-empty" }, { children: jsxRuntime.jsx("path", { d: "M4.83473 3.98127C5.69171 2.61907 6.56268 1.41655 7.00046 0.827652C7.43854 1.417 8.30908 2.61902 9.16563 3.98057C9.74824 4.90668 10.3181 5.89672 10.7406 6.81183C11.1711 7.74408 11.4178 8.53462 11.4178 9.08303C11.4178 11.5181 9.43554 13.5 7.00012 13.5C4.56474 13.5 2.58257 11.5181 2.58252 9.08351C2.58252 8.53521 2.8292 7.74474 3.25968 6.81251C3.68223 5.89741 4.25211 4.90737 4.83473 3.98127Z", stroke: fill, fill: "white" }, void 0) }), void 0));
|
|
687
|
+
};
|
|
688
|
+
|
|
673
689
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
674
690
|
__proto__: null,
|
|
675
691
|
Clock: Clock,
|
|
@@ -687,7 +703,9 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
687
703
|
CircleNumber: CircleNumber,
|
|
688
704
|
SizeEmpty: SizeEmpty,
|
|
689
705
|
PlayMini: PlayMini,
|
|
690
|
-
ShippingEmpty: ShippingEmpty
|
|
706
|
+
ShippingEmpty: ShippingEmpty,
|
|
707
|
+
Drop: Drop,
|
|
708
|
+
DropEmpty: DropEmpty
|
|
691
709
|
});
|
|
692
710
|
|
|
693
711
|
var Facebook = function (_a) {
|
|
@@ -1166,6 +1184,28 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
1166
1184
|
PriorityShipping: PriorityShipping
|
|
1167
1185
|
});
|
|
1168
1186
|
|
|
1187
|
+
var Atom = function (_a) {
|
|
1188
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
1189
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 41, viewBoxY: 45, title: "Atom", testId: testId }, { children: jsxRuntime.jsx("path", { d: "M0.952965 34.0575C1.88598 29.8865 4.44676 26.5707 7.17857 23.3479C8.06558 22.301 8.0691 22.3145 7.1644 21.2765C4.94097 18.7259 2.93576 16.0429 1.65242 12.929C1.53447 12.6519 1.44364 12.368 1.354 12.0818C1.26435 11.7957 1.37877 11.5578 1.67955 11.4557C1.98033 11.3536 2.22569 11.4826 2.34601 11.7587C2.50996 12.1368 2.63379 12.5318 2.80011 12.91C4.08227 15.8376 6.03323 18.3545 8.14342 20.7715C8.80042 21.5245 8.80986 21.5133 9.50697 20.8187C9.89848 20.4012 10.3118 20.0027 10.7455 19.6247C11.189 19.2645 11.347 18.8247 11.3753 18.3018C11.5451 15.3412 12.0593 12.4076 12.9087 9.55482C13.0515 9.06445 12.963 8.81759 12.4558 8.61336C10.486 7.81665 8.50791 7.06259 6.35643 6.82919C5.61768 6.73402 4.86696 6.76594 4.14008 6.92345C3.03367 7.1849 2.3224 7.82114 2.06526 8.90287C1.88715 9.64908 1.53683 9.73773 0.948242 9.20921V8.87257C1.48847 6.38371 3.53378 5.7542 5.57084 5.78898C8.13633 5.83387 10.4801 6.66424 12.779 7.6315C13.3192 7.85593 13.4997 7.77065 13.6908 7.25784C14.2211 5.79168 14.9665 4.40413 15.9048 3.13629C16.9156 1.79647 18.1459 0.752901 19.8869 0.363525H21.0664C22.8971 0.771977 24.1615 1.90083 25.1948 3.31807C26.0876 4.56913 26.8016 5.92758 27.318 7.35771C27.4772 7.78523 27.6506 7.85481 28.0776 7.65619C28.977 7.24079 29.9069 6.88826 30.8601 6.6014C32.6766 6.04931 34.5072 5.61169 36.4488 5.80806C38.3584 6.00106 39.6335 7.0783 39.9626 8.87369C40.1608 9.95093 39.9555 11.0001 39.5993 12.0156C38.3018 15.6872 36.1032 18.8314 33.2959 21.6098C32.7462 22.154 32.7403 22.1506 33.2499 22.7083C34.6479 24.2214 35.9216 25.8346 37.0598 27.5334C38.4127 29.5791 39.5934 31.6931 39.9874 34.1315C40.3813 36.5699 39.1039 38.3608 36.6434 38.7423C35.8077 38.8583 34.9586 38.8552 34.1239 38.7333C32.0066 38.4562 30.0203 37.7762 28.0941 36.9256C27.6848 36.7449 27.4796 36.782 27.318 37.2241C26.8676 38.4784 26.266 39.6789 25.5251 40.8014C24.7949 41.8977 23.9504 42.8986 22.7661 43.5854C21.2528 44.4618 19.7277 44.4651 18.2108 43.5932C17.508 43.1803 16.8848 42.6558 16.3683 42.0425C15.131 40.6118 14.3053 38.9667 13.6424 37.242C13.4784 36.8134 13.3074 36.764 12.8804 36.9458C10.6735 37.8895 8.41001 38.6222 5.97308 38.8534C3.50431 39.0778 1.73972 38.0769 0.955326 35.854L0.952965 34.0575ZM12.3225 24.2737C12.3437 24.9066 12.6033 25.3274 13.0786 25.7504C15.2834 27.7095 17.6126 29.5379 20.0532 31.2252C20.3221 31.4104 20.5392 31.4721 20.8388 31.2634C23.3854 29.4893 25.866 27.6468 28.0245 25.4283C28.5353 24.9032 28.639 24.3298 28.6544 23.7003C28.7063 22.3963 28.6791 21.0906 28.573 19.7897C28.5594 19.5853 28.4625 19.3941 28.3029 19.2567C25.9795 17.1452 23.5091 15.1853 20.9084 13.3902C20.5793 13.1658 20.3469 13.1793 20.0261 13.4003C17.44 15.1826 14.9815 17.1267 12.667 19.2196C12.5749 19.3016 12.5012 19.4004 12.4504 19.5101C12.3995 19.6199 12.3725 19.7382 12.3709 19.8581C12.3166 20.6773 12.2459 21.4942 12.2812 22.3156C12.306 22.9709 12.3001 23.6229 12.3225 24.2737ZM36.9996 29.4354C35.7198 27.2417 34.1133 25.2668 32.4171 23.3547C32.1187 23.018 31.8993 22.9765 31.5844 23.3277C31.246 23.7151 30.8761 24.0764 30.478 24.4083C29.8339 24.9312 29.6039 25.5843 29.565 26.3687C29.4067 29.293 28.897 32.1905 28.0457 35.0045C27.8853 35.5465 27.9891 35.8024 28.54 36.0245C30.511 36.8201 32.4961 37.5484 34.6429 37.7874C35.4399 37.8944 36.2518 37.8386 37.0244 37.6236C38.382 37.2174 38.9647 36.3612 38.9341 34.8328C38.8621 32.8456 37.981 31.1175 36.9996 29.4343V29.4354ZM5.18395 37.8244C6.53098 37.8682 7.82611 37.5753 9.10473 37.2129C10.301 36.8578 11.4699 36.4244 12.6033 35.9157C12.8687 35.8035 13.0751 35.6913 12.9713 35.3356C12.0276 32.2284 11.5299 29.0517 11.2916 25.8278C11.281 25.6221 11.1891 25.4277 11.0345 25.2836C10.3869 24.6608 9.73696 24.038 9.10709 23.4029C8.89006 23.1863 8.72493 23.1269 8.49256 23.3895C6.17713 26.0074 4.03155 28.7307 2.68806 31.9445C2.29645 32.8815 1.9992 33.8521 2.02515 34.7857C1.98386 36.7326 3.07258 37.7548 5.18395 37.8233V37.8244ZM35.8154 6.78655C34.4672 6.74278 33.1708 7.01883 31.8922 7.38352C30.6778 7.74526 29.4904 8.18463 28.3383 8.69864C28.028 8.83217 27.8853 8.97917 27.995 9.33937C28.9186 12.3691 29.4105 15.4796 29.6464 18.6249C29.652 18.7816 29.6899 18.9356 29.7581 19.0783C29.8264 19.221 29.9234 19.3495 30.0439 19.4564C30.6045 19.9801 31.1507 20.5142 31.6823 21.0588C31.9312 21.3124 32.1045 21.3651 32.39 21.0824C34.985 18.515 37.0421 15.6165 38.3974 12.2861C38.7312 11.4669 38.9541 10.6163 38.927 9.80618C38.9376 7.8492 37.8902 6.85163 35.8154 6.78542V6.78655ZM23.4302 41.7474C24.8351 40.2695 25.6713 38.4865 26.3661 36.6327C26.484 36.3129 26.3661 36.1525 26.083 36.0088C24.2961 35.1194 22.5676 34.1275 20.9072 33.0386C20.6088 32.8411 20.3622 32.831 20.0567 33.033C18.4107 34.1079 16.6989 35.0889 14.9305 35.9707C14.6037 36.1345 14.4669 36.3073 14.6096 36.6754C15.3009 38.4708 16.097 40.2056 17.4405 41.6576C18.2509 42.5328 19.2004 43.1915 20.4743 43.2185C21.7282 43.1825 22.647 42.5665 23.4255 41.7462L23.4302 41.7474ZM17.6222 2.76823C16.1513 4.26963 15.2926 6.10542 14.5825 8.01415C14.4858 8.27448 14.5589 8.43831 14.809 8.56286C16.6449 9.48323 18.4231 10.5042 20.1346 11.6206C20.2331 11.6977 20.3568 11.7398 20.4843 11.7398C20.6119 11.7398 20.7355 11.6977 20.8341 11.6206C22.5295 10.5149 24.2929 9.50654 26.1148 8.60102C26.4168 8.44953 26.4687 8.26438 26.3507 7.96028C25.6666 6.14357 24.8492 4.39419 23.4868 2.93318C22.6883 2.07588 21.7494 1.42954 20.571 1.40037C19.2841 1.40934 18.3806 1.98836 17.6175 2.76711L17.6222 2.76823ZM26.1585 28.5894C24.7572 29.6946 23.3535 30.7977 21.8744 31.8076C21.5323 32.041 21.4698 32.1779 21.8744 32.4293C23.3512 33.3449 24.8645 34.1988 26.4097 35.0045C26.7471 35.1796 26.9016 35.1066 26.9995 34.7711C27.6264 32.5994 28.0682 30.3832 28.3206 28.1439C28.3737 27.6378 28.54 27.134 28.3796 26.5314C27.5964 27.2372 26.9405 27.9744 26.1585 28.5894ZM14.9753 15.8825C16.2928 14.7996 17.6552 13.7684 19.0683 12.8011C19.4056 12.5711 19.4823 12.4319 19.0683 12.1795C17.608 11.2818 16.1194 10.4233 14.586 9.63449C14.3277 9.50208 14.0859 9.36855 13.9668 9.78373C13.228 12.3295 12.7392 14.935 12.5065 17.5668C12.5132 17.6779 12.5298 17.7882 12.5561 17.8967C13.4254 17.1774 14.1956 16.5243 14.9776 15.8825H14.9753ZM28.0752 14.6807C27.8172 13.0786 27.4627 11.4919 27.0137 9.92849C26.8957 9.51891 26.7471 9.41568 26.326 9.63898C24.802 10.4447 23.2887 11.2661 21.8437 12.194C21.5984 12.3523 21.4227 12.4667 21.7765 12.7102C23.9778 14.2372 26.083 15.8858 28.0811 17.6476C28.1519 17.7093 28.2357 17.7598 28.435 17.8944C28.409 16.7297 28.2392 15.704 28.0776 14.6807H28.0752ZM13.0019 30.6788C13.2378 32.0253 13.5587 33.346 13.9232 34.6612C14.0281 35.0416 14.1496 35.2222 14.5955 34.9832C16.1383 34.1685 17.6693 33.3393 19.132 32.4023C19.3584 32.2565 19.5224 32.1386 19.198 31.9176C16.9168 30.3646 14.7901 28.6309 12.6988 26.8557C12.6752 26.8355 12.628 26.84 12.5042 26.8153C12.5923 28.1111 12.7585 29.401 13.0019 30.6788ZM9.72753 22.1001C9.57301 22.2561 9.60957 22.393 9.75111 22.5366C10.2147 23.0079 10.6759 23.4826 11.2468 24.0683C11.3022 22.8463 11.0722 21.7714 11.1524 20.6548C10.6782 21.1362 10.2041 21.6199 9.72753 22.1001ZM29.6617 23.6958C30.2668 23.2335 30.6749 22.7678 31.0972 22.3167C31.234 22.1708 31.168 22.0463 31.0512 21.9251C30.6407 21.5032 30.2314 21.0801 29.8233 20.656C29.7101 21.6625 29.841 22.6208 29.6652 23.6958H29.6617Z", fill: fill }, void 0) }), void 0));
|
|
1190
|
+
};
|
|
1191
|
+
|
|
1192
|
+
var Bubbles = function (_a) {
|
|
1193
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
1194
|
+
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 47, title: "Bubbles", testId: testId }, { children: [jsxRuntime.jsxs("g", __assign$1({ clipPath: "url(#clip0_4068_37884)" }, { children: [jsxRuntime.jsx("path", { d: "M24.6424 15.5222C22.8363 15.5203 21.0441 15.8383 19.3489 16.4615C19.3549 16.3266 19.3597 16.1918 19.3597 16.0581C19.3599 14.1436 18.7924 12.2719 17.7289 10.68C16.6654 9.08796 15.1537 7.84708 13.385 7.11425C11.6162 6.38143 9.66991 6.18957 7.79213 6.56293C5.91435 6.93629 4.18946 7.85811 2.83559 9.21181C1.48172 10.5655 0.559677 12.2903 0.186082 14.168C-0.187513 16.0458 0.00412892 17.9921 0.736737 19.7609C1.46934 21.5298 2.71001 23.0416 4.30188 24.1053C5.89374 25.169 7.76529 25.7367 9.67983 25.7367C9.84574 25.7367 10.0104 25.7367 10.1763 25.7236C9.08124 28.796 8.99279 32.1373 9.92379 35.2633C10.8548 38.3894 12.7569 41.1378 15.3545 43.1105C17.9521 45.0831 21.1104 46.1775 24.3716 46.235C27.6328 46.2926 30.8277 45.3103 33.4933 43.4305C36.1589 41.5508 38.1567 38.8711 39.1974 35.7799C40.2381 32.6886 40.2676 29.3463 39.2816 26.2372C38.2956 23.128 36.3452 20.4136 33.7132 18.4871C31.0812 16.5606 27.9041 15.5222 24.6424 15.5222ZM9.68342 24.9024C7.93412 24.9024 6.22413 24.3837 4.76966 23.4118C3.31519 22.4399 2.18158 21.0586 1.51221 19.4424C0.842834 17.8262 0.66775 16.0479 1.00911 14.3322C1.35046 12.6166 2.19293 11.0406 3.42995 9.80379C4.66698 8.56694 6.24301 7.72469 7.95872 7.38356C9.67443 7.04244 11.4528 7.21776 13.0688 7.88734C14.6849 8.55693 16.0661 9.69072 17.0378 11.1453C18.0095 12.5999 18.528 14.31 18.5278 16.0593C18.5278 16.3099 18.5146 16.5618 18.4931 16.8112C14.9107 18.3881 12.0605 21.2664 10.5189 24.8642C10.2372 24.8905 9.95794 24.9024 9.68342 24.9024ZM24.646 45.4031C22.2763 45.4032 19.9426 44.8233 17.8486 43.7142C15.7545 42.605 13.9637 41.0003 12.6323 39.04C11.301 37.0797 10.4695 34.8234 10.2106 32.4679C9.95164 30.1124 10.273 27.7294 11.1467 25.5267C11.2114 25.4554 11.249 25.3638 11.2529 25.2677C12.2685 22.8446 13.9223 20.7425 16.0382 19.1852C18.1541 17.6279 20.6529 16.6737 23.2683 16.4244C25.8837 16.1751 28.5176 16.64 30.8897 17.7695C33.2617 18.899 35.283 20.6508 36.738 22.8383C38.193 25.0258 39.0273 27.5671 39.1521 30.1914C39.2769 32.8156 38.6874 35.4246 37.4464 37.7403C36.2055 40.056 34.3596 41.9917 32.1054 43.3411C29.8512 44.6905 27.2732 45.4032 24.646 45.4031Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M24.6423 19.677C21.6723 19.6814 18.8252 20.8633 16.7251 22.9635C14.6251 25.0638 13.4436 27.911 13.4395 30.881C13.4395 30.9918 13.4835 31.0981 13.5618 31.1764C13.6402 31.2547 13.7464 31.2988 13.8572 31.2988C13.968 31.2988 14.0742 31.2547 14.1526 31.1764C14.2309 31.0981 14.2749 30.9918 14.2749 30.881C14.2791 28.1326 15.3726 25.4979 17.3159 23.5543C19.2592 21.6108 21.8939 20.5169 24.6423 20.5125C24.7531 20.5125 24.8593 20.4685 24.9377 20.3901C25.016 20.3118 25.06 20.2055 25.06 20.0948C25.06 19.984 25.016 19.8777 24.9377 19.7994C24.8593 19.721 24.7531 19.677 24.6423 19.677Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M9.68333 9.90405C8.05156 9.90595 6.48719 10.5551 5.33346 11.709C4.17973 12.863 3.53088 14.4275 3.5293 16.0593C3.5293 16.1701 3.57331 16.2763 3.65165 16.3547C3.73 16.433 3.83625 16.477 3.94705 16.477C4.05784 16.477 4.16409 16.433 4.24244 16.3547C4.32078 16.2763 4.36479 16.1701 4.36479 16.0593C4.36606 14.649 4.92678 13.2968 5.92389 12.2995C6.921 11.3021 8.27305 10.7411 9.68333 10.7395C9.79413 10.7395 9.90038 10.6955 9.97872 10.6172C10.0571 10.5389 10.1011 10.4326 10.1011 10.3218C10.1011 10.211 10.0571 10.1048 9.97872 10.0264C9.90038 9.94807 9.79413 9.90405 9.68333 9.90405Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M27.6103 11.6324C28.6854 11.6324 29.7362 11.3136 30.6301 10.7163C31.524 10.1191 32.2207 9.27014 32.6321 8.27693C33.0435 7.28373 33.1511 6.19083 32.9414 5.13644C32.7316 4.08206 32.214 3.11355 31.4538 2.35338C30.6937 1.59321 29.7251 1.07553 28.6707 0.865797C27.6164 0.656066 26.5235 0.763708 25.5303 1.17511C24.537 1.58651 23.6881 2.28319 23.0909 3.17706C22.4936 4.07092 22.1748 5.12182 22.1748 6.19686C22.1764 7.63796 22.7496 9.01958 23.7686 10.0386C24.7876 11.0576 26.1692 11.6308 27.6103 11.6324ZM27.6103 1.59685C28.5201 1.59685 29.4095 1.86664 30.166 2.37209C30.9224 2.87755 31.512 3.59597 31.8601 4.43651C32.2083 5.27705 32.2994 6.20196 32.1219 7.09428C31.9444 7.98659 31.5063 8.80623 30.863 9.44955C30.2197 10.0929 29.4 10.531 28.5077 10.7085C27.6154 10.886 26.6905 10.7949 25.85 10.4467C25.0094 10.0985 24.291 9.50895 23.7856 8.75248C23.2801 7.99602 23.0103 7.10665 23.0103 6.19686C23.0116 4.97725 23.4966 3.80795 24.359 2.94556C25.2214 2.08316 26.3907 1.59812 27.6103 1.59685Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M3.53767 35.4011L2.2128 36.7247C2.17295 36.7635 2.14129 36.8099 2.11967 36.8612C2.09804 36.9124 2.08691 36.9675 2.08691 37.0231C2.08691 37.0787 2.09804 37.1338 2.11967 37.185C2.14129 37.2363 2.17295 37.2827 2.2128 37.3215C2.25161 37.3614 2.29801 37.393 2.34926 37.4146C2.40051 37.4363 2.45557 37.4474 2.51119 37.4474C2.56681 37.4474 2.62187 37.4363 2.67312 37.4146C2.72437 37.393 2.77077 37.3614 2.80958 37.3215L4.13445 35.9978C4.17325 35.959 4.20402 35.913 4.22502 35.8623C4.24601 35.8116 4.25681 35.7573 4.25681 35.7024C4.25681 35.6476 4.24601 35.5932 4.22502 35.5426C4.20402 35.4919 4.17325 35.4458 4.13445 35.407C4.09566 35.3682 4.04961 35.3375 3.99892 35.3165C3.94824 35.2955 3.89389 35.2847 3.83903 35.2847C3.78417 35.2847 3.72986 35.2955 3.67917 35.3165C3.62849 35.3375 3.58244 35.3682 3.54364 35.407L3.53767 35.4011Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M5.89634 33.0414L4.57266 34.3663C4.49431 34.4454 4.45062 34.5524 4.45118 34.6638C4.45174 34.7751 4.49652 34.8817 4.57566 34.9601C4.6548 35.0384 4.76182 35.0821 4.87318 35.0815C4.98454 35.081 5.0911 35.0362 5.16944 34.9571L6.49312 33.6322C6.57226 33.5539 6.61702 33.4473 6.61758 33.3359C6.61814 33.2246 6.57444 33.1176 6.49609 33.0384C6.41775 32.9593 6.31119 32.9145 6.19983 32.9139C6.08847 32.9134 5.98145 32.9571 5.90231 33.0354L5.89634 33.0414Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M2.8034 33.0414C2.72426 32.9622 2.61693 32.9178 2.50501 32.9178C2.39309 32.9178 2.28576 32.9622 2.20662 33.0414C2.12748 33.1205 2.08301 33.2279 2.08301 33.3398C2.08301 33.4517 2.12748 33.559 2.20662 33.6382L3.53146 34.963C3.57025 35.0018 3.6163 35.0326 3.66699 35.0536C3.71768 35.0746 3.77202 35.0854 3.82688 35.0854C3.88174 35.0854 3.93605 35.0746 3.98674 35.0536C4.03743 35.0326 4.08348 35.0018 4.12227 34.963C4.16106 34.9242 4.19184 34.8782 4.21284 34.8275C4.23383 34.7768 4.24463 34.7225 4.24463 34.6676C4.24463 34.6128 4.23383 34.5584 4.21284 34.5077C4.19184 34.4571 4.16106 34.411 4.12227 34.3722L2.8034 33.0414Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M5.16359 35.401C5.08524 35.3219 4.97868 35.2771 4.86732 35.2766C4.75596 35.276 4.64894 35.3197 4.5698 35.398C4.49066 35.4764 4.44588 35.583 4.44532 35.6943C4.44476 35.8057 4.48845 35.9127 4.5668 35.9918L5.89048 37.3155C5.92951 37.3539 5.97576 37.3843 6.02656 37.4048C6.07736 37.4252 6.13171 37.4355 6.18648 37.4349C6.24109 37.4356 6.29528 37.4254 6.3459 37.4049C6.39653 37.3844 6.44255 37.354 6.48129 37.3155C6.52113 37.2767 6.55282 37.2303 6.57445 37.1791C6.59607 37.1278 6.6072 37.0727 6.6072 37.0171C6.6072 36.9615 6.59607 36.9064 6.57445 36.8552C6.55282 36.8039 6.52113 36.7575 6.48129 36.7187L5.16359 35.401Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M35.2065 15.7382C35.3167 15.739 35.4228 15.6961 35.5014 15.6188L36.8263 14.294C36.9046 14.2156 36.9486 14.1094 36.9486 13.9986C36.9486 13.8878 36.9046 13.7815 36.8263 13.7032C36.7479 13.6248 36.6416 13.5808 36.5308 13.5808C36.42 13.5808 36.3138 13.6248 36.2354 13.7032L34.9105 15.028C34.851 15.0863 34.8103 15.1611 34.7936 15.2427C34.7769 15.3243 34.785 15.409 34.8168 15.486C34.8487 15.563 34.9028 15.6287 34.9722 15.6747C35.0417 15.7207 35.1233 15.7449 35.2065 15.7442V15.7382Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M37.5662 13.3797C37.6208 13.3803 37.675 13.3701 37.7256 13.3496C37.7762 13.3291 37.8223 13.2988 37.8611 13.2604L39.1859 11.9355C39.2643 11.8564 39.308 11.7493 39.3074 11.638C39.3068 11.5266 39.2621 11.4201 39.1829 11.3417C39.1038 11.2634 38.9968 11.2197 38.8854 11.2202C38.774 11.2208 38.6675 11.2656 38.5892 11.3447L37.2643 12.6696C37.2054 12.7281 37.1652 12.8028 37.1488 12.8842C37.1325 12.9656 37.1407 13.05 37.1724 13.1268C37.2041 13.2035 37.2579 13.2691 37.327 13.3152C37.3961 13.3613 37.4773 13.3858 37.5603 13.3857L37.5662 13.3797Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M36.2355 13.2544C36.2743 13.2932 36.3204 13.324 36.3711 13.345C36.4218 13.366 36.4761 13.3768 36.531 13.3768C36.5858 13.3768 36.6401 13.366 36.6908 13.345C36.7415 13.324 36.7876 13.2932 36.8264 13.2544C36.8652 13.2157 36.8959 13.1696 36.9169 13.1189C36.9379 13.0682 36.9487 13.0139 36.9487 12.959C36.9487 12.9042 36.9379 12.8499 36.9169 12.7992C36.8959 12.7485 36.8652 12.7024 36.8264 12.6636L35.5015 11.3388C35.4232 11.2596 35.3166 11.2149 35.2052 11.2143C35.0939 11.2137 34.9868 11.2574 34.9077 11.3358C34.8286 11.4141 34.7838 11.5207 34.7832 11.6321C34.7826 11.7434 34.8264 11.8504 34.9047 11.9296L36.2355 13.2544Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M38.5956 15.6165C38.6747 15.6957 38.782 15.7401 38.8939 15.7401C39.0059 15.7401 39.1132 15.6957 39.1923 15.6165C39.2715 15.5374 39.3159 15.43 39.3159 15.3181C39.3159 15.2062 39.2715 15.0989 39.1923 15.0197L37.8675 13.6949C37.8287 13.6561 37.7827 13.6253 37.732 13.6043C37.6813 13.5833 37.6269 13.5725 37.572 13.5725C37.5172 13.5725 37.4629 13.5833 37.4122 13.6043C37.3615 13.6253 37.3155 13.6561 37.2767 13.6949C37.2379 13.7337 37.2071 13.7797 37.1861 13.8304C37.1651 13.8811 37.1543 13.9354 37.1543 13.9903C37.1543 14.0451 37.1651 14.0995 37.1861 14.1502C37.2071 14.2008 37.2379 14.2469 37.2767 14.2857L38.5956 15.6165Z", fill: fill }, void 0)] }), void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign$1({ id: "clip0_4068_37884" }, { children: jsxRuntime.jsx("rect", { width: "40", height: "45.4773", fill: "white", transform: "translate(0 0.761353)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
1195
|
+
};
|
|
1196
|
+
|
|
1197
|
+
var FairAdvantages = function (_a) {
|
|
1198
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
1199
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 54, viewBoxY: 39, title: "FairAdvantages", testId: testId }, { children: jsxRuntime.jsx("path", { d: "M53.6412 30.2871C53.6494 30.254 53.6551 30.2203 53.6583 30.1863C53.6575 30.1772 53.6575 30.1681 53.6583 30.159C53.66 30.1312 53.66 30.1032 53.6583 30.0754C53.6591 30.0686 53.6591 30.0617 53.6583 30.0549C53.6533 30.0214 53.6459 29.9883 53.6361 29.9559C53.6354 29.9496 53.6354 29.9433 53.6361 29.9371C53.6256 29.9097 53.6136 29.883 53.6002 29.8569L53.59 29.8381L53.5814 29.8227L41.8025 10.8144L41.794 10.8024L41.7804 10.7836C41.7641 10.76 41.7458 10.7377 41.7258 10.7171L41.7138 10.7034C41.6896 10.68 41.6633 10.6589 41.6352 10.6402L41.6165 10.6266C41.5918 10.6113 41.5661 10.5976 41.5396 10.5856L41.5226 10.5771C41.4916 10.5648 41.4596 10.5551 41.427 10.5481H41.4014C41.3666 10.5412 41.3311 10.5378 41.2956 10.5378H27.8318C27.8318 10.5293 27.8318 10.5225 27.8318 10.5156V0.597479C27.8318 0.439018 27.7689 0.28705 27.6568 0.175001C27.5448 0.0629519 27.3928 0 27.2343 0C27.0759 0 26.9239 0.0629519 26.8118 0.175001C26.6998 0.28705 26.6368 0.439018 26.6368 0.597479V10.5156C26.6368 10.5156 26.6368 10.5293 26.6368 10.5378H12.3554C12.3198 10.5378 12.2845 10.5412 12.2496 10.5481H12.2239C12.1913 10.5551 12.1593 10.5648 12.1283 10.5771L12.1113 10.5856C12.0847 10.5972 12.0589 10.6109 12.0345 10.6266L12.014 10.6402C11.9865 10.6589 11.9608 10.68 11.9372 10.7034L11.9252 10.7171C11.9047 10.7373 11.8864 10.7596 11.8706 10.7836L11.8569 10.8024L11.8484 10.8144L0.0695487 29.8227C0.0692397 29.8273 0.0692397 29.8318 0.0695487 29.8364C0.0649141 29.8434 0.0608618 29.8508 0.0575457 29.8586C0.0440793 29.8832 0.0327103 29.9089 0.0234541 29.9354V29.9559C0.0136115 29.9883 0.00621365 30.0214 0.00128205 30.0549C0.000442769 30.0617 0.000442769 30.0686 0.00128205 30.0754C-0.00042735 30.1032 -0.00042735 30.1312 0.00128205 30.159C0.00213081 30.1681 0.00213081 30.1773 0.00128205 30.1863C0.00460456 30.2196 0.0097067 30.2526 0.0166191 30.2853C0.0173528 30.2922 0.0173528 30.299 0.0166191 30.3058C0.0248944 30.3346 0.0357399 30.3626 0.0490437 30.3895V30.4048C0.219752 30.7565 4.43797 39 12.3605 39C20.2831 39 24.4962 30.7565 24.672 30.4048C24.672 30.4048 24.672 30.3946 24.672 30.3895C24.684 30.3623 24.6943 30.3343 24.7027 30.3058C24.7027 30.3058 24.7027 30.2939 24.7027 30.2871C24.7112 30.2541 24.7163 30.2203 24.718 30.1863C24.7189 30.1773 24.7189 30.1681 24.718 30.159C24.7206 30.1312 24.7206 30.1032 24.718 30.0754C24.7189 30.0686 24.7189 30.0617 24.718 30.0549C24.7139 30.0212 24.7065 29.9881 24.6959 29.9559C24.6959 29.9559 24.6959 29.9439 24.6959 29.9371C24.6854 29.9097 24.6734 29.883 24.66 29.8569L24.6498 29.8381V29.8227L13.4377 11.7277H40.215L29.0028 29.8227C29.0038 29.8272 29.0038 29.8319 29.0028 29.8364C28.9995 29.8441 28.9956 29.8515 28.9909 29.8586C28.979 29.8842 28.967 29.9098 28.9567 29.9354V29.9559C28.9461 29.9881 28.9387 30.0212 28.9346 30.0549C28.9337 30.0617 28.9337 30.0686 28.9346 30.0754C28.932 30.1032 28.932 30.1312 28.9346 30.159C28.9337 30.1681 28.9337 30.1773 28.9346 30.1863C28.9362 30.2198 28.9413 30.253 28.9499 30.2853C28.9499 30.2853 28.9499 30.299 28.9499 30.3058C28.9584 30.3343 28.9687 30.3623 28.9807 30.3895C28.9807 30.3895 28.9807 30.3997 28.9807 30.4048C29.1514 30.7565 33.3696 39 41.2922 39C49.2147 39 53.4278 30.7565 53.6037 30.4048V30.3895C53.617 30.3626 53.6278 30.3346 53.6361 30.3058L53.6412 30.2871ZM12.3622 37.7982C6.62812 37.7982 2.90669 32.7862 1.62126 30.7292H23.1032C21.8177 32.793 18.1014 37.805 12.3622 37.805V37.7982ZM1.65885 29.5342L12.3622 12.2722L23.0656 29.5496L1.65885 29.5342ZM41.287 12.2722L51.9904 29.5496H30.5836L41.287 12.2722ZM41.287 37.8136C35.5529 37.8136 31.8315 32.8016 30.546 30.7445H52.028C50.7426 32.793 47.0211 37.805 41.287 37.805V37.8136Z", fill: fill }, void 0) }), void 0));
|
|
1200
|
+
};
|
|
1201
|
+
|
|
1202
|
+
var RevelIcons = /*#__PURE__*/Object.freeze({
|
|
1203
|
+
__proto__: null,
|
|
1204
|
+
Atom: Atom,
|
|
1205
|
+
Bubbles: Bubbles,
|
|
1206
|
+
FairAdvantages: FairAdvantages
|
|
1207
|
+
});
|
|
1208
|
+
|
|
1169
1209
|
var Icon = {
|
|
1170
1210
|
Custom: Custom$1,
|
|
1171
1211
|
Arrows: Arrows,
|
|
@@ -1180,6 +1220,7 @@ var Icon = {
|
|
|
1180
1220
|
SlideDots: SlideDots$1,
|
|
1181
1221
|
Emoji: Emoji,
|
|
1182
1222
|
MyAccount: MyAccount,
|
|
1223
|
+
RevelIcons: RevelIcons,
|
|
1183
1224
|
};
|
|
1184
1225
|
|
|
1185
1226
|
function _extends$2() {
|
|
@@ -4066,7 +4107,7 @@ exports.InputValidationType = void 0;
|
|
|
4066
4107
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4067
4108
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4068
4109
|
|
|
4069
|
-
var Section = newStyled.div(templateObject_1$
|
|
4110
|
+
var Section = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
4070
4111
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4071
4112
|
});
|
|
4072
4113
|
var CardHeader = function (_a) {
|
|
@@ -4077,14 +4118,14 @@ var CardFooter = function (_a) {
|
|
|
4077
4118
|
var children = _a.children;
|
|
4078
4119
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4079
4120
|
};
|
|
4080
|
-
var templateObject_1$
|
|
4121
|
+
var templateObject_1$1v;
|
|
4081
4122
|
|
|
4082
|
-
var Body = newStyled.div(templateObject_1$
|
|
4123
|
+
var Body = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
4083
4124
|
var CardBody = function (_a) {
|
|
4084
4125
|
var children = _a.children;
|
|
4085
4126
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4086
4127
|
};
|
|
4087
|
-
var templateObject_1$
|
|
4128
|
+
var templateObject_1$1u;
|
|
4088
4129
|
|
|
4089
4130
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4090
4131
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4229,7 +4270,7 @@ var AssetsProvider = function (_a) {
|
|
|
4229
4270
|
};
|
|
4230
4271
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4231
4272
|
|
|
4232
|
-
var Container$
|
|
4273
|
+
var Container$Z = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
4233
4274
|
var flex = _a.flex;
|
|
4234
4275
|
return flex &&
|
|
4235
4276
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4244,14 +4285,14 @@ var Container$X = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __
|
|
|
4244
4285
|
var Card$2 = function (_a) {
|
|
4245
4286
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4246
4287
|
var theme = useTheme();
|
|
4247
|
-
return (jsxRuntime.jsx(Container$
|
|
4288
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4248
4289
|
};
|
|
4249
4290
|
var Card$3 = Object.assign(Card$2, {
|
|
4250
4291
|
Header: CardHeader,
|
|
4251
4292
|
Footer: CardFooter,
|
|
4252
4293
|
Body: CardBody,
|
|
4253
4294
|
});
|
|
4254
|
-
var templateObject_1$
|
|
4295
|
+
var templateObject_1$1t;
|
|
4255
4296
|
|
|
4256
4297
|
var Fragment = jsxRuntime.Fragment;
|
|
4257
4298
|
function jsx(type, props, key) {
|
|
@@ -4397,7 +4438,7 @@ function BaseSelectOption(_a) {
|
|
|
4397
4438
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4398
4439
|
}
|
|
4399
4440
|
|
|
4400
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4441
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4401
4442
|
function BaseSelect(_a) {
|
|
4402
4443
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4403
4444
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4407,7 +4448,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4407
4448
|
Options: BaseSelectOptions,
|
|
4408
4449
|
Option: BaseSelectOption,
|
|
4409
4450
|
});
|
|
4410
|
-
var templateObject_1$
|
|
4451
|
+
var templateObject_1$1s;
|
|
4411
4452
|
|
|
4412
4453
|
var CustomButton = newStyled.button(function (_a) {
|
|
4413
4454
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4464,14 +4505,14 @@ var withLabel = function (Button, label) {
|
|
|
4464
4505
|
};
|
|
4465
4506
|
};
|
|
4466
4507
|
|
|
4467
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4468
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4508
|
+
var ErrorText = newStyled.h3(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
4509
|
+
var ErrorContainer = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
4469
4510
|
var Error$1 = function (_a) {
|
|
4470
4511
|
var error = _a.error;
|
|
4471
4512
|
var theme = useTheme();
|
|
4472
4513
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4473
4514
|
};
|
|
4474
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$1r, templateObject_2$Y;
|
|
4475
4516
|
|
|
4476
4517
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4477
4518
|
var theme = _a.theme;
|
|
@@ -4637,7 +4678,7 @@ var CustomCheckboxStyles = {
|
|
|
4637
4678
|
},
|
|
4638
4679
|
};
|
|
4639
4680
|
|
|
4640
|
-
var Container$
|
|
4681
|
+
var Container$Y = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
4641
4682
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4642
4683
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4643
4684
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4648,7 +4689,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4648
4689
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4649
4690
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4650
4691
|
]; });
|
|
4651
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4692
|
+
var Input$3 = newStyled.input(templateObject_2$X || (templateObject_2$X = __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) {
|
|
4652
4693
|
var disabled = _a.disabled;
|
|
4653
4694
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4654
4695
|
});
|
|
@@ -4677,9 +4718,9 @@ var Checkbox = function (_a) {
|
|
|
4677
4718
|
React$2.useEffect(function () {
|
|
4678
4719
|
mounted.current = true;
|
|
4679
4720
|
}, []);
|
|
4680
|
-
return (jsxRuntime.jsxs(Container$
|
|
4721
|
+
return (jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4681
4722
|
};
|
|
4682
|
-
var templateObject_1$
|
|
4723
|
+
var templateObject_1$1q, templateObject_2$X;
|
|
4683
4724
|
|
|
4684
4725
|
var CustomOption = newStyled.li(function (_a) {
|
|
4685
4726
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4726,8 +4767,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4726
4767
|
Option: BaseDropdownOption,
|
|
4727
4768
|
});
|
|
4728
4769
|
|
|
4729
|
-
var Container$
|
|
4730
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4770
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject([""], [""])));
|
|
4771
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
4731
4772
|
function SimpleDropdown(_a) {
|
|
4732
4773
|
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;
|
|
4733
4774
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4757,13 +4798,13 @@ function SimpleDropdown(_a) {
|
|
|
4757
4798
|
setSelectedValue(value);
|
|
4758
4799
|
}, [value, options, initialValue]);
|
|
4759
4800
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4760
|
-
return (jsxRuntime.jsxs(Container$
|
|
4801
|
+
return (jsxRuntime.jsxs(Container$X, __assign$1({ as: showRequiredPlaceholder ? 'div' : React$2.Fragment }, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
4761
4802
|
}
|
|
4762
|
-
var templateObject_1$
|
|
4803
|
+
var templateObject_1$1p, templateObject_2$W;
|
|
4763
4804
|
|
|
4764
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4765
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4766
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4805
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
4806
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __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; });
|
|
4807
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
4767
4808
|
var DialogDropdownLink = newStyled.a(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
4768
4809
|
var DropdownDialog = function (_a) {
|
|
4769
4810
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4772,7 +4813,7 @@ var DropdownDialog = function (_a) {
|
|
|
4772
4813
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4773
4814
|
}) }), void 0) }), void 0));
|
|
4774
4815
|
};
|
|
4775
|
-
var templateObject_1$
|
|
4816
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$J, templateObject_4$v;
|
|
4776
4817
|
|
|
4777
4818
|
var getStylesBySize$9 = function (size, theme) {
|
|
4778
4819
|
switch (size) {
|
|
@@ -4840,9 +4881,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4840
4881
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4841
4882
|
// `variants` styles that are consistent through all themes.
|
|
4842
4883
|
var TAGS = {
|
|
4843
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4844
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4845
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4884
|
+
hero1: newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject([""], [""]))),
|
|
4885
|
+
hero2: newStyled.h2(templateObject_2$U || (templateObject_2$U = __makeTemplateObject([""], [""]))),
|
|
4886
|
+
hero3: newStyled.h3(templateObject_3$I || (templateObject_3$I = __makeTemplateObject([""], [""]))),
|
|
4846
4887
|
display1: newStyled.h1(templateObject_4$u || (templateObject_4$u = __makeTemplateObject([""], [""]))),
|
|
4847
4888
|
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4848
4889
|
heading1: newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject([""], [""]))),
|
|
@@ -4964,9 +5005,9 @@ var DEFAULTS = {
|
|
|
4964
5005
|
size: 'regular',
|
|
4965
5006
|
},
|
|
4966
5007
|
};
|
|
4967
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$1n, templateObject_2$U, templateObject_3$I, templateObject_4$u, templateObject_5$i, templateObject_6$f, templateObject_7$9, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
4968
5009
|
|
|
4969
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5010
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
4970
5011
|
var inline = _a.inline;
|
|
4971
5012
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4972
5013
|
});
|
|
@@ -4985,7 +5026,7 @@ var SizeSelector = function (_a) {
|
|
|
4985
5026
|
}, size: exports.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));
|
|
4986
5027
|
}) }), void 0)] }), void 0));
|
|
4987
5028
|
};
|
|
4988
|
-
var templateObject_1$
|
|
5029
|
+
var templateObject_1$1m;
|
|
4989
5030
|
|
|
4990
5031
|
var getStylesBySize$8 = function (size) {
|
|
4991
5032
|
switch (size) {
|
|
@@ -5012,7 +5053,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5012
5053
|
} });
|
|
5013
5054
|
};
|
|
5014
5055
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5015
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5056
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1l || (templateObject_1$1l = __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));
|
|
5016
5057
|
};
|
|
5017
5058
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5018
5059
|
if (disabled)
|
|
@@ -5028,16 +5069,16 @@ var TextButton = function (_a) {
|
|
|
5028
5069
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5029
5070
|
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));
|
|
5030
5071
|
};
|
|
5031
|
-
var templateObject_1$
|
|
5072
|
+
var templateObject_1$1l;
|
|
5032
5073
|
|
|
5033
|
-
var Container$
|
|
5034
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5035
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5074
|
+
var Container$W = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
5075
|
+
var P$2 = newStyled.p(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5076
|
+
var PercentageSpan = newStyled.span(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
5036
5077
|
var SizeFitGuide = function (_a) {
|
|
5037
5078
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5038
|
-
return (jsxRuntime.jsxs(Container$
|
|
5079
|
+
return (jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$2, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5039
5080
|
};
|
|
5040
|
-
var templateObject_1$
|
|
5081
|
+
var templateObject_1$1k, templateObject_2$T, templateObject_3$H;
|
|
5041
5082
|
|
|
5042
5083
|
var getStylesBySize$7 = function (size) {
|
|
5043
5084
|
switch (size) {
|
|
@@ -5067,7 +5108,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5067
5108
|
};
|
|
5068
5109
|
}
|
|
5069
5110
|
};
|
|
5070
|
-
var Container$
|
|
5111
|
+
var Container$V = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
5071
5112
|
var backgroundColor = _a.backgroundColor;
|
|
5072
5113
|
return backgroundColor;
|
|
5073
5114
|
}, function (_a) {
|
|
@@ -5089,7 +5130,7 @@ var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __
|
|
|
5089
5130
|
var size = _a.size;
|
|
5090
5131
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5091
5132
|
});
|
|
5092
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5133
|
+
var H3$1 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __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) {
|
|
5093
5134
|
var textColor = _a.textColor;
|
|
5094
5135
|
return textColor;
|
|
5095
5136
|
}, function (_a) {
|
|
@@ -5104,9 +5145,9 @@ var H3$1 = newStyled.h3(templateObject_2$Q || (templateObject_2$Q = __makeTempla
|
|
|
5104
5145
|
var DiscountTag = function (_a) {
|
|
5105
5146
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5106
5147
|
var theme = useTheme();
|
|
5107
|
-
return (jsxRuntime.jsx(Container$
|
|
5148
|
+
return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5108
5149
|
};
|
|
5109
|
-
var templateObject_1$
|
|
5150
|
+
var templateObject_1$1j, templateObject_2$S;
|
|
5110
5151
|
|
|
5111
5152
|
var getStylesBySize$6 = function (size) {
|
|
5112
5153
|
switch (size) {
|
|
@@ -5136,8 +5177,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5136
5177
|
};
|
|
5137
5178
|
}
|
|
5138
5179
|
};
|
|
5139
|
-
var Container$
|
|
5140
|
-
var Price = newStyled.p(templateObject_2$
|
|
5180
|
+
var Container$U = 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"])));
|
|
5181
|
+
var Price = newStyled.p(templateObject_2$R || (templateObject_2$R = __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) {
|
|
5141
5182
|
var weight = _a.weight;
|
|
5142
5183
|
return (weight ? weight : '400');
|
|
5143
5184
|
}, function (_a) {
|
|
@@ -5166,7 +5207,7 @@ var Price = newStyled.p(templateObject_2$P || (templateObject_2$P = __makeTempla
|
|
|
5166
5207
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5167
5208
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5168
5209
|
});
|
|
5169
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5210
|
+
var TagContainer = newStyled.p(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5170
5211
|
var _b;
|
|
5171
5212
|
var size = _a.size;
|
|
5172
5213
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5187,11 +5228,11 @@ var PriceLabel = function (_a) {
|
|
|
5187
5228
|
weight: 700,
|
|
5188
5229
|
};
|
|
5189
5230
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5190
|
-
return (jsxRuntime.jsxs(Container$
|
|
5231
|
+
return (jsxRuntime.jsxs(Container$U, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5191
5232
|
};
|
|
5192
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1i, templateObject_2$R, templateObject_3$G;
|
|
5193
5234
|
|
|
5194
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5235
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5195
5236
|
var PriceLabelV2 = function (_a) {
|
|
5196
5237
|
var _b;
|
|
5197
5238
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, 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 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5219,9 +5260,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5219
5260
|
weight: 700,
|
|
5220
5261
|
};
|
|
5221
5262
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5222
|
-
return (jsxRuntime.jsxs(Container$
|
|
5263
|
+
return (jsxRuntime.jsxs(Container$U, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5223
5264
|
};
|
|
5224
|
-
var templateObject_1$
|
|
5265
|
+
var templateObject_1$1h;
|
|
5225
5266
|
|
|
5226
5267
|
var OneColorSelector = function (_a) {
|
|
5227
5268
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5262,9 +5303,9 @@ var OutOfStock = function (_a) {
|
|
|
5262
5303
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5263
5304
|
};
|
|
5264
5305
|
|
|
5265
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5266
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5267
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5306
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5307
|
+
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5308
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
5268
5309
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5269
5310
|
var OptionsContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
5270
5311
|
var Label$3 = function (_a) {
|
|
@@ -5284,23 +5325,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5284
5325
|
Option: Option,
|
|
5285
5326
|
OptionsContainer: OptionsContainer,
|
|
5286
5327
|
});
|
|
5287
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1g, templateObject_2$Q, templateObject_3$F, templateObject_4$t, templateObject_5$h;
|
|
5288
5329
|
|
|
5289
|
-
var Container$
|
|
5330
|
+
var Container$T = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
5290
5331
|
var borderColor = _a.borderColor;
|
|
5291
5332
|
return borderColor;
|
|
5292
5333
|
}, function (_a) {
|
|
5293
5334
|
var noStock = _a.noStock;
|
|
5294
5335
|
return (noStock ? '0.4' : '1');
|
|
5295
5336
|
});
|
|
5296
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5337
|
+
var Image$3 = newStyled.img(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5297
5338
|
var PatternSelector = function (_a) {
|
|
5298
5339
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5299
5340
|
var theme = useTheme();
|
|
5300
5341
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5301
|
-
return (jsxRuntime.jsx(Container$
|
|
5342
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5302
5343
|
};
|
|
5303
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$1f, templateObject_2$P;
|
|
5304
5345
|
|
|
5305
5346
|
var renderOptions$1 = function (options) {
|
|
5306
5347
|
if (options.length === 0) {
|
|
@@ -5358,7 +5399,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5358
5399
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5359
5400
|
};
|
|
5360
5401
|
|
|
5361
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5402
|
+
var Image$2 = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
5362
5403
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5363
5404
|
return borderRadiusVariant &&
|
|
5364
5405
|
"\nborder-radius: 20px;\n";
|
|
@@ -5373,7 +5414,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5373
5414
|
var theme = useTheme();
|
|
5374
5415
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5375
5416
|
};
|
|
5376
|
-
var templateObject_1$
|
|
5417
|
+
var templateObject_1$1e;
|
|
5377
5418
|
|
|
5378
5419
|
var Button$4 = newStyled.button(function () { return ({
|
|
5379
5420
|
background: 'transparent',
|
|
@@ -9617,14 +9658,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9617
9658
|
return Slider;
|
|
9618
9659
|
}(React__default["default"].Component);
|
|
9619
9660
|
|
|
9620
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9661
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
9621
9662
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9622
9663
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9623
9664
|
}, function (_a) {
|
|
9624
9665
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9625
9666
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9626
9667
|
});
|
|
9627
|
-
var templateObject_1$
|
|
9668
|
+
var templateObject_1$1d;
|
|
9628
9669
|
|
|
9629
9670
|
var getStylesBySize$5 = function (size) {
|
|
9630
9671
|
// rem units
|
|
@@ -9683,22 +9724,22 @@ var SliderNavigation = function (_a) {
|
|
|
9683
9724
|
} }, { 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));
|
|
9684
9725
|
};
|
|
9685
9726
|
|
|
9686
|
-
var horizontalStyles = css(templateObject_1$
|
|
9687
|
-
var verticalStyles = css(templateObject_2$
|
|
9688
|
-
var Container$
|
|
9727
|
+
var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
9728
|
+
var verticalStyles = css(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
9729
|
+
var Container$S = newStyled.div(templateObject_3$E || (templateObject_3$E = __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) {
|
|
9689
9730
|
var position = _a.position;
|
|
9690
9731
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9691
9732
|
});
|
|
9692
9733
|
var Button$3 = newStyled.button(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
9693
9734
|
var ImagePreviewList = function (_a) {
|
|
9694
9735
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9695
|
-
return (jsxRuntime.jsx(Container$
|
|
9736
|
+
return (jsxRuntime.jsx(Container$S, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9696
9737
|
arrowWidth: 0.75,
|
|
9697
9738
|
arrowHeight: 1.25,
|
|
9698
9739
|
arrowPadding: 1.625,
|
|
9699
9740
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: 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 (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9700
9741
|
};
|
|
9701
|
-
var templateObject_1$
|
|
9742
|
+
var templateObject_1$1c, templateObject_2$O, templateObject_3$E, templateObject_4$s;
|
|
9702
9743
|
|
|
9703
9744
|
var propTypes = {exports: {}};
|
|
9704
9745
|
|
|
@@ -11291,24 +11332,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11291
11332
|
afterZoomOut: PropTypes.func
|
|
11292
11333
|
} : {};
|
|
11293
11334
|
|
|
11294
|
-
var Container$
|
|
11335
|
+
var Container$R = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
11295
11336
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11296
11337
|
return borderRadiusVariant &&
|
|
11297
11338
|
"\n border-radius: 40px;\n ";
|
|
11298
11339
|
});
|
|
11299
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11300
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11340
|
+
var TopTagContainer$3 = 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 ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11341
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11301
11342
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
11302
11343
|
var ImageProductWithTags$1 = function (_a) {
|
|
11303
11344
|
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;
|
|
11304
|
-
return (jsxRuntime.jsxs(Container$
|
|
11345
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11305
11346
|
alt: image.alt,
|
|
11306
11347
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11307
11348
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11308
11349
|
};
|
|
11309
|
-
var templateObject_1$
|
|
11350
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$D, templateObject_4$r;
|
|
11310
11351
|
|
|
11311
|
-
var Container$
|
|
11352
|
+
var Container$Q = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
11312
11353
|
var ProductGallery = function (_a) {
|
|
11313
11354
|
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;
|
|
11314
11355
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11316,11 +11357,11 @@ var ProductGallery = function (_a) {
|
|
|
11316
11357
|
React$2.useEffect(function () {
|
|
11317
11358
|
setSelectedImage(initialValue);
|
|
11318
11359
|
}, [initialValue]);
|
|
11319
|
-
return (jsxRuntime.jsxs(Container$
|
|
11360
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11320
11361
|
setSelectedImage(value);
|
|
11321
11362
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction }, void 0)] }, void 0));
|
|
11322
11363
|
};
|
|
11323
|
-
var templateObject_1$
|
|
11364
|
+
var templateObject_1$1a;
|
|
11324
11365
|
|
|
11325
11366
|
/* base styles & size variants */
|
|
11326
11367
|
var StarStyles = {
|
|
@@ -11366,8 +11407,8 @@ var StarStyles = {
|
|
|
11366
11407
|
});
|
|
11367
11408
|
},
|
|
11368
11409
|
};
|
|
11369
|
-
var Container$
|
|
11370
|
-
var templateObject_1$
|
|
11410
|
+
var Container$P = 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"])));
|
|
11411
|
+
var templateObject_1$19;
|
|
11371
11412
|
|
|
11372
11413
|
var StarContainer = newStyled.div(function (_a) {
|
|
11373
11414
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11385,7 +11426,7 @@ var sizes = {
|
|
|
11385
11426
|
var StarList = function (_a) {
|
|
11386
11427
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11387
11428
|
var theme = useTheme();
|
|
11388
|
-
return (jsxRuntime.jsx(Container$
|
|
11429
|
+
return (jsxRuntime.jsx(Container$P, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11389
11430
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11390
11431
|
}) }, void 0));
|
|
11391
11432
|
};
|
|
@@ -11429,8 +11470,8 @@ var LabelStyles = {
|
|
|
11429
11470
|
});
|
|
11430
11471
|
},
|
|
11431
11472
|
};
|
|
11432
|
-
var Container$
|
|
11433
|
-
var templateObject_1$
|
|
11473
|
+
var Container$O = newStyled.a(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11474
|
+
var templateObject_1$18;
|
|
11434
11475
|
|
|
11435
11476
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11436
11477
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11468,11 +11509,11 @@ var Rating = function (_a) {
|
|
|
11468
11509
|
href: reviewsContainerId,
|
|
11469
11510
|
}
|
|
11470
11511
|
: {};
|
|
11471
|
-
return (jsxRuntime.jsxs(Container$
|
|
11512
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11472
11513
|
};
|
|
11473
11514
|
|
|
11474
|
-
var Container$
|
|
11475
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11515
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
11516
|
+
var P$1 = newStyled.p(templateObject_2$M || (templateObject_2$M = __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; });
|
|
11476
11517
|
var textButtonStyles = function (theme) { return ({
|
|
11477
11518
|
border: 'none',
|
|
11478
11519
|
background: 'transparent',
|
|
@@ -11485,9 +11526,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11485
11526
|
var FitPredictor = function (_a) {
|
|
11486
11527
|
var onClick = _a.onClick;
|
|
11487
11528
|
var theme = useTheme();
|
|
11488
|
-
return (jsxs(Container$
|
|
11529
|
+
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __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));
|
|
11489
11530
|
};
|
|
11490
|
-
var templateObject_1$
|
|
11531
|
+
var templateObject_1$17, templateObject_2$M;
|
|
11491
11532
|
|
|
11492
11533
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11493
11534
|
var color = _a.color;
|
|
@@ -11501,7 +11542,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11501
11542
|
margin: '0.938rem 4.188rem',
|
|
11502
11543
|
});
|
|
11503
11544
|
});
|
|
11504
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11545
|
+
var Bar = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11505
11546
|
var backgroundColor = _a.backgroundColor;
|
|
11506
11547
|
return backgroundColor;
|
|
11507
11548
|
}, function (_a) {
|
|
@@ -11524,7 +11565,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11524
11565
|
position: 'absolute',
|
|
11525
11566
|
});
|
|
11526
11567
|
});
|
|
11527
|
-
var Container$
|
|
11568
|
+
var Container$M = newStyled.div(function (_a) {
|
|
11528
11569
|
var widthAuto = _a.widthAuto;
|
|
11529
11570
|
return ({
|
|
11530
11571
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11538,9 +11579,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11538
11579
|
var ProgressBar = function (_a) {
|
|
11539
11580
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11540
11581
|
var theme = useTheme();
|
|
11541
|
-
return (jsxRuntime.jsxs(Container$
|
|
11582
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11542
11583
|
};
|
|
11543
|
-
var templateObject_1$
|
|
11584
|
+
var templateObject_1$16;
|
|
11544
11585
|
|
|
11545
11586
|
var getStylesBySize$4 = function (size) {
|
|
11546
11587
|
switch (size) {
|
|
@@ -11561,7 +11602,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11561
11602
|
};
|
|
11562
11603
|
}
|
|
11563
11604
|
};
|
|
11564
|
-
var Container$
|
|
11605
|
+
var Container$L = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
11565
11606
|
var backgroundColor = _a.backgroundColor;
|
|
11566
11607
|
return backgroundColor;
|
|
11567
11608
|
}, function (_a) {
|
|
@@ -11589,9 +11630,9 @@ var Container$J = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __
|
|
|
11589
11630
|
var IconButton = function (_a) {
|
|
11590
11631
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11591
11632
|
var theme = useTheme();
|
|
11592
|
-
return (jsxRuntime.jsx(Container$
|
|
11633
|
+
return (jsxRuntime.jsx(Container$L, __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));
|
|
11593
11634
|
};
|
|
11594
|
-
var templateObject_1$
|
|
11635
|
+
var templateObject_1$15;
|
|
11595
11636
|
|
|
11596
11637
|
var TooltipArrow = function (_a) {
|
|
11597
11638
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11671,7 +11712,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11671
11712
|
}
|
|
11672
11713
|
};
|
|
11673
11714
|
|
|
11674
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11715
|
+
var Wrapper$5 = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
11675
11716
|
var position = _a.position;
|
|
11676
11717
|
return getWrapperFlexDirection(position);
|
|
11677
11718
|
});
|
|
@@ -11696,14 +11737,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11696
11737
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11697
11738
|
return actual === expected ? margin : '0';
|
|
11698
11739
|
};
|
|
11699
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11740
|
+
var ContentWrapper = newStyled.div(templateObject_2$L || (templateObject_2$L = __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) {
|
|
11700
11741
|
var borderColor = _a.borderColor;
|
|
11701
11742
|
return borderColor;
|
|
11702
11743
|
}, function (_a) {
|
|
11703
11744
|
var backgroundColor = _a.backgroundColor;
|
|
11704
11745
|
return backgroundColor;
|
|
11705
11746
|
});
|
|
11706
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11747
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$C || (templateObject_3$C = __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) {
|
|
11707
11748
|
var position = _a.position;
|
|
11708
11749
|
return getArrowRotation(position);
|
|
11709
11750
|
}, function (_a) {
|
|
@@ -11718,12 +11759,12 @@ var TooltipText = newStyled.div(templateObject_4$q || (templateObject_4$q = __ma
|
|
|
11718
11759
|
return color;
|
|
11719
11760
|
});
|
|
11720
11761
|
var TopSection = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
11721
|
-
var Title$
|
|
11762
|
+
var Title$7 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __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) {
|
|
11722
11763
|
var color = _a.color;
|
|
11723
11764
|
return color;
|
|
11724
11765
|
});
|
|
11725
11766
|
var IconContainer$5 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
11726
|
-
var templateObject_1$
|
|
11767
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11727
11768
|
|
|
11728
11769
|
var Tooltip = function (_a) {
|
|
11729
11770
|
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;
|
|
@@ -11744,7 +11785,7 @@ var Tooltip = function (_a) {
|
|
|
11744
11785
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
11745
11786
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
11746
11787
|
: theme.colors.pallete.secondary.color,
|
|
11747
|
-
}) }, void 0)), jsxRuntime.jsx(Title$
|
|
11788
|
+
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
11748
11789
|
};
|
|
11749
11790
|
|
|
11750
11791
|
/* base styles & variants */
|
|
@@ -11810,6 +11851,7 @@ var AccordionDetailsStyles = {
|
|
|
11810
11851
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
11811
11852
|
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)]; });
|
|
11812
11853
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
11854
|
+
var StyledContent = newStyled.button(templateObject_1$13 || (templateObject_1$13 = __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"], ["\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"])));
|
|
11813
11855
|
var Accordion$1 = function (_a) {
|
|
11814
11856
|
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;
|
|
11815
11857
|
var theme = useTheme();
|
|
@@ -11818,9 +11860,10 @@ var Accordion$1 = function (_a) {
|
|
|
11818
11860
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
11819
11861
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
11820
11862
|
var showPanel = openWithForce && !disabled;
|
|
11821
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(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 && !innerHTML
|
|
11863
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(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 && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
11822
11864
|
} }), void 0));
|
|
11823
|
-
};
|
|
11865
|
+
};
|
|
11866
|
+
var templateObject_1$13;
|
|
11824
11867
|
|
|
11825
11868
|
/* base styles & size variants */
|
|
11826
11869
|
var CustomRadioStyles = {
|
|
@@ -11885,9 +11928,9 @@ var ContainerStyles = {
|
|
|
11885
11928
|
},
|
|
11886
11929
|
};
|
|
11887
11930
|
|
|
11888
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11889
|
-
var Container$
|
|
11890
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11931
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11932
|
+
var Container$K = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11933
|
+
var Input$2 = newStyled.input(templateObject_2$K || (templateObject_2$K = __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) {
|
|
11891
11934
|
var disabled = _a.disabled;
|
|
11892
11935
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11893
11936
|
});
|
|
@@ -11895,7 +11938,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11895
11938
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11896
11939
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11897
11940
|
]; });
|
|
11898
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
11941
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11899
11942
|
var theme = _a.theme;
|
|
11900
11943
|
return theme.component.radio.textSize;
|
|
11901
11944
|
}, function (_a) {
|
|
@@ -11909,9 +11952,9 @@ var RadioInput = function (_a) {
|
|
|
11909
11952
|
var value = event.currentTarget.value;
|
|
11910
11953
|
onChange({ value: value, label: label });
|
|
11911
11954
|
};
|
|
11912
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11955
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(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 }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11913
11956
|
};
|
|
11914
|
-
var templateObject_1$
|
|
11957
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$B;
|
|
11915
11958
|
|
|
11916
11959
|
var RadioGroupInput = function (_a) {
|
|
11917
11960
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11925,37 +11968,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11925
11968
|
}) }), void 0));
|
|
11926
11969
|
};
|
|
11927
11970
|
|
|
11928
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11929
|
-
var Container$
|
|
11971
|
+
var Wrapper$3 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
11972
|
+
var Container$J = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
11930
11973
|
var Minimalistic = function (_a) {
|
|
11931
11974
|
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;
|
|
11932
11975
|
var theme = useTheme();
|
|
11933
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11976
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11934
11977
|
};
|
|
11935
|
-
var templateObject_1
|
|
11978
|
+
var templateObject_1$11, templateObject_2$J;
|
|
11936
11979
|
|
|
11937
|
-
var Container$
|
|
11938
|
-
var Title$
|
|
11939
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11980
|
+
var Container$I = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11981
|
+
var Title$6 = newStyled.h1(templateObject_2$I || (templateObject_2$I = __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; });
|
|
11982
|
+
var Details$1 = newStyled.span(templateObject_3$A || (templateObject_3$A = __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; });
|
|
11940
11983
|
var PriceContainer$1 = newStyled.span(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
11941
11984
|
var Simple = function (_a) {
|
|
11942
11985
|
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;
|
|
11943
11986
|
var theme = useTheme();
|
|
11944
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11987
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11945
11988
|
};
|
|
11946
|
-
var templateObject_1$
|
|
11989
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$A, templateObject_4$p;
|
|
11947
11990
|
|
|
11948
11991
|
var Bundle = {
|
|
11949
11992
|
Minimalistic: Minimalistic,
|
|
11950
11993
|
Simple: Simple,
|
|
11951
11994
|
};
|
|
11952
11995
|
|
|
11953
|
-
var Container$
|
|
11996
|
+
var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
11954
11997
|
var Tag$2 = function (_a) {
|
|
11955
11998
|
var text = _a.text, className = _a.className;
|
|
11956
|
-
return jsxRuntime.jsx(Container$
|
|
11999
|
+
return jsxRuntime.jsx(Container$H, __assign$1({ className: className }, { children: text }), void 0);
|
|
11957
12000
|
};
|
|
11958
|
-
var templateObject_1
|
|
12001
|
+
var templateObject_1$$;
|
|
11959
12002
|
|
|
11960
12003
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11961
12004
|
switch (size) {
|
|
@@ -12058,11 +12101,11 @@ var Timer = function (_a) {
|
|
|
12058
12101
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12059
12102
|
};
|
|
12060
12103
|
|
|
12061
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12104
|
+
var Label$2 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
12062
12105
|
var color = _a.color;
|
|
12063
12106
|
return color;
|
|
12064
12107
|
});
|
|
12065
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12108
|
+
var MandatoryIcon = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12066
12109
|
var color = _a.color;
|
|
12067
12110
|
return color;
|
|
12068
12111
|
});
|
|
@@ -12071,7 +12114,7 @@ var InputLabel = function (_a) {
|
|
|
12071
12114
|
var theme = useTheme();
|
|
12072
12115
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12073
12116
|
};
|
|
12074
|
-
var templateObject_1$
|
|
12117
|
+
var templateObject_1$_, templateObject_2$H;
|
|
12075
12118
|
|
|
12076
12119
|
/**
|
|
12077
12120
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12216,12 +12259,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12216
12259
|
return theme.colors.semantic.urgent.color;
|
|
12217
12260
|
return '';
|
|
12218
12261
|
};
|
|
12219
|
-
var Container$
|
|
12262
|
+
var Container$G = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12220
12263
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12221
12264
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12222
12265
|
});
|
|
12223
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12224
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12266
|
+
var StyledLabel = newStyled.label(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
12267
|
+
var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __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) {
|
|
12225
12268
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12226
12269
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12227
12270
|
}, function (_a) {
|
|
@@ -12282,7 +12325,7 @@ var InputWrapper = newStyled.div(templateObject_4$o || (templateObject_4$o = __m
|
|
|
12282
12325
|
});
|
|
12283
12326
|
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12284
12327
|
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
12285
|
-
var templateObject_1$
|
|
12328
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$d;
|
|
12286
12329
|
|
|
12287
12330
|
var BaseInput = function (_a) {
|
|
12288
12331
|
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"]);
|
|
@@ -12305,7 +12348,7 @@ var BaseInput = function (_a) {
|
|
|
12305
12348
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12306
12349
|
}, [status]);
|
|
12307
12350
|
var hasValue = Boolean(value);
|
|
12308
|
-
return (jsxRuntime.jsxs(Container$
|
|
12351
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12309
12352
|
onChange(event.target.value, event);
|
|
12310
12353
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12311
12354
|
onChange('', { target: { value: '' } });
|
|
@@ -12326,11 +12369,11 @@ var Button$2 = function (_a) {
|
|
|
12326
12369
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12327
12370
|
};
|
|
12328
12371
|
|
|
12329
|
-
var Container$
|
|
12372
|
+
var Container$F = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
12330
12373
|
var theme = _a.theme;
|
|
12331
12374
|
return theme.component.inputCustom.input.borderRadius;
|
|
12332
12375
|
});
|
|
12333
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12376
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
12334
12377
|
var theme = _a.theme;
|
|
12335
12378
|
return theme.component.inputCustom.button.borderRadius;
|
|
12336
12379
|
});
|
|
@@ -12343,23 +12386,23 @@ var Custom = function (_a) {
|
|
|
12343
12386
|
text: text,
|
|
12344
12387
|
disabled: rest.disabled,
|
|
12345
12388
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12346
|
-
return (jsxRuntime.jsx(Container$
|
|
12389
|
+
return (jsxRuntime.jsx(Container$F, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12347
12390
|
};
|
|
12348
|
-
var templateObject_1$
|
|
12391
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12349
12392
|
|
|
12350
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12393
|
+
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12351
12394
|
var size = _a.size;
|
|
12352
12395
|
return (size === 'small' ? '36px' : '');
|
|
12353
12396
|
});
|
|
12354
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12355
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12397
|
+
var SuccessMessage = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
12398
|
+
var SuccessText = newStyled.span(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
12356
12399
|
var Success = function (_a) {
|
|
12357
12400
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12358
12401
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12359
12402
|
};
|
|
12360
|
-
var templateObject_1$
|
|
12403
|
+
var templateObject_1$X, templateObject_2$E, templateObject_3$y;
|
|
12361
12404
|
|
|
12362
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12405
|
+
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
12363
12406
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12364
12407
|
return status === exports.InputValidationType.Empty &&
|
|
12365
12408
|
type === 'primary' &&
|
|
@@ -12376,21 +12419,21 @@ var BasePlusButton = function (_a) {
|
|
|
12376
12419
|
}
|
|
12377
12420
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12378
12421
|
};
|
|
12379
|
-
var templateObject_1$
|
|
12422
|
+
var templateObject_1$W;
|
|
12380
12423
|
|
|
12381
|
-
var Container$
|
|
12382
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12424
|
+
var Container$E = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12425
|
+
var IconContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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; });
|
|
12383
12426
|
var BasePlusIcon = function (_a) {
|
|
12384
12427
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12385
12428
|
var theme = useTheme();
|
|
12386
12429
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12387
|
-
return (jsxRuntime.jsx(Container$
|
|
12430
|
+
return (jsxRuntime.jsx(Container$E, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12388
12431
|
? theme.colors.shades['700'].color
|
|
12389
12432
|
: status === exports.InputValidationType.Error
|
|
12390
12433
|
? theme.colors.semantic.urgent.color
|
|
12391
12434
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12392
12435
|
};
|
|
12393
|
-
var templateObject_1$
|
|
12436
|
+
var templateObject_1$V, templateObject_2$D;
|
|
12394
12437
|
|
|
12395
12438
|
var Input$1 = {
|
|
12396
12439
|
Simple: BaseInput,
|
|
@@ -12399,7 +12442,7 @@ var Input$1 = {
|
|
|
12399
12442
|
SimplePlusIcon: BasePlusIcon,
|
|
12400
12443
|
};
|
|
12401
12444
|
|
|
12402
|
-
var Container$
|
|
12445
|
+
var Container$D = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
12403
12446
|
var width = _a.width;
|
|
12404
12447
|
return width;
|
|
12405
12448
|
}, function (_a) {
|
|
@@ -12415,11 +12458,11 @@ var Container$B = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
12415
12458
|
var PaymentMethod = function (_a) {
|
|
12416
12459
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12417
12460
|
var theme = useTheme();
|
|
12418
|
-
return (jsxRuntime.jsx(Container$
|
|
12461
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
12419
12462
|
};
|
|
12420
|
-
var templateObject_1$
|
|
12463
|
+
var templateObject_1$U;
|
|
12421
12464
|
|
|
12422
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12465
|
+
var Text$5 = newStyled.h3(templateObject_1$T || (templateObject_1$T = __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) {
|
|
12423
12466
|
var backgroundColor = _a.backgroundColor;
|
|
12424
12467
|
return backgroundColor;
|
|
12425
12468
|
}, function (_a) {
|
|
@@ -12431,11 +12474,11 @@ var OfferBanner = function (_a) {
|
|
|
12431
12474
|
var theme = useTheme();
|
|
12432
12475
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12433
12476
|
};
|
|
12434
|
-
var templateObject_1$
|
|
12477
|
+
var templateObject_1$T;
|
|
12435
12478
|
|
|
12436
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12437
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12438
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12479
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
12480
|
+
var GrandTotal = newStyled.h1(templateObject_2$C || (templateObject_2$C = __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; });
|
|
12481
|
+
var Currency = newStyled.span(templateObject_3$x || (templateObject_3$x = __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) {
|
|
12439
12482
|
var theme = _a.theme;
|
|
12440
12483
|
return theme.component.total.basicTotal.currency.color;
|
|
12441
12484
|
}, function (_a) {
|
|
@@ -12448,7 +12491,7 @@ var Currency = newStyled.span(templateObject_3$w || (templateObject_3$w = __make
|
|
|
12448
12491
|
var theme = _a.theme;
|
|
12449
12492
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12450
12493
|
});
|
|
12451
|
-
var Container$
|
|
12494
|
+
var Container$C = newStyled.div(templateObject_4$n || (templateObject_4$n = __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; });
|
|
12452
12495
|
var DiscountText = newStyled.h3(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12453
12496
|
var theme = _a.theme;
|
|
12454
12497
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
@@ -12469,16 +12512,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$c || (templateObject_6$c = __
|
|
|
12469
12512
|
var Total = function (_a) {
|
|
12470
12513
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12471
12514
|
var theme = useTheme();
|
|
12472
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12515
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12473
12516
|
};
|
|
12474
|
-
var templateObject_1$
|
|
12517
|
+
var templateObject_1$S, templateObject_2$C, templateObject_3$x, templateObject_4$n, templateObject_5$e, templateObject_6$c;
|
|
12475
12518
|
|
|
12476
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12519
|
+
var Wrapper$1 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12477
12520
|
var color = _a.color;
|
|
12478
12521
|
return color;
|
|
12479
12522
|
});
|
|
12480
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12481
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12523
|
+
var ItemContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
12524
|
+
var Item$2 = newStyled.h4(templateObject_3$w || (templateObject_3$w = __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) {
|
|
12482
12525
|
var theme = _a.theme;
|
|
12483
12526
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12484
12527
|
}, function (_a) {
|
|
@@ -12498,27 +12541,27 @@ var Subtotal = function (_a) {
|
|
|
12498
12541
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12499
12542
|
})] }), void 0));
|
|
12500
12543
|
};
|
|
12501
|
-
var templateObject_1$
|
|
12544
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$w, templateObject_4$m;
|
|
12502
12545
|
|
|
12503
12546
|
var Totals = {
|
|
12504
12547
|
Total: Total,
|
|
12505
12548
|
Subtotal: Subtotal,
|
|
12506
12549
|
};
|
|
12507
12550
|
|
|
12508
|
-
var Container$
|
|
12509
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12510
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12551
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12552
|
+
var IconContainer$3 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
12553
|
+
var Text$4 = newStyled.p(templateObject_3$v || (templateObject_3$v = __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; });
|
|
12511
12554
|
var Details = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12512
12555
|
var Note = function (_a) {
|
|
12513
12556
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12514
12557
|
var theme = useTheme();
|
|
12515
|
-
return (jsxRuntime.jsxs(Container$
|
|
12558
|
+
return (jsxRuntime.jsxs(Container$B, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12516
12559
|
};
|
|
12517
|
-
var templateObject_1$
|
|
12560
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$v, templateObject_4$l;
|
|
12518
12561
|
|
|
12519
|
-
var Title$
|
|
12520
|
-
var Line = newStyled.div(templateObject_2$
|
|
12521
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12562
|
+
var Title$5 = newStyled.h1(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12563
|
+
var Line = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12564
|
+
var Row$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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({
|
|
12522
12565
|
flexDirection: ['column', 'row'],
|
|
12523
12566
|
}));
|
|
12524
12567
|
var Col$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __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({
|
|
@@ -12551,47 +12594,47 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$5 || (templateObject_8$5 = __m
|
|
|
12551
12594
|
var DeliveryDetails = function (_a) {
|
|
12552
12595
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12553
12596
|
var theme = useTheme();
|
|
12554
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
12597
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12555
12598
|
};
|
|
12556
|
-
var templateObject_1$
|
|
12599
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$5;
|
|
12557
12600
|
|
|
12558
|
-
var Container$
|
|
12559
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12601
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
12602
|
+
var Text$3 = newStyled.p(templateObject_2$y || (templateObject_2$y = __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; });
|
|
12560
12603
|
var ScrollToTop = function (_a) {
|
|
12561
12604
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12562
12605
|
var theme = useTheme();
|
|
12563
12606
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12564
|
-
return (jsxRuntime.jsxs(Container$
|
|
12607
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12565
12608
|
};
|
|
12566
|
-
var templateObject_1$
|
|
12609
|
+
var templateObject_1$O, templateObject_2$y;
|
|
12567
12610
|
|
|
12568
12611
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12569
|
-
var Container$
|
|
12612
|
+
var Container$z = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
12570
12613
|
var color = _a.color;
|
|
12571
12614
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12572
12615
|
});
|
|
12573
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12616
|
+
var H1 = newStyled.h1(templateObject_2$x || (templateObject_2$x = __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; });
|
|
12574
12617
|
var OrderBar = function (_a) {
|
|
12575
12618
|
var message = _a.message, color = _a.color;
|
|
12576
12619
|
var theme = useTheme();
|
|
12577
|
-
return (jsxRuntime.jsxs(Container$
|
|
12620
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12578
12621
|
};
|
|
12579
|
-
var templateObject_1$
|
|
12622
|
+
var templateObject_1$N, templateObject_2$x;
|
|
12580
12623
|
|
|
12581
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12582
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12583
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12624
|
+
var TableElement$1 = newStyled.table(templateObject_1$M || (templateObject_1$M = __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; });
|
|
12625
|
+
var TableCell$1 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12626
|
+
var TableHead$1 = newStyled.th(templateObject_3$t || (templateObject_3$t = __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; });
|
|
12584
12627
|
var TableRow$1 = newStyled.tr(templateObject_4$j || (templateObject_4$j = __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; });
|
|
12585
12628
|
var SizeTable = function (_a) {
|
|
12586
12629
|
var headers = _a.headers, data = _a.data;
|
|
12587
12630
|
var theme = useTheme();
|
|
12588
12631
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12589
12632
|
};
|
|
12590
|
-
var templateObject_1$
|
|
12633
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$t, templateObject_4$j;
|
|
12591
12634
|
|
|
12592
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12593
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12594
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12635
|
+
var TableElement = newStyled.table(templateObject_1$L || (templateObject_1$L = __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; });
|
|
12636
|
+
var TableCell = newStyled.td(templateObject_2$v || (templateObject_2$v = __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; });
|
|
12637
|
+
var TableHead = newStyled.th(templateObject_3$s || (templateObject_3$s = __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; });
|
|
12595
12638
|
var TableRow = newStyled.tr(templateObject_4$i || (templateObject_4$i = __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; });
|
|
12596
12639
|
var SizeChartTable = function (_a) {
|
|
12597
12640
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -12623,21 +12666,21 @@ var SizeChartTable = function (_a) {
|
|
|
12623
12666
|
backgroundColor: getCellColor(index, cell),
|
|
12624
12667
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12625
12668
|
};
|
|
12626
|
-
var templateObject_1$
|
|
12669
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$s, templateObject_4$i;
|
|
12627
12670
|
|
|
12628
|
-
var Img = newStyled.img(templateObject_1$
|
|
12671
|
+
var Img = newStyled.img(templateObject_1$K || (templateObject_1$K = __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; });
|
|
12629
12672
|
var Image = function (_a) {
|
|
12630
12673
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
12631
12674
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12632
12675
|
};
|
|
12633
|
-
var templateObject_1$
|
|
12676
|
+
var templateObject_1$K;
|
|
12634
12677
|
|
|
12635
|
-
var Container$
|
|
12636
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12637
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12678
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12679
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12680
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12638
12681
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12639
12682
|
}));
|
|
12640
|
-
var Title$
|
|
12683
|
+
var Title$4 = newStyled.h2(function (_a) {
|
|
12641
12684
|
var color = _a.color;
|
|
12642
12685
|
return ({
|
|
12643
12686
|
fontWeight: 600,
|
|
@@ -12670,9 +12713,9 @@ var Quantity = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeT
|
|
|
12670
12713
|
var SimpleOrderItem = function (_a) {
|
|
12671
12714
|
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;
|
|
12672
12715
|
var theme = useTheme();
|
|
12673
|
-
return (jsxRuntime.jsxs(Container$
|
|
12716
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12674
12717
|
};
|
|
12675
|
-
var templateObject_1$
|
|
12718
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r, templateObject_4$h, templateObject_5$c;
|
|
12676
12719
|
|
|
12677
12720
|
function formatDate(date) {
|
|
12678
12721
|
var day = date.getDate();
|
|
@@ -12681,9 +12724,9 @@ function formatDate(date) {
|
|
|
12681
12724
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12682
12725
|
}
|
|
12683
12726
|
|
|
12684
|
-
var Container$
|
|
12685
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12686
|
-
var Content$1 = newStyled.div(templateObject_3$
|
|
12727
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
12728
|
+
var Heading = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
12729
|
+
var Content$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12687
12730
|
var ReviewContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12688
12731
|
var DateText$1 = newStyled.span(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
12689
12732
|
var VariantText = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
@@ -12702,17 +12745,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12702
12745
|
var Review$1 = function (_a) {
|
|
12703
12746
|
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage, helpfulActionText = _a.helpfulActionText, helpfulAction = _a.helpfulAction, helpfulCount = _a.helpfulCount;
|
|
12704
12747
|
var theme = useTheme();
|
|
12705
|
-
return (jsxRuntime.jsxs(Container$
|
|
12748
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12706
12749
|
};
|
|
12707
|
-
var templateObject_1$
|
|
12750
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$q, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12708
12751
|
|
|
12709
|
-
var List = newStyled.ul(templateObject_1$
|
|
12710
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12711
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12752
|
+
var List = newStyled.ul(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12753
|
+
var Item$1 = newStyled.li(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
12754
|
+
var DropdownWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
12712
12755
|
var ArrowContainer$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
12713
12756
|
var StyledDropdown = newStyled.ul(templateObject_5$a || (templateObject_5$a = __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; });
|
|
12714
12757
|
var DropdownItem = newStyled.li(templateObject_6$9 || (templateObject_6$9 = __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; });
|
|
12715
|
-
var templateObject_1$
|
|
12758
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$p, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
12716
12759
|
|
|
12717
12760
|
var DropdownListIcons = function (_a) {
|
|
12718
12761
|
var items = _a.items;
|
|
@@ -12725,7 +12768,7 @@ var Dropdown = function (_a) {
|
|
|
12725
12768
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(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));
|
|
12726
12769
|
};
|
|
12727
12770
|
|
|
12728
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12771
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$G || (templateObject_1$G = __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; });
|
|
12729
12772
|
var AmazonButton = function (_a) {
|
|
12730
12773
|
var onClick = _a.onClick;
|
|
12731
12774
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12734,11 +12777,11 @@ var PaypalButton = function (_a) {
|
|
|
12734
12777
|
var onClick = _a.onClick;
|
|
12735
12778
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12736
12779
|
};
|
|
12737
|
-
var templateObject_1$
|
|
12780
|
+
var templateObject_1$G;
|
|
12738
12781
|
|
|
12739
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12740
|
-
var Col = newStyled.div(templateObject_2$
|
|
12741
|
-
var Row = newStyled.div(templateObject_3$
|
|
12782
|
+
var Wrapper = newStyled.div(templateObject_1$F || (templateObject_1$F = __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'); });
|
|
12783
|
+
var Col = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12784
|
+
var Row = newStyled.div(templateObject_3$o || (templateObject_3$o = __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) {
|
|
12742
12785
|
return props.rightToLeft &&
|
|
12743
12786
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12744
12787
|
});
|
|
@@ -12750,7 +12793,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12750
12793
|
var theme = useTheme();
|
|
12751
12794
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12752
12795
|
};
|
|
12753
|
-
var templateObject_1$
|
|
12796
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12754
12797
|
|
|
12755
12798
|
var index = /*#__PURE__*/Object.freeze({
|
|
12756
12799
|
__proto__: null,
|
|
@@ -12763,7 +12806,7 @@ var Spacing = function (_a) {
|
|
|
12763
12806
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12764
12807
|
};
|
|
12765
12808
|
|
|
12766
|
-
var Container$
|
|
12809
|
+
var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
12767
12810
|
var height = _a.height;
|
|
12768
12811
|
return (height ? height : '1.5em');
|
|
12769
12812
|
}, function (_a) {
|
|
@@ -12788,9 +12831,9 @@ var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
12788
12831
|
var SkeletonBox = function (_a) {
|
|
12789
12832
|
var width = _a.width, height = _a.height;
|
|
12790
12833
|
var theme = useTheme();
|
|
12791
|
-
return jsxRuntime.jsx(Container$
|
|
12834
|
+
return jsxRuntime.jsx(Container$w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12792
12835
|
};
|
|
12793
|
-
var templateObject_1$
|
|
12836
|
+
var templateObject_1$E;
|
|
12794
12837
|
|
|
12795
12838
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12796
12839
|
var width = _a.width, height = _a.height;
|
|
@@ -12800,10 +12843,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12800
12843
|
height: height,
|
|
12801
12844
|
});
|
|
12802
12845
|
});
|
|
12803
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12804
|
-
var Container$
|
|
12805
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
12806
|
-
var Title$
|
|
12846
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
12847
|
+
var Container$v = newStyled.a(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
12848
|
+
var ProdCardContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
12849
|
+
var Title$3 = newStyled.p(templateObject_4$d || (templateObject_4$d = __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; });
|
|
12807
12850
|
var getStylesBySize$1 = function (size) {
|
|
12808
12851
|
switch (size) {
|
|
12809
12852
|
case exports.ComponentSize.Medium:
|
|
@@ -12858,32 +12901,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12858
12901
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12859
12902
|
};
|
|
12860
12903
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12861
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
12904
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, 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, 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, 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, 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$v, __assign$1({ as: url ? 'a' : 'div', href: url, 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), 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) : jsx(PriceLabelDisplay, {}, 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));
|
|
12862
12905
|
};
|
|
12863
|
-
var templateObject_1$
|
|
12906
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$n, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5;
|
|
12864
12907
|
|
|
12865
|
-
var Container$
|
|
12908
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
12866
12909
|
function withProductGrid(ProductItemComponent, data) {
|
|
12867
12910
|
function WithProductGrid(props) {
|
|
12868
|
-
return (jsxRuntime.jsx(Container$
|
|
12911
|
+
return (jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12869
12912
|
}
|
|
12870
12913
|
/* istanbul ignore next */
|
|
12871
12914
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12872
12915
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12873
12916
|
return WithProductGrid;
|
|
12874
12917
|
}
|
|
12875
|
-
var templateObject_1$
|
|
12918
|
+
var templateObject_1$C;
|
|
12876
12919
|
|
|
12877
12920
|
var Collection = {
|
|
12878
12921
|
ProductItemMobile: ProductItemMobile,
|
|
12879
12922
|
withProductGrid: withProductGrid,
|
|
12880
12923
|
};
|
|
12881
12924
|
|
|
12882
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12925
|
+
var Backdrop = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
12883
12926
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12884
12927
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12885
12928
|
});
|
|
12886
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12929
|
+
var Sidebar = newStyled.div(templateObject_2$p || (templateObject_2$p = __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) {
|
|
12887
12930
|
var width = _a.width;
|
|
12888
12931
|
return width;
|
|
12889
12932
|
}, function (_a) {
|
|
@@ -12924,28 +12967,28 @@ var Drawer = function (_a) {
|
|
|
12924
12967
|
}, [isOpen, onClose, onOpen]);
|
|
12925
12968
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12926
12969
|
};
|
|
12927
|
-
var templateObject_1$
|
|
12970
|
+
var templateObject_1$B, templateObject_2$p;
|
|
12928
12971
|
|
|
12929
|
-
var Container$
|
|
12972
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12930
12973
|
var size = _a.size;
|
|
12931
12974
|
return (size ? size : '100%');
|
|
12932
12975
|
}, function (_a) {
|
|
12933
12976
|
var size = _a.size;
|
|
12934
12977
|
return (size ? size : '100%');
|
|
12935
12978
|
});
|
|
12936
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12979
|
+
var Animation = newStyled.div(templateObject_2$o || (templateObject_2$o = __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) {
|
|
12937
12980
|
var animationDuration = _a.animationDuration;
|
|
12938
12981
|
return animationDuration;
|
|
12939
12982
|
});
|
|
12940
12983
|
var Spinner = function (_a) {
|
|
12941
12984
|
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;
|
|
12942
|
-
return (jsxRuntime.jsx(Container$
|
|
12985
|
+
return (jsxRuntime.jsx(Container$t, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12943
12986
|
};
|
|
12944
|
-
var templateObject_1$
|
|
12987
|
+
var templateObject_1$A, templateObject_2$o;
|
|
12945
12988
|
|
|
12946
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12947
|
-
var LI = newStyled.li(templateObject_2$
|
|
12948
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12989
|
+
var UL = newStyled.ul(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
12990
|
+
var LI = newStyled.li(templateObject_2$n || (templateObject_2$n = __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; });
|
|
12991
|
+
var CloseIconContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
12949
12992
|
var Tags = function (_a) {
|
|
12950
12993
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12951
12994
|
var theme = useTheme();
|
|
@@ -12953,7 +12996,7 @@ var Tags = function (_a) {
|
|
|
12953
12996
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12954
12997
|
}) }), void 0));
|
|
12955
12998
|
};
|
|
12956
|
-
var templateObject_1$
|
|
12999
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$m;
|
|
12957
13000
|
|
|
12958
13001
|
function FilteringDropdown(_a) {
|
|
12959
13002
|
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;
|
|
@@ -12986,9 +13029,9 @@ function FilteringDropdown(_a) {
|
|
|
12986
13029
|
}) }, void 0)] }), void 0));
|
|
12987
13030
|
}
|
|
12988
13031
|
|
|
12989
|
-
var Container$
|
|
12990
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12991
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13032
|
+
var Container$s = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
13033
|
+
var IconContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
13034
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12992
13035
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12993
13036
|
}));
|
|
12994
13037
|
var PageNumber = newStyled.span(templateObject_4$c || (templateObject_4$c = __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) {
|
|
@@ -13008,7 +13051,7 @@ var PageNumber = newStyled.span(templateObject_4$c || (templateObject_4$c = __ma
|
|
|
13008
13051
|
var background = _a.background;
|
|
13009
13052
|
return background || 'unset';
|
|
13010
13053
|
});
|
|
13011
|
-
var templateObject_1$
|
|
13054
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$l, templateObject_4$c;
|
|
13012
13055
|
|
|
13013
13056
|
var Pagination = function (_a) {
|
|
13014
13057
|
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;
|
|
@@ -13054,7 +13097,7 @@ var Pagination = function (_a) {
|
|
|
13054
13097
|
}
|
|
13055
13098
|
return pages;
|
|
13056
13099
|
}, [from, page, showReducedPages, to]);
|
|
13057
|
-
return (jsxRuntime.jsxs(Container$
|
|
13100
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13058
13101
|
};
|
|
13059
13102
|
|
|
13060
13103
|
var PaginatorBlog = function (_a) {
|
|
@@ -13068,15 +13111,15 @@ var PaginatorBlog = function (_a) {
|
|
|
13068
13111
|
setPage(page);
|
|
13069
13112
|
onChange(page);
|
|
13070
13113
|
};
|
|
13071
|
-
return (jsxRuntime.jsxs(Container$
|
|
13114
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13072
13115
|
? theme.colors.shades['white'].color
|
|
13073
13116
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13074
13117
|
};
|
|
13075
13118
|
|
|
13076
|
-
var Container$
|
|
13119
|
+
var Container$r = newStyled.div(templateObject_1$x || (templateObject_1$x = __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({
|
|
13077
13120
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13078
13121
|
}));
|
|
13079
|
-
var Description$
|
|
13122
|
+
var Description$2 = newStyled.div({
|
|
13080
13123
|
display: 'flex',
|
|
13081
13124
|
flexDirection: 'column',
|
|
13082
13125
|
alignItems: 'flex-start',
|
|
@@ -13090,25 +13133,25 @@ var Description$1 = newStyled.div({
|
|
|
13090
13133
|
var ProductItem = function (_a) {
|
|
13091
13134
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13092
13135
|
var theme = useTheme();
|
|
13093
|
-
return (jsxRuntime.jsxs(Container$
|
|
13136
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13094
13137
|
};
|
|
13095
|
-
var templateObject_1$
|
|
13138
|
+
var templateObject_1$x;
|
|
13096
13139
|
|
|
13097
|
-
var Container$
|
|
13140
|
+
var Container$q = newStyled.div({
|
|
13098
13141
|
display: 'flex',
|
|
13099
13142
|
justifyContent: 'center',
|
|
13100
13143
|
padding: '1rem',
|
|
13101
13144
|
});
|
|
13102
13145
|
var Footer = function (_a) {
|
|
13103
13146
|
var text = _a.text, onClick = _a.onClick;
|
|
13104
|
-
return (jsxRuntime.jsx(Container$
|
|
13147
|
+
return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13105
13148
|
};
|
|
13106
13149
|
|
|
13107
13150
|
var Ul = newStyled.ul({
|
|
13108
13151
|
margin: '0px',
|
|
13109
13152
|
padding: '0px',
|
|
13110
13153
|
});
|
|
13111
|
-
var Li = newStyled.li(templateObject_1$
|
|
13154
|
+
var Li = newStyled.li(templateObject_1$w || (templateObject_1$w = __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({
|
|
13112
13155
|
padding: [0, '0rem 1rem'],
|
|
13113
13156
|
borderRadius: [0, '0.5rem'],
|
|
13114
13157
|
}));
|
|
@@ -13120,20 +13163,20 @@ var Anchor = newStyled.a({
|
|
|
13120
13163
|
padding: 0,
|
|
13121
13164
|
textDecoration: 'none',
|
|
13122
13165
|
});
|
|
13123
|
-
var Container$
|
|
13166
|
+
var Container$p = newStyled.div(templateObject_2$l || (templateObject_2$l = __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({
|
|
13124
13167
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13125
13168
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13126
13169
|
borderRadius: ['0', '0.5rem'],
|
|
13127
13170
|
}));
|
|
13128
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13171
|
+
var Header$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13129
13172
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13130
13173
|
}));
|
|
13131
13174
|
var ResultsPanel = function (_a) {
|
|
13132
13175
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13133
13176
|
var theme = useTheme();
|
|
13134
|
-
return (jsxRuntime.jsxs(Container$
|
|
13177
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13135
13178
|
};
|
|
13136
|
-
var templateObject_1$
|
|
13179
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13137
13180
|
|
|
13138
13181
|
var Input = newStyled.input(function (props) { return ({
|
|
13139
13182
|
padding: props.theme.component.input.padding,
|
|
@@ -13164,7 +13207,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13164
13207
|
},
|
|
13165
13208
|
}); });
|
|
13166
13209
|
|
|
13167
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13210
|
+
var Button$1 = newStyled.button(templateObject_1$v || (templateObject_1$v = __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({
|
|
13168
13211
|
right: ['1rem', '7.75rem'],
|
|
13169
13212
|
top: ['0.75rem', '0.75rem'],
|
|
13170
13213
|
}));
|
|
@@ -13173,7 +13216,7 @@ var ClearButton = function (_a) {
|
|
|
13173
13216
|
var theme = useTheme();
|
|
13174
13217
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13175
13218
|
};
|
|
13176
|
-
var templateObject_1$
|
|
13219
|
+
var templateObject_1$v;
|
|
13177
13220
|
|
|
13178
13221
|
var useOnClickOutside = function (ref, handler) {
|
|
13179
13222
|
React$2.useEffect(function () {
|
|
@@ -13262,7 +13305,7 @@ var reducer = function (state, action) {
|
|
|
13262
13305
|
}
|
|
13263
13306
|
}
|
|
13264
13307
|
};
|
|
13265
|
-
var Container$
|
|
13308
|
+
var Container$o = newStyled.div({
|
|
13266
13309
|
position: 'relative',
|
|
13267
13310
|
display: 'flex',
|
|
13268
13311
|
});
|
|
@@ -13298,7 +13341,7 @@ var SearchBar = function (_a) {
|
|
|
13298
13341
|
onClose();
|
|
13299
13342
|
}
|
|
13300
13343
|
};
|
|
13301
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13344
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$o, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13302
13345
|
if (e.key === 'Enter') {
|
|
13303
13346
|
e.preventDefault();
|
|
13304
13347
|
e.stopPropagation();
|
|
@@ -13307,14 +13350,14 @@ var SearchBar = function (_a) {
|
|
|
13307
13350
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(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));
|
|
13308
13351
|
};
|
|
13309
13352
|
|
|
13310
|
-
var Container$
|
|
13353
|
+
var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
13311
13354
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13312
13355
|
return borderRadiusVariant &&
|
|
13313
13356
|
"\n border-radius: 40px;\n ";
|
|
13314
13357
|
});
|
|
13315
13358
|
// max-height: 31.875rem;
|
|
13316
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13317
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13359
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __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'); });
|
|
13360
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13318
13361
|
var settings = {
|
|
13319
13362
|
dots: true,
|
|
13320
13363
|
infinite: false,
|
|
@@ -13341,7 +13384,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13341
13384
|
}
|
|
13342
13385
|
}
|
|
13343
13386
|
}, [images, selectedValue]);
|
|
13344
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13387
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$n, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13345
13388
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13346
13389
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13347
13390
|
};
|
|
@@ -13378,14 +13421,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13378
13421
|
};
|
|
13379
13422
|
}, [preventTouch, ref, touchStart]);
|
|
13380
13423
|
}
|
|
13381
|
-
var templateObject_1$
|
|
13424
|
+
var templateObject_1$u, templateObject_2$k, templateObject_3$j;
|
|
13382
13425
|
|
|
13383
|
-
var Container$
|
|
13426
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
13384
13427
|
var ProductGalleryMobile = function (_a) {
|
|
13385
13428
|
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;
|
|
13386
|
-
return (jsxRuntime.jsx(Container$
|
|
13429
|
+
return (jsxRuntime.jsx(Container$m, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13387
13430
|
};
|
|
13388
|
-
var templateObject_1$
|
|
13431
|
+
var templateObject_1$t;
|
|
13389
13432
|
|
|
13390
13433
|
var Portal = function (_a) {
|
|
13391
13434
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13518,14 +13561,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13518
13561
|
var visibleStyle = function (_a) {
|
|
13519
13562
|
var opened = _a.opened;
|
|
13520
13563
|
return opened
|
|
13521
|
-
? css(templateObject_1$
|
|
13564
|
+
? css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13522
13565
|
};
|
|
13523
13566
|
var transformStyle = function (_a) {
|
|
13524
13567
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13525
13568
|
return opened
|
|
13526
|
-
? css(templateObject_3$
|
|
13569
|
+
? css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13527
13570
|
};
|
|
13528
|
-
var Container$
|
|
13571
|
+
var Container$l = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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({
|
|
13529
13572
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13530
13573
|
}), visibleStyle, transformStyle);
|
|
13531
13574
|
var Overlay = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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);
|
|
@@ -13538,7 +13581,7 @@ var Modal = function (_a) {
|
|
|
13538
13581
|
}
|
|
13539
13582
|
close();
|
|
13540
13583
|
};
|
|
13541
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13584
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$l, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13542
13585
|
};
|
|
13543
13586
|
var modalEvent = function (id, detail) {
|
|
13544
13587
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13566,51 +13609,51 @@ var useModal = function (id) {
|
|
|
13566
13609
|
close: close,
|
|
13567
13610
|
}); }, [close, open, opened]);
|
|
13568
13611
|
};
|
|
13569
|
-
var templateObject_1$
|
|
13612
|
+
var templateObject_1$s, templateObject_2$j, templateObject_3$i, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
13570
13613
|
|
|
13571
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13572
|
-
var Title$
|
|
13614
|
+
var Text$2 = newStyled.span(templateObject_1$r || (templateObject_1$r = __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; });
|
|
13615
|
+
var Title$2 = function (_a) {
|
|
13573
13616
|
var title = _a.title;
|
|
13574
13617
|
var theme = useTheme();
|
|
13575
13618
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13576
13619
|
};
|
|
13577
|
-
var templateObject_1$
|
|
13620
|
+
var templateObject_1$r;
|
|
13578
13621
|
|
|
13579
|
-
var P = newStyled.p(templateObject_1$
|
|
13622
|
+
var P = newStyled.p(templateObject_1$q || (templateObject_1$q = __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; });
|
|
13580
13623
|
var Promo = function (_a) {
|
|
13581
13624
|
var text = _a.text;
|
|
13582
13625
|
var theme = useTheme();
|
|
13583
13626
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13584
13627
|
};
|
|
13585
|
-
var templateObject_1$
|
|
13628
|
+
var templateObject_1$q;
|
|
13586
13629
|
|
|
13587
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13588
|
-
var Description = function (_a) {
|
|
13630
|
+
var Text$1 = newStyled.span(templateObject_1$p || (templateObject_1$p = __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; });
|
|
13631
|
+
var Description$1 = function (_a) {
|
|
13589
13632
|
var text = _a.text;
|
|
13590
13633
|
var theme = useTheme();
|
|
13591
13634
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13592
13635
|
};
|
|
13593
|
-
var templateObject_1$
|
|
13636
|
+
var templateObject_1$p;
|
|
13594
13637
|
|
|
13595
|
-
var Container$
|
|
13638
|
+
var Container$k = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"); });
|
|
13596
13639
|
var CloseButton$1 = function (_a) {
|
|
13597
13640
|
var onClick = _a.onClick, size = _a.size;
|
|
13598
13641
|
var theme = useTheme();
|
|
13599
|
-
return (jsxRuntime.jsx(Container$
|
|
13642
|
+
return (jsxRuntime.jsx(Container$k, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13600
13643
|
};
|
|
13601
|
-
var templateObject_1$
|
|
13644
|
+
var templateObject_1$o;
|
|
13602
13645
|
|
|
13603
13646
|
var CartProductItem = {
|
|
13604
|
-
Title: Title$
|
|
13647
|
+
Title: Title$2,
|
|
13605
13648
|
Tag: OfferBanner,
|
|
13606
13649
|
Promo: Promo,
|
|
13607
|
-
Description: Description,
|
|
13650
|
+
Description: Description$1,
|
|
13608
13651
|
CloseButton: CloseButton$1,
|
|
13609
13652
|
};
|
|
13610
13653
|
|
|
13611
|
-
var Container$
|
|
13612
|
-
var Item = newStyled.span(templateObject_2$
|
|
13613
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13654
|
+
var Container$j = newStyled.div(templateObject_1$n || (templateObject_1$n = __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; });
|
|
13655
|
+
var Item = newStyled.span(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
13656
|
+
var Number$1 = newStyled(Item)(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
13614
13657
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __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)'; });
|
|
13615
13658
|
var QuantityPicker = function (_a) {
|
|
13616
13659
|
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;
|
|
@@ -13634,9 +13677,9 @@ var QuantityPicker = function (_a) {
|
|
|
13634
13677
|
return clamp(value);
|
|
13635
13678
|
});
|
|
13636
13679
|
}, [value, clamp]);
|
|
13637
|
-
return (jsxRuntime.jsxs(Container$
|
|
13680
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
13638
13681
|
};
|
|
13639
|
-
var templateObject_1$
|
|
13682
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$h, templateObject_4$a;
|
|
13640
13683
|
|
|
13641
13684
|
var htmlReactParser = {exports: {}};
|
|
13642
13685
|
|
|
@@ -17417,9 +17460,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17417
17460
|
HTMLReactParser$1.attributesToProps;
|
|
17418
17461
|
HTMLReactParser$1.Element;
|
|
17419
17462
|
|
|
17420
|
-
var Container$
|
|
17421
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
17422
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
17463
|
+
var Container$i = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
17464
|
+
var Card$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
17465
|
+
var Tag$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
17423
17466
|
var Label$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
17424
17467
|
var Check$1 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
17425
17468
|
var IconContainer = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
@@ -17427,7 +17470,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 =
|
|
|
17427
17470
|
var DiscountContainer$1 = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
17428
17471
|
var PackSelector = function (_a) {
|
|
17429
17472
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17430
|
-
return (jsxRuntime.jsx(Container$
|
|
17473
|
+
return (jsxRuntime.jsx(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17431
17474
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17432
17475
|
}) }), void 0));
|
|
17433
17476
|
};
|
|
@@ -17453,17 +17496,17 @@ var PackCard$1 = function (_a) {
|
|
|
17453
17496
|
currency: currencyCode || 'USD',
|
|
17454
17497
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17455
17498
|
};
|
|
17456
|
-
var templateObject_1$
|
|
17499
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$g, templateObject_4$9, templateObject_5$6, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
17457
17500
|
|
|
17458
|
-
var Container$
|
|
17459
|
-
var Card = newStyled.div(templateObject_2$
|
|
17460
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17501
|
+
var Container$h = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
17502
|
+
var Card = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
17503
|
+
var Tag = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
17461
17504
|
var Label = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
17462
17505
|
var Check = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
17463
17506
|
var DiscountContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __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"])));
|
|
17464
17507
|
var PackSelectorV2 = function (_a) {
|
|
17465
17508
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17466
|
-
return (jsxRuntime.jsx(Container$
|
|
17509
|
+
return (jsxRuntime.jsx(Container$h, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17467
17510
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17468
17511
|
}) }), void 0));
|
|
17469
17512
|
};
|
|
@@ -17484,23 +17527,23 @@ var PackCard = function (_a) {
|
|
|
17484
17527
|
currency: currencyCode || 'USD',
|
|
17485
17528
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17486
17529
|
};
|
|
17487
|
-
var templateObject_1$
|
|
17530
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$f, templateObject_4$8, templateObject_5$5, templateObject_6$4;
|
|
17488
17531
|
|
|
17489
|
-
var Title = newStyled.div(templateObject_1$
|
|
17490
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17491
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17492
|
-
var Container$
|
|
17532
|
+
var Title$1 = newStyled.div(templateObject_1$k || (templateObject_1$k = __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; });
|
|
17533
|
+
var H2 = newStyled.h2(templateObject_2$f || (templateObject_2$f = __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; });
|
|
17534
|
+
var ArrowContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17535
|
+
var Container$g = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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'); });
|
|
17493
17536
|
var Accordion = function (_a) {
|
|
17494
17537
|
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;
|
|
17495
17538
|
var theme = useTheme();
|
|
17496
17539
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17497
|
-
return (jsxRuntime.jsxs(Container$
|
|
17540
|
+
return (jsxRuntime.jsxs(Container$g, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17498
17541
|
};
|
|
17499
|
-
var templateObject_1$
|
|
17542
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$7;
|
|
17500
17543
|
|
|
17501
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17502
|
-
var Header = newStyled.div(templateObject_2$
|
|
17503
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17544
|
+
var SectionContent = newStyled.div(templateObject_1$j || (templateObject_1$j = __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; });
|
|
17545
|
+
var Header = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
17546
|
+
var MobileHeader = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
17504
17547
|
var MobileIconsContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
17505
17548
|
var H4 = newStyled.h4(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
17506
17549
|
var FilterLink = newStyled.a(templateObject_6$3 || (templateObject_6$3 = __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; });
|
|
@@ -17508,7 +17551,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17508
17551
|
var ClearAll = newStyled.span(templateObject_8$2 || (templateObject_8$2 = __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; });
|
|
17509
17552
|
var MobileFooter = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __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"])));
|
|
17510
17553
|
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __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"])));
|
|
17511
|
-
var templateObject_1$
|
|
17554
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$d, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17512
17555
|
|
|
17513
17556
|
var Filters = function (_a) {
|
|
17514
17557
|
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;
|
|
@@ -17625,20 +17668,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17625
17668
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17626
17669
|
};
|
|
17627
17670
|
|
|
17628
|
-
var Container$
|
|
17629
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17630
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17671
|
+
var Container$f = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
17672
|
+
var BackArrow = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17673
|
+
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
17631
17674
|
var NormalSpan = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
17632
17675
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
17633
17676
|
var SearchNavigation = function (_a) {
|
|
17634
17677
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17635
|
-
return (jsxRuntime.jsxs(Container$
|
|
17678
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17636
17679
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17637
17680
|
}) }, void 0)] }, void 0));
|
|
17638
17681
|
};
|
|
17639
|
-
var templateObject_1$
|
|
17682
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$5, templateObject_5$3;
|
|
17640
17683
|
|
|
17641
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17684
|
+
var TabContainer = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
17642
17685
|
var titleSize = _a.titleSize;
|
|
17643
17686
|
return titleSize;
|
|
17644
17687
|
}, function (_a) {
|
|
@@ -17655,14 +17698,14 @@ var Tab = function (_a) {
|
|
|
17655
17698
|
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;
|
|
17656
17699
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(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));
|
|
17657
17700
|
};
|
|
17658
|
-
var templateObject_1$
|
|
17701
|
+
var templateObject_1$h;
|
|
17659
17702
|
|
|
17660
|
-
var Container$
|
|
17661
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17703
|
+
var Container$e = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17704
|
+
var TabList = newStyled.div(templateObject_2$c || (templateObject_2$c = __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) {
|
|
17662
17705
|
var backgroundColor = _a.backgroundColor;
|
|
17663
17706
|
return backgroundColor;
|
|
17664
17707
|
});
|
|
17665
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17708
|
+
var TabContent = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17666
17709
|
var TabSeparator = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
17667
17710
|
var Tabs = function (_a) {
|
|
17668
17711
|
var _b;
|
|
@@ -17672,11 +17715,11 @@ var Tabs = function (_a) {
|
|
|
17672
17715
|
return null;
|
|
17673
17716
|
}
|
|
17674
17717
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17675
|
-
return (jsxRuntime.jsxs(Container$
|
|
17718
|
+
return (jsxRuntime.jsxs(Container$e, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17676
17719
|
};
|
|
17677
|
-
var templateObject_1$
|
|
17720
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$4;
|
|
17678
17721
|
|
|
17679
|
-
var Container$
|
|
17722
|
+
var Container$d = newStyled.div(function (props) { return ({
|
|
17680
17723
|
height: 'auto',
|
|
17681
17724
|
textAlign: 'center',
|
|
17682
17725
|
justifyContent: 'center',
|
|
@@ -17726,12 +17769,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17726
17769
|
textAlign: 'center',
|
|
17727
17770
|
lineHeight: '18px',
|
|
17728
17771
|
};
|
|
17729
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17772
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$d, __assign$1({ textPosition: iconTitlePosition }, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
17730
17773
|
};
|
|
17731
17774
|
|
|
17732
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17733
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17734
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17775
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
17776
|
+
var VideoOverlay = newStyled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
17777
|
+
var FullscreenVideo = newStyled.div(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
17735
17778
|
var ImageVideo = function (_a) {
|
|
17736
17779
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17737
17780
|
var video = React$2.useRef(null);
|
|
@@ -17751,11 +17794,11 @@ var ImageVideo = function (_a) {
|
|
|
17751
17794
|
height: '100%',
|
|
17752
17795
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17753
17796
|
};
|
|
17754
|
-
var templateObject_1$
|
|
17797
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$a;
|
|
17755
17798
|
|
|
17756
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17757
|
-
var ContainerMobile = css(templateObject_2$
|
|
17758
|
-
var Container$
|
|
17799
|
+
var ContainerDesktop = css(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
17800
|
+
var ContainerMobile = css(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
17801
|
+
var Container$c = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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);
|
|
17759
17802
|
var TextContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
17760
17803
|
var TextWithImage = function (_a) {
|
|
17761
17804
|
var _b, _c, _d, _e;
|
|
@@ -17776,7 +17819,7 @@ var TextWithImage = function (_a) {
|
|
|
17776
17819
|
// @ts-ignore
|
|
17777
17820
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17778
17821
|
};
|
|
17779
|
-
return (jsxs(Container$
|
|
17822
|
+
return (jsxs(Container$c, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17780
17823
|
backgroundColor: props.btnBGColor,
|
|
17781
17824
|
color: '#ffffff',
|
|
17782
17825
|
border: props.btnBGColor,
|
|
@@ -17786,9 +17829,9 @@ var TextWithImage = function (_a) {
|
|
|
17786
17829
|
},
|
|
17787
17830
|
} }, 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));
|
|
17788
17831
|
};
|
|
17789
|
-
var templateObject_1$
|
|
17832
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9, templateObject_4$3;
|
|
17790
17833
|
|
|
17791
|
-
var Container$
|
|
17834
|
+
var Container$b = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17792
17835
|
var AccordionOptions = function (_a) {
|
|
17793
17836
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17794
17837
|
var _b = React$2.useState({
|
|
@@ -17801,7 +17844,7 @@ var AccordionOptions = function (_a) {
|
|
|
17801
17844
|
}
|
|
17802
17845
|
return false;
|
|
17803
17846
|
};
|
|
17804
|
-
return (jsxRuntime.jsx(Container$
|
|
17847
|
+
return (jsxRuntime.jsx(Container$b, { children: accordions.map(function (accordion, index) {
|
|
17805
17848
|
var forceOpenValue = getForceOpen(index);
|
|
17806
17849
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17807
17850
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17812,9 +17855,9 @@ var AccordionOptions = function (_a) {
|
|
|
17812
17855
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17813
17856
|
}) }, void 0));
|
|
17814
17857
|
};
|
|
17815
|
-
var templateObject_1$
|
|
17858
|
+
var templateObject_1$d;
|
|
17816
17859
|
|
|
17817
|
-
var Container$
|
|
17860
|
+
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
17818
17861
|
var alignCenter = _a.alignCenter;
|
|
17819
17862
|
return alignCenter &&
|
|
17820
17863
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17824,14 +17867,14 @@ var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
17824
17867
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17825
17868
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17826
17869
|
});
|
|
17827
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17828
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17870
|
+
var TitleText = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
17871
|
+
var BannerText = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
17829
17872
|
var ShortBanner = function (_a) {
|
|
17830
17873
|
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;
|
|
17831
17874
|
var theme = useTheme();
|
|
17832
|
-
return (jsxRuntime.jsxs(Container$
|
|
17875
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17833
17876
|
};
|
|
17834
|
-
var templateObject_1$
|
|
17877
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8;
|
|
17835
17878
|
|
|
17836
17879
|
/* base styles & size variants */
|
|
17837
17880
|
var UserInfoTextStyles = {
|
|
@@ -17899,13 +17942,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17899
17942
|
}
|
|
17900
17943
|
};
|
|
17901
17944
|
|
|
17902
|
-
var Container$
|
|
17945
|
+
var Container$9 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\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 display: flex;\n flex-direction: column;\n row-gap: ", ";\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"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) {
|
|
17903
17946
|
return props.isMobile
|
|
17904
17947
|
? props.styles.imageContainerMobileMaxWidth
|
|
17905
17948
|
: props.styles.imageContainerMaxWidth;
|
|
17906
17949
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17907
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
17908
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17950
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
17951
|
+
var ImageCard = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"])), function (props) {
|
|
17909
17952
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17910
17953
|
}, function (props) {
|
|
17911
17954
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17923,13 +17966,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17923
17966
|
var theme = useTheme();
|
|
17924
17967
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17925
17968
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17926
|
-
return (jsxRuntime.jsxs(Container$
|
|
17969
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, alignCenter: alignCenter, fontSize: isMobile ? stylesBySize.userInfoTextMobileFontSize : stylesBySize.userInfoTextFontSize }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17927
17970
|
};
|
|
17928
|
-
var templateObject_1$
|
|
17971
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7;
|
|
17929
17972
|
|
|
17930
|
-
var Container$
|
|
17931
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17932
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17973
|
+
var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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'); });
|
|
17974
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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'); });
|
|
17975
|
+
var StyledTitle = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17933
17976
|
var titlePosition = _a.titlePosition;
|
|
17934
17977
|
return titlePosition == 'center' &&
|
|
17935
17978
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17937,13 +17980,13 @@ var StyledTitle = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __ma
|
|
|
17937
17980
|
var ImageCardWithDescription = function (_a) {
|
|
17938
17981
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17939
17982
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17940
|
-
return (jsxRuntime.jsxs(Container$
|
|
17983
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17941
17984
|
};
|
|
17942
|
-
var templateObject_1$
|
|
17985
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6;
|
|
17943
17986
|
|
|
17944
|
-
var Container$
|
|
17945
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17946
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17987
|
+
var Container$7 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17988
|
+
var CheckpointContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17989
|
+
var CheckpointDate = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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; });
|
|
17947
17990
|
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __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'); });
|
|
17948
17991
|
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __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'); });
|
|
17949
17992
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __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) {
|
|
@@ -17970,7 +18013,7 @@ var TrackingProgress = function (_a) {
|
|
|
17970
18013
|
}
|
|
17971
18014
|
return '30px';
|
|
17972
18015
|
};
|
|
17973
|
-
return (jsxRuntime.jsxs(Container$
|
|
18016
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
17974
18017
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
17975
18018
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
17976
18019
|
? theme.colors.semantic.informative.color
|
|
@@ -17979,11 +18022,11 @@ var TrackingProgress = function (_a) {
|
|
|
17979
18022
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
17980
18023
|
})] }), void 0));
|
|
17981
18024
|
};
|
|
17982
|
-
var templateObject_1$
|
|
18025
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
17983
18026
|
|
|
17984
|
-
var Container$
|
|
17985
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
17986
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18027
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
18028
|
+
var ReviewsContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
18029
|
+
var ReviewsCount = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
17987
18030
|
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
17988
18031
|
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
17989
18032
|
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
@@ -17995,13 +18038,13 @@ var ReviewsHeader = function (_a) {
|
|
|
17995
18038
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
17996
18039
|
var starsNumber = 5;
|
|
17997
18040
|
var theme = useTheme();
|
|
17998
|
-
return (jsxRuntime.jsxs(Container$
|
|
18041
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
17999
18042
|
};
|
|
18000
|
-
var templateObject_1$
|
|
18043
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18001
18044
|
|
|
18002
|
-
var Container$
|
|
18003
|
-
var Content = newStyled.div(templateObject_2$
|
|
18004
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18045
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
18046
|
+
var Content = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
18047
|
+
var StarsContent = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18005
18048
|
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
18006
18049
|
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __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"])));
|
|
18007
18050
|
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __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"])));
|
|
@@ -18037,10 +18080,10 @@ var Review = function (_a) {
|
|
|
18037
18080
|
}
|
|
18038
18081
|
}
|
|
18039
18082
|
}, [opened]);
|
|
18040
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18083
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18041
18084
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18042
18085
|
};
|
|
18043
|
-
var templateObject_1$
|
|
18086
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, 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;
|
|
18044
18087
|
|
|
18045
18088
|
function _extends() {
|
|
18046
18089
|
_extends = Object.assign || function (target) {
|
|
@@ -18307,40 +18350,40 @@ function useSwipeable(options) {
|
|
|
18307
18350
|
return handlers;
|
|
18308
18351
|
}
|
|
18309
18352
|
|
|
18310
|
-
var Container$
|
|
18353
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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) {
|
|
18311
18354
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18312
18355
|
return borderRadiusVariant &&
|
|
18313
18356
|
"\n border-radius: 40px;\n ";
|
|
18314
18357
|
});
|
|
18315
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18316
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18358
|
+
var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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'); });
|
|
18359
|
+
var BottomTagContainer = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18317
18360
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18318
18361
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18319
|
-
return (jsxRuntime.jsxs(Container$
|
|
18362
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18320
18363
|
});
|
|
18321
|
-
var templateObject_1$
|
|
18364
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2;
|
|
18322
18365
|
|
|
18323
|
-
var Button = newStyled.button(templateObject_1$
|
|
18366
|
+
var Button = newStyled.button(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
18324
18367
|
var ArrowButton = function (_a) {
|
|
18325
18368
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18326
18369
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18327
18370
|
};
|
|
18328
|
-
var templateObject_1$
|
|
18371
|
+
var templateObject_1$5;
|
|
18329
18372
|
|
|
18330
|
-
var Container$
|
|
18373
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"])));
|
|
18331
18374
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18332
18375
|
var SlideDots = function (_a) {
|
|
18333
18376
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18334
18377
|
var theme = useTheme();
|
|
18335
|
-
return (jsxRuntime.jsx(Container$
|
|
18378
|
+
return (jsxRuntime.jsx(Container$3, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18336
18379
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18337
18380
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18338
18381
|
};
|
|
18339
|
-
var templateObject_1$
|
|
18382
|
+
var templateObject_1$4;
|
|
18340
18383
|
|
|
18341
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18342
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18343
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18384
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$3 || (templateObject_1$3 = __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"])));
|
|
18385
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18386
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18344
18387
|
var SlideNavigation = function (_a) {
|
|
18345
18388
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18346
18389
|
var theme = useTheme();
|
|
@@ -18352,9 +18395,9 @@ var SlideNavigation = function (_a) {
|
|
|
18352
18395
|
onNavigate(selectedIndex + 1);
|
|
18353
18396
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18354
18397
|
};
|
|
18355
|
-
var templateObject_1$
|
|
18398
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
|
18356
18399
|
|
|
18357
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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"])));
|
|
18400
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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"])));
|
|
18358
18401
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18359
18402
|
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;
|
|
18360
18403
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18376,10 +18419,31 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18376
18419
|
React$2.useEffect(function () {
|
|
18377
18420
|
setSelectedImage(images[index]);
|
|
18378
18421
|
}, [index, images]);
|
|
18379
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18422
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18423
|
+
};
|
|
18424
|
+
var templateObject_1$2;
|
|
18425
|
+
|
|
18426
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
18427
|
+
var DropContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18428
|
+
var DropList = function (_a) {
|
|
18429
|
+
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
18430
|
+
return (jsxRuntime.jsx(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
18431
|
+
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
18432
|
+
}) }, void 0));
|
|
18433
|
+
};
|
|
18434
|
+
var templateObject_1$1, templateObject_2$1;
|
|
18435
|
+
|
|
18436
|
+
var DROPS_TOTAL = 5;
|
|
18437
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18438
|
+
var Title = newStyled.p(templateObject_2 || (templateObject_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"])));
|
|
18439
|
+
var Description = newStyled.p(templateObject_3 || (templateObject_3 = __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"])));
|
|
18440
|
+
var AbsorbencyLevel = function (_a) {
|
|
18441
|
+
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18442
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Title, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18380
18443
|
};
|
|
18381
|
-
var templateObject_1;
|
|
18444
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
18382
18445
|
|
|
18446
|
+
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
18383
18447
|
exports.Accordion = Accordion$1;
|
|
18384
18448
|
exports.AccordionOptions = AccordionOptions;
|
|
18385
18449
|
exports.AmazonButton = AmazonButton;
|