@trafilea/afrodita-components 5.0.0-beta.308 → 5.0.0-beta.310
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 +141 -9
- package/build/index.esm.js +604 -367
- package/build/index.esm.js.map +1 -1
- package/build/index.js +606 -366
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +17 -0
- package/build/theme/revel.theme.js +17 -0
- package/build/theme/shapermint.theme.d.ts +17 -0
- package/build/theme/shapermint.theme.js +17 -0
- package/build/theme/thespadr.theme.d.ts +17 -0
- package/build/theme/thespadr.theme.js +18 -1
- package/build/theme/truekind.theme.d.ts +17 -0
- package/build/theme/truekind.theme.js +18 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -66,6 +66,36 @@ var SixtyDaysGuarantee = function (_a) {
|
|
|
66
66
|
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 68, viewBoxY: 60, title: title }, { children: jsxs$1(Fragment$1, { children: [jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.12893 20.0377C6.95506 20.5703 7.22866 21.1476 7.74181 21.3283L7.74182 21.3283C8.25436 21.509 8.80986 21.2242 8.98374 20.6916C13.6669 6.34132 28.7093 -1.37319 42.5168 3.49389C53.5644 7.38818 60.8041 18.2973 60.4618 30.3023L56.7328 26.3617C56.3533 25.9601 55.7341 25.9548 55.3486 26.3495C55.1556 26.5462 55.0573 26.8058 55.0552 27.0667C55.0531 27.3271 55.1473 27.5882 55.3369 27.7882L60.7689 33.5285C60.9627 33.7336 61.2191 33.8353 61.4749 33.8331C61.7301 33.8391 61.9872 33.7419 62.1837 33.5407L67.7069 27.8953C68.0931 27.5012 68.0983 26.8576 67.7186 26.4565C67.5294 26.2561 67.2796 26.1542 67.0285 26.1521C66.778 26.1499 66.5266 26.2475 66.3342 26.4445L62.4178 30.4475C62.8212 17.5178 55.0381 5.75829 43.146 1.56628C28.3162 -3.6612 12.1587 4.62531 7.12893 20.0377ZM5.31341 29.5826C4.92323 42.5 12.7034 54.245 24.5866 58.4339C39.4157 63.6612 55.5738 55.3744 60.6034 39.9626C60.7775 39.4292 60.5032 38.8523 59.9908 38.6717C59.4776 38.4907 58.9228 38.7753 58.7488 39.3086C54.0657 53.6582 39.0226 61.3731 25.2156 56.5061C14.0119 52.5567 6.72506 41.3935 7.28932 29.1894L11.2678 33.394C11.647 33.7951 12.2662 33.8007 12.652 33.4058C12.845 33.2091 12.9431 32.9497 12.9451 32.6888C12.9472 32.4285 12.8533 32.167 12.6637 31.9671L7.2316 26.2268C7.03598 26.0197 6.77654 25.918 6.51822 25.9223C6.26536 25.9181 6.01109 26.0154 5.81628 26.2147L0.293184 31.8604C-0.0932236 32.2545 -0.0982397 32.8981 0.28148 33.2988C0.470773 33.4992 0.72026 33.6014 0.971555 33.6035C1.22211 33.6058 1.47331 33.508 1.66576 33.3109L5.31341 29.5826Z", fill: fill }, void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.12893 20.0377C6.95506 20.5703 7.22866 21.1476 7.74181 21.3283L7.74182 21.3283C8.25436 21.509 8.80986 21.2242 8.98374 20.6916C13.6669 6.34132 28.7093 -1.37319 42.5168 3.49389C53.5644 7.38818 60.8041 18.2973 60.4618 30.3023L56.7328 26.3617C56.3533 25.9601 55.7341 25.9548 55.3486 26.3495C55.1556 26.5462 55.0573 26.8058 55.0552 27.0667C55.0531 27.3271 55.1473 27.5882 55.3369 27.7882L60.7689 33.5285C60.9627 33.7336 61.2191 33.8353 61.4749 33.8331C61.7301 33.8391 61.9872 33.7419 62.1837 33.5407L67.7069 27.8953C68.0931 27.5012 68.0983 26.8576 67.7186 26.4565C67.5294 26.2561 67.2796 26.1542 67.0285 26.1521C66.778 26.1499 66.5266 26.2475 66.3342 26.4445L62.4178 30.4475C62.8212 17.5178 55.0381 5.75829 43.146 1.56628C28.3162 -3.6612 12.1587 4.62531 7.12893 20.0377ZM5.31341 29.5826C4.92323 42.5 12.7034 54.245 24.5866 58.4339C39.4157 63.6612 55.5738 55.3744 60.6034 39.9626C60.7775 39.4292 60.5032 38.8523 59.9908 38.6717C59.4776 38.4907 58.9228 38.7753 58.7488 39.3086C54.0657 53.6582 39.0226 61.3731 25.2156 56.5061C14.0119 52.5567 6.72506 41.3935 7.28932 29.1894L11.2678 33.394C11.647 33.7951 12.2662 33.8007 12.652 33.4058C12.845 33.2091 12.9431 32.9497 12.9451 32.6888C12.9472 32.4285 12.8533 32.167 12.6637 31.9671L7.2316 26.2268C7.03598 26.0197 6.77654 25.918 6.51822 25.9223C6.26536 25.9181 6.01109 26.0154 5.81628 26.2147L0.293184 31.8604C-0.0932235 32.2545 -0.0982397 32.8981 0.28148 33.2988C0.470773 33.4992 0.72026 33.6014 0.971555 33.6035C1.22211 33.6058 1.47331 33.508 1.66576 33.3109L5.31341 29.5826Z", fill: fill }, void 0), jsx$1("path", { d: "M26.4316 13.008L22.1836 19.584C21.0796 21.336 20.4316 22.656 20.4316 24.6C20.4316 27.888 23.0956 30.432 26.6476 30.432C30.1276 30.432 32.8396 28.08 32.8396 24.48C32.8396 21.384 30.4156 19.032 27.4156 19.032C26.8396 19.032 26.0716 19.128 25.6156 19.32L25.5916 19.296L29.9356 13.008H26.4316ZM23.3596 24.672C23.3596 22.68 24.7276 21.312 26.6716 21.312C28.5916 21.312 29.8876 22.704 29.8876 24.624C29.8876 26.64 28.5676 27.984 26.6236 27.984C24.6316 27.984 23.3596 26.448 23.3596 24.672ZM47.32 21.504C47.32 16.008 45.184 12.576 41.344 12.576C37.48 12.576 35.32 16.008 35.32 21.504C35.32 27 37.48 30.432 41.344 30.432C45.184 30.432 47.32 27 47.32 21.504ZM44.368 21.504C44.368 23.88 43.912 27.984 41.344 27.984C38.752 27.984 38.272 23.88 38.272 21.504C38.272 19.128 38.752 14.976 41.344 14.976C43.912 14.976 44.368 19.128 44.368 21.504Z", fill: fill }, void 0), jsx$1("path", { d: "M21.0373 46H24.5513C27.1413 46 30.0253 44.516 30.0253 41.044C30.0253 37.32 27.1413 36.088 24.5513 36.088H21.0373V46ZM22.8013 44.46V37.6H24.2713C26.0913 37.6 28.1353 38.202 28.1353 41.044C28.1353 43.718 26.0913 44.46 24.2713 44.46H22.8013ZM30.1829 46H32.1569L33.0529 43.732H37.3509L38.2749 46H40.2909L36.0209 36.088H34.4949L30.1829 46ZM33.6549 42.22L35.2089 38.188L36.7349 42.22H33.6549ZM42.8317 46H44.5957V41.702L48.3197 36.088H46.2757L43.7557 40.26L41.2637 36.088H39.1077L42.8317 41.702V46Z", fill: fill }, void 0)] }, void 0) }), void 0));
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
+
var Bra = function (_a) {
|
|
70
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
71
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: jsx$1("path", { d: "M4.20786 30.6383C4.02369 30.6383 3.82929 30.5669 3.66558 30.4445C3.43026 30.261 3.28701 29.9754 3.28701 29.7103C3.28701 29.2819 3.21539 26.7935 3.04145 26.2734C2.90844 25.8552 2.67311 25.3963 2.33547 24.8864C0.851885 22.6427 0.401693 20.3991 0.841653 17.3702C1.22022 14.8206 2.16153 4.78532 2.33547 2.81703C2.36617 2.48048 2.58103 2.20513 2.89821 2.08274C3.31771 1.92977 3.85998 1.65441 4.24879 1.46064C4.52504 1.31786 4.85245 1.32806 5.11847 1.50143C5.29241 1.61362 5.43565 1.79719 5.49704 2.01136C5.55843 2.22552 5.63006 2.49068 5.71191 2.79663C6.20303 4.61195 7.46152 8.30378 8.70978 10.4964C10.6333 13.8619 14.7055 16.4217 16.0152 16.4217C17.6318 16.4217 21.0798 14.1985 23.1057 10.1701C24.3846 7.63068 25.7659 4.76493 26.3082 2.79663C26.4003 2.46009 26.4719 2.20513 26.5333 1.99096C26.6254 1.6952 26.8607 1.46064 27.1676 1.38925C27.3723 1.33826 27.5871 1.36886 27.7918 1.47084C28.1703 1.66461 28.7126 1.92977 29.1219 2.09294C29.4391 2.21532 29.6539 2.49068 29.6846 2.82723C29.8483 4.78532 30.7896 14.8206 31.158 17.3702C31.5979 20.3991 31.1477 22.6427 29.6642 24.8864C29.4595 25.1924 29.1833 25.7125 29.0298 26.2632C28.8661 26.8139 28.7842 29.3839 28.7842 29.7103C28.7842 29.9754 28.6717 30.2202 28.4568 30.3833C28.2522 30.5465 27.9862 30.5975 27.7304 30.5261C24.2823 29.6083 20.558 29.1901 16.0254 29.2105C11.503 29.2309 7.80939 29.6695 4.41249 30.6077C4.34087 30.6383 4.26925 30.6383 4.20786 30.6383ZM4.64782 1.86858C4.58643 1.86858 4.53527 1.87878 4.48411 1.90937C4.08508 2.11334 3.52234 2.3989 3.08238 2.56207C2.94937 2.61306 2.85728 2.72524 2.84705 2.86802C2.67311 4.82612 1.7318 14.8818 1.35323 17.4518C0.933738 20.3481 1.35323 22.4796 2.7652 24.611C3.12331 25.1516 3.3791 25.6615 3.53257 26.1204C3.74744 26.7833 3.79859 29.4961 3.79859 29.7204C3.79859 29.8326 3.87022 29.9652 3.98276 30.0468C4.07485 30.1182 4.1874 30.1488 4.26925 30.1284C7.70708 29.1799 11.4416 28.7312 16.0152 28.7108C20.5989 28.6904 24.3642 29.1187 27.8532 30.0366C27.9555 30.0672 28.0578 30.0468 28.1396 29.9754C28.2215 29.9142 28.2727 29.8122 28.2727 29.7103C28.2727 29.5471 28.334 26.7935 28.5387 26.1204C28.7126 25.5187 29.0196 24.9374 29.2344 24.6008C30.6464 22.4796 31.0659 20.3379 30.6464 17.4416C30.2781 14.8818 29.3367 4.82612 29.1628 2.85782C29.1526 2.72524 29.0605 2.60286 28.9275 2.55187C28.4978 2.3887 27.935 2.11334 27.5462 1.90937C27.4541 1.85838 27.362 1.84818 27.2802 1.86858C27.1472 1.89917 27.0551 1.99096 27.0142 2.11334C26.9528 2.31731 26.8812 2.57227 26.7891 2.90882C26.2366 4.9281 24.8451 7.81425 23.5559 10.3843C21.4072 14.6472 17.7955 16.9112 16.0049 16.9112C14.5623 16.9214 10.3059 14.3106 8.25958 10.7412C6.99086 8.50775 5.71191 4.76493 5.21056 2.91901C5.12871 2.62326 5.05708 2.3581 4.99569 2.14393C4.965 2.04195 4.91384 1.97056 4.84222 1.91957C4.78083 1.88897 4.71944 1.86858 4.64782 1.86858Z", fill: fill, stroke: fill, strokeWidth: "0.5", strokeLinejoin: "round" }, void 0) }), void 0));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var Underwear = function (_a) {
|
|
75
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
76
|
+
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: [jsx$1("path", { d: "M30.7744 13.7312L30.785 13.7099", stroke: fill, strokeWidth: "0.5", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M31.3162 13.7312H30.7743L19.9475 29.1968C19.7138 29.2611 18.7681 29.4432 15.9844 29.4432C13.1901 29.4432 12.2869 29.2611 12.0638 29.2075L1.22637 13.7312H0.684496C0.673871 13.7954 0.684496 13.8704 0.726996 13.924L11.6813 29.561C11.7132 29.6038 11.7451 29.6252 11.7876 29.6467C11.8619 29.6788 12.5632 29.9466 15.9738 29.9466C19.3844 29.9466 20.1281 29.6788 20.2025 29.6467C20.245 29.6252 20.2875 29.5931 20.3194 29.5503L31.2737 13.9132C31.3056 13.8704 31.3268 13.7954 31.3162 13.7312Z", fill: fill, stroke: fill, strokeWidth: "0.5" }, void 0), jsx$1("path", { d: "M15.974 29.9575C11.7772 29.9575 11.7028 29.6683 11.6497 29.4648C11.6391 29.4112 11.6072 29.2184 11.8303 29.0899C12.319 28.8007 13.1159 26.8729 12.4678 22.7173C11.6072 18.2083 10.1091 15.4664 8.00532 14.556C5.27471 13.3886 1.02474 14.0312 0.982236 14.0312C0.897237 14.042 0.812237 14.0205 0.759112 13.9563C0.695363 13.892 0.674113 13.8063 0.684738 13.7314L2.76723 2.26063C2.77785 2.18565 2.82035 2.1321 2.87348 2.08926C2.93723 2.04642 3.00097 2.03571 3.07535 2.04642C3.14972 2.06784 9.50344 3.42805 15.974 3.42805C22.4446 3.42805 28.8515 2.06784 28.9152 2.04642C28.9896 2.03571 29.0533 2.04642 29.1171 2.08926C29.1702 2.1321 29.2127 2.18565 29.2233 2.26063L31.3058 13.7314C31.3164 13.817 31.2952 13.9027 31.2314 13.9563C31.1677 14.0205 31.0827 14.042 31.0083 14.0312C30.9658 14.0205 26.7158 13.3779 23.9852 14.556C21.8815 15.4557 20.3834 18.2083 19.5228 22.7173C18.864 26.8622 19.6715 28.8007 20.1603 29.0792C20.3834 29.2077 20.3621 29.4005 20.3409 29.4541C20.2984 29.6683 20.2134 29.9575 15.974 29.9575ZM12.3828 29.2827C13.0522 29.3791 14.5822 29.4326 15.974 29.4326C17.3871 29.4326 18.9384 29.3791 19.6078 29.2827C18.8853 28.4152 18.4709 26.0375 19.0128 22.6316C19.9053 17.9298 21.5202 15.0487 23.7834 14.0741C26.2058 13.0352 29.6165 13.3351 30.7214 13.4743L28.7665 2.61407C27.4915 2.87111 21.7646 3.95285 15.974 3.95285C10.1941 3.95285 4.50972 2.87111 3.23472 2.61407L1.26911 13.4636C2.38473 13.3244 5.79533 13.0245 8.2072 14.0634C10.4809 15.038 12.0853 17.9191 12.9778 22.6102C13.5197 26.0375 13.1159 28.4259 12.3828 29.2827Z", fill: fill, stroke: fill, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
var PacksAndBundles = function (_a) {
|
|
80
|
+
var height = _a.height, width = _a.width; _a.fill; var testId = _a.testId;
|
|
81
|
+
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: [jsx$1("g", __assign$1({ clipPath: "url(#clip0)" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.1728 12.3895L22.4331 26.2927C22.3776 26.3673 22.3071 26.4191 22.2411 26.4523L22.2345 26.4556L22.2278 26.4586L22.2236 26.4604C22.0392 26.5557 21.7226 26.6233 21.1685 26.672C20.9024 26.6954 20.4245 26.7148 19.9846 26.729L20.6904 25.7215C20.7209 25.7199 20.7524 25.7182 20.784 25.7165C20.9324 25.7087 21.0848 25.7007 21.1629 25.6927C21.0999 25.5729 21.0264 25.3992 20.9883 25.2962L21.6974 24.2841C21.7575 24.587 21.8313 24.8321 21.9084 25.0233C21.9424 25.1076 21.9763 25.1796 22.0089 25.2405L30.9234 12.5065C30.3915 12.4592 29.6343 12.416 28.8072 12.4431C28.1861 12.4635 27.5328 12.5233 26.9092 12.6479L26.7369 11.6992C27.4411 11.5594 28.1616 11.4969 28.8267 11.4776C29.7725 11.4502 30.6199 11.51 31.1728 11.5671L29.5396 2.49474C28.0311 2.78832 23.2279 3.64014 18.3696 3.64014C13.5201 3.64014 8.7508 2.78833 7.24644 2.49476L6.52541 5.9166C6.26668 5.8827 6.016 5.84833 5.77437 5.81392C5.70445 5.80396 5.63529 5.794 5.56692 5.78405L6.38351 1.84519C6.40632 1.69702 6.49265 1.59953 6.5677 1.53901L6.57617 1.53218L6.5852 1.52612C6.70054 1.4486 6.82159 1.43108 6.93972 1.44809L6.95674 1.45054L6.97327 1.4553L6.98877 1.45855C7.02007 1.46529 7.0988 1.48225 7.22951 1.50876C7.40007 1.54335 7.64714 1.59187 7.96001 1.64961C8.58578 1.76511 9.47427 1.91745 10.54 2.06923C12.6725 2.37293 15.5097 2.67365 18.3696 2.67365C21.2294 2.67365 24.0785 2.37293 26.2218 2.0692C27.2928 1.91742 28.1864 1.76507 28.8152 1.64957C29.1296 1.59182 29.3777 1.54332 29.5486 1.50874C29.6341 1.49144 29.7 1.47767 29.7452 1.46801L29.7962 1.45686L29.8027 1.45537L29.8147 1.45132L29.8372 1.44809C29.9553 1.43108 30.0764 1.4486 30.1917 1.52612L30.2008 1.53218L30.2092 1.53901C30.2843 1.59953 30.3706 1.69701 30.3934 1.84518L32.2065 11.832H32.2195L32.254 12.0412C32.2746 12.1655 32.2389 12.2985 32.1728 12.3895ZM5.56692 5.78405C4.59319 5.64231 3.77909 5.50222 3.19437 5.3943C2.8815 5.33656 2.63444 5.28804 2.46387 5.25345C2.33316 5.22694 2.25443 5.20998 2.22314 5.20324C2.21162 5.20076 2.20764 5.19999 2.20764 5.19999L2.19111 5.19523L2.17408 5.19278C2.05595 5.17577 1.93491 5.19329 1.81956 5.27081L1.81053 5.27687L1.80207 5.2837C1.72702 5.34422 1.64068 5.44171 1.61787 5.58988L-0.195211 15.5767H-0.198977L-0.233569 15.7859C-0.25053 15.8885 -0.239303 16.0294 -0.150545 16.1463L9.58319 30.0411L9.58746 30.0469C9.64526 30.1246 9.70811 30.1655 9.7666 30.1953C9.94436 30.2947 10.2532 30.3643 10.8054 30.4145C11.3798 30.4666 12.2571 30.5 13.6039 30.5C14.9435 30.5 15.8241 30.4677 16.4055 30.4164C16.9598 30.3676 17.2761 30.2998 17.4601 30.2039L17.4615 30.2033L17.4683 30.2004L17.475 30.197C17.5409 30.1638 17.6115 30.112 17.667 30.0374L19.9846 26.729L20.6904 25.7215L20.9883 25.2962C21.3471 24.784 21.3429 24.7902 21.6974 24.2841L27.4067 16.1341C27.4727 16.0432 27.5085 15.9102 27.4879 15.7859L27.4533 15.5767H27.4409L26.9092 12.6479L26.7369 11.6992L25.6278 5.58987C25.605 5.4417 25.5186 5.34422 25.4436 5.2837L25.4351 5.27687L25.4261 5.27081C25.3108 5.19329 25.1897 5.17577 25.0716 5.19278L25.0491 5.19601L25.0371 5.20006L25.0305 5.20155L24.9795 5.2127C24.9344 5.22236 24.8685 5.23613 24.783 5.25343C24.6121 5.28801 24.364 5.33651 24.0496 5.39426C23.4207 5.50976 22.5272 5.66211 21.4561 5.81389C19.3129 6.11762 16.4638 6.41834 13.6039 6.41834C11.0681 6.41834 8.55014 6.18191 6.52541 5.9166L5.56692 5.78405ZM26.4072 15.3118C25.8542 15.2547 25.0068 15.1949 24.0611 15.2223C22.898 15.256 21.5653 15.4222 20.4467 15.9019C18.3103 16.8219 16.8546 19.5018 16.0593 23.6915L16.0581 23.6989C15.816 25.2208 15.7848 26.5223 15.8975 27.5491C15.9836 28.3344 16.156 28.9786 16.3972 29.4373C16.265 29.451 16.1107 29.4645 15.9313 29.477C15.2679 29.5138 14.4111 29.5335 13.6039 29.5335C12.7757 29.5335 11.8938 29.5121 11.2272 29.4724C11.085 29.4618 10.9603 29.4508 10.8511 29.4397C11.0946 28.9825 11.2662 28.3381 11.3514 27.5531C11.4632 26.5222 11.43 25.2126 11.1877 23.6801L11.1862 23.6724C10.3911 19.493 8.94515 16.8126 6.79899 15.8924C5.68491 15.4125 4.35464 15.2465 3.19166 15.2128C2.24462 15.1853 1.39468 15.2453 0.838839 15.3025L2.4808 6.23945C3.98517 6.53302 8.75449 7.38483 13.6039 7.38483C18.4623 7.38483 23.2655 6.53301 24.774 6.23943L26.4072 15.3118ZM24.0411 16.1878C22.9571 16.2234 21.7747 16.3793 20.8241 16.7894C19.9567 17.1604 19.1919 17.9225 18.5467 19.1038C17.9017 20.2848 17.3843 21.8698 17.0047 23.8574C16.7322 25.5736 16.7479 26.8474 16.8804 27.7323C16.9467 28.1752 17.0418 28.5174 17.1425 28.7675C17.1765 28.8518 17.2104 28.9239 17.243 28.9848L26.1573 16.2512C25.6253 16.2038 24.8681 16.1607 24.0411 16.1878ZM1.10048 16.2559L10.0086 28.9771C10.0412 28.9144 10.0747 28.8408 10.1082 28.7553C10.2074 28.5022 10.3002 28.1588 10.3646 27.7163C10.4934 26.832 10.5069 25.5643 10.2409 23.857C9.8613 21.8696 9.34393 20.2872 8.69898 19.1075C8.054 17.9277 7.28988 17.1653 6.42181 16.7895C5.47452 16.3847 4.29727 16.2307 3.2163 16.1951C2.39124 16.1679 1.63478 16.21 1.10048 16.2559Z", fill: "#292929" }, void 0) }), void 0), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0" }, { children: jsx$1("rect", { width: "32", height: "32", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
var SeamlessSupportBra = function (_a) {
|
|
85
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
86
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 69.64, viewBoxY: 47.5, title: title }, { children: jsx$1("g", __assign$1({ id: "Seamless_Support", "data-name": "Seamless Support", transform: "translate(3.337 0.266)" }, { children: jsxs$1("g", __assign$1({ id: "Grupo_56", "data-name": "Grupo 56", transform: "translate(0 0)" }, { children: [jsx$1("path", { d: "M166.7,47.211c-.546-2.171-1.212-4.171-1.856-6.106-1.109-3.328-2.091-6.282-2.161-9.192l.782.973a1.044,1.044,0,1,0,1.628-1.309l-2.646-3.289a1.045,1.045,0,0,0-1.679.07l-2.222,3.289a1.044,1.044,0,1,0,1.73,1.17l.336-.5a35.907,35.907,0,0,0,2.25,9.447c.632,1.9,1.286,3.86,1.813,5.952,1.569,6.244-1.574,13.214-1.622,13.319a1.044,1.044,0,1,0,1.9.876c.143-.312,3.507-7.717,1.751-14.7", transform: "translate(-101.238 -18.187)", fill: fill, stroke: fill, strokeWidth: "0.5" }, void 0), jsx$1("path", { d: "M69.1,27.735c-2.471-7.364-2.783-15.053-2.89-22.285V5.323c-.009-.6-.018-1.226-.042-1.841-.086-2.2-1.438-2.782-2.633-3.3L63.484.164A2.018,2.018,0,0,0,61.646.29a2,2,0,0,0-.966,1.579l-.048.7c-.07,1.044-.143,2.123-.286,3.111-1.117,7.76-3.486,13.141-7.681,17.446a10.03,10.03,0,0,1-7.284,3.28h-.046a11.855,11.855,0,0,1-8.009-3.29,23.81,23.81,0,0,1-5.247-7.936,39.091,39.091,0,0,1-2.423-9.5c-.143-.992-.215-2.07-.286-3.112l-.048-.694A2,2,0,0,0,28.363.291,2.027,2.027,0,0,0,26.517.164l-.05.021c-1.194.515-2.549,1.1-2.633,3.3-.023.62-.033,1.249-.042,1.872v.078c-.107,7.245-.418,14.938-2.89,22.3-.081.241-.167.484-.252.727-.634,1.8-1.353,3.835-.59,6.136.192.579.374,1.181.556,1.785.226.748.48,1.595.769,2.415.08.395.2,2.321.266,3.364.022.352.042.681.061.959.038.565.077,1.15.074,1.623v.046a2.273,2.273,0,0,0,.9,1.738,2.171,2.171,0,0,0,1.294.467h.027a1.964,1.964,0,0,0,.5-.067,78.029,78.029,0,0,1,20.453-2.862h.057a79.283,79.283,0,0,1,20.563,2.714,2.14,2.14,0,0,0,.563.071,2.087,2.087,0,0,0,2.06-2.105c0-.464.034-1.026.074-1.624.03-.454.036-.938.042-1.4a10.978,10.978,0,0,1,.286-2.924c.114-.365.229-.73.35-1.093.144-.441.286-.881.425-1.338.176-.582.358-1.185.55-1.763.763-2.3.045-4.337-.59-6.136-.086-.243-.172-.485-.252-.725m-1.137,6.2c-.2.6-.387,1.221-.572,1.84-.126.42-.265.845-.4,1.272-.121.374-.244.749-.359,1.123a12.657,12.657,0,0,0-.381,3.511c-.006.458-.011.894-.038,1.3-.042.634-.082,1.233-.07,1.777a81.369,81.369,0,0,0-21.111-2.786h-.061A80.1,80.1,0,0,0,24.006,44.9a.068.068,0,0,1-.018-.01l-.036-.028a.193.193,0,0,1-.078-.137c0-.543-.039-1.154-.079-1.745-.018-.275-.039-.6-.061-.95a21.958,21.958,0,0,0-.369-3.9c-.276-.782-.528-1.617-.758-2.379-.18-.6-.366-1.211-.567-1.816-.538-1.623,0-3.158.577-4.784.089-.253.177-.5.262-.755,2.568-7.649,2.889-15.524,3-22.951V5.37c.009-.592.018-1.2.041-1.806.033-.847.219-.963,1.327-1.441l.04.583c.073,1.082.148,2.2.3,3.271a41.055,41.055,0,0,0,2.559,9.991,25.909,25.909,0,0,0,5.719,8.637,13.961,13.961,0,0,0,9.452,3.887h.07a12.049,12.049,0,0,0,8.774-3.911c4.522-4.642,7.067-10.38,8.252-18.605.154-1.066.229-2.186.3-3.272l.04-.583c1.107.477,1.294.592,1.327,1.44.023.6.032,1.2.041,1.792v.109c.109,7.411.431,15.286,3,22.934.084.251.172.5.263.757.572,1.625,1.114,3.16.576,4.782", transform: "translate(-12.863 0)", fill: fill, stroke: fill, strokeWidth: "0.5" }, void 0), jsx$1("path", { d: "M4.345,41.766A35.908,35.908,0,0,0,6.6,32.319l.335.5a1.044,1.044,0,1,0,1.731-1.169L6.439,28.357a1.046,1.046,0,0,0-.822-.458,1.058,1.058,0,0,0-.859.389L2.114,31.576a1.044,1.044,0,1,0,1.628,1.309l.782-.973c-.07,2.913-1.053,5.866-2.161,9.194C1.717,43.04,1.052,45.04.507,47.211-1.25,54.2,2.114,61.6,2.258,61.915a1.044,1.044,0,1,0,1.9-.876C4.121,60.969.954,54,2.532,47.72c.527-2.094,1.18-4.057,1.813-5.952", transform: "translate(-3 -18.187)", fill: fill, stroke: fill, strokeWidth: "0.5" }, void 0)] }), void 0) }), void 0) }), void 0));
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
var WireFreeComfort = function (_a) {
|
|
90
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? 'var(--colors-pallete-secondary-color)' : _b, title = _a.title;
|
|
91
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 69.082, viewBoxY: 57.76, title: title }, { children: jsxs$1("g", __assign$1({ id: "Size_Fitting", "data-name": "Size & Fitting", transform: "translate(3.427 1.626)" }, { children: [jsx$1("path", { id: "Trazado_183", "data-name": "Trazado 183", d: "M56.821,139.358s10.641-4.293,28.814.395", transform: "translate(-40.106 -87.645)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_184", "data-name": "Trazado 184", d: "M131.662,134.222l2.171,3.355-3.076,2.409", transform: "translate(-88.302 -85.466)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_185", "data-name": "Trazado 185", d: "M8.827,59.483s5.455-10.095,2.829-28.678", transform: "translate(49.288 -14.844)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_186", "data-name": "Trazado 186", d: "M7.829,33.338,4.738,30.806,2,33.592", transform: "translate(56.207 -14.844)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_187", "data-name": "Trazado 187", d: "M0,28.678S5.454,18.584,2.829,0", transform: "translate(4.537 44.824) rotate(173.976)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_188", "data-name": "Trazado 188", d: "M5.829,2.532,2.738,0,0,2.787", transform: "translate(4.446 44.833) rotate(173.976)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsxs$1("g", __assign$1({ id: "Grupo_21", "data-name": "Grupo 21", transform: "translate(9.088 0)" }, { children: [jsx$1("path", { id: "Trazado_66", "data-name": "Trazado 66", d: "M206.767,348.919c.791-3.423,1.918-8.929,1.69-11.657-.22-2.652-1.629-5.405-2.761-7.617a21.953,21.953,0,0,1-1.466-3.23c-.343-1.145-.739-3.617-1.157-6.232a55.862,55.862,0,0,0-1.463-7.449c-.881-2.289-2.655-2.686-4.439-2.775H197.1c-1.952,0-5.666,4.432-5.705,4.477-.515.615-2.347,2.628-4.37,2.693-2.5.09-4.36-1.774-4.959-2.373a13.605,13.605,0,0,1-1.135-1.478c-.993-1.4-2.208-3.1-3.357-3.43a.8.8,0,0,0-.312-.057,6.468,6.468,0,0,0-4.472,1.848c-.49.544-.926,2.78-1.533,6.129-.272,1.5-.529,2.911-.744,3.678-.153.547-.6,1.779-1.172,3.339-1.581,4.332-4.227,11.582-4.32,14.686-.114,3.71,2.3,11.823,2.4,12.166a.955.955,0,0,0,.889.646h0c.164,0,4.052-1.426,18.217-1.426s18.468,1.666,18.636,1.673h.03a.9.9,0,0,0,.849-.652c.035-.136.325-1.247.692-2.829a.255.255,0,0,0,.032-.1A.091.091,0,0,0,206.767,348.919Z", transform: "translate(-165.02 -309.79)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_67", "data-name": "Trazado 67", d: "M202.8,340.168c0-.28-.009-7.275-.687-9.558-.652-2.2-1.973-5.069-3.33-6.155a6.916,6.916,0,0,0-2.617-1.169", transform: "translate(-185.597 -318.706)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_68", "data-name": "Trazado 68", d: "M250.935,322.568a6.727,6.727,0,0,0-3.452,2A14.317,14.317,0,0,0,244.059,331c-.51,2.55-.121,8.337-.1,8.807", transform: "translate(-217.058 -318.232)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0), jsx$1("path", { id: "Trazado_69", "data-name": "Trazado 69", d: "M197.828,309.794a7.106,7.106,0,0,0-1.435,2.211,15,15,0,0,0-.243,2.558,58.834,58.834,0,0,0,.492,7.5c.4,2.33,1.717,5.625,3.367,7.142,2.09,1.922,5.181,3.606,7.339,3.606s6.894-2.135,7.489-2.581c3.215-2.412,3.982-4.326,4.652-8.85a51.134,51.134,0,0,0-.262-9.22,10.257,10.257,0,0,0-1.3-2.19", transform: "translate(-185.583 -309.794)", fill: "none", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.3" }, void 0)] }), void 0)] }), void 0) }), void 0));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
var SixtyDaysBold = function (_a) {
|
|
95
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
96
|
+
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 55.892, viewBoxY: 47.699, title: title }, { children: [jsxs$1("g", __assign$1({ id: "Grupo_45", "data-name": "Grupo 45", transform: "translate(17.777 12.342)" }, { children: [jsx$1("path", { id: "Trazado_125", "data-name": "Trazado 125", d: "M933.732,885.051a5.185,5.185,0,0,0-1.741-.358,3.3,3.3,0,0,0-3.584,2.817,3.036,3.036,0,0,1,2.629-1.161,3.5,3.5,0,0,1,3.7,3.687c0,2.27-1.792,3.96-4.369,3.96-2.629,0-4.592-1.912-4.592-5.087,0-3.926,2.526-6.5,6.366-6.5a4.931,4.931,0,0,1,2.3.458Zm-3.4,6.692a1.627,1.627,0,1,0-.077,0Z", transform: "translate(-925.778 -882.401)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_126", "data-name": "Trazado 126", d: "M945.363,884.3a4.685,4.685,0,0,1,7.528,0,8.337,8.337,0,0,1,0,7.817,4.685,4.685,0,0,1-7.528,0A8.336,8.336,0,0,1,945.363,884.3Zm2.134,6.315a1.694,1.694,0,0,0,1.622,1.024,1.676,1.676,0,0,0,1.621-1.024,7,7,0,0,0,0-4.813,1.676,1.676,0,0,0-1.621-1.023,1.694,1.694,0,0,0-1.622,1.023A7.276,7.276,0,0,0,947.5,890.619Z", transform: "translate(-933.737 -882.404)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_127", "data-name": "Trazado 127", d: "M926.32,913.565V907.2h2.309a3.184,3.184,0,1,1,.076,6.369H926.32Zm2.246-1.338a1.848,1.848,0,0,0,0-3.693h-.827v3.692Z", transform: "translate(-926.01 -893.006)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_128", "data-name": "Trazado 128", d: "M938.4,912.308l1.051-.161c.243-.036.323-.153.323-.306,0-.26-.225-.485-.656-.485a.718.718,0,0,0-.763.656l-1.186-.243a1.783,1.783,0,0,1,1.959-1.482c1.446,0,1.976.809,1.976,1.725V914.2a4.516,4.516,0,0,0,.053.692h-1.231a2.186,2.186,0,0,1-.045-.5,1.563,1.563,0,0,1-2.8-.727A1.374,1.374,0,0,1,938.4,912.308Zm1.374.826v-.2l-.844.135c-.286.045-.5.18-.5.494,0,.233.153.458.531.458.408,0,.821-.2.821-.889Z", transform: "translate(-930.608 -894.327)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_129", "data-name": "Trazado 129", d: "M945.79,916.7l1.015-2.318-1.878-3.863h1.527l1.087,2.39.989-2.39h1.447L947.23,916.7Z", transform: "translate(-933.967 -894.427)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_130", "data-name": "Trazado 130", d: "M955.37,913.412a.636.636,0,0,0,.666.6l.035,0c.351,0,.521-.188.521-.386,0-.162-.108-.3-.44-.368l-.515-.115c-.952-.207-1.329-.744-1.329-1.374a1.582,1.582,0,0,1,1.673-1.485l.044,0a1.584,1.584,0,0,1,1.787,1.33l-1.132.207a.586.586,0,0,0-.622-.549h-.016a.435.435,0,0,0-.484.379v.007c0,.188.153.3.351.333l.592.115c.925.188,1.374.744,1.374,1.4a1.576,1.576,0,0,1-1.779,1.509,1.679,1.679,0,0,1-1.889-1.4Z", transform: "translate(-937.936 -894.325)", fill: fill }, void 0)] }), void 0), jsxs$1("g", __assign$1({ id: "Grupo_46", "data-name": "Grupo 46", transform: "translate(0 0)" }, { children: [jsx$1("path", { id: "Trazado_129-2", "data-name": "Trazado 129", d: "M978.73,903.356a1.65,1.65,0,0,1-1.168-.48L973.682,899a1.431,1.431,0,1,1,2.023-2.023L978.732,900l3.026-3.026A1.431,1.431,0,1,1,983.781,899l-3.877,3.876A1.66,1.66,0,0,1,978.73,903.356Z", transform: "translate(-928.308 -876.111)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_130-2", "data-name": "Trazado 130", d: "M904.225,903.042a1.427,1.427,0,0,1-1.011-.419l-3.026-3.027-3.027,3.027a1.431,1.431,0,1,1-2.023-2.023l3.877-3.878a1.664,1.664,0,0,1,2.342,0l3.88,3.88a1.431,1.431,0,0,1-1.012,2.442Z", transform: "translate(-894.719 -875.977)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_131", "data-name": "Trazado 131", d: "M949.815,887.91a1,1,0,0,1-.11,0,1.431,1.431,0,0,1-1.316-1.536c.042-.538.062-1.083.062-1.621a21.05,21.05,0,0,0-39.941-9.285,1.431,1.431,0,0,1-2.568-1.263,23.912,23.912,0,0,1,45.371,10.548c0,.61-.023,1.229-.07,1.839A1.431,1.431,0,0,1,949.815,887.91Z", transform: "translate(-899.455 -860.837)", fill: fill }, void 0), jsx$1("path", { id: "Trazado_132", "data-name": "Trazado 132", d: "M925.664,923.938a23.945,23.945,0,0,1-23.891-23.924c0-.616.023-1.235.069-1.84a1.431,1.431,0,0,1,2.854.218c-.041.532-.061,1.078-.061,1.622a21.05,21.05,0,0,0,39.941,9.285,1.431,1.431,0,0,1,2.568,1.263,23.979,23.979,0,0,1-21.479,13.373Z", transform: "translate(-897.735 -876.239)", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
97
|
+
};
|
|
98
|
+
|
|
69
99
|
var Frown = function (_a) {
|
|
70
100
|
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
71
101
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 68, viewBoxY: 68, title: title, fill: "none" }, { children: [jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", fill: "".concat(fill, "b6") }, void 0), jsx$1("path", { d: "M64 34.0296C64.0064 29.5175 62.9753 25.0627 60.9841 21C59.9702 30.9185 58.3731 39.7073 49.0635 48.6699C39.8271 57.5622 25.9923 57.4947 9 50.0686C14.4495 58.1257 23.0411 64 33.6008 64C41.6631 64 49.3953 60.8424 55.0963 55.2219C60.7972 49.6013 64 41.9783 64 34.0296Z", fill: fill }, void 0), jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", stroke: "#292929", strokeWidth: "2", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M44.1292 48.8737C44.1292 48.8737 41.7372 42.8737 34.1292 42.8737C26.5212 42.8737 24.1292 48.8737 24.1292 48.8737", stroke: "#292929", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M24.6292 32.1304C24.6292 33.5111 23.5099 34.6304 22.1292 34.6304C20.7485 34.6304 19.6292 33.5111 19.6292 32.1304C19.6292 30.7497 20.7485 29.6304 22.1292 29.6304C23.5099 29.6304 24.6292 30.7497 24.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M48.6292 32.1304C48.6292 33.5111 47.5099 34.6304 46.1292 34.6304C44.7485 34.6304 43.6292 33.5111 43.6292 32.1304C43.6292 30.7497 44.7485 29.6304 46.1292 29.6304C47.5099 29.6304 48.6292 30.7497 48.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M14.7553 23.6181C16.5344 19.9142 19.3229 16.7876 22.8 14.5982C26.2771 12.4087 30.3017 11.2452 34.4107 11.2415", stroke: "white", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
|
|
@@ -144,6 +174,12 @@ var NewSixtyDaysGuarantee = function (_a) {
|
|
|
144
174
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
145
175
|
__proto__: null,
|
|
146
176
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
177
|
+
Bra: Bra,
|
|
178
|
+
Underwear: Underwear,
|
|
179
|
+
PacksAndBundles: PacksAndBundles,
|
|
180
|
+
SeamlessSupportBra: SeamlessSupportBra,
|
|
181
|
+
WireFreeComfort: WireFreeComfort,
|
|
182
|
+
SixtyDaysBold: SixtyDaysBold,
|
|
147
183
|
Frown: Frown,
|
|
148
184
|
Smiling: Smiling,
|
|
149
185
|
BulletOne: BulletOne,
|
|
@@ -475,7 +511,7 @@ var Play = function (_a) {
|
|
|
475
511
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 98, viewBoxY: 98, title: "Play", testId: testId, fill: "none" }, { children: [jsx$1("path", { d: "M76.3179 45.7861C79.1087 47.3808 79.1087 50.1716 76.3179 51.7663L34.8548 75.6874C32.064 77.2821 29.672 76.086 29.672 72.6972V24.8552C29.672 21.4664 32.064 20.2703 34.8548 21.8651L76.3179 45.7861Z", fill: fill }, void 0), jsx$1("circle", { cx: "49", cy: "49", r: "45", stroke: fill, strokeWidth: "8", fill: "none" }, void 0)] }), void 0));
|
|
476
512
|
};
|
|
477
513
|
|
|
478
|
-
var FitGuarantee = function (_a) {
|
|
514
|
+
var FitGuarantee$1 = function (_a) {
|
|
479
515
|
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
480
516
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 65, viewBoxY: 65, title: "fit guarantee", testId: testId }, { children: [jsx$1("mask", __assign$1({ id: "mask0_160_13321", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "65", height: "65" }, { children: jsx$1("circle", { cx: "32.5", cy: "32.5", r: "32.5", fill: "#fff" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#mask0_160_13321)" }, { children: [jsx$1("path", { d: "M67.3715 -1.48547H-2.22679V67.0832H67.3715V-1.48547Z", fill: "#F7A08B" }, void 0), jsx$1("g", __assign$1({ opacity: "0.2" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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));
|
|
481
517
|
};
|
|
@@ -537,7 +573,7 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
537
573
|
ShopNow: ShopNow,
|
|
538
574
|
HasselFreeReturns: HasselFreeReturns,
|
|
539
575
|
Play: Play,
|
|
540
|
-
FitGuarantee: FitGuarantee,
|
|
576
|
+
FitGuarantee: FitGuarantee$1,
|
|
541
577
|
QuestionWithCircle: QuestionWithCircle,
|
|
542
578
|
ExpressShipping: ExpressShipping,
|
|
543
579
|
ShapermintClubLabel: ShapermintClubLabel,
|
|
@@ -638,6 +674,11 @@ var CircleLineRight = function (_a) {
|
|
|
638
674
|
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 38, title: "circle line right" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 20C2 29.9411 10.0589 38 20 38C29.9411 38 38 29.9411 38 20C38 10.0589 29.9411 2 20 2C10.0589 2 2 10.0589 2 20ZM26.4555 18.9738H11.1077C10.4195 18.9738 9.93772 19.602 10.0065 20.2301C10.1442 20.7186 10.5571 21.0676 11.0389 21.0676H26.3867L22.3949 25.1854C22.0508 25.5344 21.982 26.0927 22.2573 26.5114C22.4637 26.8604 22.8079 27 23.152 27C23.4273 27 23.7026 26.9302 23.909 26.7208L29.6903 20.7884C30.1032 20.3697 30.1032 19.7415 29.6903 19.3228L23.909 13.3206C23.4961 12.8321 22.6702 12.9019 22.3261 13.53C22.0508 13.9487 22.1196 14.5071 22.4637 14.8561L26.4555 18.9738Z", fill: fill }, void 0) }), void 0));
|
|
639
675
|
};
|
|
640
676
|
|
|
677
|
+
var DoubleArrowUp = function (_a) {
|
|
678
|
+
var width = _a.width, height = _a.height; _a.fill;
|
|
679
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 1792, viewBoxY: 1792, title: "circle up" }, { children: jsx$1("path", { d: "M1395 1312q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23zm0-384q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z" }, void 0) }), void 0));
|
|
680
|
+
};
|
|
681
|
+
|
|
641
682
|
var Arrows = /*#__PURE__*/Object.freeze({
|
|
642
683
|
__proto__: null,
|
|
643
684
|
ChevronDown: ChevronDown,
|
|
@@ -657,7 +698,8 @@ var Arrows = /*#__PURE__*/Object.freeze({
|
|
|
657
698
|
CircleLineUp: CircleLineUp,
|
|
658
699
|
CircleLineDown: CircleLineDown,
|
|
659
700
|
CircleLineLeft: CircleLineLeft,
|
|
660
|
-
CircleLineRight: CircleLineRight
|
|
701
|
+
CircleLineRight: CircleLineRight,
|
|
702
|
+
DoubleArrowUp: DoubleArrowUp
|
|
661
703
|
});
|
|
662
704
|
|
|
663
705
|
var Clock = function (_a) {
|
|
@@ -730,6 +772,11 @@ var SizeEmpty = function (_a) {
|
|
|
730
772
|
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "size empty" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.4001 12H23.799V21C23.799 21.5523 23.3512 22 22.799 22C22.2467 22 21.799 21.5523 21.799 21V12H18.1977V17C18.1977 17.5523 17.75 18 17.1977 18C16.6454 18 16.1977 17.5523 16.1977 17V12H12.5931V21C12.5931 21.5523 12.1454 22 11.5931 22C11.0408 22 10.5931 21.5523 10.5931 21V12H6.99524V17C6.99524 17.5523 6.54752 18 5.99524 18C5.44295 18 4.99524 17.5523 4.99524 17V12H2V28H38V12H35.0013V21C35.0013 21.5523 34.5536 22 34.0013 22C33.4491 22 33.0013 21.5523 33.0013 21V12H29.4001V17C29.4001 17.5523 28.9524 18 28.4001 18C27.8479 18 27.4001 17.5523 27.4001 17V12ZM34.0013 10H28.4001H22.799H17.1977H11.5931H5.99524H2C0.895431 10 0 10.8954 0 12V28C0 29.1046 0.895431 30 2 30H38C39.1046 30 40 29.1046 40 28V12C40 10.8954 39.1046 10 38 10H34.0013Z", fill: fill }, void 0) }), void 0));
|
|
731
773
|
};
|
|
732
774
|
|
|
775
|
+
var SizeEmptyV2 = function (_a) {
|
|
776
|
+
var height = _a.height, width = _a.width; _a.fill;
|
|
777
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 29, viewBoxY: 13, title: "size empty" }, { children: jsxs$1("svg", __assign$1({ className: "icon-size-guide", width: "29", height: "13", viewBox: "0 0 29 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("rect", { x: "0.5", y: "0.5", width: "28", height: "12", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M4.25391 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M20.6465 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M12.4492 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M8.34961 2.69385V8.84254", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M16.5488 2.69385V8.84254", stroke: "#2A2A2A" }, void 0), jsx$1("path", { d: "M24.7461 2.69385V8.84254", stroke: "#2A2A2A" }, void 0)] }), void 0) }), void 0));
|
|
778
|
+
};
|
|
779
|
+
|
|
733
780
|
var PlayMini = function (_a) {
|
|
734
781
|
var height = _a.height, width = _a.width; _a.fill;
|
|
735
782
|
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, fill: "none", title: "play mini" }, { children: [jsx$1("path", { d: "M26.5973 19.1975L18.5425 13.1907C18.2469 12.9709 17.8545 12.9378 17.5305 13.1086C17.204 13.2781 17 13.6224 17 13.9945V26.0042C17 26.3803 17.204 26.7232 17.5305 26.8927C17.6686 26.9642 17.8197 27 17.972 27C18.1708 27 18.3721 26.9351 18.5425 26.8067L26.5973 20.8052C26.8515 20.6131 27 20.3165 27 20.0013C27.0013 19.6809 26.849 19.3856 26.5973 19.1975Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M20 2C10.0589 2 2 10.0589 2 20C2 29.9411 10.0589 38 20 38C29.9411 38 38 29.9411 38 20C38 10.0589 29.9411 2 20 2Z", stroke: "#292929", strokeWidth: "2" }, void 0)] }), void 0));
|
|
@@ -796,6 +843,7 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
796
843
|
ErrorCross: ErrorCross,
|
|
797
844
|
CircleNumber: CircleNumber,
|
|
798
845
|
SizeEmpty: SizeEmpty,
|
|
846
|
+
SizeEmptyV2: SizeEmptyV2,
|
|
799
847
|
PlayMini: PlayMini,
|
|
800
848
|
ShippingEmpty: ShippingEmpty,
|
|
801
849
|
Drop: Drop,
|
|
@@ -980,6 +1028,11 @@ var ShoppingCartV2 = function (_a) {
|
|
|
980
1028
|
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "Shopping cart v2" }, { children: jsx$1("path", { d: "M9.82547 25.2855C10.4093 25.5724 11.0307 25.7113 11.6804 25.7113C18.4222 25.7113 25.1546 25.7205 31.8965 25.702C34.1186 25.6928 35.9359 23.9527 35.9736 21.7685C36.0206 18.9456 35.9924 16.1319 35.983 13.309C35.983 12.7722 35.6252 12.3835 35.0696 12.3002C33.3183 12.0595 31.5575 11.8282 29.8061 11.5875C27.1414 11.2266 24.4767 10.8656 21.8214 10.5046C18.9684 10.1159 16.1153 9.72718 13.2717 9.33846C12.0476 9.17186 10.8236 9.00526 9.57124 8.83866C9.57124 8.69058 9.57124 8.561 9.57124 8.44068C9.57124 7.47812 9.57124 6.52481 9.57124 5.56225C9.57124 4.83107 9.41117 4.59969 8.71439 4.31277C8.23418 4.10915 7.74455 3.91479 7.26433 3.72042C5.95552 3.1651 4.6467 2.61903 3.32846 2.06371C3.2908 2.0452 3.25314 2.03594 3.21547 2.02669C3.03657 1.98041 2.80117 1.98966 2.56577 2.09147C2.29271 2.20254 1.98198 2.53573 2.00082 3.06329C2.01965 3.60936 2.38687 3.86851 2.85767 4.06287C4.28889 4.64596 5.72012 5.25682 7.15134 5.83066C7.38674 5.92321 7.53739 6.1546 7.53739 6.40449C7.52798 13.5126 7.52798 20.6115 7.52798 27.7197C7.52798 27.84 7.52798 27.9603 7.53739 28.0806C7.67863 29.7003 8.49782 30.8758 10.0044 31.5607C10.3528 31.718 10.7294 31.8106 11.0966 31.9216C9.91963 34.1337 10.833 36.0588 11.9911 37.0306C13.3753 38.1783 15.3526 38.3079 16.8686 37.3361C17.6125 36.8548 18.1586 36.1976 18.4693 35.3739C18.9119 34.2077 18.7706 33.0786 18.2057 31.9772H27.2732C26.9248 32.6065 26.7365 33.2452 26.7365 33.9208C26.7554 35.6423 27.5745 36.8918 29.1376 37.6322C30.5971 38.3171 32.3767 38.021 33.5631 36.9473C34.7966 35.8274 35.2297 34.1615 34.6836 32.6528C34.0715 30.9498 32.5556 29.941 30.5971 29.9317C24.4202 29.9317 18.2339 29.9317 12.0571 29.9317C11.8876 29.9317 11.7275 29.9317 11.558 29.9225C10.494 29.8669 9.62774 29.1265 9.56182 28.0806C9.49591 27.1273 9.55241 26.1648 9.55241 25.1837C9.67482 25.23 9.75014 25.2485 9.82547 25.2855ZM30.9266 31.9402C32.0565 31.9772 32.9416 32.8935 32.9228 33.9949C32.904 35.1148 31.953 36.0033 30.8136 35.9755C29.6931 35.9477 28.7704 35.0222 28.7892 33.9393C28.808 32.8102 29.7779 31.9031 30.9266 31.9402ZM14.7123 31.9402C15.8611 31.9679 16.7556 32.8842 16.7274 34.0134C16.6991 35.1425 15.7575 36.0218 14.6182 35.9848C13.4883 35.9477 12.6032 35.0407 12.622 33.9301C12.6314 32.8009 13.573 31.9124 14.7123 31.9402ZM9.56182 11.0414C9.56182 10.9952 9.57124 10.9489 9.58066 10.8563C10.6258 10.9952 11.6427 11.134 12.6503 11.2728C15.3338 11.6338 18.0268 12.004 20.7103 12.365C23.5539 12.7537 26.3881 13.1332 29.2317 13.5126C30.7006 13.7163 32.1789 13.9106 33.6478 14.1142C33.8079 14.1328 33.9491 14.142 33.9491 14.3641C33.9397 16.8076 33.968 19.2602 33.9209 21.7037C33.8926 22.9346 32.9981 23.6936 31.727 23.7214C31.3315 23.7306 30.9454 23.7214 30.55 23.7214C24.3449 23.7214 18.1398 23.7214 11.9441 23.7214C11.0025 23.7214 10.2304 23.4159 9.79722 22.5552C9.65598 22.2683 9.57124 21.9258 9.57124 21.6111C9.56182 18.0941 9.56182 14.5678 9.56182 11.0414Z", fill: fill }, void 0) }), void 0));
|
|
981
1029
|
};
|
|
982
1030
|
|
|
1031
|
+
var ShoppingBagV3 = function (_a) {
|
|
1032
|
+
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.testId, testId = _b === void 0 ? 'shopping-bag-icon' : _b;
|
|
1033
|
+
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 1024, viewBoxY: 1024, title: "Shopping bag v3", testId: testId }, { children: jsx$1("path", { fill: fill, d: "M1022.736 942.64l-83.408-503.776c-7.44-65.312-66.976-118.432-132.72-118.432h-70.656v-85.28c0-130.16-92.848-236.032-222.976-236.032-130.096 0-224.944 105.872-224.944 236.032v85.28H211.36c-65.744 0-125.28 53.12-132.528 117.056l-77.28 504.16c-2.976 26.56 2.224 47.504 15.408 62.288 12.432 13.904 30.528 20.976 53.744 20.976h873.568c32.912 0 51.776-13.216 61.84-24.32 9.216-10.208 19.648-28.144 16.624-57.952zM352.048 235.136c0-94.848 66.128-172.032 160.944-172.032s158.976 77.184 158.976 172.032v85.28h-319.92v-85.28zm595.12 725.312l-872.496.448c-5.504 0-11.008-2.944-9.712-10.688l77.248-504.096c3.84-33.44 35.504-61.68 69.152-61.68h76.688v72.928C268.976 468.432 256 488.848 256 512.496c0 35.344 28.656 64 64 64s64-28.656 64-64c0-23.616-12.928-44-31.952-55.088v-72.992h319.904v72.992C652.944 468.496 640 488.896 640 512.496c0 35.344 28.656 64 64 64s64-28.656 64-64c0-23.648-12.976-44.064-32.048-55.152v-72.928h70.656c33.664 0 65.312 28.256 69.408 63.44l83.344 503.28c.4 4.096-2.816 9.312-12.192 9.312z" }, void 0) }), void 0));
|
|
1034
|
+
};
|
|
1035
|
+
|
|
983
1036
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
984
1037
|
__proto__: null,
|
|
985
1038
|
Search: Search,
|
|
@@ -1005,9 +1058,15 @@ var Navigation = /*#__PURE__*/Object.freeze({
|
|
|
1005
1058
|
Loading: Loading,
|
|
1006
1059
|
MapSolid: MapSolid,
|
|
1007
1060
|
UserV2: UserV2,
|
|
1008
|
-
ShoppingCartV2: ShoppingCartV2
|
|
1061
|
+
ShoppingCartV2: ShoppingCartV2,
|
|
1062
|
+
ShoppingBagV3: ShoppingBagV3
|
|
1009
1063
|
});
|
|
1010
1064
|
|
|
1065
|
+
var AdaChat = function (_a) {
|
|
1066
|
+
var height = _a.height, width = _a.width; _a.fill;
|
|
1067
|
+
return (jsxs$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 533, viewBoxY: 482, title: "Comment" }, { children: [jsx$1("path", { d: "M337.247 206.979C337.247 194.137 347.455 183.715 360.033 183.715C372.612 183.715 382.82 194.137 382.82 206.979C382.82 219.821 372.612 230.243 360.033 230.243C347.455 230.243 337.247 219.821 337.247 206.979Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M246.099 206.979C246.099 194.137 256.308 183.715 268.886 183.715C281.465 183.715 291.673 194.137 291.673 206.979C291.673 219.821 281.465 230.243 268.886 230.243C256.308 230.243 246.099 219.821 246.099 206.979Z", fill: "#292929" }, void 0), jsx$1("path", { d: "M154.952 206.979C154.952 194.137 165.16 183.715 177.739 183.715C190.317 183.715 200.526 194.137 200.526 206.979C200.526 219.821 190.317 230.243 177.739 230.243C165.16 230.243 154.952 219.821 154.952 206.979Z", fill: "#292929" }, void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M91.7212 78.7285H441.279C446.55 78.7285 450.823 83.0016 450.823 88.2728V319.721C450.823 324.991 446.55 329.265 441.279 329.265H91.7212C86.4501 329.265 82.1769 324.991 82.1769 319.721V88.2728C82.1769 83.0016 86.4501 78.7285 91.7212 78.7285ZM44 88.2728C44 61.9171 65.3655 40.5516 91.7212 40.5516H441.279C467.634 40.5516 489 61.9171 489 88.2728V319.721C489 346.076 467.634 367.442 441.279 367.442H373.276V403.833V405.58V418.603V430.89C373.276 440.113 362.417 445.044 355.473 438.976L346.221 430.89L336.414 422.32L335.099 421.171L284.537 376.986L281.483 374.318L273.615 367.442H91.7212C65.3655 367.442 44 346.077 44 319.721V88.2728Z", fill: "#292929" }, void 0)] }), void 0));
|
|
1068
|
+
};
|
|
1069
|
+
|
|
1011
1070
|
var QuestionCircle = function (_a) {
|
|
1012
1071
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
1013
1072
|
return (jsx$1(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 38, title: "Question circle" }, { children: jsx$1("path", { d: "M19 0C8.50733 0 0 8.51039 0 19C0 29.4957 8.50733 38 19 38C29.4927 38 38 29.4957 38 19C38 8.51039 29.4927 0 19 0ZM19 34.3226C10.5318 34.3226 3.67742 27.471 3.67742 19C3.67742 10.5347 10.5321 3.67742 19 3.67742C27.465 3.67742 34.3226 10.5321 34.3226 19C34.3226 27.468 27.471 34.3226 19 34.3226ZM27.2163 14.771C27.2163 19.908 21.6679 19.9871 21.6679 21.8855V22.371C21.6679 22.8787 21.2563 23.2903 20.7485 23.2903H17.2514C16.7437 23.2903 16.332 22.8787 16.332 22.371V21.7076C16.332 18.969 18.4082 17.8743 19.9772 16.9947C21.3226 16.2404 22.1472 15.7274 22.1472 14.7285C22.1472 13.4073 20.4618 12.5303 19.0992 12.5303C17.3226 12.5303 16.5025 13.3713 15.3496 14.8263C15.0388 15.2185 14.4716 15.2914 14.0728 14.989L11.9411 13.3726C11.5499 13.076 11.4622 12.5248 11.7386 12.119C13.5487 9.461 15.8543 7.96774 19.4439 7.96774C23.2034 7.96774 27.2163 10.9023 27.2163 14.771ZM22.2177 27.5806C22.2177 29.3549 20.7743 30.7984 19 30.7984C17.2257 30.7984 15.7823 29.3549 15.7823 27.5806C15.7823 25.8064 17.2257 24.3629 19 24.3629C20.7743 24.3629 22.2177 25.8064 22.2177 27.5806Z", fill: fill }, void 0) }), void 0));
|
|
@@ -1085,6 +1144,7 @@ var CommentMoney = function (_a) {
|
|
|
1085
1144
|
|
|
1086
1145
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
1087
1146
|
__proto__: null,
|
|
1147
|
+
AdaChat: AdaChat,
|
|
1088
1148
|
QuestionCircle: QuestionCircle,
|
|
1089
1149
|
Messenger: Messenger,
|
|
1090
1150
|
Comment: Comment$1,
|
|
@@ -4208,7 +4268,7 @@ var InputValidationType;
|
|
|
4208
4268
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4209
4269
|
})(InputValidationType || (InputValidationType = {}));
|
|
4210
4270
|
|
|
4211
|
-
var Section = newStyled.div(templateObject_1$
|
|
4271
|
+
var Section = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
4212
4272
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4213
4273
|
});
|
|
4214
4274
|
var CardHeader = function (_a) {
|
|
@@ -4219,14 +4279,14 @@ var CardFooter = function (_a) {
|
|
|
4219
4279
|
var children = _a.children;
|
|
4220
4280
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4221
4281
|
};
|
|
4222
|
-
var templateObject_1$
|
|
4282
|
+
var templateObject_1$1I;
|
|
4223
4283
|
|
|
4224
|
-
var Body = newStyled.div(templateObject_1$
|
|
4284
|
+
var Body = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
4225
4285
|
var CardBody = function (_a) {
|
|
4226
4286
|
var children = _a.children;
|
|
4227
4287
|
return jsx$1(Body, { children: children }, void 0);
|
|
4228
4288
|
};
|
|
4229
|
-
var templateObject_1$
|
|
4289
|
+
var templateObject_1$1H;
|
|
4230
4290
|
|
|
4231
4291
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4232
4292
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4371,7 +4431,7 @@ var AssetsProvider = function (_a) {
|
|
|
4371
4431
|
};
|
|
4372
4432
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4373
4433
|
|
|
4374
|
-
var Container$
|
|
4434
|
+
var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
4375
4435
|
var flex = _a.flex;
|
|
4376
4436
|
return flex &&
|
|
4377
4437
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4386,14 +4446,14 @@ var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
4386
4446
|
var Card$2 = function (_a) {
|
|
4387
4447
|
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;
|
|
4388
4448
|
var theme = useTheme();
|
|
4389
|
-
return (jsx$1(Container$
|
|
4449
|
+
return (jsx$1(Container$17, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4390
4450
|
};
|
|
4391
4451
|
var Card$3 = Object.assign(Card$2, {
|
|
4392
4452
|
Header: CardHeader,
|
|
4393
4453
|
Footer: CardFooter,
|
|
4394
4454
|
Body: CardBody,
|
|
4395
4455
|
});
|
|
4396
|
-
var templateObject_1$
|
|
4456
|
+
var templateObject_1$1G;
|
|
4397
4457
|
|
|
4398
4458
|
var Fragment = Fragment$1;
|
|
4399
4459
|
function jsx(type, props, key) {
|
|
@@ -4425,7 +4485,7 @@ var BaseButton = function (_a) {
|
|
|
4425
4485
|
}, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
4426
4486
|
};
|
|
4427
4487
|
|
|
4428
|
-
var getStylesBySize$
|
|
4488
|
+
var getStylesBySize$e = function (size, theme) {
|
|
4429
4489
|
switch (size) {
|
|
4430
4490
|
case ComponentSize.Large:
|
|
4431
4491
|
return {
|
|
@@ -4452,7 +4512,7 @@ var getStylesBySize$b = function (size, theme) {
|
|
|
4452
4512
|
var BaseCTA = function (_a) {
|
|
4453
4513
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
4454
4514
|
var theme = useTheme();
|
|
4455
|
-
var stylesBySize = getStylesBySize$
|
|
4515
|
+
var stylesBySize = getStylesBySize$e(size, theme);
|
|
4456
4516
|
return (jsx(BaseButton, __assign$1({}, props, { css: __assign$1(__assign$1({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
|
|
4457
4517
|
backgroundColor: theme.colors.background.disabled,
|
|
4458
4518
|
color: theme.colors.text.disabled,
|
|
@@ -4539,7 +4599,7 @@ function BaseSelectOption(_a) {
|
|
|
4539
4599
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4540
4600
|
}
|
|
4541
4601
|
|
|
4542
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4602
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4543
4603
|
function BaseSelect(_a) {
|
|
4544
4604
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4545
4605
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4549,7 +4609,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4549
4609
|
Options: BaseSelectOptions,
|
|
4550
4610
|
Option: BaseSelectOption,
|
|
4551
4611
|
});
|
|
4552
|
-
var templateObject_1$
|
|
4612
|
+
var templateObject_1$1F;
|
|
4553
4613
|
|
|
4554
4614
|
var CustomButton = newStyled.button(function (_a) {
|
|
4555
4615
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4608,14 +4668,14 @@ var withLabel = function (Button, label) {
|
|
|
4608
4668
|
};
|
|
4609
4669
|
};
|
|
4610
4670
|
|
|
4611
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4612
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4671
|
+
var ErrorText = newStyled.h3(templateObject_1$1E || (templateObject_1$1E = __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; });
|
|
4672
|
+
var ErrorContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
4613
4673
|
var Error$1 = function (_a) {
|
|
4614
4674
|
var error = _a.error;
|
|
4615
4675
|
var theme = useTheme();
|
|
4616
4676
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4617
4677
|
};
|
|
4618
|
-
var templateObject_1$
|
|
4678
|
+
var templateObject_1$1E, templateObject_2$17;
|
|
4619
4679
|
|
|
4620
4680
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4621
4681
|
var theme = _a.theme;
|
|
@@ -4634,6 +4694,7 @@ var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
|
4634
4694
|
width: '100%',
|
|
4635
4695
|
color: theme.colors.shades['700'].color,
|
|
4636
4696
|
zIndex: 10,
|
|
4697
|
+
overflow: theme.component.dropdown.optionsWrapper.overflow,
|
|
4637
4698
|
});
|
|
4638
4699
|
});
|
|
4639
4700
|
var BaseDropdownOptions = function (_a) {
|
|
@@ -4781,7 +4842,7 @@ var CustomCheckboxStyles = {
|
|
|
4781
4842
|
},
|
|
4782
4843
|
};
|
|
4783
4844
|
|
|
4784
|
-
var Container$
|
|
4845
|
+
var Container$16 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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"])));
|
|
4785
4846
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4786
4847
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4787
4848
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4792,7 +4853,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4792
4853
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4793
4854
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4794
4855
|
]; });
|
|
4795
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4856
|
+
var Input$5 = newStyled.input(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
4796
4857
|
var disabled = _a.disabled;
|
|
4797
4858
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4798
4859
|
});
|
|
@@ -4806,9 +4867,9 @@ var Checkbox = function (_a) {
|
|
|
4806
4867
|
}
|
|
4807
4868
|
onChange(e.target.checked);
|
|
4808
4869
|
};
|
|
4809
|
-
return (jsxs$1(Container$
|
|
4870
|
+
return (jsxs$1(Container$16, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4810
4871
|
};
|
|
4811
|
-
var templateObject_1$
|
|
4872
|
+
var templateObject_1$1D, templateObject_2$16;
|
|
4812
4873
|
|
|
4813
4874
|
var CustomOption = newStyled.li(function (_a) {
|
|
4814
4875
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4821,7 +4882,7 @@ var CustomOption = newStyled.li(function (_a) {
|
|
|
4821
4882
|
cursor: 'pointer',
|
|
4822
4883
|
padding: theme.component.dropdown.optionPadding,
|
|
4823
4884
|
justifyContent: 'flex-start',
|
|
4824
|
-
borderRadius: theme.component.dropdown.options.
|
|
4885
|
+
borderRadius: theme.component.dropdown.options.borderRadiusV2 || 'inherit',
|
|
4825
4886
|
width: '100%',
|
|
4826
4887
|
boxSizing: 'border-box',
|
|
4827
4888
|
fontWeight: selected ? 600 : 'inherit',
|
|
@@ -4857,8 +4918,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4857
4918
|
Option: BaseDropdownOption,
|
|
4858
4919
|
});
|
|
4859
4920
|
|
|
4860
|
-
var Container$
|
|
4861
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4921
|
+
var Container$15 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
4922
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
4862
4923
|
function SimpleDropdown(_a) {
|
|
4863
4924
|
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;
|
|
4864
4925
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4888,25 +4949,26 @@ function SimpleDropdown(_a) {
|
|
|
4888
4949
|
setSelectedValue(value);
|
|
4889
4950
|
}, [value, options, initialValue]);
|
|
4890
4951
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4891
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4952
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$15 : Fragment$2;
|
|
4892
4953
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4893
4954
|
}
|
|
4894
|
-
var templateObject_1$
|
|
4955
|
+
var templateObject_1$1C, templateObject_2$15;
|
|
4895
4956
|
|
|
4896
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4897
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4898
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4899
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4957
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
4958
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$14 || (templateObject_2$14 = __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 border-radius: ", ";\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 overflow: hidden;\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 border-radius: ", ";\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 overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4959
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
4960
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
4900
4961
|
var DropdownDialog = function (_a) {
|
|
4901
4962
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4902
|
-
|
|
4963
|
+
var theme = useTheme$1();
|
|
4964
|
+
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius }, { children: options.map(function (_a, idx) {
|
|
4903
4965
|
var label = _a.label, value = _a.value;
|
|
4904
4966
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4905
4967
|
}) }), void 0) }), void 0));
|
|
4906
4968
|
};
|
|
4907
|
-
var templateObject_1$
|
|
4969
|
+
var templateObject_1$1B, templateObject_2$14, templateObject_3$S, templateObject_4$D;
|
|
4908
4970
|
|
|
4909
|
-
var getStylesBySize$
|
|
4971
|
+
var getStylesBySize$d = function (size, theme) {
|
|
4910
4972
|
switch (size) {
|
|
4911
4973
|
case ComponentSize.Medium:
|
|
4912
4974
|
return {
|
|
@@ -4923,7 +4985,7 @@ var getStylesBySize$a = function (size, theme) {
|
|
|
4923
4985
|
var SimpleSelector = function (_a) {
|
|
4924
4986
|
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick, id = _a.id;
|
|
4925
4987
|
var theme = useTheme();
|
|
4926
|
-
var stylesBySize = getStylesBySize$
|
|
4988
|
+
var stylesBySize = getStylesBySize$d(size, theme);
|
|
4927
4989
|
var activeStyles = active
|
|
4928
4990
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4929
4991
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
@@ -4972,14 +5034,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4972
5034
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4973
5035
|
// `variants` styles that are consistent through all themes.
|
|
4974
5036
|
var TAGS = {
|
|
4975
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4976
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4977
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4978
|
-
display1: newStyled.h1(templateObject_4$
|
|
4979
|
-
display2: newStyled.h2(templateObject_5$
|
|
4980
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4981
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4982
|
-
heading3: newStyled.h3(templateObject_8$
|
|
5037
|
+
hero1: newStyled.h1(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""]))),
|
|
5038
|
+
hero2: newStyled.h2(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject([""], [""]))),
|
|
5039
|
+
hero3: newStyled.h3(templateObject_3$R || (templateObject_3$R = __makeTemplateObject([""], [""]))),
|
|
5040
|
+
display1: newStyled.h1(templateObject_4$C || (templateObject_4$C = __makeTemplateObject([""], [""]))),
|
|
5041
|
+
display2: newStyled.h2(templateObject_5$q || (templateObject_5$q = __makeTemplateObject([""], [""]))),
|
|
5042
|
+
heading1: newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
5043
|
+
heading2: newStyled.h2(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
|
|
5044
|
+
heading3: newStyled.h3(templateObject_8$b || (templateObject_8$b = __makeTemplateObject([""], [""]))),
|
|
4983
5045
|
heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4984
5046
|
heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
|
|
4985
5047
|
heading6: newStyled.h6(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -5104,9 +5166,9 @@ var DEFAULTS = {
|
|
|
5104
5166
|
size: 'regular',
|
|
5105
5167
|
},
|
|
5106
5168
|
};
|
|
5107
|
-
var templateObject_1$
|
|
5169
|
+
var templateObject_1$1A, templateObject_2$13, templateObject_3$R, templateObject_4$C, templateObject_5$q, templateObject_6$o, templateObject_7$g, templateObject_8$b, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
|
|
5108
5170
|
|
|
5109
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5171
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
5110
5172
|
var inline = _a.inline;
|
|
5111
5173
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5112
5174
|
});
|
|
@@ -5125,9 +5187,9 @@ var SizeSelector = function (_a) {
|
|
|
5125
5187
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5126
5188
|
}) }), void 0)] }), void 0));
|
|
5127
5189
|
};
|
|
5128
|
-
var templateObject_1$
|
|
5190
|
+
var templateObject_1$1z;
|
|
5129
5191
|
|
|
5130
|
-
var getStylesBySize$
|
|
5192
|
+
var getStylesBySize$c = function (size) {
|
|
5131
5193
|
switch (size) {
|
|
5132
5194
|
case ComponentSize.Large:
|
|
5133
5195
|
case ComponentSize.Medium:
|
|
@@ -5145,14 +5207,14 @@ var getStylesBySize$9 = function (size) {
|
|
|
5145
5207
|
}
|
|
5146
5208
|
};
|
|
5147
5209
|
var textButtonStyles$1 = function (theme, size) {
|
|
5148
|
-
var stylesBySize = getStylesBySize$
|
|
5210
|
+
var stylesBySize = getStylesBySize$c(size);
|
|
5149
5211
|
return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontFamily: theme.fonts.config[0].family, lineHeight: theme.component.textButton.lineHeight, fontWeight: theme.component.textButton.fontWeight, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
|
|
5150
5212
|
color: theme.colors.shades['250'].color,
|
|
5151
5213
|
textDecorationLine: 'none',
|
|
5152
5214
|
} });
|
|
5153
5215
|
};
|
|
5154
5216
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5155
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5217
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1y || (templateObject_1$1y = __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));
|
|
5156
5218
|
};
|
|
5157
5219
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5158
5220
|
if (disabled)
|
|
@@ -5168,22 +5230,22 @@ var TextButton = function (_a) {
|
|
|
5168
5230
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5169
5231
|
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));
|
|
5170
5232
|
};
|
|
5171
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1y;
|
|
5172
5234
|
|
|
5173
|
-
var Container$
|
|
5174
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
5175
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5235
|
+
var Container$14 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5236
|
+
var P$3 = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5237
|
+
var PercentageSpan = newStyled.span(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
5176
5238
|
var SizeFitGuide = function (_a) {
|
|
5177
5239
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5178
|
-
return (jsxs$1(Container$
|
|
5240
|
+
return (jsxs$1(Container$14, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5179
5241
|
};
|
|
5180
|
-
var templateObject_1$
|
|
5242
|
+
var templateObject_1$1x, templateObject_2$12, templateObject_3$Q;
|
|
5181
5243
|
|
|
5182
|
-
var getStylesBySize$
|
|
5244
|
+
var getStylesBySize$b = function (size, bordersRounded) {
|
|
5183
5245
|
switch (size) {
|
|
5184
5246
|
case ComponentSize.Large:
|
|
5185
5247
|
return {
|
|
5186
|
-
borderRadius: '0.375rem',
|
|
5248
|
+
borderRadius: bordersRounded ? '18px' : '0.375rem',
|
|
5187
5249
|
padding: '0 0.75rem',
|
|
5188
5250
|
fontSize: '0.875rem',
|
|
5189
5251
|
lineHeight: '1.125rem',
|
|
@@ -5191,7 +5253,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5191
5253
|
};
|
|
5192
5254
|
case ComponentSize.Medium:
|
|
5193
5255
|
return {
|
|
5194
|
-
borderRadius: '0.25rem',
|
|
5256
|
+
borderRadius: bordersRounded ? '18px' : '0.25rem',
|
|
5195
5257
|
padding: '0 0.5rem',
|
|
5196
5258
|
fontSize: '0.75rem',
|
|
5197
5259
|
lineHeight: '1rem',
|
|
@@ -5199,7 +5261,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5199
5261
|
};
|
|
5200
5262
|
case ComponentSize.Small:
|
|
5201
5263
|
return {
|
|
5202
|
-
borderRadius: '0.25rem',
|
|
5264
|
+
borderRadius: bordersRounded ? '20px' : '0.25rem',
|
|
5203
5265
|
padding: '0',
|
|
5204
5266
|
fontSize: '0.625rem',
|
|
5205
5267
|
lineHeight: '0.75rem',
|
|
@@ -5207,7 +5269,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5207
5269
|
};
|
|
5208
5270
|
}
|
|
5209
5271
|
};
|
|
5210
|
-
var Container$
|
|
5272
|
+
var Container$13 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
5211
5273
|
var backgroundColor = _a.backgroundColor;
|
|
5212
5274
|
return backgroundColor;
|
|
5213
5275
|
}, function (_a) {
|
|
@@ -5215,38 +5277,38 @@ var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = _
|
|
|
5215
5277
|
return borderColor;
|
|
5216
5278
|
}, function (_a) {
|
|
5217
5279
|
var _b;
|
|
5218
|
-
var size = _a.size;
|
|
5219
|
-
return (_b = getStylesBySize$
|
|
5280
|
+
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5281
|
+
return (_b = getStylesBySize$b(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5220
5282
|
}, function (_a) {
|
|
5221
5283
|
var _b;
|
|
5222
5284
|
var size = _a.size;
|
|
5223
|
-
return (_b = getStylesBySize$
|
|
5285
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5224
5286
|
}, function (_a) {
|
|
5225
5287
|
var size = _a.size;
|
|
5226
5288
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5227
5289
|
}, function (_a) {
|
|
5228
5290
|
var _b;
|
|
5229
5291
|
var size = _a.size;
|
|
5230
|
-
return (_b = getStylesBySize$
|
|
5292
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5231
5293
|
});
|
|
5232
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5294
|
+
var H3$3 = newStyled.h3(templateObject_2$11 || (templateObject_2$11 = __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) {
|
|
5233
5295
|
var textColor = _a.textColor;
|
|
5234
5296
|
return textColor;
|
|
5235
5297
|
}, function (_a) {
|
|
5236
5298
|
var _b;
|
|
5237
5299
|
var size = _a.size;
|
|
5238
|
-
return (_b = getStylesBySize$
|
|
5300
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5239
5301
|
}, function (_a) {
|
|
5240
5302
|
var _b;
|
|
5241
5303
|
var size = _a.size;
|
|
5242
|
-
return (_b = getStylesBySize$
|
|
5304
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5243
5305
|
});
|
|
5244
5306
|
var DiscountTag = function (_a) {
|
|
5245
|
-
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style;
|
|
5307
|
+
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5246
5308
|
var theme = useTheme();
|
|
5247
|
-
return (jsx$1(Container$
|
|
5309
|
+
return (jsx$1(Container$13, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5248
5310
|
};
|
|
5249
|
-
var templateObject_1$
|
|
5311
|
+
var templateObject_1$1w, templateObject_2$11;
|
|
5250
5312
|
|
|
5251
5313
|
function getWindowDimensions() {
|
|
5252
5314
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5272,7 +5334,7 @@ var useWindowDimensions = function (breakpoints) {
|
|
|
5272
5334
|
};
|
|
5273
5335
|
};
|
|
5274
5336
|
|
|
5275
|
-
var getStylesBySize$
|
|
5337
|
+
var getStylesBySize$a = function (size) {
|
|
5276
5338
|
switch (size) {
|
|
5277
5339
|
case ComponentSize.Large:
|
|
5278
5340
|
return {
|
|
@@ -5300,8 +5362,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5300
5362
|
};
|
|
5301
5363
|
}
|
|
5302
5364
|
};
|
|
5303
|
-
var Container$
|
|
5304
|
-
var Price = newStyled.p(templateObject_2$
|
|
5365
|
+
var Container$12 = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5366
|
+
var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __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) {
|
|
5305
5367
|
var weight = _a.weight;
|
|
5306
5368
|
return (weight ? weight : '400');
|
|
5307
5369
|
}, function (_a) {
|
|
@@ -5309,13 +5371,13 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5309
5371
|
var size = _a.size, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
|
|
5310
5372
|
return finalPriceStyled || finalPriceStyledSmall
|
|
5311
5373
|
? finalPriceStyledSmall
|
|
5312
|
-
? (_b = getStylesBySize$
|
|
5313
|
-
: (_c = getStylesBySize$
|
|
5314
|
-
: (_d = getStylesBySize$
|
|
5374
|
+
? (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
|
|
5375
|
+
: (_c = getStylesBySize$a(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
|
|
5376
|
+
: (_d = getStylesBySize$a(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
|
|
5315
5377
|
}, function (_a) {
|
|
5316
5378
|
var _b;
|
|
5317
5379
|
var size = _a.size;
|
|
5318
|
-
return (_b = getStylesBySize$
|
|
5380
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5319
5381
|
}, function (_a) {
|
|
5320
5382
|
var color = _a.color;
|
|
5321
5383
|
return color;
|
|
@@ -5325,15 +5387,15 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5325
5387
|
}, function (_a) {
|
|
5326
5388
|
var _b;
|
|
5327
5389
|
var margin = _a.margin, size = _a.size;
|
|
5328
|
-
return (margin ? (_b = getStylesBySize$
|
|
5390
|
+
return (margin ? (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5329
5391
|
}, function (_a) {
|
|
5330
5392
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5331
5393
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5332
5394
|
});
|
|
5333
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5395
|
+
var TagContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5334
5396
|
var _b;
|
|
5335
5397
|
var size = _a.size;
|
|
5336
|
-
return (_b = getStylesBySize$
|
|
5398
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5337
5399
|
});
|
|
5338
5400
|
function getTestId() {
|
|
5339
5401
|
var args = [];
|
|
@@ -5361,11 +5423,11 @@ var PriceLabel = function (_a) {
|
|
|
5361
5423
|
: ComponentSize.XSmall;
|
|
5362
5424
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0));
|
|
5363
5425
|
};
|
|
5364
|
-
return (jsxs$1(Container$
|
|
5426
|
+
return (jsxs$1(Container$12, { children: [clubStyle ? (jsxs$1(Fragment$1, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$1, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5365
5427
|
};
|
|
5366
|
-
var templateObject_1$
|
|
5428
|
+
var templateObject_1$1v, templateObject_2$10, templateObject_3$P;
|
|
5367
5429
|
|
|
5368
|
-
var getStylesBySize$
|
|
5430
|
+
var getStylesBySize$9 = function (size) {
|
|
5369
5431
|
switch (size) {
|
|
5370
5432
|
case ComponentSize.Large:
|
|
5371
5433
|
return {
|
|
@@ -5393,7 +5455,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5393
5455
|
};
|
|
5394
5456
|
}
|
|
5395
5457
|
};
|
|
5396
|
-
var Container
|
|
5458
|
+
var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
5397
5459
|
var backgroundColor = _a.backgroundColor;
|
|
5398
5460
|
return backgroundColor;
|
|
5399
5461
|
}, function (_a) {
|
|
@@ -5402,42 +5464,42 @@ var Container$$ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __
|
|
|
5402
5464
|
}, function (_a) {
|
|
5403
5465
|
var _b;
|
|
5404
5466
|
var size = _a.size;
|
|
5405
|
-
return (_b = getStylesBySize$
|
|
5467
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5406
5468
|
}, function (_a) {
|
|
5407
5469
|
var _b;
|
|
5408
5470
|
var size = _a.size;
|
|
5409
|
-
return (_b = getStylesBySize$
|
|
5471
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5410
5472
|
}, function (_a) {
|
|
5411
5473
|
var size = _a.size;
|
|
5412
5474
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5413
5475
|
}, function (_a) {
|
|
5414
5476
|
var _b;
|
|
5415
5477
|
var size = _a.size;
|
|
5416
|
-
return (_b = getStylesBySize$
|
|
5478
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5417
5479
|
});
|
|
5418
|
-
var H3$2 = newStyled.h3(templateObject_2
|
|
5480
|
+
var H3$2 = newStyled.h3(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5419
5481
|
var textColor = _a.textColor;
|
|
5420
5482
|
return textColor;
|
|
5421
5483
|
}, function (_a) {
|
|
5422
5484
|
var _b;
|
|
5423
5485
|
var size = _a.size;
|
|
5424
|
-
return (_b = getStylesBySize$
|
|
5486
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5425
5487
|
}, function (_a) {
|
|
5426
5488
|
var _b;
|
|
5427
5489
|
var size = _a.size;
|
|
5428
|
-
return (_b = getStylesBySize$
|
|
5490
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5429
5491
|
});
|
|
5430
5492
|
var ClubOfferTag = function (_a) {
|
|
5431
5493
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5432
5494
|
var theme = useTheme();
|
|
5433
|
-
return (jsx$1(Container
|
|
5495
|
+
return (jsx$1(Container$11, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5434
5496
|
};
|
|
5435
|
-
var templateObject_1$
|
|
5497
|
+
var templateObject_1$1u, templateObject_2$$;
|
|
5436
5498
|
|
|
5437
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5499
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5438
5500
|
var PriceLabelV2 = function (_a) {
|
|
5439
5501
|
var _b;
|
|
5440
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, _f = _a.savingsDisplay, savingsDisplay =
|
|
5502
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g;
|
|
5441
5503
|
var theme = useTheme();
|
|
5442
5504
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
5443
5505
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
@@ -5483,7 +5545,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5483
5545
|
}
|
|
5484
5546
|
var savetoString = saveto.toFixed(2);
|
|
5485
5547
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5486
|
-
return (jsxs$1(Container$
|
|
5548
|
+
return (jsxs$1(Container$12, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5487
5549
|
borderRadius: '8px',
|
|
5488
5550
|
width: '107px',
|
|
5489
5551
|
height: '28px',
|
|
@@ -5493,7 +5555,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5493
5555
|
lineHeight: '22px',
|
|
5494
5556
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5495
5557
|
};
|
|
5496
|
-
var templateObject_1$
|
|
5558
|
+
var templateObject_1$1t;
|
|
5497
5559
|
|
|
5498
5560
|
var OneColorSelector = function (_a) {
|
|
5499
5561
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5534,11 +5596,11 @@ var OutOfStock = function (_a) {
|
|
|
5534
5596
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5535
5597
|
};
|
|
5536
5598
|
|
|
5537
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5538
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5539
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5540
|
-
var Span = newStyled.span(templateObject_4$
|
|
5541
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5599
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5600
|
+
newStyled(lt.Label)(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5601
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
5602
|
+
var Span = newStyled.span(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5603
|
+
var OptionsContainer = newStyled.div(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
5542
5604
|
var Label$3 = function (_a) {
|
|
5543
5605
|
var label = _a.label, values = _a.values;
|
|
5544
5606
|
return (jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5556,23 +5618,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5556
5618
|
Option: Option,
|
|
5557
5619
|
OptionsContainer: OptionsContainer,
|
|
5558
5620
|
});
|
|
5559
|
-
var templateObject_1$
|
|
5621
|
+
var templateObject_1$1s, templateObject_2$_, templateObject_3$O, templateObject_4$B, templateObject_5$p;
|
|
5560
5622
|
|
|
5561
|
-
var Container$
|
|
5623
|
+
var Container$10 = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
5562
5624
|
var borderColor = _a.borderColor;
|
|
5563
5625
|
return borderColor;
|
|
5564
5626
|
}, function (_a) {
|
|
5565
5627
|
var noStock = _a.noStock;
|
|
5566
5628
|
return (noStock ? '0.4' : '1');
|
|
5567
5629
|
});
|
|
5568
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5630
|
+
var Image$3 = newStyled.img(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5569
5631
|
var PatternSelector = function (_a) {
|
|
5570
5632
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5571
5633
|
var theme = useTheme();
|
|
5572
5634
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5573
|
-
return (jsx$1(Container$
|
|
5635
|
+
return (jsx$1(Container$10, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5574
5636
|
};
|
|
5575
|
-
var templateObject_1$
|
|
5637
|
+
var templateObject_1$1r, templateObject_2$Z;
|
|
5576
5638
|
|
|
5577
5639
|
var renderOptions$1 = function (options) {
|
|
5578
5640
|
if (options.length === 0) {
|
|
@@ -5777,7 +5839,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5777
5839
|
literal: true,
|
|
5778
5840
|
});
|
|
5779
5841
|
|
|
5780
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5842
|
+
var Image$2 = newStyled.img(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
5781
5843
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5782
5844
|
return borderRadiusVariant &&
|
|
5783
5845
|
"\nborder-radius: 20px;\n";
|
|
@@ -5792,7 +5854,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5792
5854
|
var theme = useTheme();
|
|
5793
5855
|
return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5794
5856
|
};
|
|
5795
|
-
var templateObject_1$
|
|
5857
|
+
var templateObject_1$1q;
|
|
5796
5858
|
|
|
5797
5859
|
var Button$5 = newStyled.button(function () { return ({
|
|
5798
5860
|
background: 'transparent',
|
|
@@ -10036,16 +10098,16 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10036
10098
|
return Slider;
|
|
10037
10099
|
}(React__default.Component);
|
|
10038
10100
|
|
|
10039
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10101
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
10040
10102
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10041
10103
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10042
10104
|
}, function (_a) {
|
|
10043
10105
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10044
10106
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10045
10107
|
});
|
|
10046
|
-
var templateObject_1$
|
|
10108
|
+
var templateObject_1$1p;
|
|
10047
10109
|
|
|
10048
|
-
var getStylesBySize$
|
|
10110
|
+
var getStylesBySize$8 = function (size) {
|
|
10049
10111
|
// rem units
|
|
10050
10112
|
switch (size) {
|
|
10051
10113
|
case ComponentSize.Large:
|
|
@@ -10077,7 +10139,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
10077
10139
|
var SliderNavigation = function (_a) {
|
|
10078
10140
|
var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b, _c = _a.dots, dots = _c === void 0 ? true : _c, _d = _a.slidesToShow, slidesToShow = _d === void 0 ? 1 : _d, _e = _a.speed, speed = _e === void 0 ? 500 : _e;
|
|
10079
10141
|
var _f = useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
10080
|
-
var styles = dotsSize && getStylesBySize$
|
|
10142
|
+
var styles = dotsSize && getStylesBySize$8(dotsSize);
|
|
10081
10143
|
var theme = useTheme();
|
|
10082
10144
|
var nextArrow = arrows && (jsx(ArrowButton$1, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
10083
10145
|
var prevArrow = arrows && (jsx(ArrowButton$1, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
@@ -10102,22 +10164,38 @@ var SliderNavigation = function (_a) {
|
|
|
10102
10164
|
} }, { 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));
|
|
10103
10165
|
};
|
|
10104
10166
|
|
|
10105
|
-
var horizontalStyles = css(templateObject_1$
|
|
10106
|
-
var verticalStyles = css(templateObject_2$
|
|
10107
|
-
var Container
|
|
10167
|
+
var horizontalStyles = css(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
10168
|
+
var verticalStyles = css(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
10169
|
+
var Container$$ = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
10108
10170
|
var position = _a.position;
|
|
10109
10171
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10172
|
+
}, function (_a) {
|
|
10173
|
+
var hasOverflowArrows = _a.hasOverflowArrows;
|
|
10174
|
+
return hasOverflowArrows &&
|
|
10175
|
+
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
10110
10176
|
});
|
|
10111
|
-
var Button$4 = newStyled.button(templateObject_4$
|
|
10177
|
+
var Button$4 = newStyled.button(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
10178
|
+
var ArrowsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
10179
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\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 background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\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 background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
10180
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
10181
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
10112
10182
|
var ImagePreviewList = function (_a) {
|
|
10113
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10114
|
-
|
|
10115
|
-
|
|
10116
|
-
|
|
10117
|
-
|
|
10118
|
-
|
|
10183
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
10184
|
+
var handleScrollVerticalPrev = function () {
|
|
10185
|
+
var element = document.querySelector(".imageListContainer");
|
|
10186
|
+
element.scrollBy(0, -200);
|
|
10187
|
+
};
|
|
10188
|
+
var handleScrollVerticalNext = function () {
|
|
10189
|
+
var element = document.querySelector(".imageListContainer");
|
|
10190
|
+
element.scrollBy(0, 200);
|
|
10191
|
+
};
|
|
10192
|
+
return (jsxs$1(Fragment$1, { children: [jsx$1(Container$$, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10193
|
+
arrowWidth: 0.75,
|
|
10194
|
+
arrowHeight: 1.25,
|
|
10195
|
+
arrowPadding: 1.625,
|
|
10196
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
10119
10197
|
};
|
|
10120
|
-
var templateObject_1$
|
|
10198
|
+
var templateObject_1$1o, templateObject_2$Y, templateObject_3$N, templateObject_4$A, templateObject_5$o, templateObject_6$n, templateObject_7$f, templateObject_8$a;
|
|
10121
10199
|
|
|
10122
10200
|
var propTypes = {exports: {}};
|
|
10123
10201
|
|
|
@@ -11710,40 +11788,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11710
11788
|
afterZoomOut: PropTypes.func
|
|
11711
11789
|
} : {};
|
|
11712
11790
|
|
|
11713
|
-
var Container$
|
|
11791
|
+
var Container$_ = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
11714
11792
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11715
11793
|
return borderRadiusVariant &&
|
|
11716
11794
|
"\n border-radius: 40px;\n ";
|
|
11717
11795
|
});
|
|
11718
|
-
var TopTagContainer$
|
|
11719
|
-
var BottomTagContainer$
|
|
11720
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11721
|
-
var Video$1 = newStyled.div(templateObject_5$
|
|
11722
|
-
var VideoTag$1 = newStyled.div(templateObject_6$
|
|
11723
|
-
var Text$7 = newStyled.div(templateObject_7$
|
|
11796
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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'); });
|
|
11797
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11798
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
11799
|
+
var Video$1 = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11800
|
+
var VideoTag$1 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
11801
|
+
var Text$7 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11724
11802
|
var ImageProductWithTags$1 = function (_a) {
|
|
11725
11803
|
var _b, _c;
|
|
11726
11804
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
11727
|
-
return (jsxs$1(Container$
|
|
11805
|
+
return (jsxs$1(Container$_, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11728
11806
|
alt: image.alt,
|
|
11729
11807
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11730
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
11808
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11731
11809
|
};
|
|
11732
|
-
var templateObject_1$
|
|
11810
|
+
var templateObject_1$1n, templateObject_2$X, templateObject_3$M, templateObject_4$z, templateObject_5$n, templateObject_6$m, templateObject_7$e;
|
|
11733
11811
|
|
|
11734
|
-
var Container$
|
|
11812
|
+
var Container$Z = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
11735
11813
|
var ProductGallery = function (_a) {
|
|
11736
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c;
|
|
11814
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
11737
11815
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
11738
|
-
var
|
|
11816
|
+
var _e = useState(initialValue), selectedImage = _e[0], setSelectedImage = _e[1];
|
|
11739
11817
|
useEffect(function () {
|
|
11740
11818
|
setSelectedImage(initialValue);
|
|
11741
11819
|
}, [initialValue]);
|
|
11742
|
-
return (jsxs$1(Container$
|
|
11820
|
+
return (jsxs$1(Container$Z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11743
11821
|
setSelectedImage(value);
|
|
11744
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11822
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11745
11823
|
};
|
|
11746
|
-
var templateObject_1$
|
|
11824
|
+
var templateObject_1$1m;
|
|
11747
11825
|
|
|
11748
11826
|
/* base styles & size variants */
|
|
11749
11827
|
var StarStyles = {
|
|
@@ -11789,8 +11867,8 @@ var StarStyles = {
|
|
|
11789
11867
|
});
|
|
11790
11868
|
},
|
|
11791
11869
|
};
|
|
11792
|
-
var Container$
|
|
11793
|
-
var templateObject_1$
|
|
11870
|
+
var Container$Y = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11871
|
+
var templateObject_1$1l;
|
|
11794
11872
|
|
|
11795
11873
|
var StarContainer = newStyled.div(function (_a) {
|
|
11796
11874
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11808,7 +11886,7 @@ var sizes = {
|
|
|
11808
11886
|
var StarList = function (_a) {
|
|
11809
11887
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11810
11888
|
var theme = useTheme();
|
|
11811
|
-
return (jsx$1(Container$
|
|
11889
|
+
return (jsx$1(Container$Y, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11812
11890
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11813
11891
|
}) }, void 0));
|
|
11814
11892
|
};
|
|
@@ -11852,8 +11930,8 @@ var LabelStyles = {
|
|
|
11852
11930
|
});
|
|
11853
11931
|
},
|
|
11854
11932
|
};
|
|
11855
|
-
var Container$
|
|
11856
|
-
var templateObject_1$
|
|
11933
|
+
var Container$X = newStyled.a(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11934
|
+
var templateObject_1$1k;
|
|
11857
11935
|
|
|
11858
11936
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11859
11937
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11893,11 +11971,11 @@ var Rating = function (_a) {
|
|
|
11893
11971
|
href: reviewsContainerId,
|
|
11894
11972
|
}
|
|
11895
11973
|
: {};
|
|
11896
|
-
return (jsxs$1(Container$
|
|
11974
|
+
return (jsxs$1(Container$X, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11897
11975
|
};
|
|
11898
11976
|
|
|
11899
|
-
var Container$
|
|
11900
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11977
|
+
var Container$W = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
11978
|
+
var P$2 = newStyled.p(templateObject_2$W || (templateObject_2$W = __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; });
|
|
11901
11979
|
var textButtonStyles = function (theme) { return ({
|
|
11902
11980
|
border: 'none',
|
|
11903
11981
|
background: 'transparent',
|
|
@@ -11910,9 +11988,18 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11910
11988
|
var FitPredictor = function (_a) {
|
|
11911
11989
|
var onClick = _a.onClick;
|
|
11912
11990
|
var theme = useTheme();
|
|
11913
|
-
return (jsxs(Container$
|
|
11991
|
+
return (jsxs(Container$W, __assign$1({ theme: theme }, { children: [jsx(Container$W, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11992
|
+
};
|
|
11993
|
+
var templateObject_1$1j, templateObject_2$W;
|
|
11994
|
+
|
|
11995
|
+
var Wrapper$8 = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11996
|
+
var Container$V = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
11997
|
+
var FitGuarantee = function (_a) {
|
|
11998
|
+
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, title = _a.title, description = _a.description, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'FitGuarantee' : _e;
|
|
11999
|
+
var theme = useTheme();
|
|
12000
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$8, { children: [jsx$1(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(Icon.Custom.SixtyDaysGuarantee, { width: 3.7, height: 3.38 }, void 0) }), void 0), jsxs$1(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0', width: '100%' } }, { children: title }), void 0), jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11914
12001
|
};
|
|
11915
|
-
var templateObject_1$
|
|
12002
|
+
var templateObject_1$1i, templateObject_2$V;
|
|
11916
12003
|
|
|
11917
12004
|
var P$1 = newStyled.p(function (_a) {
|
|
11918
12005
|
var color = _a.color;
|
|
@@ -11926,7 +12013,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11926
12013
|
margin: '0.938rem 4.188rem',
|
|
11927
12014
|
});
|
|
11928
12015
|
});
|
|
11929
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
12016
|
+
var Bar$2 = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11930
12017
|
var height = _a.height;
|
|
11931
12018
|
return height || '0.5rem';
|
|
11932
12019
|
}, function (_a) {
|
|
@@ -11955,7 +12042,7 @@ var Background$1 = newStyled.div(function (_a) {
|
|
|
11955
12042
|
position: 'absolute',
|
|
11956
12043
|
});
|
|
11957
12044
|
});
|
|
11958
|
-
var Container$
|
|
12045
|
+
var Container$U = newStyled.div(function (_a) {
|
|
11959
12046
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11960
12047
|
return ({
|
|
11961
12048
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11969,11 +12056,11 @@ var getBarWithBasedOnPercent$1 = function (percent) {
|
|
|
11969
12056
|
var ProgressBar = function (_a) {
|
|
11970
12057
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
11971
12058
|
var theme = useTheme();
|
|
11972
|
-
return (jsxs$1(Container$
|
|
12059
|
+
return (jsxs$1(Container$U, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11973
12060
|
};
|
|
11974
|
-
var templateObject_1$
|
|
12061
|
+
var templateObject_1$1h;
|
|
11975
12062
|
|
|
11976
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
12063
|
+
var Bar$1 = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11977
12064
|
var height = _a.height;
|
|
11978
12065
|
return height || '0.5rem';
|
|
11979
12066
|
}, function (_a) {
|
|
@@ -12012,7 +12099,7 @@ var BarContainer$1 = newStyled.div({
|
|
|
12012
12099
|
padding: '0 16px',
|
|
12013
12100
|
position: 'relative',
|
|
12014
12101
|
});
|
|
12015
|
-
var Container$
|
|
12102
|
+
var Container$T = newStyled.div(function (_a) {
|
|
12016
12103
|
var backgroundColor = _a.backgroundColor;
|
|
12017
12104
|
return ({
|
|
12018
12105
|
width: '475px',
|
|
@@ -12043,11 +12130,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
12043
12130
|
var theme = useTheme();
|
|
12044
12131
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
12045
12132
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
12046
|
-
return (jsxs$1(Container$
|
|
12133
|
+
return (jsxs$1(Container$T, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
12047
12134
|
};
|
|
12048
|
-
var templateObject_1$
|
|
12135
|
+
var templateObject_1$1g;
|
|
12049
12136
|
|
|
12050
|
-
var getStylesBySize$
|
|
12137
|
+
var getStylesBySize$7 = function (size) {
|
|
12051
12138
|
switch (size) {
|
|
12052
12139
|
case ComponentSize.Large:
|
|
12053
12140
|
return {
|
|
@@ -12066,21 +12153,21 @@ var getStylesBySize$4 = function (size) {
|
|
|
12066
12153
|
};
|
|
12067
12154
|
}
|
|
12068
12155
|
};
|
|
12069
|
-
var Container$
|
|
12156
|
+
var Container$S = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
12070
12157
|
var backgroundColor = _a.backgroundColor;
|
|
12071
12158
|
return backgroundColor;
|
|
12072
12159
|
}, function (_a) {
|
|
12073
12160
|
var _b;
|
|
12074
12161
|
var size = _a.size;
|
|
12075
|
-
return (_b = getStylesBySize$
|
|
12162
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
12076
12163
|
}, function (_a) {
|
|
12077
12164
|
var _b;
|
|
12078
12165
|
var size = _a.size;
|
|
12079
|
-
return (_b = getStylesBySize$
|
|
12166
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
12080
12167
|
}, function (_a) {
|
|
12081
12168
|
var _b;
|
|
12082
12169
|
var size = _a.size;
|
|
12083
|
-
return (_b = getStylesBySize$
|
|
12170
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
12084
12171
|
}, function (_a) {
|
|
12085
12172
|
var hoverBackgroundColor = _a.hoverBackgroundColor;
|
|
12086
12173
|
return hoverBackgroundColor;
|
|
@@ -12094,9 +12181,9 @@ var Container$R = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __
|
|
|
12094
12181
|
var IconButton = function (_a) {
|
|
12095
12182
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
12096
12183
|
var theme = useTheme();
|
|
12097
|
-
return (jsx$1(Container$
|
|
12184
|
+
return (jsx$1(Container$S, __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));
|
|
12098
12185
|
};
|
|
12099
|
-
var templateObject_1$
|
|
12186
|
+
var templateObject_1$1f;
|
|
12100
12187
|
|
|
12101
12188
|
var TooltipArrow = function (_a) {
|
|
12102
12189
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12176,7 +12263,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12176
12263
|
}
|
|
12177
12264
|
};
|
|
12178
12265
|
|
|
12179
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12266
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
12180
12267
|
var position = _a.position;
|
|
12181
12268
|
return getWrapperFlexDirection(position);
|
|
12182
12269
|
});
|
|
@@ -12201,14 +12288,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12201
12288
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12202
12289
|
return actual === expected ? margin : '0';
|
|
12203
12290
|
};
|
|
12204
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12291
|
+
var ContentWrapper = newStyled.div(templateObject_2$U || (templateObject_2$U = __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) {
|
|
12205
12292
|
var borderColor = _a.borderColor;
|
|
12206
12293
|
return borderColor;
|
|
12207
12294
|
}, function (_a) {
|
|
12208
12295
|
var backgroundColor = _a.backgroundColor;
|
|
12209
12296
|
return backgroundColor;
|
|
12210
12297
|
});
|
|
12211
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12298
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$L || (templateObject_3$L = __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) {
|
|
12212
12299
|
var position = _a.position;
|
|
12213
12300
|
return getArrowRotation(position);
|
|
12214
12301
|
}, function (_a) {
|
|
@@ -12218,17 +12305,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$K || (templateObject_
|
|
|
12218
12305
|
var position = _a.position;
|
|
12219
12306
|
return getArrowContainerMargin(position);
|
|
12220
12307
|
});
|
|
12221
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12308
|
+
var TooltipText = newStyled.div(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12222
12309
|
var color = _a.color;
|
|
12223
12310
|
return color;
|
|
12224
12311
|
});
|
|
12225
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12226
|
-
var Title$
|
|
12312
|
+
var TopSection = newStyled.div(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
12313
|
+
var Title$8 = newStyled.h1(templateObject_6$l || (templateObject_6$l = __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) {
|
|
12227
12314
|
var color = _a.color;
|
|
12228
12315
|
return color;
|
|
12229
12316
|
});
|
|
12230
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12231
|
-
var templateObject_1$
|
|
12317
|
+
var IconContainer$5 = newStyled.div(templateObject_7$d || (templateObject_7$d = __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"])));
|
|
12318
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$L, templateObject_4$y, templateObject_5$m, templateObject_6$l, templateObject_7$d;
|
|
12232
12319
|
|
|
12233
12320
|
var Tooltip = function (_a) {
|
|
12234
12321
|
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;
|
|
@@ -12249,7 +12336,7 @@ var Tooltip = function (_a) {
|
|
|
12249
12336
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
12250
12337
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
12251
12338
|
: theme.colors.pallete.secondary.color,
|
|
12252
|
-
}) }, void 0)), jsx$1(Title$
|
|
12339
|
+
}) }, void 0)), jsx$1(Title$8, __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) && (jsx$1(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), jsx$1(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(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));
|
|
12253
12340
|
};
|
|
12254
12341
|
|
|
12255
12342
|
/* base styles & variants */
|
|
@@ -12315,7 +12402,7 @@ var AccordionDetailsStyles = {
|
|
|
12315
12402
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12316
12403
|
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)]; });
|
|
12317
12404
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12318
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12405
|
+
var StyledContent = newStyled.button(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
12319
12406
|
var Accordion$1 = function (_a) {
|
|
12320
12407
|
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;
|
|
12321
12408
|
var theme = useTheme();
|
|
@@ -12327,7 +12414,7 @@ var Accordion$1 = function (_a) {
|
|
|
12327
12414
|
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12328
12415
|
} }), void 0));
|
|
12329
12416
|
};
|
|
12330
|
-
var templateObject_1$
|
|
12417
|
+
var templateObject_1$1d;
|
|
12331
12418
|
|
|
12332
12419
|
/* base styles & size variants */
|
|
12333
12420
|
var CustomRadioStyles$2 = {
|
|
@@ -12396,9 +12483,9 @@ var ContainerStyles$2 = {
|
|
|
12396
12483
|
},
|
|
12397
12484
|
};
|
|
12398
12485
|
|
|
12399
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12400
|
-
var Container$
|
|
12401
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12486
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12487
|
+
var Container$R = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12488
|
+
var Input$4 = newStyled.input(templateObject_2$T || (templateObject_2$T = __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) {
|
|
12402
12489
|
var disabled = _a.disabled;
|
|
12403
12490
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12404
12491
|
});
|
|
@@ -12406,7 +12493,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12406
12493
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12407
12494
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12408
12495
|
]; });
|
|
12409
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12496
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
12410
12497
|
var RadioPrimary = function (_a) {
|
|
12411
12498
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
12412
12499
|
var theme = useTheme();
|
|
@@ -12414,9 +12501,9 @@ var RadioPrimary = function (_a) {
|
|
|
12414
12501
|
var value = event.currentTarget.value;
|
|
12415
12502
|
onChange({ value: value, label: label });
|
|
12416
12503
|
};
|
|
12417
|
-
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$
|
|
12504
|
+
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$R, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12418
12505
|
};
|
|
12419
|
-
var templateObject_1$
|
|
12506
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$K;
|
|
12420
12507
|
|
|
12421
12508
|
/* base styles & size variants */
|
|
12422
12509
|
var CustomRadioStyles$1 = {
|
|
@@ -12481,9 +12568,9 @@ var ContainerStyles$1 = {
|
|
|
12481
12568
|
},
|
|
12482
12569
|
};
|
|
12483
12570
|
|
|
12484
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12485
|
-
var Container$
|
|
12486
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12571
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12572
|
+
var Container$Q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12573
|
+
var Input$3 = newStyled.input(templateObject_2$S || (templateObject_2$S = __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) {
|
|
12487
12574
|
var disabled = _a.disabled;
|
|
12488
12575
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12489
12576
|
});
|
|
@@ -12491,7 +12578,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12491
12578
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12492
12579
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12493
12580
|
]; });
|
|
12494
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12581
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12495
12582
|
var theme = _a.theme;
|
|
12496
12583
|
return theme.component.radio.textSize;
|
|
12497
12584
|
}, function (_a) {
|
|
@@ -12505,9 +12592,9 @@ var RadioInput = function (_a) {
|
|
|
12505
12592
|
var value = event.currentTarget.value;
|
|
12506
12593
|
onChange({ value: value, label: label });
|
|
12507
12594
|
};
|
|
12508
|
-
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$
|
|
12595
|
+
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$Q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$3, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12509
12596
|
};
|
|
12510
|
-
var templateObject_1$
|
|
12597
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$J;
|
|
12511
12598
|
|
|
12512
12599
|
var RadioGroupInput = function (_a) {
|
|
12513
12600
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12586,9 +12673,9 @@ var ContainerStyles = {
|
|
|
12586
12673
|
},
|
|
12587
12674
|
};
|
|
12588
12675
|
|
|
12589
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12590
|
-
var Container$
|
|
12591
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12676
|
+
var Wrapper$4 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
12677
|
+
var Container$P = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12678
|
+
var Input$2 = newStyled.input(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
12592
12679
|
var disabled = _a.disabled;
|
|
12593
12680
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12594
12681
|
});
|
|
@@ -12596,7 +12683,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12596
12683
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12597
12684
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12598
12685
|
]; });
|
|
12599
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12686
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12600
12687
|
var theme = _a.theme;
|
|
12601
12688
|
return theme.component.radio.textSize;
|
|
12602
12689
|
}, function (_a) {
|
|
@@ -12610,9 +12697,9 @@ var ClubRadioInput = function (_a) {
|
|
|
12610
12697
|
var value = event.currentTarget.value;
|
|
12611
12698
|
onChange({ value: value, label: label });
|
|
12612
12699
|
};
|
|
12613
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
12700
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12614
12701
|
};
|
|
12615
|
-
var templateObject_1$
|
|
12702
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12616
12703
|
|
|
12617
12704
|
var ClubRadioGroupInput = function (_a) {
|
|
12618
12705
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12626,39 +12713,39 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12626
12713
|
}) }), void 0));
|
|
12627
12714
|
};
|
|
12628
12715
|
|
|
12629
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12630
|
-
var Container$
|
|
12716
|
+
var Wrapper$3 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
12717
|
+
var Container$O = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
12631
12718
|
var Minimalistic = function (_a) {
|
|
12632
12719
|
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;
|
|
12633
12720
|
var theme = useTheme();
|
|
12634
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
12721
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12635
12722
|
};
|
|
12636
|
-
var templateObject_1$
|
|
12723
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
12637
12724
|
|
|
12638
|
-
var Container$
|
|
12639
|
-
var Title$
|
|
12640
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12641
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12725
|
+
var Container$N = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12726
|
+
var Title$7 = newStyled.h1(templateObject_2$P || (templateObject_2$P = __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; });
|
|
12727
|
+
var Details$1 = newStyled.span(templateObject_3$H || (templateObject_3$H = __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; });
|
|
12728
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
12642
12729
|
var Simple = function (_a) {
|
|
12643
12730
|
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;
|
|
12644
12731
|
var theme = useTheme();
|
|
12645
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
12732
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$N, { children: [jsx$1(Title$7, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12646
12733
|
};
|
|
12647
|
-
var templateObject_1$
|
|
12734
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$H, templateObject_4$x;
|
|
12648
12735
|
|
|
12649
12736
|
var Bundle = {
|
|
12650
12737
|
Minimalistic: Minimalistic,
|
|
12651
12738
|
Simple: Simple,
|
|
12652
12739
|
};
|
|
12653
12740
|
|
|
12654
|
-
var Container$
|
|
12741
|
+
var Container$M = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
12655
12742
|
var Tag$2 = function (_a) {
|
|
12656
12743
|
var text = _a.text, className = _a.className;
|
|
12657
|
-
return jsx$1(Container$
|
|
12744
|
+
return jsx$1(Container$M, __assign$1({ className: className }, { children: text }), void 0);
|
|
12658
12745
|
};
|
|
12659
|
-
var templateObject_1$
|
|
12746
|
+
var templateObject_1$17;
|
|
12660
12747
|
|
|
12661
|
-
var getStylesBySize$
|
|
12748
|
+
var getStylesBySize$6 = function (size, styledBorder) {
|
|
12662
12749
|
switch (size) {
|
|
12663
12750
|
case ComponentSize.Large:
|
|
12664
12751
|
return {
|
|
@@ -12689,16 +12776,37 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
12689
12776
|
var CategoryTag = function (_a) {
|
|
12690
12777
|
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
12691
12778
|
var theme = useTheme();
|
|
12692
|
-
var stylesBySize = getStylesBySize$
|
|
12779
|
+
var stylesBySize = getStylesBySize$6(size, styledBorder);
|
|
12693
12780
|
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
12694
12781
|
};
|
|
12695
12782
|
|
|
12696
|
-
var getStylesBySize$
|
|
12783
|
+
var getStylesBySize$5 = function (size) {
|
|
12697
12784
|
switch (size) {
|
|
12785
|
+
case ComponentSize.XSmall:
|
|
12786
|
+
return { width: '50px', height: '46px', fontSize: '10px', lineHeight: '12.63px' };
|
|
12787
|
+
case ComponentSize.Small:
|
|
12788
|
+
return { width: '54px', height: '50px', fontSize: '12px', lineHeight: '15.16px' };
|
|
12789
|
+
case ComponentSize.Medium:
|
|
12790
|
+
return { width: '60px', height: '56px', fontSize: '14px', lineHeight: '17.68px' };
|
|
12791
|
+
default:
|
|
12792
|
+
case ComponentSize.Large:
|
|
12793
|
+
return { width: '66px', height: '60px', fontSize: '16px', lineHeight: '20.21px' };
|
|
12794
|
+
}
|
|
12795
|
+
};
|
|
12796
|
+
var CategorySquareTag = function (_a) {
|
|
12797
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? true : _b;
|
|
12798
|
+
var theme = useTheme();
|
|
12799
|
+
var stylesBySize = getStylesBySize$5(size);
|
|
12800
|
+
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, color: theme.colors.shades['700'].color, borderRadius: styledBorder ? '0 0 0 20px' : 'unset', fontFamily: theme.fonts.config[3].family, fontStyle: theme.fonts.config[3].style, fontWeight: 500, textAlign: 'center' }, stylesBySize), text: text, className: className }, void 0));
|
|
12801
|
+
};
|
|
12802
|
+
|
|
12803
|
+
var getStylesBySize$4 = function (size, styledBorder, bottomRightBorderRounded, allBordersRounded) {
|
|
12804
|
+
switch (size) {
|
|
12805
|
+
default:
|
|
12698
12806
|
case ComponentSize.Large:
|
|
12699
12807
|
return {
|
|
12700
12808
|
padding: '0.5rem 1rem',
|
|
12701
|
-
borderRadius: styledBorder ?
|
|
12809
|
+
borderRadius: styledBorder ? allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12702
12810
|
fontSize: '0.75rem',
|
|
12703
12811
|
lineHeight: '1rem',
|
|
12704
12812
|
letterSpacing: '0.16em',
|
|
@@ -12706,7 +12814,7 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12706
12814
|
case ComponentSize.Medium:
|
|
12707
12815
|
return {
|
|
12708
12816
|
padding: '0.375rem 0.625rem 0.25rem',
|
|
12709
|
-
borderRadius: styledBorder ?
|
|
12817
|
+
borderRadius: styledBorder ? allBordersRounded === null || allBordersRounded === void 0 ? void 0 : allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12710
12818
|
fontSize: '0.625rem',
|
|
12711
12819
|
lineHeight: '0.875rem',
|
|
12712
12820
|
letterSpacing: '0.16em',
|
|
@@ -12714,7 +12822,7 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12714
12822
|
case ComponentSize.Small:
|
|
12715
12823
|
return {
|
|
12716
12824
|
padding: '0.125rem 0.5rem',
|
|
12717
|
-
borderRadius: styledBorder ?
|
|
12825
|
+
borderRadius: styledBorder ? allBordersRounded === null || allBordersRounded === void 0 ? void 0 : allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12718
12826
|
fontSize: '0.5rem',
|
|
12719
12827
|
lineHeight: '0.875rem',
|
|
12720
12828
|
letterSpacing: '0.16em',
|
|
@@ -12722,11 +12830,30 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12722
12830
|
}
|
|
12723
12831
|
};
|
|
12724
12832
|
var SeasonOfferTag = function (_a) {
|
|
12725
|
-
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c;
|
|
12726
|
-
var stylesBySize = getStylesBySize$
|
|
12833
|
+
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className, _c = _a.styledBorder, styledBorder = _c === void 0 ? false : _c, _d = _a.bottomRightBorderRounded, bottomRightBorderRounded = _d === void 0 ? '0.25rem' : _d, _e = _a.allBordersRounded, allBordersRounded = _e === void 0 ? { value: '20px' } : _e;
|
|
12834
|
+
var stylesBySize = getStylesBySize$4(size, styledBorder, bottomRightBorderRounded, allBordersRounded);
|
|
12727
12835
|
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
|
|
12728
12836
|
};
|
|
12729
12837
|
|
|
12838
|
+
var getStylesBySize$3 = function (size) {
|
|
12839
|
+
switch (size) {
|
|
12840
|
+
case ComponentSize.XSmall:
|
|
12841
|
+
return { width: '36px', height: '36px', fontSize: '10px', lineHeight: '14px' };
|
|
12842
|
+
case ComponentSize.Small:
|
|
12843
|
+
return { width: '48px', height: '48px', fontSize: '14px', lineHeight: '18px' };
|
|
12844
|
+
case ComponentSize.Medium:
|
|
12845
|
+
return { width: '64px', height: '64px', fontSize: '16px', lineHeight: '24px' };
|
|
12846
|
+
default:
|
|
12847
|
+
case ComponentSize.Large:
|
|
12848
|
+
return { width: '84px', height: '84px', fontSize: '20px', lineHeight: '28px' };
|
|
12849
|
+
}
|
|
12850
|
+
};
|
|
12851
|
+
var SeasonOfferRoundedTag = function (_a) {
|
|
12852
|
+
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#E22E31' : _b, size = _a.size, className = _a.className;
|
|
12853
|
+
var stylesBySize = getStylesBySize$3(size);
|
|
12854
|
+
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
12855
|
+
};
|
|
12856
|
+
|
|
12730
12857
|
var timeToSeconds = function (_a) {
|
|
12731
12858
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
12732
12859
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -12759,11 +12886,11 @@ var Timer = function (_a) {
|
|
|
12759
12886
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12760
12887
|
};
|
|
12761
12888
|
|
|
12762
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12889
|
+
var Label$2 = newStyled.span(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
12763
12890
|
var color = _a.color;
|
|
12764
12891
|
return color;
|
|
12765
12892
|
});
|
|
12766
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12893
|
+
var MandatoryIcon = newStyled.span(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12767
12894
|
var color = _a.color;
|
|
12768
12895
|
return color;
|
|
12769
12896
|
});
|
|
@@ -12772,7 +12899,7 @@ var InputLabel = function (_a) {
|
|
|
12772
12899
|
var theme = useTheme();
|
|
12773
12900
|
return (jsxs$1(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12774
12901
|
};
|
|
12775
|
-
var templateObject_1$
|
|
12902
|
+
var templateObject_1$16, templateObject_2$O;
|
|
12776
12903
|
|
|
12777
12904
|
var containerByStatus = function (theme, status) {
|
|
12778
12905
|
if (status === InputValidationType.Valid)
|
|
@@ -12781,12 +12908,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12781
12908
|
return theme.colors.semantic.urgent.color;
|
|
12782
12909
|
return '';
|
|
12783
12910
|
};
|
|
12784
|
-
var Container$
|
|
12911
|
+
var Container$L = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12785
12912
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12786
12913
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12787
12914
|
});
|
|
12788
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12789
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12915
|
+
var StyledLabel = newStyled.label(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
12916
|
+
var StyledInput = newStyled.input(templateObject_3$G || (templateObject_3$G = __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) {
|
|
12790
12917
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12791
12918
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12792
12919
|
}, function (_a) {
|
|
@@ -12841,11 +12968,11 @@ var StyledInput = newStyled.input(templateObject_3$F || (templateObject_3$F = __
|
|
|
12841
12968
|
return hasValue &&
|
|
12842
12969
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12843
12970
|
});
|
|
12844
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12971
|
+
var InputWrapper = newStyled.div(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12845
12972
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12846
12973
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12847
12974
|
});
|
|
12848
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
12975
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
12849
12976
|
var theme = _a.theme;
|
|
12850
12977
|
return theme.component.input.placeholderColor;
|
|
12851
12978
|
}, function (_a) {
|
|
@@ -12858,8 +12985,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$k || (templateObject_5
|
|
|
12858
12985
|
var theme = _a.theme;
|
|
12859
12986
|
return theme.component.input.lineHeight;
|
|
12860
12987
|
});
|
|
12861
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12862
|
-
var templateObject_1$
|
|
12988
|
+
var ClearInput = newStyled.div(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
12989
|
+
var templateObject_1$15, templateObject_2$N, templateObject_3$G, templateObject_4$w, templateObject_5$l, templateObject_6$k;
|
|
12863
12990
|
|
|
12864
12991
|
var BaseInput = function (_a) {
|
|
12865
12992
|
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"]);
|
|
@@ -12882,7 +13009,7 @@ var BaseInput = function (_a) {
|
|
|
12882
13009
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12883
13010
|
}, [status]);
|
|
12884
13011
|
var hasValue = Boolean(value);
|
|
12885
|
-
return (jsxs$1(Container$
|
|
13012
|
+
return (jsxs$1(Container$L, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12886
13013
|
onChange(event.target.value, event);
|
|
12887
13014
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12888
13015
|
onChange('', { target: { value: '' } });
|
|
@@ -12903,16 +13030,18 @@ var Button$3 = function (_a) {
|
|
|
12903
13030
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12904
13031
|
};
|
|
12905
13032
|
|
|
12906
|
-
var Container$
|
|
13033
|
+
var Container$K = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
12907
13034
|
var theme = _a.theme;
|
|
12908
13035
|
return theme.component.inputCustom.input.borderRadius;
|
|
12909
13036
|
});
|
|
12910
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12911
|
-
var theme = _a.theme;
|
|
12912
|
-
return
|
|
13037
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13038
|
+
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13039
|
+
return defaultRounded
|
|
13040
|
+
? theme.component.inputCustom.button.borderRadius
|
|
13041
|
+
: "0 ".concat(theme.component.inputCustom.button.borderRadius, " ").concat(theme.component.inputCustom.button.borderRadius, " 0");
|
|
12913
13042
|
});
|
|
12914
13043
|
var Custom = function (_a) {
|
|
12915
|
-
var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
|
|
13044
|
+
var onClick = _a.onClick, text = _a.text, variant = _a.variant, _b = _a.defaultRounded, defaultRounded = _b === void 0 ? true : _b, rest = __rest(_a, ["onClick", "text", "variant", "defaultRounded"]);
|
|
12916
13045
|
var theme = useTheme();
|
|
12917
13046
|
var props = useMemo(function () { return ({
|
|
12918
13047
|
variant: variant,
|
|
@@ -12920,23 +13049,23 @@ var Custom = function (_a) {
|
|
|
12920
13049
|
text: text,
|
|
12921
13050
|
disabled: rest.disabled,
|
|
12922
13051
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12923
|
-
return (jsx$1(Container$
|
|
13052
|
+
return (jsx$1(Container$K, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12924
13053
|
};
|
|
12925
|
-
var templateObject_1$
|
|
13054
|
+
var templateObject_1$14, templateObject_2$M;
|
|
12926
13055
|
|
|
12927
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13056
|
+
var SuccessContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12928
13057
|
var size = _a.size;
|
|
12929
13058
|
return (size === 'small' ? '36px' : '');
|
|
12930
13059
|
});
|
|
12931
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12932
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13060
|
+
var SuccessMessage = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
13061
|
+
var SuccessText = newStyled.span(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
12933
13062
|
var Success = function (_a) {
|
|
12934
13063
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12935
13064
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12936
13065
|
};
|
|
12937
|
-
var templateObject_1$
|
|
13066
|
+
var templateObject_1$13, templateObject_2$L, templateObject_3$F;
|
|
12938
13067
|
|
|
12939
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13068
|
+
var ButtonContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
12940
13069
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12941
13070
|
return status === InputValidationType.Empty &&
|
|
12942
13071
|
type === 'primary' &&
|
|
@@ -12953,21 +13082,21 @@ var BasePlusButton = function (_a) {
|
|
|
12953
13082
|
}
|
|
12954
13083
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12955
13084
|
};
|
|
12956
|
-
var templateObject_1$
|
|
13085
|
+
var templateObject_1$12;
|
|
12957
13086
|
|
|
12958
|
-
var Container$
|
|
12959
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
13087
|
+
var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13088
|
+
var IconContainer$4 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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; });
|
|
12960
13089
|
var BasePlusIcon = function (_a) {
|
|
12961
13090
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12962
13091
|
var theme = useTheme();
|
|
12963
13092
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12964
|
-
return (jsx$1(Container$
|
|
13093
|
+
return (jsx$1(Container$J, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12965
13094
|
? theme.colors.shades['700'].color
|
|
12966
13095
|
: status === InputValidationType.Error
|
|
12967
13096
|
? theme.colors.semantic.urgent.color
|
|
12968
13097
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12969
13098
|
};
|
|
12970
|
-
var templateObject_1$
|
|
13099
|
+
var templateObject_1$11, templateObject_2$K;
|
|
12971
13100
|
|
|
12972
13101
|
var Input$1 = {
|
|
12973
13102
|
Simple: BaseInput,
|
|
@@ -12976,7 +13105,7 @@ var Input$1 = {
|
|
|
12976
13105
|
SimplePlusIcon: BasePlusIcon,
|
|
12977
13106
|
};
|
|
12978
13107
|
|
|
12979
|
-
var Container$
|
|
13108
|
+
var Container$I = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
12980
13109
|
var width = _a.width;
|
|
12981
13110
|
return width;
|
|
12982
13111
|
}, function (_a) {
|
|
@@ -12992,13 +13121,16 @@ var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __ma
|
|
|
12992
13121
|
var PaymentMethod = function (_a) {
|
|
12993
13122
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12994
13123
|
var theme = useTheme();
|
|
12995
|
-
return (jsx$1(Container$
|
|
13124
|
+
return (jsx$1(Container$I, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
12996
13125
|
};
|
|
12997
|
-
var templateObject_1
|
|
13126
|
+
var templateObject_1$10;
|
|
12998
13127
|
|
|
12999
|
-
var Text$6 = newStyled.h3(templateObject_1
|
|
13128
|
+
var Text$6 = newStyled.h3(templateObject_1$$ || (templateObject_1$$ = __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: ", ";\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: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
13000
13129
|
var backgroundColor = _a.backgroundColor;
|
|
13001
13130
|
return backgroundColor;
|
|
13131
|
+
}, function (_a) {
|
|
13132
|
+
var borderRadius = _a.borderRadius;
|
|
13133
|
+
return borderRadius;
|
|
13002
13134
|
}, function (_a) {
|
|
13003
13135
|
var color = _a.color;
|
|
13004
13136
|
return color;
|
|
@@ -13006,13 +13138,13 @@ var Text$6 = newStyled.h3(templateObject_1$_ || (templateObject_1$_ = __makeTemp
|
|
|
13006
13138
|
var OfferBanner = function (_a) {
|
|
13007
13139
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
13008
13140
|
var theme = useTheme();
|
|
13009
|
-
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
13141
|
+
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
13010
13142
|
};
|
|
13011
|
-
var templateObject_1
|
|
13143
|
+
var templateObject_1$$;
|
|
13012
13144
|
|
|
13013
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
13014
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
13015
|
-
var Currency = newStyled.span(templateObject_3$
|
|
13145
|
+
var Wrapper$2 = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
13146
|
+
var GrandTotal = newStyled.h1(templateObject_2$J || (templateObject_2$J = __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; });
|
|
13147
|
+
var Currency = newStyled.span(templateObject_3$E || (templateObject_3$E = __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) {
|
|
13016
13148
|
var theme = _a.theme;
|
|
13017
13149
|
return theme.component.total.basicTotal.currency.color;
|
|
13018
13150
|
}, function (_a) {
|
|
@@ -13025,32 +13157,32 @@ var Currency = newStyled.span(templateObject_3$D || (templateObject_3$D = __make
|
|
|
13025
13157
|
var theme = _a.theme;
|
|
13026
13158
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
13027
13159
|
});
|
|
13028
|
-
var Container$
|
|
13029
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
13030
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
13160
|
+
var Container$H = newStyled.div(templateObject_4$v || (templateObject_4$v = __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; });
|
|
13161
|
+
var DiscountText = newStyled.h3(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
13162
|
+
var DiscountAmount = newStyled.h3(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
13031
13163
|
var theme = _a.theme;
|
|
13032
13164
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
13033
13165
|
});
|
|
13034
13166
|
var Total = function (_a) {
|
|
13035
13167
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
13036
13168
|
var theme = useTheme();
|
|
13037
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
13169
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$H, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
13038
13170
|
};
|
|
13039
|
-
var templateObject_1$
|
|
13171
|
+
var templateObject_1$_, templateObject_2$J, templateObject_3$E, templateObject_4$v, templateObject_5$k, templateObject_6$j;
|
|
13040
13172
|
|
|
13041
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
13173
|
+
var Wrapper$1 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
13042
13174
|
var color = _a.color;
|
|
13043
13175
|
return color;
|
|
13044
13176
|
});
|
|
13045
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
13046
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
13177
|
+
var ItemContainer = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
13178
|
+
var Item$2 = newStyled.h4(templateObject_3$D || (templateObject_3$D = __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) {
|
|
13047
13179
|
var theme = _a.theme;
|
|
13048
13180
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
13049
13181
|
}, function (_a) {
|
|
13050
13182
|
var theme = _a.theme;
|
|
13051
13183
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
13052
13184
|
});
|
|
13053
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
13185
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
13054
13186
|
var color = _a.color;
|
|
13055
13187
|
return color;
|
|
13056
13188
|
});
|
|
@@ -13063,51 +13195,51 @@ var Subtotal = function (_a) {
|
|
|
13063
13195
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
13064
13196
|
})] }), void 0));
|
|
13065
13197
|
};
|
|
13066
|
-
var templateObject_1$
|
|
13198
|
+
var templateObject_1$Z, templateObject_2$I, templateObject_3$D, templateObject_4$u;
|
|
13067
13199
|
|
|
13068
13200
|
var Totals = {
|
|
13069
13201
|
Total: Total,
|
|
13070
13202
|
Subtotal: Subtotal,
|
|
13071
13203
|
};
|
|
13072
13204
|
|
|
13073
|
-
var Container$
|
|
13074
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13075
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13076
|
-
var Details = newStyled.span(templateObject_4$
|
|
13205
|
+
var Container$G = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
13206
|
+
var IconContainer$3 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
13207
|
+
var Text$5 = newStyled.p(templateObject_3$C || (templateObject_3$C = __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; });
|
|
13208
|
+
var Details = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
13077
13209
|
var Note = function (_a) {
|
|
13078
13210
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13079
13211
|
var theme = useTheme();
|
|
13080
|
-
return (jsxs$1(Container$
|
|
13212
|
+
return (jsxs$1(Container$G, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13081
13213
|
};
|
|
13082
|
-
var templateObject_1$
|
|
13214
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$t;
|
|
13083
13215
|
|
|
13084
|
-
var Title$
|
|
13216
|
+
var Title$6 = newStyled.h1(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
13085
13217
|
var theme = _a.theme;
|
|
13086
13218
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
13087
13219
|
});
|
|
13088
|
-
var Line = newStyled.div(templateObject_2$
|
|
13089
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13220
|
+
var Line = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
13221
|
+
var Row$1 = newStyled.div(templateObject_3$B || (templateObject_3$B = __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({
|
|
13090
13222
|
flexDirection: ['column', 'row'],
|
|
13091
13223
|
}));
|
|
13092
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
13224
|
+
var Col$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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({
|
|
13093
13225
|
margin: ['0', '0 1.25rem'],
|
|
13094
13226
|
marginBottom: ['1.875rem', '0'],
|
|
13095
13227
|
alignItems: ['center', 'flex-start'],
|
|
13096
13228
|
textAlign: ['center', 'inherit'],
|
|
13097
13229
|
width: ['100%', 'inherit'],
|
|
13098
13230
|
}));
|
|
13099
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
13231
|
+
var IconContainer$2 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
13100
13232
|
marginRight: ['0', '0.438rem'],
|
|
13101
13233
|
marginBottom: ['10px', '0'],
|
|
13102
13234
|
width: ['auto', '1.5rem'],
|
|
13103
13235
|
}));
|
|
13104
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
13236
|
+
var SectionTitle = newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
13105
13237
|
display: ['block', 'flex'],
|
|
13106
13238
|
}), function (_a) {
|
|
13107
13239
|
var theme = _a.theme;
|
|
13108
13240
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
13109
13241
|
});
|
|
13110
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
13242
|
+
var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
13111
13243
|
var theme = _a.theme;
|
|
13112
13244
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
13113
13245
|
}, function (_a) {
|
|
@@ -13122,47 +13254,47 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __m
|
|
|
13122
13254
|
var DeliveryDetails = function (_a) {
|
|
13123
13255
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
13124
13256
|
var theme = useTheme();
|
|
13125
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$
|
|
13257
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13126
13258
|
};
|
|
13127
|
-
var templateObject_1$
|
|
13259
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$B, templateObject_4$s, templateObject_5$j, templateObject_6$i, templateObject_7$c, templateObject_8$9;
|
|
13128
13260
|
|
|
13129
|
-
var Container$
|
|
13130
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13261
|
+
var Container$F = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
13262
|
+
var Text$4 = newStyled.p(templateObject_2$F || (templateObject_2$F = __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; });
|
|
13131
13263
|
var ScrollToTop = function (_a) {
|
|
13132
13264
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13133
13265
|
var theme = useTheme();
|
|
13134
13266
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13135
|
-
return (jsxs$1(Container$
|
|
13267
|
+
return (jsxs$1(Container$F, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
13136
13268
|
};
|
|
13137
|
-
var templateObject_1$
|
|
13269
|
+
var templateObject_1$W, templateObject_2$F;
|
|
13138
13270
|
|
|
13139
|
-
var Container$
|
|
13271
|
+
var Container$E = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
13140
13272
|
var theme = _a.theme;
|
|
13141
13273
|
return theme.component.orderBar.backgroundColor;
|
|
13142
13274
|
});
|
|
13143
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13275
|
+
var H1 = newStyled.h1(templateObject_2$E || (templateObject_2$E = __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; });
|
|
13144
13276
|
var OrderBar = function (_a) {
|
|
13145
13277
|
var message = _a.message, color = _a.color;
|
|
13146
13278
|
var theme = useTheme();
|
|
13147
|
-
return (jsxs$1(Container$
|
|
13279
|
+
return (jsxs$1(Container$E, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
13148
13280
|
};
|
|
13149
|
-
var templateObject_1$
|
|
13281
|
+
var templateObject_1$V, templateObject_2$E;
|
|
13150
13282
|
|
|
13151
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13152
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13153
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13154
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
13283
|
+
var TableElement$1 = newStyled.table(templateObject_1$U || (templateObject_1$U = __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; });
|
|
13284
|
+
var TableCell$1 = newStyled.td(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
13285
|
+
var TableHead$1 = newStyled.th(templateObject_3$A || (templateObject_3$A = __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; });
|
|
13286
|
+
var TableRow$1 = newStyled.tr(templateObject_4$r || (templateObject_4$r = __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; });
|
|
13155
13287
|
var SizeTable = function (_a) {
|
|
13156
13288
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13157
13289
|
var theme = useTheme();
|
|
13158
13290
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
13159
13291
|
};
|
|
13160
|
-
var templateObject_1$
|
|
13292
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$A, templateObject_4$r;
|
|
13161
13293
|
|
|
13162
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13163
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13164
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13165
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
13294
|
+
var TableElement = newStyled.table(templateObject_1$T || (templateObject_1$T = __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; });
|
|
13295
|
+
var TableCell = newStyled.td(templateObject_2$C || (templateObject_2$C = __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; });
|
|
13296
|
+
var TableHead = newStyled.th(templateObject_3$z || (templateObject_3$z = __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; });
|
|
13297
|
+
var TableRow = newStyled.tr(templateObject_4$q || (templateObject_4$q = __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; });
|
|
13166
13298
|
var SizeChartTable = function (_a) {
|
|
13167
13299
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
13168
13300
|
var theme = useTheme();
|
|
@@ -13195,22 +13327,22 @@ var SizeChartTable = function (_a) {
|
|
|
13195
13327
|
backgroundColor: getCellColor(index, cell),
|
|
13196
13328
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13197
13329
|
};
|
|
13198
|
-
var templateObject_1$
|
|
13330
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$z, templateObject_4$q;
|
|
13199
13331
|
|
|
13200
|
-
var Img = newStyled.img(templateObject_1$
|
|
13332
|
+
var Img = newStyled.img(templateObject_1$S || (templateObject_1$S = __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; });
|
|
13201
13333
|
var Image = function (_a) {
|
|
13202
13334
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
13203
13335
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
13204
13336
|
};
|
|
13205
|
-
var templateObject_1$
|
|
13337
|
+
var templateObject_1$S;
|
|
13206
13338
|
|
|
13207
|
-
var Container$
|
|
13339
|
+
var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
13208
13340
|
var IMAGE_WIDTH = '63px';
|
|
13209
|
-
var ImageContainer$
|
|
13210
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13341
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
13342
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
13211
13343
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13212
13344
|
}), IMAGE_WIDTH);
|
|
13213
|
-
var Title$
|
|
13345
|
+
var Title$5 = newStyled.h2(function (_a) {
|
|
13214
13346
|
var color = _a.color;
|
|
13215
13347
|
return ({
|
|
13216
13348
|
fontWeight: 600,
|
|
@@ -13230,7 +13362,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13230
13362
|
margin: '0.063rem 0',
|
|
13231
13363
|
});
|
|
13232
13364
|
});
|
|
13233
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13365
|
+
var PriceContainer = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
13234
13366
|
var withTag = _a.withTag; _a.theme;
|
|
13235
13367
|
return withTag
|
|
13236
13368
|
? mediaQueries({
|
|
@@ -13239,14 +13371,14 @@ var PriceContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = _
|
|
|
13239
13371
|
})
|
|
13240
13372
|
: 'justify-content: end';
|
|
13241
13373
|
});
|
|
13242
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13243
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
13374
|
+
var Quantity = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
13375
|
+
var StyledSpan = newStyled.span(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
13244
13376
|
var SimpleOrderItem = function (_a) {
|
|
13245
13377
|
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;
|
|
13246
13378
|
var theme = useTheme();
|
|
13247
|
-
return (jsxs$1(Container$
|
|
13379
|
+
return (jsxs$1(Container$D, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$5, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13248
13380
|
};
|
|
13249
|
-
var templateObject_1$
|
|
13381
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$y, templateObject_4$p, templateObject_5$i, templateObject_6$h;
|
|
13250
13382
|
|
|
13251
13383
|
function formatDate(date) {
|
|
13252
13384
|
var day = date.getDate();
|
|
@@ -13257,13 +13389,13 @@ function formatDate(date) {
|
|
|
13257
13389
|
|
|
13258
13390
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13259
13391
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13260
|
-
var Container$
|
|
13261
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13262
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13263
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13264
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13265
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13266
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13392
|
+
var Container$C = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
13393
|
+
var Heading = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
13394
|
+
var Content$2 = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13395
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13396
|
+
var DateText$1 = newStyled.span(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
13397
|
+
var VariantText = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
13398
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
13267
13399
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13268
13400
|
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
13269
13401
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
@@ -13299,7 +13431,7 @@ var Review$1 = function (_a) {
|
|
|
13299
13431
|
});
|
|
13300
13432
|
};
|
|
13301
13433
|
}, [randomId]);
|
|
13302
|
-
return (jsxs$1(Container$
|
|
13434
|
+
return (jsxs$1(Container$C, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName$1, { children: reviewerName }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13303
13435
|
__html: showMoreMobile
|
|
13304
13436
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13305
13437
|
: description,
|
|
@@ -13309,15 +13441,15 @@ var Review$1 = function (_a) {
|
|
|
13309
13441
|
: description,
|
|
13310
13442
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13311
13443
|
};
|
|
13312
|
-
var templateObject_1$
|
|
13444
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$x, templateObject_4$o, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1;
|
|
13313
13445
|
|
|
13314
|
-
var List = newStyled.ul(templateObject_1$
|
|
13315
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13316
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13317
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13318
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13319
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13320
|
-
var templateObject_1$
|
|
13446
|
+
var List = newStyled.ul(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13447
|
+
var Item$1 = newStyled.li(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
13448
|
+
var DropdownWrapper = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
13449
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
13450
|
+
var StyledDropdown = newStyled.ul(templateObject_5$g || (templateObject_5$g = __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; });
|
|
13451
|
+
var DropdownItem = newStyled.li(templateObject_6$f || (templateObject_6$f = __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; });
|
|
13452
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13321
13453
|
|
|
13322
13454
|
var DropdownListIcons = function (_a) {
|
|
13323
13455
|
var items = _a.items;
|
|
@@ -13330,7 +13462,7 @@ var Dropdown = function (_a) {
|
|
|
13330
13462
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
13331
13463
|
};
|
|
13332
13464
|
|
|
13333
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13465
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$O || (templateObject_1$O = __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; });
|
|
13334
13466
|
var AmazonButton = function (_a) {
|
|
13335
13467
|
var onClick = _a.onClick;
|
|
13336
13468
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13339,23 +13471,23 @@ var PaypalButton = function (_a) {
|
|
|
13339
13471
|
var onClick = _a.onClick;
|
|
13340
13472
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13341
13473
|
};
|
|
13342
|
-
var templateObject_1$
|
|
13474
|
+
var templateObject_1$O;
|
|
13343
13475
|
|
|
13344
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13345
|
-
var Col = newStyled.div(templateObject_2$
|
|
13346
|
-
var Row = newStyled.div(templateObject_3$
|
|
13476
|
+
var Wrapper = newStyled.div(templateObject_1$N || (templateObject_1$N = __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'); });
|
|
13477
|
+
var Col = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13478
|
+
var Row = newStyled.div(templateObject_3$v || (templateObject_3$v = __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) {
|
|
13347
13479
|
return props.rightToLeft &&
|
|
13348
13480
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13349
13481
|
});
|
|
13350
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13351
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13352
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13482
|
+
var H5 = newStyled.h5(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13483
|
+
var H3$1 = newStyled.h3(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13484
|
+
var FreeShipping = newStyled.span(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13353
13485
|
var CrossSellCheckbox = function (_a) {
|
|
13354
13486
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13355
13487
|
var theme = useTheme();
|
|
13356
13488
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13357
13489
|
};
|
|
13358
|
-
var templateObject_1$
|
|
13490
|
+
var templateObject_1$N, templateObject_2$y, templateObject_3$v, templateObject_4$m, templateObject_5$f, templateObject_6$e;
|
|
13359
13491
|
|
|
13360
13492
|
var index = /*#__PURE__*/Object.freeze({
|
|
13361
13493
|
__proto__: null,
|
|
@@ -13368,7 +13500,7 @@ var Spacing = function (_a) {
|
|
|
13368
13500
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13369
13501
|
};
|
|
13370
13502
|
|
|
13371
|
-
var Container$
|
|
13503
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
13372
13504
|
var height = _a.height;
|
|
13373
13505
|
return (height ? height : '1.5em');
|
|
13374
13506
|
}, function (_a) {
|
|
@@ -13393,16 +13525,16 @@ var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
13393
13525
|
var SkeletonBox = function (_a) {
|
|
13394
13526
|
var width = _a.width, height = _a.height;
|
|
13395
13527
|
var theme = useTheme();
|
|
13396
|
-
return jsx$1(Container$
|
|
13528
|
+
return jsx$1(Container$B, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13397
13529
|
};
|
|
13398
|
-
var templateObject_1$
|
|
13530
|
+
var templateObject_1$M;
|
|
13399
13531
|
|
|
13400
|
-
var Container$
|
|
13532
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
13401
13533
|
var displayBNPL = _a.displayBNPL;
|
|
13402
13534
|
return (displayBNPL ? 'flex' : 'none');
|
|
13403
13535
|
});
|
|
13404
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13405
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13536
|
+
var TextContainer$1 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
13537
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13406
13538
|
var BuyNowPayLater = function (_a) {
|
|
13407
13539
|
var _b;
|
|
13408
13540
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -13412,14 +13544,14 @@ var BuyNowPayLater = function (_a) {
|
|
|
13412
13544
|
console.error('Icon', iconName, 'not found');
|
|
13413
13545
|
return null;
|
|
13414
13546
|
}
|
|
13415
|
-
return (jsx$1(Container$
|
|
13547
|
+
return (jsx$1(Container$A, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13416
13548
|
};
|
|
13417
|
-
var templateObject_1$
|
|
13549
|
+
var templateObject_1$L, templateObject_2$x, templateObject_3$u;
|
|
13418
13550
|
|
|
13419
|
-
var Container$
|
|
13420
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13421
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13422
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13551
|
+
var Container$z = newStyled('div')(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
13552
|
+
var Content$1 = newStyled('div')(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
13553
|
+
var BarContainer = newStyled('div')(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
13554
|
+
var Bar = newStyled('div')(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
13423
13555
|
var index = _a.index;
|
|
13424
13556
|
return "".concat(6 + 3 * index, "px");
|
|
13425
13557
|
}, function (_a) {
|
|
@@ -13428,24 +13560,117 @@ var Bar = newStyled('div')(templateObject_4$k || (templateObject_4$k = __makeTem
|
|
|
13428
13560
|
});
|
|
13429
13561
|
var StrengthBars = function (_a) {
|
|
13430
13562
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13431
|
-
return (jsxs$1(Container$
|
|
13563
|
+
return (jsxs$1(Container$z, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13432
13564
|
};
|
|
13433
|
-
var templateObject_1$
|
|
13434
|
-
|
|
13435
|
-
var Container$
|
|
13436
|
-
var MobileContainer = newStyled(Container$
|
|
13437
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
13438
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
13439
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
13440
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
13441
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
13565
|
+
var templateObject_1$K, templateObject_2$w, templateObject_3$t, templateObject_4$l;
|
|
13566
|
+
|
|
13567
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
13568
|
+
var MobileContainer = newStyled(Container$y)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n padding: 2px 2px;\n border-radius: 0;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n border-radius: 0;\n gap: 3px;\n"])));
|
|
13569
|
+
var DollarPart = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
13570
|
+
var ClubMembersText = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
13571
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
13572
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
13573
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
13442
13574
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
13443
13575
|
var ClubPriceLabel = function (_a) {
|
|
13444
13576
|
var clubPrice = _a.clubPrice;
|
|
13445
13577
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
13446
|
-
return (jsx$1(Fragment$1, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
13578
|
+
return (jsx$1(Fragment$1, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$y, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
13579
|
+
};
|
|
13580
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$7;
|
|
13581
|
+
|
|
13582
|
+
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
13583
|
+
var width = _a.width, height = _a.height;
|
|
13584
|
+
return ({
|
|
13585
|
+
position: 'relative',
|
|
13586
|
+
width: width,
|
|
13587
|
+
height: height,
|
|
13588
|
+
});
|
|
13589
|
+
});
|
|
13590
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
13591
|
+
var Container$x = newStyled.a(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
13592
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
13593
|
+
var Title$4 = newStyled.p(templateObject_4$j || (templateObject_4$j = __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; });
|
|
13594
|
+
var getStylesBySize$2 = function (size) {
|
|
13595
|
+
switch (size) {
|
|
13596
|
+
case ComponentSize.Medium:
|
|
13597
|
+
return {
|
|
13598
|
+
width: '205px',
|
|
13599
|
+
height: '274px',
|
|
13600
|
+
};
|
|
13601
|
+
case ComponentSize.Small:
|
|
13602
|
+
return {
|
|
13603
|
+
width: '9.813rem',
|
|
13604
|
+
height: '13.125rem',
|
|
13605
|
+
};
|
|
13606
|
+
case ComponentSize.Large:
|
|
13607
|
+
return {
|
|
13608
|
+
width: '262px',
|
|
13609
|
+
height: '350px',
|
|
13610
|
+
};
|
|
13611
|
+
/* istanbul ignore next */
|
|
13612
|
+
default:
|
|
13613
|
+
return {
|
|
13614
|
+
width: '205px',
|
|
13615
|
+
height: '274px',
|
|
13616
|
+
};
|
|
13617
|
+
}
|
|
13618
|
+
};
|
|
13619
|
+
var TopTagContainer$3 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13620
|
+
var style = _a.style;
|
|
13621
|
+
return style.width;
|
|
13622
|
+
});
|
|
13623
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13624
|
+
var style = _a.style;
|
|
13625
|
+
return style.width;
|
|
13626
|
+
});
|
|
13627
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13628
|
+
var ProductItemMobile = function (_a) {
|
|
13629
|
+
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
13630
|
+
display: false,
|
|
13631
|
+
position: 'top',
|
|
13632
|
+
component: undefined,
|
|
13633
|
+
} : _e, _f = _a.isBNPL, isBNPL = _f === void 0 ? {
|
|
13634
|
+
displayBNPL: false,
|
|
13635
|
+
installments: 4,
|
|
13636
|
+
installmentPrice: '',
|
|
13637
|
+
iconFolder: 'PDP',
|
|
13638
|
+
iconName: 'Klarna',
|
|
13639
|
+
showLogo: true,
|
|
13640
|
+
iconColor: '#292929',
|
|
13641
|
+
fontSize: '12px',
|
|
13642
|
+
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
13643
|
+
strength: -1,
|
|
13644
|
+
description: '',
|
|
13645
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j;
|
|
13646
|
+
var theme = useTheme();
|
|
13647
|
+
var styles = getStylesBySize$2(size);
|
|
13648
|
+
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
13649
|
+
var space = useMemo(function () {
|
|
13650
|
+
var _a;
|
|
13651
|
+
return (_a = {},
|
|
13652
|
+
_a[ComponentSize.Large] = 8,
|
|
13653
|
+
_a[ComponentSize.Medium] = 4,
|
|
13654
|
+
_a[ComponentSize.Small] = 2,
|
|
13655
|
+
_a)[size];
|
|
13656
|
+
}, [size]);
|
|
13657
|
+
var PriceLabelDisplay = function () {
|
|
13658
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13659
|
+
? !isMobile
|
|
13660
|
+
? {
|
|
13661
|
+
fontSize: '16px',
|
|
13662
|
+
fontWeight: 700,
|
|
13663
|
+
}
|
|
13664
|
+
: {
|
|
13665
|
+
fontSize: '12px',
|
|
13666
|
+
fontWeight: 700,
|
|
13667
|
+
}
|
|
13668
|
+
: undefined }, void 0));
|
|
13669
|
+
};
|
|
13670
|
+
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13671
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$x, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$3, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$3, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$x, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, 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));
|
|
13447
13672
|
};
|
|
13448
|
-
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9
|
|
13673
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9;
|
|
13449
13674
|
|
|
13450
13675
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13451
13676
|
var width = _a.width, height = _a.height;
|
|
@@ -13455,7 +13680,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13455
13680
|
height: height,
|
|
13456
13681
|
});
|
|
13457
13682
|
});
|
|
13458
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
13683
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
13459
13684
|
var Container$w = newStyled.a(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
13460
13685
|
var ProdCardContainer = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
13461
13686
|
var Title$3 = newStyled.p(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -13493,12 +13718,12 @@ var BottomTagContainer$2 = newStyled.div(templateObject_6$b || (templateObject_6
|
|
|
13493
13718
|
return style.width;
|
|
13494
13719
|
});
|
|
13495
13720
|
var MarginTopContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13496
|
-
var
|
|
13497
|
-
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size,
|
|
13721
|
+
var ProductItemTK = function (_a) {
|
|
13722
|
+
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
13498
13723
|
display: false,
|
|
13499
13724
|
position: 'top',
|
|
13500
13725
|
component: undefined,
|
|
13501
|
-
} :
|
|
13726
|
+
} : _f, _g = _a.isBNPL, isBNPL = _g === void 0 ? {
|
|
13502
13727
|
displayBNPL: false,
|
|
13503
13728
|
installments: 4,
|
|
13504
13729
|
installmentPrice: '',
|
|
@@ -13507,10 +13732,10 @@ var ProductItemMobile = function (_a) {
|
|
|
13507
13732
|
showLogo: true,
|
|
13508
13733
|
iconColor: '#292929',
|
|
13509
13734
|
fontSize: '12px',
|
|
13510
|
-
} :
|
|
13735
|
+
} : _g, _h = _a.hasStrength, hasStrength = _h === void 0 ? {
|
|
13511
13736
|
strength: -1,
|
|
13512
13737
|
description: '',
|
|
13513
|
-
} :
|
|
13738
|
+
} : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
|
|
13514
13739
|
var theme = useTheme();
|
|
13515
13740
|
var styles = getStylesBySize$1(size);
|
|
13516
13741
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
@@ -13523,7 +13748,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13523
13748
|
_a)[size];
|
|
13524
13749
|
}, [size]);
|
|
13525
13750
|
var PriceLabelDisplay = function () {
|
|
13526
|
-
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13751
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, originalPriceStyled: originalPriceStyled, finalPriceStyled: false, color: price.color, size: originalPriceStyled ? ComponentSize.Small : ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13527
13752
|
? !isMobile
|
|
13528
13753
|
? {
|
|
13529
13754
|
fontSize: '16px',
|
|
@@ -13536,7 +13761,12 @@ var ProductItemMobile = function (_a) {
|
|
|
13536
13761
|
: undefined }, void 0));
|
|
13537
13762
|
};
|
|
13538
13763
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13539
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center'
|
|
13764
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, 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: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
13765
|
+
// @ts-ignore
|
|
13766
|
+
jsx(Text$8, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
13767
|
+
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
13768
|
+
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
13769
|
+
} }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
13540
13770
|
};
|
|
13541
13771
|
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13542
13772
|
|
|
@@ -13555,6 +13785,7 @@ var templateObject_1$G;
|
|
|
13555
13785
|
var Collection = {
|
|
13556
13786
|
ProductItemMobile: ProductItemMobile,
|
|
13557
13787
|
withProductGrid: withProductGrid,
|
|
13788
|
+
ProductItemTK: ProductItemTK,
|
|
13558
13789
|
};
|
|
13559
13790
|
|
|
13560
13791
|
var Backdrop = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
@@ -14303,7 +14534,7 @@ var CartProductItem = {
|
|
|
14303
14534
|
CloseButton: CloseButton$1,
|
|
14304
14535
|
};
|
|
14305
14536
|
|
|
14306
|
-
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius:
|
|
14537
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\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: ", ";\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.borderRadius; }, function (props) { return props.color; });
|
|
14307
14538
|
var Item = newStyled.span(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
14308
14539
|
var Number$1 = newStyled(Item)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
14309
14540
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -14329,7 +14560,7 @@ var QuantityPicker = function (_a) {
|
|
|
14329
14560
|
return clamp(value);
|
|
14330
14561
|
});
|
|
14331
14562
|
}, [value, clamp]);
|
|
14332
|
-
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
14563
|
+
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
14333
14564
|
};
|
|
14334
14565
|
var templateObject_1$r, templateObject_2$l, templateObject_3$k, templateObject_4$e;
|
|
14335
14566
|
|
|
@@ -19120,12 +19351,18 @@ var AbsorbencyLevel = function (_a) {
|
|
|
19120
19351
|
};
|
|
19121
19352
|
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
|
|
19122
19353
|
|
|
19123
|
-
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius:
|
|
19354
|
+
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
19124
19355
|
var textPosition = _a.textPosition;
|
|
19125
19356
|
return textPosition;
|
|
19126
19357
|
}, function (_a) {
|
|
19127
19358
|
var backgroundColor = _a.backgroundColor;
|
|
19128
19359
|
return backgroundColor;
|
|
19360
|
+
}, function (_a) {
|
|
19361
|
+
var borderRadius = _a.borderRadius;
|
|
19362
|
+
return borderRadius || 'unset';
|
|
19363
|
+
}, function (_a) {
|
|
19364
|
+
var borderRadius = _a.borderRadius;
|
|
19365
|
+
return borderRadius || '8px';
|
|
19129
19366
|
});
|
|
19130
19367
|
var HurryUp = function (_a) {
|
|
19131
19368
|
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d;
|
|
@@ -19145,7 +19382,7 @@ var HurryUp = function (_a) {
|
|
|
19145
19382
|
seconds: seconds,
|
|
19146
19383
|
};
|
|
19147
19384
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
19148
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
19385
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
19149
19386
|
};
|
|
19150
19387
|
var templateObject_1$2;
|
|
19151
19388
|
|
|
@@ -19251,5 +19488,5 @@ var Autoship = function (_a) {
|
|
|
19251
19488
|
};
|
|
19252
19489
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
19253
19490
|
|
|
19254
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19491
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19255
19492
|
//# sourceMappingURL=index.esm.js.map
|