@trafilea/afrodita-components 5.0.0-beta.309 → 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.js
CHANGED
|
@@ -92,6 +92,36 @@ var SixtyDaysGuarantee = function (_a) {
|
|
|
92
92
|
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 68, viewBoxY: 60, title: title }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
+
var Bra = function (_a) {
|
|
96
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
97
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: jsxRuntime.jsx("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));
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
var Underwear = function (_a) {
|
|
101
|
+
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
102
|
+
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: [jsxRuntime.jsx("path", { d: "M30.7744 13.7312L30.785 13.7099", stroke: fill, strokeWidth: "0.5", strokeLinejoin: "round" }, void 0), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
var PacksAndBundles = function (_a) {
|
|
106
|
+
var height = _a.height, width = _a.width; _a.fill; var testId = _a.testId;
|
|
107
|
+
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 32, title: "Atom", testId: testId }, { children: [jsxRuntime.jsx("g", __assign$1({ clipPath: "url(#clip0)" }, { children: jsxRuntime.jsx("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), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign$1({ id: "clip0" }, { children: jsxRuntime.jsx("rect", { width: "32", height: "32", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
var SeamlessSupportBra = function (_a) {
|
|
111
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
112
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 69.64, viewBoxY: 47.5, title: title }, { children: jsxRuntime.jsx("g", __assign$1({ id: "Seamless_Support", "data-name": "Seamless Support", transform: "translate(3.337 0.266)" }, { children: jsxRuntime.jsxs("g", __assign$1({ id: "Grupo_56", "data-name": "Grupo 56", transform: "translate(0 0)" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
var WireFreeComfort = function (_a) {
|
|
116
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? 'var(--colors-pallete-secondary-color)' : _b, title = _a.title;
|
|
117
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 69.082, viewBoxY: 57.76, title: title }, { children: jsxRuntime.jsxs("g", __assign$1({ id: "Size_Fitting", "data-name": "Size & Fitting", transform: "translate(3.427 1.626)" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsxs("g", __assign$1({ id: "Grupo_21", "data-name": "Grupo 21", transform: "translate(9.088 0)" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var SixtyDaysBold = function (_a) {
|
|
121
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
122
|
+
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 55.892, viewBoxY: 47.699, title: title }, { children: [jsxRuntime.jsxs("g", __assign$1({ id: "Grupo_45", "data-name": "Grupo 45", transform: "translate(17.777 12.342)" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsxs("g", __assign$1({ id: "Grupo_46", "data-name": "Grupo 46", transform: "translate(0 0)" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
123
|
+
};
|
|
124
|
+
|
|
95
125
|
var Frown = function (_a) {
|
|
96
126
|
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
97
127
|
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 68, viewBoxY: 68, title: title, fill: "none" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
@@ -170,6 +200,12 @@ var NewSixtyDaysGuarantee = function (_a) {
|
|
|
170
200
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
171
201
|
__proto__: null,
|
|
172
202
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
203
|
+
Bra: Bra,
|
|
204
|
+
Underwear: Underwear,
|
|
205
|
+
PacksAndBundles: PacksAndBundles,
|
|
206
|
+
SeamlessSupportBra: SeamlessSupportBra,
|
|
207
|
+
WireFreeComfort: WireFreeComfort,
|
|
208
|
+
SixtyDaysBold: SixtyDaysBold,
|
|
173
209
|
Frown: Frown,
|
|
174
210
|
Smiling: Smiling,
|
|
175
211
|
BulletOne: BulletOne,
|
|
@@ -501,7 +537,7 @@ var Play = function (_a) {
|
|
|
501
537
|
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 98, viewBoxY: 98, title: "Play", testId: testId, fill: "none" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("circle", { cx: "49", cy: "49", r: "45", stroke: fill, strokeWidth: "8", fill: "none" }, void 0)] }), void 0));
|
|
502
538
|
};
|
|
503
539
|
|
|
504
|
-
var FitGuarantee = function (_a) {
|
|
540
|
+
var FitGuarantee$1 = function (_a) {
|
|
505
541
|
var height = _a.height, width = _a.width, fill = _a.fill, testId = _a.testId;
|
|
506
542
|
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 65, viewBoxY: 65, title: "fit guarantee", testId: testId }, { children: [jsxRuntime.jsx("mask", __assign$1({ id: "mask0_160_13321", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "65", height: "65" }, { children: jsxRuntime.jsx("circle", { cx: "32.5", cy: "32.5", r: "32.5", fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsxs("g", __assign$1({ mask: "url(#mask0_160_13321)" }, { children: [jsxRuntime.jsx("path", { d: "M67.3715 -1.48547H-2.22679V67.0832H67.3715V-1.48547Z", fill: "#F7A08B" }, void 0), jsxRuntime.jsx("g", __assign$1({ opacity: "0.2" }, { children: jsxRuntime.jsx("path", { d: "M32.5292 39.7135C52.5279 39.7135 68.74 28.9192 68.74 15.6038C68.74 2.28841 52.5279 -8.50586 32.5292 -8.50586C12.5305 -8.50586 -3.68164 2.28841 -3.68164 15.6038C-3.68164 28.9192 12.5305 39.7135 32.5292 39.7135Z", fill: "white" }, void 0) }), void 0), jsxRuntime.jsx("path", { d: "M34.4666 19.0809C34.4477 17.8915 34.5734 16.7043 34.8411 15.5452C35.0453 14.6673 35.3777 13.8241 35.8275 13.043C36.1938 12.4145 36.6743 11.8599 37.2443 11.4078C37.7471 11.0128 38.3026 10.6897 38.8947 10.4481C39.4399 10.2284 40.0106 10.0783 40.5933 10.0012C41.1109 9.93093 41.6325 9.89404 42.1548 9.89075C42.6591 9.89448 43.1628 9.92839 43.663 9.99231C44.2378 10.064 44.8018 10.2051 45.3426 10.4125C45.936 10.6389 46.4922 10.9526 46.993 11.3431C47.5593 11.7946 48.0352 12.3489 48.3958 12.977C48.8461 13.7648 49.1789 14.6142 49.3835 15.4983C49.6324 16.4978 49.7568 17.6916 49.7568 19.0796V32.2739C49.7761 33.4628 49.6507 34.6496 49.3835 35.8082C49.1755 36.6954 48.8398 37.5477 48.387 38.3384C48.0165 38.9819 47.5341 39.5541 46.9626 40.0282C46.4621 40.4388 45.9066 40.7772 45.3122 41.0336C44.7771 41.2637 44.2154 41.4262 43.6402 41.5173C43.1477 41.597 42.6499 41.6394 42.151 41.6443C41.6188 41.6409 41.0876 41.5984 40.5616 41.5173C39.9748 41.4266 39.4013 41.2641 38.8541 41.0336C38.2592 40.7823 37.7035 40.4472 37.2037 40.0383C36.6379 39.5695 36.1644 38.9995 35.8072 38.3575C35.3657 37.5612 35.0395 36.7063 34.8385 35.8184C34.5751 34.6557 34.4503 33.4659 34.4666 32.2739V19.0809ZM39.3086 34.2607C39.3086 35.5514 39.543 36.4891 40.0119 37.074C40.4807 37.6588 41.1959 37.9512 42.1574 37.9512C43.096 37.9512 43.7963 37.6588 44.2585 37.074C44.7206 36.4891 44.9503 35.5514 44.9478 34.2607V17.3632C44.9478 15.9997 44.7163 15.007 44.2534 14.3849C43.7904 13.7628 43.0909 13.4522 42.1548 13.4531C41.1925 13.4531 40.4774 13.7637 40.0093 14.3849C39.5413 15.0061 39.3069 15.9989 39.306 17.3632L39.3086 34.2607Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M15.44 44.0871H18.6329C19.3751 44.0818 20.1152 44.1671 20.8368 44.3411C21.4939 44.4956 22.113 44.781 22.6573 45.1802C23.1842 45.5759 23.6079 46.0928 23.8926 46.6872C24.1972 47.305 24.3496 48.0553 24.3496 48.938C24.3641 49.652 24.2124 50.3596 23.9065 51.0048C23.6227 51.5862 23.2149 52.0984 22.7119 52.5054C22.197 52.9183 21.6092 53.2309 20.979 53.4271C20.3142 53.6396 19.6203 53.7471 18.9223 53.7457H15.44V44.0871ZM17.569 51.7818H18.6684C19.1298 51.7849 19.5899 51.7342 20.0395 51.6307C20.4364 51.5437 20.8106 51.3742 21.1377 51.133C21.4532 50.8938 21.7041 50.5796 21.8677 50.219C22.0573 49.7825 22.1483 49.3096 22.1343 48.8339C22.1443 48.4073 22.053 47.9844 21.8677 47.5999C21.6991 47.2595 21.454 46.9628 21.1516 46.7329C20.8341 46.4987 20.4754 46.3264 20.0941 46.225C19.6806 46.1109 19.2535 46.0536 18.8246 46.0549H17.569V51.7818Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M28.9745 44.0872H30.729L34.9311 53.7458H32.5343L31.7027 51.698H27.9513L27.1464 53.7445H24.799L28.9745 44.0872ZM29.7921 46.8966L28.619 49.8991H30.9829L29.7921 46.8966Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M37.2684 49.6261L33.64 44.0872H36.287L38.3335 47.7015L40.5044 44.0872H43.0282L39.3999 49.6261V53.7458H37.2684V49.6261Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M48.5101 46.4472C48.327 46.222 48.0835 46.0537 47.808 45.9622C47.5392 45.863 47.2554 45.8102 46.9689 45.8061C46.8082 45.8065 46.6481 45.8249 46.4915 45.8607C46.3299 45.8955 46.174 45.9528 46.0282 46.0308C45.8873 46.104 45.7655 46.2092 45.6727 46.338C45.5576 46.5167 45.5135 46.7319 45.549 46.9414C45.5845 47.1509 45.6969 47.3396 45.8644 47.4704C46.1183 47.6423 46.3964 47.7754 46.6896 47.8653C47.0205 47.9744 47.3773 48.0836 47.7598 48.1928C48.136 48.2995 48.4963 48.4557 48.8313 48.6574C49.1644 48.8589 49.4468 49.1343 49.6565 49.4623C49.8748 49.8009 49.984 50.2511 49.984 50.8131C49.9949 51.2981 49.8923 51.7789 49.6844 52.2172C49.493 52.607 49.2151 52.9478 48.8719 53.2138C48.5181 53.4846 48.1149 53.6838 47.6849 53.8003C46.6409 54.0838 45.5362 54.0506 44.5111 53.7051C43.953 53.5009 43.4424 53.1851 43.0105 52.7771L44.5238 51.1127C44.7399 51.402 45.0237 51.6339 45.3502 51.7881C45.8325 52.0253 46.382 52.0881 46.9054 51.9658C47.0726 51.9279 47.2334 51.8659 47.3827 51.7818C47.5188 51.7038 47.6355 51.5962 47.7243 51.4669C47.8115 51.3336 47.8558 51.1768 47.8512 51.0175C47.8559 50.884 47.8278 50.7513 47.7694 50.6311C47.711 50.5109 47.624 50.4069 47.516 50.3281C47.2599 50.143 46.9769 49.9983 46.6769 49.899C46.3383 49.7797 45.9748 49.6612 45.5864 49.5436C45.2043 49.4297 44.8376 49.2694 44.4946 49.0662C44.1597 48.868 43.8731 48.5979 43.6554 48.2753C43.432 47.9478 43.3207 47.5157 43.3215 46.9791C43.3105 46.5059 43.416 46.0372 43.6287 45.6144C43.8267 45.2314 44.1057 44.8961 44.4463 44.6318C44.7998 44.3627 45.2001 44.1617 45.627 44.0389C46.0741 43.9066 46.5381 43.8399 47.0044 43.8408C47.5407 43.8394 48.0743 43.9177 48.5875 44.0732C49.0978 44.2286 49.568 44.4938 49.965 44.8501L48.5101 46.4472Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M29.4455 23.0447L21.1326 23.0662C21.0006 23.0664 20.8698 23.0406 20.7478 22.9902C20.6257 22.9398 20.5148 22.8659 20.4213 22.7726C20.3278 22.6794 20.2536 22.5686 20.2029 22.4467C20.1522 22.3248 20.1261 22.1941 20.1259 22.062V17.6745C20.1259 16.1029 20.4031 14.9603 20.9574 14.2468C21.5118 13.5333 22.3146 13.1779 23.3657 13.1804C23.8118 13.1702 24.2564 13.235 24.681 13.3721C25.0525 13.504 25.3705 13.7542 25.5862 14.0843C25.8562 14.5157 26.0362 14.9971 26.1155 15.4998C26.2436 16.2665 26.3006 17.0434 26.2857 17.8205V19.217C26.2857 19.5411 26.414 19.8519 26.6427 20.0815C26.8713 20.3111 27.1816 20.4408 27.5057 20.4421L29.1256 20.4485C29.2903 20.4495 29.4535 20.4178 29.6059 20.3554C29.7583 20.293 29.8968 20.201 30.0134 20.0847C30.13 19.9684 30.2225 19.8302 30.2854 19.678C30.3483 19.5258 30.3804 19.3627 30.3799 19.198C30.3799 17.5565 30.3799 16.1219 30.3799 15.8274C30.3839 15.0562 30.255 14.29 29.999 13.5625C29.7434 12.8438 29.3209 12.196 28.7663 11.6722C28.1368 11.0924 27.393 10.6505 26.5827 10.3747C25.6941 10.0523 24.6222 9.89062 23.367 9.88977C22.8301 9.89323 22.2937 9.92374 21.7598 9.98118C21.1569 10.0477 20.5645 10.1888 19.9964 10.4014C19.381 10.6346 18.8005 10.9511 18.2711 11.3421C17.6708 11.7938 17.1649 12.3588 16.782 13.0052C16.3068 13.8095 15.9558 14.6809 15.7409 15.59C15.4777 16.6132 15.3465 17.8434 15.3474 19.2805V32.1028C15.3474 33.8446 15.5209 35.3214 15.8679 36.5334C16.2149 37.7454 16.7253 38.7297 17.3989 39.4864C18.0719 40.239 18.9276 40.8052 19.8834 41.1304C20.9767 41.4873 22.1219 41.659 23.2718 41.6382C24.3115 41.6528 25.3462 41.4923 26.3326 41.1634C27.227 40.8543 28.0281 40.3231 28.661 39.6197C29.3067 38.907 29.8031 37.9782 30.1501 36.833C30.4971 35.6879 30.6706 34.2813 30.6706 32.6131V24.2634C30.6706 24.1028 30.6389 23.9438 30.5773 23.7955C30.5156 23.6473 30.4253 23.5126 30.3114 23.3994C30.1976 23.2861 30.0625 23.1965 29.9139 23.1356C29.7653 23.0747 29.6061 23.0438 29.4455 23.0447ZM20.866 37.5909L21.7547 30.7698C21.345 30.5147 21.0281 30.1349 20.8506 29.6861C20.6731 29.2374 20.6444 28.7435 20.7688 28.2772C20.8932 27.811 21.1641 27.397 21.5415 27.0963C21.9189 26.7956 22.383 26.6241 22.8652 26.607C23.3475 26.59 23.8225 26.7283 24.2202 27.0015C24.618 27.2748 24.9174 27.6686 25.0744 28.1249C25.2315 28.5812 25.2378 29.0759 25.0924 29.5361C24.9471 29.9963 24.6578 30.3976 24.2671 30.6809L25.2827 37.61L20.866 37.5909Z", fill: fill }, void 0)] }), void 0)] }), void 0));
|
|
507
543
|
};
|
|
@@ -563,7 +599,7 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
563
599
|
ShopNow: ShopNow,
|
|
564
600
|
HasselFreeReturns: HasselFreeReturns,
|
|
565
601
|
Play: Play,
|
|
566
|
-
FitGuarantee: FitGuarantee,
|
|
602
|
+
FitGuarantee: FitGuarantee$1,
|
|
567
603
|
QuestionWithCircle: QuestionWithCircle,
|
|
568
604
|
ExpressShipping: ExpressShipping,
|
|
569
605
|
ShapermintClubLabel: ShapermintClubLabel,
|
|
@@ -664,6 +700,11 @@ var CircleLineRight = function (_a) {
|
|
|
664
700
|
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 38, title: "circle line right" }, { children: jsxRuntime.jsx("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));
|
|
665
701
|
};
|
|
666
702
|
|
|
703
|
+
var DoubleArrowUp = function (_a) {
|
|
704
|
+
var width = _a.width, height = _a.height; _a.fill;
|
|
705
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 1792, viewBoxY: 1792, title: "circle up" }, { children: jsxRuntime.jsx("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));
|
|
706
|
+
};
|
|
707
|
+
|
|
667
708
|
var Arrows = /*#__PURE__*/Object.freeze({
|
|
668
709
|
__proto__: null,
|
|
669
710
|
ChevronDown: ChevronDown,
|
|
@@ -683,7 +724,8 @@ var Arrows = /*#__PURE__*/Object.freeze({
|
|
|
683
724
|
CircleLineUp: CircleLineUp,
|
|
684
725
|
CircleLineDown: CircleLineDown,
|
|
685
726
|
CircleLineLeft: CircleLineLeft,
|
|
686
|
-
CircleLineRight: CircleLineRight
|
|
727
|
+
CircleLineRight: CircleLineRight,
|
|
728
|
+
DoubleArrowUp: DoubleArrowUp
|
|
687
729
|
});
|
|
688
730
|
|
|
689
731
|
var Clock = function (_a) {
|
|
@@ -756,6 +798,11 @@ var SizeEmpty = function (_a) {
|
|
|
756
798
|
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "size empty" }, { children: jsxRuntime.jsx("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));
|
|
757
799
|
};
|
|
758
800
|
|
|
801
|
+
var SizeEmptyV2 = function (_a) {
|
|
802
|
+
var height = _a.height, width = _a.width; _a.fill;
|
|
803
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 29, viewBoxY: 13, title: "size empty" }, { children: jsxRuntime.jsxs("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: [jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "28", height: "12", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M4.25391 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M20.6465 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M12.4492 3.73438V9.26576", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M8.34961 2.69385V8.84254", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M16.5488 2.69385V8.84254", stroke: "#2A2A2A" }, void 0), jsxRuntime.jsx("path", { d: "M24.7461 2.69385V8.84254", stroke: "#2A2A2A" }, void 0)] }), void 0) }), void 0));
|
|
804
|
+
};
|
|
805
|
+
|
|
759
806
|
var PlayMini = function (_a) {
|
|
760
807
|
var height = _a.height, width = _a.width; _a.fill;
|
|
761
808
|
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, fill: "none", title: "play mini" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
@@ -822,6 +869,7 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
822
869
|
ErrorCross: ErrorCross,
|
|
823
870
|
CircleNumber: CircleNumber,
|
|
824
871
|
SizeEmpty: SizeEmpty,
|
|
872
|
+
SizeEmptyV2: SizeEmptyV2,
|
|
825
873
|
PlayMini: PlayMini,
|
|
826
874
|
ShippingEmpty: ShippingEmpty,
|
|
827
875
|
Drop: Drop,
|
|
@@ -1006,6 +1054,11 @@ var ShoppingCartV2 = function (_a) {
|
|
|
1006
1054
|
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "Shopping cart v2" }, { children: jsxRuntime.jsx("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));
|
|
1007
1055
|
};
|
|
1008
1056
|
|
|
1057
|
+
var ShoppingBagV3 = function (_a) {
|
|
1058
|
+
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.testId, testId = _b === void 0 ? 'shopping-bag-icon' : _b;
|
|
1059
|
+
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 1024, viewBoxY: 1024, title: "Shopping bag v3", testId: testId }, { children: jsxRuntime.jsx("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));
|
|
1060
|
+
};
|
|
1061
|
+
|
|
1009
1062
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
1010
1063
|
__proto__: null,
|
|
1011
1064
|
Search: Search,
|
|
@@ -1031,9 +1084,15 @@ var Navigation = /*#__PURE__*/Object.freeze({
|
|
|
1031
1084
|
Loading: Loading,
|
|
1032
1085
|
MapSolid: MapSolid,
|
|
1033
1086
|
UserV2: UserV2,
|
|
1034
|
-
ShoppingCartV2: ShoppingCartV2
|
|
1087
|
+
ShoppingCartV2: ShoppingCartV2,
|
|
1088
|
+
ShoppingBagV3: ShoppingBagV3
|
|
1035
1089
|
});
|
|
1036
1090
|
|
|
1091
|
+
var AdaChat = function (_a) {
|
|
1092
|
+
var height = _a.height, width = _a.width; _a.fill;
|
|
1093
|
+
return (jsxRuntime.jsxs(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 533, viewBoxY: 482, title: "Comment" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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), jsxRuntime.jsx("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));
|
|
1094
|
+
};
|
|
1095
|
+
|
|
1037
1096
|
var QuestionCircle = function (_a) {
|
|
1038
1097
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
1039
1098
|
return (jsxRuntime.jsx(IconWrapper$2, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 38, title: "Question circle" }, { children: jsxRuntime.jsx("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));
|
|
@@ -1111,6 +1170,7 @@ var CommentMoney = function (_a) {
|
|
|
1111
1170
|
|
|
1112
1171
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
1113
1172
|
__proto__: null,
|
|
1173
|
+
AdaChat: AdaChat,
|
|
1114
1174
|
QuestionCircle: QuestionCircle,
|
|
1115
1175
|
Messenger: Messenger,
|
|
1116
1176
|
Comment: Comment$1,
|
|
@@ -4234,7 +4294,7 @@ exports.InputValidationType = void 0;
|
|
|
4234
4294
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4235
4295
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4236
4296
|
|
|
4237
|
-
var Section = newStyled.div(templateObject_1$
|
|
4297
|
+
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) {
|
|
4238
4298
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4239
4299
|
});
|
|
4240
4300
|
var CardHeader = function (_a) {
|
|
@@ -4245,14 +4305,14 @@ var CardFooter = function (_a) {
|
|
|
4245
4305
|
var children = _a.children;
|
|
4246
4306
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4247
4307
|
};
|
|
4248
|
-
var templateObject_1$
|
|
4308
|
+
var templateObject_1$1I;
|
|
4249
4309
|
|
|
4250
|
-
var Body = newStyled.div(templateObject_1$
|
|
4310
|
+
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"])));
|
|
4251
4311
|
var CardBody = function (_a) {
|
|
4252
4312
|
var children = _a.children;
|
|
4253
4313
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4254
4314
|
};
|
|
4255
|
-
var templateObject_1$
|
|
4315
|
+
var templateObject_1$1H;
|
|
4256
4316
|
|
|
4257
4317
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4258
4318
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4397,7 +4457,7 @@ var AssetsProvider = function (_a) {
|
|
|
4397
4457
|
};
|
|
4398
4458
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4399
4459
|
|
|
4400
|
-
var Container$
|
|
4460
|
+
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) {
|
|
4401
4461
|
var flex = _a.flex;
|
|
4402
4462
|
return flex &&
|
|
4403
4463
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4412,14 +4472,14 @@ var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
4412
4472
|
var Card$2 = function (_a) {
|
|
4413
4473
|
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;
|
|
4414
4474
|
var theme = useTheme();
|
|
4415
|
-
return (jsxRuntime.jsx(Container$
|
|
4475
|
+
return (jsxRuntime.jsx(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));
|
|
4416
4476
|
};
|
|
4417
4477
|
var Card$3 = Object.assign(Card$2, {
|
|
4418
4478
|
Header: CardHeader,
|
|
4419
4479
|
Footer: CardFooter,
|
|
4420
4480
|
Body: CardBody,
|
|
4421
4481
|
});
|
|
4422
|
-
var templateObject_1$
|
|
4482
|
+
var templateObject_1$1G;
|
|
4423
4483
|
|
|
4424
4484
|
var Fragment = jsxRuntime.Fragment;
|
|
4425
4485
|
function jsx(type, props, key) {
|
|
@@ -4451,7 +4511,7 @@ var BaseButton = function (_a) {
|
|
|
4451
4511
|
}, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
4452
4512
|
};
|
|
4453
4513
|
|
|
4454
|
-
var getStylesBySize$
|
|
4514
|
+
var getStylesBySize$e = function (size, theme) {
|
|
4455
4515
|
switch (size) {
|
|
4456
4516
|
case exports.ComponentSize.Large:
|
|
4457
4517
|
return {
|
|
@@ -4478,7 +4538,7 @@ var getStylesBySize$b = function (size, theme) {
|
|
|
4478
4538
|
var BaseCTA = function (_a) {
|
|
4479
4539
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
4480
4540
|
var theme = useTheme();
|
|
4481
|
-
var stylesBySize = getStylesBySize$
|
|
4541
|
+
var stylesBySize = getStylesBySize$e(size, theme);
|
|
4482
4542
|
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': {
|
|
4483
4543
|
backgroundColor: theme.colors.background.disabled,
|
|
4484
4544
|
color: theme.colors.text.disabled,
|
|
@@ -4565,7 +4625,7 @@ function BaseSelectOption(_a) {
|
|
|
4565
4625
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4566
4626
|
}
|
|
4567
4627
|
|
|
4568
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4628
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4569
4629
|
function BaseSelect(_a) {
|
|
4570
4630
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4571
4631
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4575,7 +4635,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4575
4635
|
Options: BaseSelectOptions,
|
|
4576
4636
|
Option: BaseSelectOption,
|
|
4577
4637
|
});
|
|
4578
|
-
var templateObject_1$
|
|
4638
|
+
var templateObject_1$1F;
|
|
4579
4639
|
|
|
4580
4640
|
var CustomButton = newStyled.button(function (_a) {
|
|
4581
4641
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4634,14 +4694,14 @@ var withLabel = function (Button, label) {
|
|
|
4634
4694
|
};
|
|
4635
4695
|
};
|
|
4636
4696
|
|
|
4637
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4638
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4697
|
+
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; });
|
|
4698
|
+
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"])));
|
|
4639
4699
|
var Error$1 = function (_a) {
|
|
4640
4700
|
var error = _a.error;
|
|
4641
4701
|
var theme = useTheme();
|
|
4642
4702
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4643
4703
|
};
|
|
4644
|
-
var templateObject_1$
|
|
4704
|
+
var templateObject_1$1E, templateObject_2$17;
|
|
4645
4705
|
|
|
4646
4706
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4647
4707
|
var theme = _a.theme;
|
|
@@ -4660,6 +4720,7 @@ var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
|
4660
4720
|
width: '100%',
|
|
4661
4721
|
color: theme.colors.shades['700'].color,
|
|
4662
4722
|
zIndex: 10,
|
|
4723
|
+
overflow: theme.component.dropdown.optionsWrapper.overflow,
|
|
4663
4724
|
});
|
|
4664
4725
|
});
|
|
4665
4726
|
var BaseDropdownOptions = function (_a) {
|
|
@@ -4807,7 +4868,7 @@ var CustomCheckboxStyles = {
|
|
|
4807
4868
|
},
|
|
4808
4869
|
};
|
|
4809
4870
|
|
|
4810
|
-
var Container$
|
|
4871
|
+
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"])));
|
|
4811
4872
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4812
4873
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4813
4874
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4818,7 +4879,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4818
4879
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4819
4880
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4820
4881
|
]; });
|
|
4821
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4882
|
+
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) {
|
|
4822
4883
|
var disabled = _a.disabled;
|
|
4823
4884
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4824
4885
|
});
|
|
@@ -4832,9 +4893,9 @@ var Checkbox = function (_a) {
|
|
|
4832
4893
|
}
|
|
4833
4894
|
onChange(e.target.checked);
|
|
4834
4895
|
};
|
|
4835
|
-
return (jsxRuntime.jsxs(Container$
|
|
4896
|
+
return (jsxRuntime.jsxs(Container$16, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4836
4897
|
};
|
|
4837
|
-
var templateObject_1$
|
|
4898
|
+
var templateObject_1$1D, templateObject_2$16;
|
|
4838
4899
|
|
|
4839
4900
|
var CustomOption = newStyled.li(function (_a) {
|
|
4840
4901
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4847,7 +4908,7 @@ var CustomOption = newStyled.li(function (_a) {
|
|
|
4847
4908
|
cursor: 'pointer',
|
|
4848
4909
|
padding: theme.component.dropdown.optionPadding,
|
|
4849
4910
|
justifyContent: 'flex-start',
|
|
4850
|
-
borderRadius: theme.component.dropdown.options.
|
|
4911
|
+
borderRadius: theme.component.dropdown.options.borderRadiusV2 || 'inherit',
|
|
4851
4912
|
width: '100%',
|
|
4852
4913
|
boxSizing: 'border-box',
|
|
4853
4914
|
fontWeight: selected ? 600 : 'inherit',
|
|
@@ -4883,8 +4944,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4883
4944
|
Option: BaseDropdownOption,
|
|
4884
4945
|
});
|
|
4885
4946
|
|
|
4886
|
-
var Container$
|
|
4887
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4947
|
+
var Container$15 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
4948
|
+
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"])));
|
|
4888
4949
|
function SimpleDropdown(_a) {
|
|
4889
4950
|
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;
|
|
4890
4951
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4914,25 +4975,26 @@ function SimpleDropdown(_a) {
|
|
|
4914
4975
|
setSelectedValue(value);
|
|
4915
4976
|
}, [value, options, initialValue]);
|
|
4916
4977
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4917
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4978
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$15 : React$2.Fragment;
|
|
4918
4979
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4919
4980
|
}
|
|
4920
|
-
var templateObject_1$
|
|
4981
|
+
var templateObject_1$1C, templateObject_2$15;
|
|
4921
4982
|
|
|
4922
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4923
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4924
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4925
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4983
|
+
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; });
|
|
4984
|
+
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; });
|
|
4985
|
+
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"])));
|
|
4986
|
+
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"])));
|
|
4926
4987
|
var DropdownDialog = function (_a) {
|
|
4927
4988
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4928
|
-
|
|
4989
|
+
var theme = useTheme$1();
|
|
4990
|
+
return (jsxRuntime.jsx(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsxRuntime.jsx(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius }, { children: options.map(function (_a, idx) {
|
|
4929
4991
|
var label = _a.label, value = _a.value;
|
|
4930
4992
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4931
4993
|
}) }), void 0) }), void 0));
|
|
4932
4994
|
};
|
|
4933
|
-
var templateObject_1$
|
|
4995
|
+
var templateObject_1$1B, templateObject_2$14, templateObject_3$S, templateObject_4$D;
|
|
4934
4996
|
|
|
4935
|
-
var getStylesBySize$
|
|
4997
|
+
var getStylesBySize$d = function (size, theme) {
|
|
4936
4998
|
switch (size) {
|
|
4937
4999
|
case exports.ComponentSize.Medium:
|
|
4938
5000
|
return {
|
|
@@ -4949,7 +5011,7 @@ var getStylesBySize$a = function (size, theme) {
|
|
|
4949
5011
|
var SimpleSelector = function (_a) {
|
|
4950
5012
|
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.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;
|
|
4951
5013
|
var theme = useTheme();
|
|
4952
|
-
var stylesBySize = getStylesBySize$
|
|
5014
|
+
var stylesBySize = getStylesBySize$d(size, theme);
|
|
4953
5015
|
var activeStyles = active
|
|
4954
5016
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4955
5017
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
@@ -4998,14 +5060,14 @@ var SelectorSecondary = function (_a) {
|
|
|
4998
5060
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4999
5061
|
// `variants` styles that are consistent through all themes.
|
|
5000
5062
|
var TAGS = {
|
|
5001
|
-
hero1: newStyled.h1(templateObject_1$
|
|
5002
|
-
hero2: newStyled.h2(templateObject_2$
|
|
5003
|
-
hero3: newStyled.h3(templateObject_3$
|
|
5004
|
-
display1: newStyled.h1(templateObject_4$
|
|
5005
|
-
display2: newStyled.h2(templateObject_5$
|
|
5006
|
-
heading1: newStyled.h1(templateObject_6$
|
|
5007
|
-
heading2: newStyled.h2(templateObject_7$
|
|
5008
|
-
heading3: newStyled.h3(templateObject_8$
|
|
5063
|
+
hero1: newStyled.h1(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""]))),
|
|
5064
|
+
hero2: newStyled.h2(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject([""], [""]))),
|
|
5065
|
+
hero3: newStyled.h3(templateObject_3$R || (templateObject_3$R = __makeTemplateObject([""], [""]))),
|
|
5066
|
+
display1: newStyled.h1(templateObject_4$C || (templateObject_4$C = __makeTemplateObject([""], [""]))),
|
|
5067
|
+
display2: newStyled.h2(templateObject_5$q || (templateObject_5$q = __makeTemplateObject([""], [""]))),
|
|
5068
|
+
heading1: newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
5069
|
+
heading2: newStyled.h2(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
|
|
5070
|
+
heading3: newStyled.h3(templateObject_8$b || (templateObject_8$b = __makeTemplateObject([""], [""]))),
|
|
5009
5071
|
heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
5010
5072
|
heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
|
|
5011
5073
|
heading6: newStyled.h6(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -5130,9 +5192,9 @@ var DEFAULTS = {
|
|
|
5130
5192
|
size: 'regular',
|
|
5131
5193
|
},
|
|
5132
5194
|
};
|
|
5133
|
-
var templateObject_1$
|
|
5195
|
+
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;
|
|
5134
5196
|
|
|
5135
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5197
|
+
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) {
|
|
5136
5198
|
var inline = _a.inline;
|
|
5137
5199
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5138
5200
|
});
|
|
@@ -5151,9 +5213,9 @@ var SizeSelector = function (_a) {
|
|
|
5151
5213
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5152
5214
|
}) }), void 0)] }), void 0));
|
|
5153
5215
|
};
|
|
5154
|
-
var templateObject_1$
|
|
5216
|
+
var templateObject_1$1z;
|
|
5155
5217
|
|
|
5156
|
-
var getStylesBySize$
|
|
5218
|
+
var getStylesBySize$c = function (size) {
|
|
5157
5219
|
switch (size) {
|
|
5158
5220
|
case exports.ComponentSize.Large:
|
|
5159
5221
|
case exports.ComponentSize.Medium:
|
|
@@ -5171,14 +5233,14 @@ var getStylesBySize$9 = function (size) {
|
|
|
5171
5233
|
}
|
|
5172
5234
|
};
|
|
5173
5235
|
var textButtonStyles$1 = function (theme, size) {
|
|
5174
|
-
var stylesBySize = getStylesBySize$
|
|
5236
|
+
var stylesBySize = getStylesBySize$c(size);
|
|
5175
5237
|
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': {
|
|
5176
5238
|
color: theme.colors.shades['250'].color,
|
|
5177
5239
|
textDecorationLine: 'none',
|
|
5178
5240
|
} });
|
|
5179
5241
|
};
|
|
5180
5242
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5181
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5243
|
+
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));
|
|
5182
5244
|
};
|
|
5183
5245
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5184
5246
|
if (disabled)
|
|
@@ -5194,22 +5256,22 @@ var TextButton = function (_a) {
|
|
|
5194
5256
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5195
5257
|
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));
|
|
5196
5258
|
};
|
|
5197
|
-
var templateObject_1$
|
|
5259
|
+
var templateObject_1$1y;
|
|
5198
5260
|
|
|
5199
|
-
var Container$
|
|
5200
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
5201
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5261
|
+
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"])));
|
|
5262
|
+
var P$3 = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5263
|
+
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"])));
|
|
5202
5264
|
var SizeFitGuide = function (_a) {
|
|
5203
5265
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5204
|
-
return (jsxRuntime.jsxs(Container$
|
|
5266
|
+
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5205
5267
|
};
|
|
5206
|
-
var templateObject_1$
|
|
5268
|
+
var templateObject_1$1x, templateObject_2$12, templateObject_3$Q;
|
|
5207
5269
|
|
|
5208
|
-
var getStylesBySize$
|
|
5270
|
+
var getStylesBySize$b = function (size, bordersRounded) {
|
|
5209
5271
|
switch (size) {
|
|
5210
5272
|
case exports.ComponentSize.Large:
|
|
5211
5273
|
return {
|
|
5212
|
-
borderRadius: '0.375rem',
|
|
5274
|
+
borderRadius: bordersRounded ? '18px' : '0.375rem',
|
|
5213
5275
|
padding: '0 0.75rem',
|
|
5214
5276
|
fontSize: '0.875rem',
|
|
5215
5277
|
lineHeight: '1.125rem',
|
|
@@ -5217,7 +5279,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5217
5279
|
};
|
|
5218
5280
|
case exports.ComponentSize.Medium:
|
|
5219
5281
|
return {
|
|
5220
|
-
borderRadius: '0.25rem',
|
|
5282
|
+
borderRadius: bordersRounded ? '18px' : '0.25rem',
|
|
5221
5283
|
padding: '0 0.5rem',
|
|
5222
5284
|
fontSize: '0.75rem',
|
|
5223
5285
|
lineHeight: '1rem',
|
|
@@ -5225,7 +5287,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5225
5287
|
};
|
|
5226
5288
|
case exports.ComponentSize.Small:
|
|
5227
5289
|
return {
|
|
5228
|
-
borderRadius: '0.25rem',
|
|
5290
|
+
borderRadius: bordersRounded ? '20px' : '0.25rem',
|
|
5229
5291
|
padding: '0',
|
|
5230
5292
|
fontSize: '0.625rem',
|
|
5231
5293
|
lineHeight: '0.75rem',
|
|
@@ -5233,7 +5295,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5233
5295
|
};
|
|
5234
5296
|
}
|
|
5235
5297
|
};
|
|
5236
|
-
var Container$
|
|
5298
|
+
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) {
|
|
5237
5299
|
var backgroundColor = _a.backgroundColor;
|
|
5238
5300
|
return backgroundColor;
|
|
5239
5301
|
}, function (_a) {
|
|
@@ -5241,38 +5303,38 @@ var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = _
|
|
|
5241
5303
|
return borderColor;
|
|
5242
5304
|
}, function (_a) {
|
|
5243
5305
|
var _b;
|
|
5244
|
-
var size = _a.size;
|
|
5245
|
-
return (_b = getStylesBySize$
|
|
5306
|
+
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5307
|
+
return (_b = getStylesBySize$b(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5246
5308
|
}, function (_a) {
|
|
5247
5309
|
var _b;
|
|
5248
5310
|
var size = _a.size;
|
|
5249
|
-
return (_b = getStylesBySize$
|
|
5311
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5250
5312
|
}, function (_a) {
|
|
5251
5313
|
var size = _a.size;
|
|
5252
5314
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5253
5315
|
}, function (_a) {
|
|
5254
5316
|
var _b;
|
|
5255
5317
|
var size = _a.size;
|
|
5256
|
-
return (_b = getStylesBySize$
|
|
5318
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5257
5319
|
});
|
|
5258
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5320
|
+
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) {
|
|
5259
5321
|
var textColor = _a.textColor;
|
|
5260
5322
|
return textColor;
|
|
5261
5323
|
}, function (_a) {
|
|
5262
5324
|
var _b;
|
|
5263
5325
|
var size = _a.size;
|
|
5264
|
-
return (_b = getStylesBySize$
|
|
5326
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5265
5327
|
}, function (_a) {
|
|
5266
5328
|
var _b;
|
|
5267
5329
|
var size = _a.size;
|
|
5268
|
-
return (_b = getStylesBySize$
|
|
5330
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5269
5331
|
});
|
|
5270
5332
|
var DiscountTag = function (_a) {
|
|
5271
|
-
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 ? exports.ComponentSize.Medium : _f, style = _a.style;
|
|
5333
|
+
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5272
5334
|
var theme = useTheme();
|
|
5273
|
-
return (jsxRuntime.jsx(Container$
|
|
5335
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
5274
5336
|
};
|
|
5275
|
-
var templateObject_1$
|
|
5337
|
+
var templateObject_1$1w, templateObject_2$11;
|
|
5276
5338
|
|
|
5277
5339
|
function getWindowDimensions() {
|
|
5278
5340
|
var width = window.innerWidth, height = window.innerHeight;
|
|
@@ -5298,7 +5360,7 @@ var useWindowDimensions = function (breakpoints) {
|
|
|
5298
5360
|
};
|
|
5299
5361
|
};
|
|
5300
5362
|
|
|
5301
|
-
var getStylesBySize$
|
|
5363
|
+
var getStylesBySize$a = function (size) {
|
|
5302
5364
|
switch (size) {
|
|
5303
5365
|
case exports.ComponentSize.Large:
|
|
5304
5366
|
return {
|
|
@@ -5326,8 +5388,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5326
5388
|
};
|
|
5327
5389
|
}
|
|
5328
5390
|
};
|
|
5329
|
-
var Container$
|
|
5330
|
-
var Price = newStyled.p(templateObject_2$
|
|
5391
|
+
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"])));
|
|
5392
|
+
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) {
|
|
5331
5393
|
var weight = _a.weight;
|
|
5332
5394
|
return (weight ? weight : '400');
|
|
5333
5395
|
}, function (_a) {
|
|
@@ -5335,13 +5397,13 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5335
5397
|
var size = _a.size, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
|
|
5336
5398
|
return finalPriceStyled || finalPriceStyledSmall
|
|
5337
5399
|
? finalPriceStyledSmall
|
|
5338
|
-
? (_b = getStylesBySize$
|
|
5339
|
-
: (_c = getStylesBySize$
|
|
5340
|
-
: (_d = getStylesBySize$
|
|
5400
|
+
? (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
|
|
5401
|
+
: (_c = getStylesBySize$a(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
|
|
5402
|
+
: (_d = getStylesBySize$a(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
|
|
5341
5403
|
}, function (_a) {
|
|
5342
5404
|
var _b;
|
|
5343
5405
|
var size = _a.size;
|
|
5344
|
-
return (_b = getStylesBySize$
|
|
5406
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5345
5407
|
}, function (_a) {
|
|
5346
5408
|
var color = _a.color;
|
|
5347
5409
|
return color;
|
|
@@ -5351,15 +5413,15 @@ var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5351
5413
|
}, function (_a) {
|
|
5352
5414
|
var _b;
|
|
5353
5415
|
var margin = _a.margin, size = _a.size;
|
|
5354
|
-
return (margin ? (_b = getStylesBySize$
|
|
5416
|
+
return (margin ? (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5355
5417
|
}, function (_a) {
|
|
5356
5418
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5357
5419
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5358
5420
|
});
|
|
5359
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5421
|
+
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) {
|
|
5360
5422
|
var _b;
|
|
5361
5423
|
var size = _a.size;
|
|
5362
|
-
return (_b = getStylesBySize$
|
|
5424
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5363
5425
|
});
|
|
5364
5426
|
function getTestId() {
|
|
5365
5427
|
var args = [];
|
|
@@ -5387,11 +5449,11 @@ var PriceLabel = function (_a) {
|
|
|
5387
5449
|
: exports.ComponentSize.XSmall;
|
|
5388
5450
|
return (jsxRuntime.jsx(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));
|
|
5389
5451
|
};
|
|
5390
|
-
return (jsxRuntime.jsxs(Container$
|
|
5452
|
+
return (jsxRuntime.jsxs(Container$12, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5391
5453
|
};
|
|
5392
|
-
var templateObject_1$
|
|
5454
|
+
var templateObject_1$1v, templateObject_2$10, templateObject_3$P;
|
|
5393
5455
|
|
|
5394
|
-
var getStylesBySize$
|
|
5456
|
+
var getStylesBySize$9 = function (size) {
|
|
5395
5457
|
switch (size) {
|
|
5396
5458
|
case exports.ComponentSize.Large:
|
|
5397
5459
|
return {
|
|
@@ -5419,7 +5481,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5419
5481
|
};
|
|
5420
5482
|
}
|
|
5421
5483
|
};
|
|
5422
|
-
var Container
|
|
5484
|
+
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) {
|
|
5423
5485
|
var backgroundColor = _a.backgroundColor;
|
|
5424
5486
|
return backgroundColor;
|
|
5425
5487
|
}, function (_a) {
|
|
@@ -5428,42 +5490,42 @@ var Container$$ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __
|
|
|
5428
5490
|
}, function (_a) {
|
|
5429
5491
|
var _b;
|
|
5430
5492
|
var size = _a.size;
|
|
5431
|
-
return (_b = getStylesBySize$
|
|
5493
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5432
5494
|
}, function (_a) {
|
|
5433
5495
|
var _b;
|
|
5434
5496
|
var size = _a.size;
|
|
5435
|
-
return (_b = getStylesBySize$
|
|
5497
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5436
5498
|
}, function (_a) {
|
|
5437
5499
|
var size = _a.size;
|
|
5438
5500
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5439
5501
|
}, function (_a) {
|
|
5440
5502
|
var _b;
|
|
5441
5503
|
var size = _a.size;
|
|
5442
|
-
return (_b = getStylesBySize$
|
|
5504
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5443
5505
|
});
|
|
5444
|
-
var H3$2 = newStyled.h3(templateObject_2
|
|
5506
|
+
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) {
|
|
5445
5507
|
var textColor = _a.textColor;
|
|
5446
5508
|
return textColor;
|
|
5447
5509
|
}, function (_a) {
|
|
5448
5510
|
var _b;
|
|
5449
5511
|
var size = _a.size;
|
|
5450
|
-
return (_b = getStylesBySize$
|
|
5512
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5451
5513
|
}, function (_a) {
|
|
5452
5514
|
var _b;
|
|
5453
5515
|
var size = _a.size;
|
|
5454
|
-
return (_b = getStylesBySize$
|
|
5516
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5455
5517
|
});
|
|
5456
5518
|
var ClubOfferTag = function (_a) {
|
|
5457
5519
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5458
5520
|
var theme = useTheme();
|
|
5459
|
-
return (jsxRuntime.jsx(Container
|
|
5521
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
5460
5522
|
};
|
|
5461
|
-
var templateObject_1$
|
|
5523
|
+
var templateObject_1$1u, templateObject_2$$;
|
|
5462
5524
|
|
|
5463
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5525
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5464
5526
|
var PriceLabelV2 = function (_a) {
|
|
5465
5527
|
var _b;
|
|
5466
|
-
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 ? exports.ComponentSize.Medium : _e, _f = _a.savingsDisplay, savingsDisplay =
|
|
5528
|
+
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 ? exports.ComponentSize.Medium : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g;
|
|
5467
5529
|
var theme = useTheme();
|
|
5468
5530
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
5469
5531
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
@@ -5509,7 +5571,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5509
5571
|
}
|
|
5510
5572
|
var savetoString = saveto.toFixed(2);
|
|
5511
5573
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5512
|
-
return (jsxRuntime.jsxs(Container$
|
|
5574
|
+
return (jsxRuntime.jsxs(Container$12, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5513
5575
|
borderRadius: '8px',
|
|
5514
5576
|
width: '107px',
|
|
5515
5577
|
height: '28px',
|
|
@@ -5519,7 +5581,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5519
5581
|
lineHeight: '22px',
|
|
5520
5582
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5521
5583
|
};
|
|
5522
|
-
var templateObject_1$
|
|
5584
|
+
var templateObject_1$1t;
|
|
5523
5585
|
|
|
5524
5586
|
var OneColorSelector = function (_a) {
|
|
5525
5587
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5560,11 +5622,11 @@ var OutOfStock = function (_a) {
|
|
|
5560
5622
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5561
5623
|
};
|
|
5562
5624
|
|
|
5563
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5564
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5565
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5566
|
-
var Span = newStyled.span(templateObject_4$
|
|
5567
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5625
|
+
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"])));
|
|
5626
|
+
newStyled(lt.Label)(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5627
|
+
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"])));
|
|
5628
|
+
var Span = newStyled.span(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5629
|
+
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"])));
|
|
5568
5630
|
var Label$3 = function (_a) {
|
|
5569
5631
|
var label = _a.label, values = _a.values;
|
|
5570
5632
|
return (jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5582,23 +5644,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5582
5644
|
Option: Option,
|
|
5583
5645
|
OptionsContainer: OptionsContainer,
|
|
5584
5646
|
});
|
|
5585
|
-
var templateObject_1$
|
|
5647
|
+
var templateObject_1$1s, templateObject_2$_, templateObject_3$O, templateObject_4$B, templateObject_5$p;
|
|
5586
5648
|
|
|
5587
|
-
var Container$
|
|
5649
|
+
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) {
|
|
5588
5650
|
var borderColor = _a.borderColor;
|
|
5589
5651
|
return borderColor;
|
|
5590
5652
|
}, function (_a) {
|
|
5591
5653
|
var noStock = _a.noStock;
|
|
5592
5654
|
return (noStock ? '0.4' : '1');
|
|
5593
5655
|
});
|
|
5594
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5656
|
+
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"])));
|
|
5595
5657
|
var PatternSelector = function (_a) {
|
|
5596
5658
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5597
5659
|
var theme = useTheme();
|
|
5598
5660
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5599
|
-
return (jsxRuntime.jsx(Container$
|
|
5661
|
+
return (jsxRuntime.jsx(Container$10, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5600
5662
|
};
|
|
5601
|
-
var templateObject_1$
|
|
5663
|
+
var templateObject_1$1r, templateObject_2$Z;
|
|
5602
5664
|
|
|
5603
5665
|
var renderOptions$1 = function (options) {
|
|
5604
5666
|
if (options.length === 0) {
|
|
@@ -5803,7 +5865,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5803
5865
|
literal: true,
|
|
5804
5866
|
});
|
|
5805
5867
|
|
|
5806
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5868
|
+
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) {
|
|
5807
5869
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5808
5870
|
return borderRadiusVariant &&
|
|
5809
5871
|
"\nborder-radius: 20px;\n";
|
|
@@ -5818,7 +5880,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5818
5880
|
var theme = useTheme();
|
|
5819
5881
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5820
5882
|
};
|
|
5821
|
-
var templateObject_1$
|
|
5883
|
+
var templateObject_1$1q;
|
|
5822
5884
|
|
|
5823
5885
|
var Button$5 = newStyled.button(function () { return ({
|
|
5824
5886
|
background: 'transparent',
|
|
@@ -10062,16 +10124,16 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10062
10124
|
return Slider;
|
|
10063
10125
|
}(React__default["default"].Component);
|
|
10064
10126
|
|
|
10065
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10127
|
+
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) {
|
|
10066
10128
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10067
10129
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10068
10130
|
}, function (_a) {
|
|
10069
10131
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10070
10132
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10071
10133
|
});
|
|
10072
|
-
var templateObject_1$
|
|
10134
|
+
var templateObject_1$1p;
|
|
10073
10135
|
|
|
10074
|
-
var getStylesBySize$
|
|
10136
|
+
var getStylesBySize$8 = function (size) {
|
|
10075
10137
|
// rem units
|
|
10076
10138
|
switch (size) {
|
|
10077
10139
|
case exports.ComponentSize.Large:
|
|
@@ -10103,7 +10165,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
10103
10165
|
var SliderNavigation = function (_a) {
|
|
10104
10166
|
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;
|
|
10105
10167
|
var _f = React$2.useState(0), activeIndex = _f[0], setActiveIndex = _f[1];
|
|
10106
|
-
var styles = dotsSize && getStylesBySize$
|
|
10168
|
+
var styles = dotsSize && getStylesBySize$8(dotsSize);
|
|
10107
10169
|
var theme = useTheme();
|
|
10108
10170
|
var nextArrow = arrows && (jsx(ArrowButton$1, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
10109
10171
|
var prevArrow = arrows && (jsx(ArrowButton$1, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
@@ -10128,22 +10190,38 @@ var SliderNavigation = function (_a) {
|
|
|
10128
10190
|
} }, { 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));
|
|
10129
10191
|
};
|
|
10130
10192
|
|
|
10131
|
-
var horizontalStyles = css(templateObject_1$
|
|
10132
|
-
var verticalStyles = css(templateObject_2$
|
|
10133
|
-
var Container
|
|
10193
|
+
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"])));
|
|
10194
|
+
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"])));
|
|
10195
|
+
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) {
|
|
10134
10196
|
var position = _a.position;
|
|
10135
10197
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10198
|
+
}, function (_a) {
|
|
10199
|
+
var hasOverflowArrows = _a.hasOverflowArrows;
|
|
10200
|
+
return hasOverflowArrows &&
|
|
10201
|
+
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
10136
10202
|
});
|
|
10137
|
-
var Button$4 = newStyled.button(templateObject_4$
|
|
10203
|
+
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"])));
|
|
10204
|
+
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"])));
|
|
10205
|
+
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"])));
|
|
10206
|
+
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"])));
|
|
10207
|
+
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"])));
|
|
10138
10208
|
var ImagePreviewList = function (_a) {
|
|
10139
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10140
|
-
|
|
10141
|
-
|
|
10142
|
-
|
|
10143
|
-
|
|
10144
|
-
|
|
10209
|
+
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;
|
|
10210
|
+
var handleScrollVerticalPrev = function () {
|
|
10211
|
+
var element = document.querySelector(".imageListContainer");
|
|
10212
|
+
element.scrollBy(0, -200);
|
|
10213
|
+
};
|
|
10214
|
+
var handleScrollVerticalNext = function () {
|
|
10215
|
+
var element = document.querySelector(".imageListContainer");
|
|
10216
|
+
element.scrollBy(0, 200);
|
|
10217
|
+
};
|
|
10218
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$$, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10219
|
+
arrowWidth: 0.75,
|
|
10220
|
+
arrowHeight: 1.25,
|
|
10221
|
+
arrowPadding: 1.625,
|
|
10222
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
10145
10223
|
};
|
|
10146
|
-
var templateObject_1$
|
|
10224
|
+
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;
|
|
10147
10225
|
|
|
10148
10226
|
var propTypes = {exports: {}};
|
|
10149
10227
|
|
|
@@ -11736,40 +11814,40 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11736
11814
|
afterZoomOut: PropTypes.func
|
|
11737
11815
|
} : {};
|
|
11738
11816
|
|
|
11739
|
-
var Container$
|
|
11817
|
+
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) {
|
|
11740
11818
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11741
11819
|
return borderRadiusVariant &&
|
|
11742
11820
|
"\n border-radius: 40px;\n ";
|
|
11743
11821
|
});
|
|
11744
|
-
var TopTagContainer$
|
|
11745
|
-
var BottomTagContainer$
|
|
11746
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11747
|
-
var Video$1 = newStyled.div(templateObject_5$
|
|
11748
|
-
var VideoTag$1 = newStyled.div(templateObject_6$
|
|
11749
|
-
var Text$7 = newStyled.div(templateObject_7$
|
|
11822
|
+
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'); });
|
|
11823
|
+
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"])));
|
|
11824
|
+
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"])));
|
|
11825
|
+
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"])));
|
|
11826
|
+
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"])));
|
|
11827
|
+
var Text$7 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11750
11828
|
var ImageProductWithTags$1 = function (_a) {
|
|
11751
11829
|
var _b, _c;
|
|
11752
11830
|
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;
|
|
11753
|
-
return (jsxRuntime.jsxs(Container$
|
|
11831
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11754
11832
|
alt: image.alt,
|
|
11755
11833
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11756
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
11834
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("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), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11757
11835
|
};
|
|
11758
|
-
var templateObject_1$
|
|
11836
|
+
var templateObject_1$1n, templateObject_2$X, templateObject_3$M, templateObject_4$z, templateObject_5$n, templateObject_6$m, templateObject_7$e;
|
|
11759
11837
|
|
|
11760
|
-
var Container$
|
|
11838
|
+
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"])));
|
|
11761
11839
|
var ProductGallery = function (_a) {
|
|
11762
|
-
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;
|
|
11840
|
+
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;
|
|
11763
11841
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
11764
|
-
var
|
|
11842
|
+
var _e = React$2.useState(initialValue), selectedImage = _e[0], setSelectedImage = _e[1];
|
|
11765
11843
|
React$2.useEffect(function () {
|
|
11766
11844
|
setSelectedImage(initialValue);
|
|
11767
11845
|
}, [initialValue]);
|
|
11768
|
-
return (jsxRuntime.jsxs(Container$
|
|
11846
|
+
return (jsxRuntime.jsxs(Container$Z, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11769
11847
|
setSelectedImage(value);
|
|
11770
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11848
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11771
11849
|
};
|
|
11772
|
-
var templateObject_1$
|
|
11850
|
+
var templateObject_1$1m;
|
|
11773
11851
|
|
|
11774
11852
|
/* base styles & size variants */
|
|
11775
11853
|
var StarStyles = {
|
|
@@ -11815,8 +11893,8 @@ var StarStyles = {
|
|
|
11815
11893
|
});
|
|
11816
11894
|
},
|
|
11817
11895
|
};
|
|
11818
|
-
var Container$
|
|
11819
|
-
var templateObject_1$
|
|
11896
|
+
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"])));
|
|
11897
|
+
var templateObject_1$1l;
|
|
11820
11898
|
|
|
11821
11899
|
var StarContainer = newStyled.div(function (_a) {
|
|
11822
11900
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11834,7 +11912,7 @@ var sizes = {
|
|
|
11834
11912
|
var StarList = function (_a) {
|
|
11835
11913
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11836
11914
|
var theme = useTheme();
|
|
11837
|
-
return (jsxRuntime.jsx(Container$
|
|
11915
|
+
return (jsxRuntime.jsx(Container$Y, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11838
11916
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11839
11917
|
}) }, void 0));
|
|
11840
11918
|
};
|
|
@@ -11878,8 +11956,8 @@ var LabelStyles = {
|
|
|
11878
11956
|
});
|
|
11879
11957
|
},
|
|
11880
11958
|
};
|
|
11881
|
-
var Container$
|
|
11882
|
-
var templateObject_1$
|
|
11959
|
+
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"])));
|
|
11960
|
+
var templateObject_1$1k;
|
|
11883
11961
|
|
|
11884
11962
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11885
11963
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11919,11 +11997,11 @@ var Rating = function (_a) {
|
|
|
11919
11997
|
href: reviewsContainerId,
|
|
11920
11998
|
}
|
|
11921
11999
|
: {};
|
|
11922
|
-
return (jsxRuntime.jsxs(Container$
|
|
12000
|
+
return (jsxRuntime.jsxs(Container$X, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11923
12001
|
};
|
|
11924
12002
|
|
|
11925
|
-
var Container$
|
|
11926
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
12003
|
+
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"])));
|
|
12004
|
+
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; });
|
|
11927
12005
|
var textButtonStyles = function (theme) { return ({
|
|
11928
12006
|
border: 'none',
|
|
11929
12007
|
background: 'transparent',
|
|
@@ -11936,9 +12014,18 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11936
12014
|
var FitPredictor = function (_a) {
|
|
11937
12015
|
var onClick = _a.onClick;
|
|
11938
12016
|
var theme = useTheme();
|
|
11939
|
-
return (jsxs(Container$
|
|
12017
|
+
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));
|
|
12018
|
+
};
|
|
12019
|
+
var templateObject_1$1j, templateObject_2$W;
|
|
12020
|
+
|
|
12021
|
+
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"])));
|
|
12022
|
+
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"])));
|
|
12023
|
+
var FitGuarantee = function (_a) {
|
|
12024
|
+
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;
|
|
12025
|
+
var theme = useTheme();
|
|
12026
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$8, { children: [jsxRuntime.jsx(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(Icon.Custom.SixtyDaysGuarantee, { width: 3.7, height: 3.38 }, void 0) }), void 0), jsxRuntime.jsxs(Container$V, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0', width: '100%' } }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
11940
12027
|
};
|
|
11941
|
-
var templateObject_1$
|
|
12028
|
+
var templateObject_1$1i, templateObject_2$V;
|
|
11942
12029
|
|
|
11943
12030
|
var P$1 = newStyled.p(function (_a) {
|
|
11944
12031
|
var color = _a.color;
|
|
@@ -11952,7 +12039,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11952
12039
|
margin: '0.938rem 4.188rem',
|
|
11953
12040
|
});
|
|
11954
12041
|
});
|
|
11955
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
12042
|
+
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) {
|
|
11956
12043
|
var height = _a.height;
|
|
11957
12044
|
return height || '0.5rem';
|
|
11958
12045
|
}, function (_a) {
|
|
@@ -11981,7 +12068,7 @@ var Background$1 = newStyled.div(function (_a) {
|
|
|
11981
12068
|
position: 'absolute',
|
|
11982
12069
|
});
|
|
11983
12070
|
});
|
|
11984
|
-
var Container$
|
|
12071
|
+
var Container$U = newStyled.div(function (_a) {
|
|
11985
12072
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11986
12073
|
return ({
|
|
11987
12074
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11995,11 +12082,11 @@ var getBarWithBasedOnPercent$1 = function (percent) {
|
|
|
11995
12082
|
var ProgressBar = function (_a) {
|
|
11996
12083
|
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;
|
|
11997
12084
|
var theme = useTheme();
|
|
11998
|
-
return (jsxRuntime.jsxs(Container$
|
|
12085
|
+
return (jsxRuntime.jsxs(Container$U, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11999
12086
|
};
|
|
12000
|
-
var templateObject_1$
|
|
12087
|
+
var templateObject_1$1h;
|
|
12001
12088
|
|
|
12002
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
12089
|
+
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) {
|
|
12003
12090
|
var height = _a.height;
|
|
12004
12091
|
return height || '0.5rem';
|
|
12005
12092
|
}, function (_a) {
|
|
@@ -12038,7 +12125,7 @@ var BarContainer$1 = newStyled.div({
|
|
|
12038
12125
|
padding: '0 16px',
|
|
12039
12126
|
position: 'relative',
|
|
12040
12127
|
});
|
|
12041
|
-
var Container$
|
|
12128
|
+
var Container$T = newStyled.div(function (_a) {
|
|
12042
12129
|
var backgroundColor = _a.backgroundColor;
|
|
12043
12130
|
return ({
|
|
12044
12131
|
width: '475px',
|
|
@@ -12069,11 +12156,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
12069
12156
|
var theme = useTheme();
|
|
12070
12157
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
12071
12158
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
12072
|
-
return (jsxRuntime.jsxs(Container$
|
|
12159
|
+
return (jsxRuntime.jsxs(Container$T, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
12073
12160
|
};
|
|
12074
|
-
var templateObject_1$
|
|
12161
|
+
var templateObject_1$1g;
|
|
12075
12162
|
|
|
12076
|
-
var getStylesBySize$
|
|
12163
|
+
var getStylesBySize$7 = function (size) {
|
|
12077
12164
|
switch (size) {
|
|
12078
12165
|
case exports.ComponentSize.Large:
|
|
12079
12166
|
return {
|
|
@@ -12092,21 +12179,21 @@ var getStylesBySize$4 = function (size) {
|
|
|
12092
12179
|
};
|
|
12093
12180
|
}
|
|
12094
12181
|
};
|
|
12095
|
-
var Container$
|
|
12182
|
+
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) {
|
|
12096
12183
|
var backgroundColor = _a.backgroundColor;
|
|
12097
12184
|
return backgroundColor;
|
|
12098
12185
|
}, function (_a) {
|
|
12099
12186
|
var _b;
|
|
12100
12187
|
var size = _a.size;
|
|
12101
|
-
return (_b = getStylesBySize$
|
|
12188
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
12102
12189
|
}, function (_a) {
|
|
12103
12190
|
var _b;
|
|
12104
12191
|
var size = _a.size;
|
|
12105
|
-
return (_b = getStylesBySize$
|
|
12192
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
12106
12193
|
}, function (_a) {
|
|
12107
12194
|
var _b;
|
|
12108
12195
|
var size = _a.size;
|
|
12109
|
-
return (_b = getStylesBySize$
|
|
12196
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
12110
12197
|
}, function (_a) {
|
|
12111
12198
|
var hoverBackgroundColor = _a.hoverBackgroundColor;
|
|
12112
12199
|
return hoverBackgroundColor;
|
|
@@ -12120,9 +12207,9 @@ var Container$R = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __
|
|
|
12120
12207
|
var IconButton = function (_a) {
|
|
12121
12208
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
12122
12209
|
var theme = useTheme();
|
|
12123
|
-
return (jsxRuntime.jsx(Container$
|
|
12210
|
+
return (jsxRuntime.jsx(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));
|
|
12124
12211
|
};
|
|
12125
|
-
var templateObject_1$
|
|
12212
|
+
var templateObject_1$1f;
|
|
12126
12213
|
|
|
12127
12214
|
var TooltipArrow = function (_a) {
|
|
12128
12215
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12202,7 +12289,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12202
12289
|
}
|
|
12203
12290
|
};
|
|
12204
12291
|
|
|
12205
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12292
|
+
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) {
|
|
12206
12293
|
var position = _a.position;
|
|
12207
12294
|
return getWrapperFlexDirection(position);
|
|
12208
12295
|
});
|
|
@@ -12227,14 +12314,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12227
12314
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12228
12315
|
return actual === expected ? margin : '0';
|
|
12229
12316
|
};
|
|
12230
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12317
|
+
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) {
|
|
12231
12318
|
var borderColor = _a.borderColor;
|
|
12232
12319
|
return borderColor;
|
|
12233
12320
|
}, function (_a) {
|
|
12234
12321
|
var backgroundColor = _a.backgroundColor;
|
|
12235
12322
|
return backgroundColor;
|
|
12236
12323
|
});
|
|
12237
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12324
|
+
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) {
|
|
12238
12325
|
var position = _a.position;
|
|
12239
12326
|
return getArrowRotation(position);
|
|
12240
12327
|
}, function (_a) {
|
|
@@ -12244,17 +12331,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$K || (templateObject_
|
|
|
12244
12331
|
var position = _a.position;
|
|
12245
12332
|
return getArrowContainerMargin(position);
|
|
12246
12333
|
});
|
|
12247
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12334
|
+
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) {
|
|
12248
12335
|
var color = _a.color;
|
|
12249
12336
|
return color;
|
|
12250
12337
|
});
|
|
12251
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12252
|
-
var Title$
|
|
12338
|
+
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"])));
|
|
12339
|
+
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) {
|
|
12253
12340
|
var color = _a.color;
|
|
12254
12341
|
return color;
|
|
12255
12342
|
});
|
|
12256
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12257
|
-
var templateObject_1$
|
|
12343
|
+
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"])));
|
|
12344
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$L, templateObject_4$y, templateObject_5$m, templateObject_6$l, templateObject_7$d;
|
|
12258
12345
|
|
|
12259
12346
|
var Tooltip = function (_a) {
|
|
12260
12347
|
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;
|
|
@@ -12275,7 +12362,7 @@ var Tooltip = function (_a) {
|
|
|
12275
12362
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
12276
12363
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
12277
12364
|
: theme.colors.pallete.secondary.color,
|
|
12278
|
-
}) }, void 0)), jsxRuntime.jsx(Title$
|
|
12365
|
+
}) }, void 0)), jsxRuntime.jsx(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) && (jsxRuntime.jsx(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
12279
12366
|
};
|
|
12280
12367
|
|
|
12281
12368
|
/* base styles & variants */
|
|
@@ -12341,7 +12428,7 @@ var AccordionDetailsStyles = {
|
|
|
12341
12428
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12342
12429
|
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)]; });
|
|
12343
12430
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12344
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12431
|
+
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"])));
|
|
12345
12432
|
var Accordion$1 = function (_a) {
|
|
12346
12433
|
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;
|
|
12347
12434
|
var theme = useTheme();
|
|
@@ -12353,7 +12440,7 @@ var Accordion$1 = function (_a) {
|
|
|
12353
12440
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12354
12441
|
} }), void 0));
|
|
12355
12442
|
};
|
|
12356
|
-
var templateObject_1$
|
|
12443
|
+
var templateObject_1$1d;
|
|
12357
12444
|
|
|
12358
12445
|
/* base styles & size variants */
|
|
12359
12446
|
var CustomRadioStyles$2 = {
|
|
@@ -12422,9 +12509,9 @@ var ContainerStyles$2 = {
|
|
|
12422
12509
|
},
|
|
12423
12510
|
};
|
|
12424
12511
|
|
|
12425
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12426
|
-
var Container$
|
|
12427
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12512
|
+
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"])));
|
|
12513
|
+
var Container$R = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12514
|
+
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) {
|
|
12428
12515
|
var disabled = _a.disabled;
|
|
12429
12516
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12430
12517
|
});
|
|
@@ -12432,7 +12519,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12432
12519
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12433
12520
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12434
12521
|
]; });
|
|
12435
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12522
|
+
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"])));
|
|
12436
12523
|
var RadioPrimary = function (_a) {
|
|
12437
12524
|
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 ? exports.ComponentSize.Medium : _d;
|
|
12438
12525
|
var theme = useTheme();
|
|
@@ -12440,9 +12527,9 @@ var RadioPrimary = function (_a) {
|
|
|
12440
12527
|
var value = event.currentTarget.value;
|
|
12441
12528
|
onChange({ value: value, label: label });
|
|
12442
12529
|
};
|
|
12443
|
-
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsxs(Container$
|
|
12530
|
+
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsxs(Container$R, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12444
12531
|
};
|
|
12445
|
-
var templateObject_1$
|
|
12532
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$K;
|
|
12446
12533
|
|
|
12447
12534
|
/* base styles & size variants */
|
|
12448
12535
|
var CustomRadioStyles$1 = {
|
|
@@ -12507,9 +12594,9 @@ var ContainerStyles$1 = {
|
|
|
12507
12594
|
},
|
|
12508
12595
|
};
|
|
12509
12596
|
|
|
12510
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12511
|
-
var Container$
|
|
12512
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12597
|
+
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"])));
|
|
12598
|
+
var Container$Q = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12599
|
+
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) {
|
|
12513
12600
|
var disabled = _a.disabled;
|
|
12514
12601
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12515
12602
|
});
|
|
@@ -12517,7 +12604,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12517
12604
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12518
12605
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12519
12606
|
]; });
|
|
12520
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12607
|
+
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) {
|
|
12521
12608
|
var theme = _a.theme;
|
|
12522
12609
|
return theme.component.radio.textSize;
|
|
12523
12610
|
}, function (_a) {
|
|
@@ -12531,9 +12618,9 @@ var RadioInput = function (_a) {
|
|
|
12531
12618
|
var value = event.currentTarget.value;
|
|
12532
12619
|
onChange({ value: value, label: label });
|
|
12533
12620
|
};
|
|
12534
|
-
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$
|
|
12621
|
+
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$Q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12535
12622
|
};
|
|
12536
|
-
var templateObject_1$
|
|
12623
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$J;
|
|
12537
12624
|
|
|
12538
12625
|
var RadioGroupInput = function (_a) {
|
|
12539
12626
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12612,9 +12699,9 @@ var ContainerStyles = {
|
|
|
12612
12699
|
},
|
|
12613
12700
|
};
|
|
12614
12701
|
|
|
12615
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12616
|
-
var Container$
|
|
12617
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12702
|
+
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"])));
|
|
12703
|
+
var Container$P = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12704
|
+
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) {
|
|
12618
12705
|
var disabled = _a.disabled;
|
|
12619
12706
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12620
12707
|
});
|
|
@@ -12622,7 +12709,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12622
12709
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12623
12710
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12624
12711
|
]; });
|
|
12625
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12712
|
+
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) {
|
|
12626
12713
|
var theme = _a.theme;
|
|
12627
12714
|
return theme.component.radio.textSize;
|
|
12628
12715
|
}, function (_a) {
|
|
@@ -12636,9 +12723,9 @@ var ClubRadioInput = function (_a) {
|
|
|
12636
12723
|
var value = event.currentTarget.value;
|
|
12637
12724
|
onChange({ value: value, label: label });
|
|
12638
12725
|
};
|
|
12639
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
12726
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
12640
12727
|
};
|
|
12641
|
-
var templateObject_1$
|
|
12728
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12642
12729
|
|
|
12643
12730
|
var ClubRadioGroupInput = function (_a) {
|
|
12644
12731
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12652,39 +12739,39 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12652
12739
|
}) }), void 0));
|
|
12653
12740
|
};
|
|
12654
12741
|
|
|
12655
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12656
|
-
var Container$
|
|
12742
|
+
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"])));
|
|
12743
|
+
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"])));
|
|
12657
12744
|
var Minimalistic = function (_a) {
|
|
12658
12745
|
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;
|
|
12659
12746
|
var theme = useTheme();
|
|
12660
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
12747
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12661
12748
|
};
|
|
12662
|
-
var templateObject_1$
|
|
12749
|
+
var templateObject_1$19, templateObject_2$Q;
|
|
12663
12750
|
|
|
12664
|
-
var Container$
|
|
12665
|
-
var Title$
|
|
12666
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12667
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12751
|
+
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"])));
|
|
12752
|
+
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; });
|
|
12753
|
+
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; });
|
|
12754
|
+
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"])));
|
|
12668
12755
|
var Simple = function (_a) {
|
|
12669
12756
|
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;
|
|
12670
12757
|
var theme = useTheme();
|
|
12671
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
12758
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$N, { children: [jsxRuntime.jsx(Title$7, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12672
12759
|
};
|
|
12673
|
-
var templateObject_1$
|
|
12760
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$H, templateObject_4$x;
|
|
12674
12761
|
|
|
12675
12762
|
var Bundle = {
|
|
12676
12763
|
Minimalistic: Minimalistic,
|
|
12677
12764
|
Simple: Simple,
|
|
12678
12765
|
};
|
|
12679
12766
|
|
|
12680
|
-
var Container$
|
|
12767
|
+
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"])));
|
|
12681
12768
|
var Tag$2 = function (_a) {
|
|
12682
12769
|
var text = _a.text, className = _a.className;
|
|
12683
|
-
return jsxRuntime.jsx(Container$
|
|
12770
|
+
return jsxRuntime.jsx(Container$M, __assign$1({ className: className }, { children: text }), void 0);
|
|
12684
12771
|
};
|
|
12685
|
-
var templateObject_1$
|
|
12772
|
+
var templateObject_1$17;
|
|
12686
12773
|
|
|
12687
|
-
var getStylesBySize$
|
|
12774
|
+
var getStylesBySize$6 = function (size, styledBorder) {
|
|
12688
12775
|
switch (size) {
|
|
12689
12776
|
case exports.ComponentSize.Large:
|
|
12690
12777
|
return {
|
|
@@ -12715,16 +12802,37 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
12715
12802
|
var CategoryTag = function (_a) {
|
|
12716
12803
|
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
12717
12804
|
var theme = useTheme();
|
|
12718
|
-
var stylesBySize = getStylesBySize$
|
|
12805
|
+
var stylesBySize = getStylesBySize$6(size, styledBorder);
|
|
12719
12806
|
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));
|
|
12720
12807
|
};
|
|
12721
12808
|
|
|
12722
|
-
var getStylesBySize$
|
|
12809
|
+
var getStylesBySize$5 = function (size) {
|
|
12723
12810
|
switch (size) {
|
|
12811
|
+
case exports.ComponentSize.XSmall:
|
|
12812
|
+
return { width: '50px', height: '46px', fontSize: '10px', lineHeight: '12.63px' };
|
|
12813
|
+
case exports.ComponentSize.Small:
|
|
12814
|
+
return { width: '54px', height: '50px', fontSize: '12px', lineHeight: '15.16px' };
|
|
12815
|
+
case exports.ComponentSize.Medium:
|
|
12816
|
+
return { width: '60px', height: '56px', fontSize: '14px', lineHeight: '17.68px' };
|
|
12817
|
+
default:
|
|
12818
|
+
case exports.ComponentSize.Large:
|
|
12819
|
+
return { width: '66px', height: '60px', fontSize: '16px', lineHeight: '20.21px' };
|
|
12820
|
+
}
|
|
12821
|
+
};
|
|
12822
|
+
var CategorySquareTag = function (_a) {
|
|
12823
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? true : _b;
|
|
12824
|
+
var theme = useTheme();
|
|
12825
|
+
var stylesBySize = getStylesBySize$5(size);
|
|
12826
|
+
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));
|
|
12827
|
+
};
|
|
12828
|
+
|
|
12829
|
+
var getStylesBySize$4 = function (size, styledBorder, bottomRightBorderRounded, allBordersRounded) {
|
|
12830
|
+
switch (size) {
|
|
12831
|
+
default:
|
|
12724
12832
|
case exports.ComponentSize.Large:
|
|
12725
12833
|
return {
|
|
12726
12834
|
padding: '0.5rem 1rem',
|
|
12727
|
-
borderRadius: styledBorder ?
|
|
12835
|
+
borderRadius: styledBorder ? allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12728
12836
|
fontSize: '0.75rem',
|
|
12729
12837
|
lineHeight: '1rem',
|
|
12730
12838
|
letterSpacing: '0.16em',
|
|
@@ -12732,7 +12840,7 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12732
12840
|
case exports.ComponentSize.Medium:
|
|
12733
12841
|
return {
|
|
12734
12842
|
padding: '0.375rem 0.625rem 0.25rem',
|
|
12735
|
-
borderRadius: styledBorder ?
|
|
12843
|
+
borderRadius: styledBorder ? allBordersRounded === null || allBordersRounded === void 0 ? void 0 : allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12736
12844
|
fontSize: '0.625rem',
|
|
12737
12845
|
lineHeight: '0.875rem',
|
|
12738
12846
|
letterSpacing: '0.16em',
|
|
@@ -12740,7 +12848,7 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12740
12848
|
case exports.ComponentSize.Small:
|
|
12741
12849
|
return {
|
|
12742
12850
|
padding: '0.125rem 0.5rem',
|
|
12743
|
-
borderRadius: styledBorder ?
|
|
12851
|
+
borderRadius: styledBorder ? allBordersRounded === null || allBordersRounded === void 0 ? void 0 : allBordersRounded.value : "0 0 ".concat(bottomRightBorderRounded, " 0"),
|
|
12744
12852
|
fontSize: '0.5rem',
|
|
12745
12853
|
lineHeight: '0.875rem',
|
|
12746
12854
|
letterSpacing: '0.16em',
|
|
@@ -12748,11 +12856,30 @@ var getStylesBySize$2 = function (size, styledBorder) {
|
|
|
12748
12856
|
}
|
|
12749
12857
|
};
|
|
12750
12858
|
var SeasonOfferTag = function (_a) {
|
|
12751
|
-
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;
|
|
12752
|
-
var stylesBySize = getStylesBySize$
|
|
12859
|
+
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;
|
|
12860
|
+
var stylesBySize = getStylesBySize$4(size, styledBorder, bottomRightBorderRounded, allBordersRounded);
|
|
12753
12861
|
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
|
|
12754
12862
|
};
|
|
12755
12863
|
|
|
12864
|
+
var getStylesBySize$3 = function (size) {
|
|
12865
|
+
switch (size) {
|
|
12866
|
+
case exports.ComponentSize.XSmall:
|
|
12867
|
+
return { width: '36px', height: '36px', fontSize: '10px', lineHeight: '14px' };
|
|
12868
|
+
case exports.ComponentSize.Small:
|
|
12869
|
+
return { width: '48px', height: '48px', fontSize: '14px', lineHeight: '18px' };
|
|
12870
|
+
case exports.ComponentSize.Medium:
|
|
12871
|
+
return { width: '64px', height: '64px', fontSize: '16px', lineHeight: '24px' };
|
|
12872
|
+
default:
|
|
12873
|
+
case exports.ComponentSize.Large:
|
|
12874
|
+
return { width: '84px', height: '84px', fontSize: '20px', lineHeight: '28px' };
|
|
12875
|
+
}
|
|
12876
|
+
};
|
|
12877
|
+
var SeasonOfferRoundedTag = function (_a) {
|
|
12878
|
+
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#E22E31' : _b, size = _a.size, className = _a.className;
|
|
12879
|
+
var stylesBySize = getStylesBySize$3(size);
|
|
12880
|
+
return (jsx(Tag$2, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
12881
|
+
};
|
|
12882
|
+
|
|
12756
12883
|
var timeToSeconds = function (_a) {
|
|
12757
12884
|
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
12758
12885
|
return hours * 3600 + minutes * 60 + seconds;
|
|
@@ -12785,11 +12912,11 @@ var Timer = function (_a) {
|
|
|
12785
12912
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12786
12913
|
};
|
|
12787
12914
|
|
|
12788
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12915
|
+
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) {
|
|
12789
12916
|
var color = _a.color;
|
|
12790
12917
|
return color;
|
|
12791
12918
|
});
|
|
12792
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12919
|
+
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) {
|
|
12793
12920
|
var color = _a.color;
|
|
12794
12921
|
return color;
|
|
12795
12922
|
});
|
|
@@ -12798,7 +12925,7 @@ var InputLabel = function (_a) {
|
|
|
12798
12925
|
var theme = useTheme();
|
|
12799
12926
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12800
12927
|
};
|
|
12801
|
-
var templateObject_1$
|
|
12928
|
+
var templateObject_1$16, templateObject_2$O;
|
|
12802
12929
|
|
|
12803
12930
|
var containerByStatus = function (theme, status) {
|
|
12804
12931
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12807,12 +12934,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12807
12934
|
return theme.colors.semantic.urgent.color;
|
|
12808
12935
|
return '';
|
|
12809
12936
|
};
|
|
12810
|
-
var Container$
|
|
12937
|
+
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) {
|
|
12811
12938
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12812
12939
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12813
12940
|
});
|
|
12814
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12815
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12941
|
+
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"])));
|
|
12942
|
+
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) {
|
|
12816
12943
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12817
12944
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12818
12945
|
}, function (_a) {
|
|
@@ -12867,11 +12994,11 @@ var StyledInput = newStyled.input(templateObject_3$F || (templateObject_3$F = __
|
|
|
12867
12994
|
return hasValue &&
|
|
12868
12995
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12869
12996
|
});
|
|
12870
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12997
|
+
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) {
|
|
12871
12998
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12872
12999
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12873
13000
|
});
|
|
12874
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13001
|
+
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) {
|
|
12875
13002
|
var theme = _a.theme;
|
|
12876
13003
|
return theme.component.input.placeholderColor;
|
|
12877
13004
|
}, function (_a) {
|
|
@@ -12884,8 +13011,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$k || (templateObject_5
|
|
|
12884
13011
|
var theme = _a.theme;
|
|
12885
13012
|
return theme.component.input.lineHeight;
|
|
12886
13013
|
});
|
|
12887
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12888
|
-
var templateObject_1$
|
|
13014
|
+
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"])));
|
|
13015
|
+
var templateObject_1$15, templateObject_2$N, templateObject_3$G, templateObject_4$w, templateObject_5$l, templateObject_6$k;
|
|
12889
13016
|
|
|
12890
13017
|
var BaseInput = function (_a) {
|
|
12891
13018
|
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"]);
|
|
@@ -12908,7 +13035,7 @@ var BaseInput = function (_a) {
|
|
|
12908
13035
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12909
13036
|
}, [status]);
|
|
12910
13037
|
var hasValue = Boolean(value);
|
|
12911
|
-
return (jsxRuntime.jsxs(Container$
|
|
13038
|
+
return (jsxRuntime.jsxs(Container$L, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12912
13039
|
onChange(event.target.value, event);
|
|
12913
13040
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12914
13041
|
onChange('', { target: { value: '' } });
|
|
@@ -12929,16 +13056,18 @@ var Button$3 = function (_a) {
|
|
|
12929
13056
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12930
13057
|
};
|
|
12931
13058
|
|
|
12932
|
-
var Container$
|
|
13059
|
+
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) {
|
|
12933
13060
|
var theme = _a.theme;
|
|
12934
13061
|
return theme.component.inputCustom.input.borderRadius;
|
|
12935
13062
|
});
|
|
12936
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12937
|
-
var theme = _a.theme;
|
|
12938
|
-
return
|
|
13063
|
+
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) {
|
|
13064
|
+
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13065
|
+
return defaultRounded
|
|
13066
|
+
? theme.component.inputCustom.button.borderRadius
|
|
13067
|
+
: "0 ".concat(theme.component.inputCustom.button.borderRadius, " ").concat(theme.component.inputCustom.button.borderRadius, " 0");
|
|
12939
13068
|
});
|
|
12940
13069
|
var Custom = function (_a) {
|
|
12941
|
-
var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
|
|
13070
|
+
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"]);
|
|
12942
13071
|
var theme = useTheme();
|
|
12943
13072
|
var props = React$2.useMemo(function () { return ({
|
|
12944
13073
|
variant: variant,
|
|
@@ -12946,23 +13075,23 @@ var Custom = function (_a) {
|
|
|
12946
13075
|
text: text,
|
|
12947
13076
|
disabled: rest.disabled,
|
|
12948
13077
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12949
|
-
return (jsxRuntime.jsx(Container$
|
|
13078
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12950
13079
|
};
|
|
12951
|
-
var templateObject_1$
|
|
13080
|
+
var templateObject_1$14, templateObject_2$M;
|
|
12952
13081
|
|
|
12953
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13082
|
+
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) {
|
|
12954
13083
|
var size = _a.size;
|
|
12955
13084
|
return (size === 'small' ? '36px' : '');
|
|
12956
13085
|
});
|
|
12957
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12958
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13086
|
+
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"])));
|
|
13087
|
+
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"])));
|
|
12959
13088
|
var Success = function (_a) {
|
|
12960
13089
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12961
13090
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12962
13091
|
};
|
|
12963
|
-
var templateObject_1$
|
|
13092
|
+
var templateObject_1$13, templateObject_2$L, templateObject_3$F;
|
|
12964
13093
|
|
|
12965
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13094
|
+
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) {
|
|
12966
13095
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12967
13096
|
return status === exports.InputValidationType.Empty &&
|
|
12968
13097
|
type === 'primary' &&
|
|
@@ -12979,21 +13108,21 @@ var BasePlusButton = function (_a) {
|
|
|
12979
13108
|
}
|
|
12980
13109
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12981
13110
|
};
|
|
12982
|
-
var templateObject_1$
|
|
13111
|
+
var templateObject_1$12;
|
|
12983
13112
|
|
|
12984
|
-
var Container$
|
|
12985
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
13113
|
+
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"])));
|
|
13114
|
+
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; });
|
|
12986
13115
|
var BasePlusIcon = function (_a) {
|
|
12987
13116
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12988
13117
|
var theme = useTheme();
|
|
12989
13118
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12990
|
-
return (jsxRuntime.jsx(Container$
|
|
13119
|
+
return (jsxRuntime.jsx(Container$J, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12991
13120
|
? theme.colors.shades['700'].color
|
|
12992
13121
|
: status === exports.InputValidationType.Error
|
|
12993
13122
|
? theme.colors.semantic.urgent.color
|
|
12994
13123
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12995
13124
|
};
|
|
12996
|
-
var templateObject_1$
|
|
13125
|
+
var templateObject_1$11, templateObject_2$K;
|
|
12997
13126
|
|
|
12998
13127
|
var Input$1 = {
|
|
12999
13128
|
Simple: BaseInput,
|
|
@@ -13002,7 +13131,7 @@ var Input$1 = {
|
|
|
13002
13131
|
SimplePlusIcon: BasePlusIcon,
|
|
13003
13132
|
};
|
|
13004
13133
|
|
|
13005
|
-
var Container$
|
|
13134
|
+
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) {
|
|
13006
13135
|
var width = _a.width;
|
|
13007
13136
|
return width;
|
|
13008
13137
|
}, function (_a) {
|
|
@@ -13018,13 +13147,16 @@ var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __ma
|
|
|
13018
13147
|
var PaymentMethod = function (_a) {
|
|
13019
13148
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
13020
13149
|
var theme = useTheme();
|
|
13021
|
-
return (jsxRuntime.jsx(Container$
|
|
13150
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
13022
13151
|
};
|
|
13023
|
-
var templateObject_1
|
|
13152
|
+
var templateObject_1$10;
|
|
13024
13153
|
|
|
13025
|
-
var Text$6 = newStyled.h3(templateObject_1
|
|
13154
|
+
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) {
|
|
13026
13155
|
var backgroundColor = _a.backgroundColor;
|
|
13027
13156
|
return backgroundColor;
|
|
13157
|
+
}, function (_a) {
|
|
13158
|
+
var borderRadius = _a.borderRadius;
|
|
13159
|
+
return borderRadius;
|
|
13028
13160
|
}, function (_a) {
|
|
13029
13161
|
var color = _a.color;
|
|
13030
13162
|
return color;
|
|
@@ -13032,13 +13164,13 @@ var Text$6 = newStyled.h3(templateObject_1$_ || (templateObject_1$_ = __makeTemp
|
|
|
13032
13164
|
var OfferBanner = function (_a) {
|
|
13033
13165
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
13034
13166
|
var theme = useTheme();
|
|
13035
|
-
return (jsxRuntime.jsx(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
13167
|
+
return (jsxRuntime.jsx(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));
|
|
13036
13168
|
};
|
|
13037
|
-
var templateObject_1
|
|
13169
|
+
var templateObject_1$$;
|
|
13038
13170
|
|
|
13039
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
13040
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
13041
|
-
var Currency = newStyled.span(templateObject_3$
|
|
13171
|
+
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"])));
|
|
13172
|
+
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; });
|
|
13173
|
+
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) {
|
|
13042
13174
|
var theme = _a.theme;
|
|
13043
13175
|
return theme.component.total.basicTotal.currency.color;
|
|
13044
13176
|
}, function (_a) {
|
|
@@ -13051,32 +13183,32 @@ var Currency = newStyled.span(templateObject_3$D || (templateObject_3$D = __make
|
|
|
13051
13183
|
var theme = _a.theme;
|
|
13052
13184
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
13053
13185
|
});
|
|
13054
|
-
var Container$
|
|
13055
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
13056
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
13186
|
+
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; });
|
|
13187
|
+
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"])));
|
|
13188
|
+
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) {
|
|
13057
13189
|
var theme = _a.theme;
|
|
13058
13190
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
13059
13191
|
});
|
|
13060
13192
|
var Total = function (_a) {
|
|
13061
13193
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
13062
13194
|
var theme = useTheme();
|
|
13063
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
13195
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
13064
13196
|
};
|
|
13065
|
-
var templateObject_1$
|
|
13197
|
+
var templateObject_1$_, templateObject_2$J, templateObject_3$E, templateObject_4$v, templateObject_5$k, templateObject_6$j;
|
|
13066
13198
|
|
|
13067
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
13199
|
+
var Wrapper$1 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
13068
13200
|
var color = _a.color;
|
|
13069
13201
|
return color;
|
|
13070
13202
|
});
|
|
13071
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
13072
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
13203
|
+
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"])));
|
|
13204
|
+
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) {
|
|
13073
13205
|
var theme = _a.theme;
|
|
13074
13206
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
13075
13207
|
}, function (_a) {
|
|
13076
13208
|
var theme = _a.theme;
|
|
13077
13209
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
13078
13210
|
});
|
|
13079
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
13211
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
13080
13212
|
var color = _a.color;
|
|
13081
13213
|
return color;
|
|
13082
13214
|
});
|
|
@@ -13089,51 +13221,51 @@ var Subtotal = function (_a) {
|
|
|
13089
13221
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
13090
13222
|
})] }), void 0));
|
|
13091
13223
|
};
|
|
13092
|
-
var templateObject_1$
|
|
13224
|
+
var templateObject_1$Z, templateObject_2$I, templateObject_3$D, templateObject_4$u;
|
|
13093
13225
|
|
|
13094
13226
|
var Totals = {
|
|
13095
13227
|
Total: Total,
|
|
13096
13228
|
Subtotal: Subtotal,
|
|
13097
13229
|
};
|
|
13098
13230
|
|
|
13099
|
-
var Container$
|
|
13100
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13101
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13102
|
-
var Details = newStyled.span(templateObject_4$
|
|
13231
|
+
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; });
|
|
13232
|
+
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"])));
|
|
13233
|
+
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; });
|
|
13234
|
+
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; });
|
|
13103
13235
|
var Note = function (_a) {
|
|
13104
13236
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13105
13237
|
var theme = useTheme();
|
|
13106
|
-
return (jsxRuntime.jsxs(Container$
|
|
13238
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13107
13239
|
};
|
|
13108
|
-
var templateObject_1$
|
|
13240
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$t;
|
|
13109
13241
|
|
|
13110
|
-
var Title$
|
|
13242
|
+
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) {
|
|
13111
13243
|
var theme = _a.theme;
|
|
13112
13244
|
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 ");
|
|
13113
13245
|
});
|
|
13114
|
-
var Line = newStyled.div(templateObject_2$
|
|
13115
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13246
|
+
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; });
|
|
13247
|
+
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({
|
|
13116
13248
|
flexDirection: ['column', 'row'],
|
|
13117
13249
|
}));
|
|
13118
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
13250
|
+
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({
|
|
13119
13251
|
margin: ['0', '0 1.25rem'],
|
|
13120
13252
|
marginBottom: ['1.875rem', '0'],
|
|
13121
13253
|
alignItems: ['center', 'flex-start'],
|
|
13122
13254
|
textAlign: ['center', 'inherit'],
|
|
13123
13255
|
width: ['100%', 'inherit'],
|
|
13124
13256
|
}));
|
|
13125
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
13257
|
+
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({
|
|
13126
13258
|
marginRight: ['0', '0.438rem'],
|
|
13127
13259
|
marginBottom: ['10px', '0'],
|
|
13128
13260
|
width: ['auto', '1.5rem'],
|
|
13129
13261
|
}));
|
|
13130
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
13262
|
+
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({
|
|
13131
13263
|
display: ['block', 'flex'],
|
|
13132
13264
|
}), function (_a) {
|
|
13133
13265
|
var theme = _a.theme;
|
|
13134
13266
|
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 ");
|
|
13135
13267
|
});
|
|
13136
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
13268
|
+
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) {
|
|
13137
13269
|
var theme = _a.theme;
|
|
13138
13270
|
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 ");
|
|
13139
13271
|
}, function (_a) {
|
|
@@ -13148,47 +13280,47 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __m
|
|
|
13148
13280
|
var DeliveryDetails = function (_a) {
|
|
13149
13281
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
13150
13282
|
var theme = useTheme();
|
|
13151
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
13283
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13152
13284
|
};
|
|
13153
|
-
var templateObject_1$
|
|
13285
|
+
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;
|
|
13154
13286
|
|
|
13155
|
-
var Container$
|
|
13156
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13287
|
+
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"])));
|
|
13288
|
+
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; });
|
|
13157
13289
|
var ScrollToTop = function (_a) {
|
|
13158
13290
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13159
13291
|
var theme = useTheme();
|
|
13160
13292
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13161
|
-
return (jsxRuntime.jsxs(Container$
|
|
13293
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
13162
13294
|
};
|
|
13163
|
-
var templateObject_1$
|
|
13295
|
+
var templateObject_1$W, templateObject_2$F;
|
|
13164
13296
|
|
|
13165
|
-
var Container$
|
|
13297
|
+
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) {
|
|
13166
13298
|
var theme = _a.theme;
|
|
13167
13299
|
return theme.component.orderBar.backgroundColor;
|
|
13168
13300
|
});
|
|
13169
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13301
|
+
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; });
|
|
13170
13302
|
var OrderBar = function (_a) {
|
|
13171
13303
|
var message = _a.message, color = _a.color;
|
|
13172
13304
|
var theme = useTheme();
|
|
13173
|
-
return (jsxRuntime.jsxs(Container$
|
|
13305
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
13174
13306
|
};
|
|
13175
|
-
var templateObject_1$
|
|
13307
|
+
var templateObject_1$V, templateObject_2$E;
|
|
13176
13308
|
|
|
13177
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13178
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13179
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13180
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
13309
|
+
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; });
|
|
13310
|
+
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; });
|
|
13311
|
+
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; });
|
|
13312
|
+
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; });
|
|
13181
13313
|
var SizeTable = function (_a) {
|
|
13182
13314
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13183
13315
|
var theme = useTheme();
|
|
13184
13316
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
13185
13317
|
};
|
|
13186
|
-
var templateObject_1$
|
|
13318
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$A, templateObject_4$r;
|
|
13187
13319
|
|
|
13188
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13189
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13190
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13191
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
13320
|
+
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; });
|
|
13321
|
+
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; });
|
|
13322
|
+
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; });
|
|
13323
|
+
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; });
|
|
13192
13324
|
var SizeChartTable = function (_a) {
|
|
13193
13325
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
13194
13326
|
var theme = useTheme();
|
|
@@ -13221,22 +13353,22 @@ var SizeChartTable = function (_a) {
|
|
|
13221
13353
|
backgroundColor: getCellColor(index, cell),
|
|
13222
13354
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13223
13355
|
};
|
|
13224
|
-
var templateObject_1$
|
|
13356
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$z, templateObject_4$q;
|
|
13225
13357
|
|
|
13226
|
-
var Img = newStyled.img(templateObject_1$
|
|
13358
|
+
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; });
|
|
13227
13359
|
var Image = function (_a) {
|
|
13228
13360
|
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;
|
|
13229
13361
|
return (jsxRuntime.jsx(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));
|
|
13230
13362
|
};
|
|
13231
|
-
var templateObject_1$
|
|
13363
|
+
var templateObject_1$S;
|
|
13232
13364
|
|
|
13233
|
-
var Container$
|
|
13365
|
+
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"])));
|
|
13234
13366
|
var IMAGE_WIDTH = '63px';
|
|
13235
|
-
var ImageContainer$
|
|
13236
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13367
|
+
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);
|
|
13368
|
+
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({
|
|
13237
13369
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13238
13370
|
}), IMAGE_WIDTH);
|
|
13239
|
-
var Title$
|
|
13371
|
+
var Title$5 = newStyled.h2(function (_a) {
|
|
13240
13372
|
var color = _a.color;
|
|
13241
13373
|
return ({
|
|
13242
13374
|
fontWeight: 600,
|
|
@@ -13256,7 +13388,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13256
13388
|
margin: '0.063rem 0',
|
|
13257
13389
|
});
|
|
13258
13390
|
});
|
|
13259
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13391
|
+
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) {
|
|
13260
13392
|
var withTag = _a.withTag; _a.theme;
|
|
13261
13393
|
return withTag
|
|
13262
13394
|
? mediaQueries({
|
|
@@ -13265,14 +13397,14 @@ var PriceContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = _
|
|
|
13265
13397
|
})
|
|
13266
13398
|
: 'justify-content: end';
|
|
13267
13399
|
});
|
|
13268
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13269
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
13400
|
+
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"])));
|
|
13401
|
+
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"])));
|
|
13270
13402
|
var SimpleOrderItem = function (_a) {
|
|
13271
13403
|
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;
|
|
13272
13404
|
var theme = useTheme();
|
|
13273
|
-
return (jsxRuntime.jsxs(Container$
|
|
13405
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$5, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13274
13406
|
};
|
|
13275
|
-
var templateObject_1$
|
|
13407
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$y, templateObject_4$p, templateObject_5$i, templateObject_6$h;
|
|
13276
13408
|
|
|
13277
13409
|
function formatDate(date) {
|
|
13278
13410
|
var day = date.getDate();
|
|
@@ -13283,13 +13415,13 @@ function formatDate(date) {
|
|
|
13283
13415
|
|
|
13284
13416
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13285
13417
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13286
|
-
var Container$
|
|
13287
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13288
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13289
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13290
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13291
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13292
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13418
|
+
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"])));
|
|
13419
|
+
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"])));
|
|
13420
|
+
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"])));
|
|
13421
|
+
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"])));
|
|
13422
|
+
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"])));
|
|
13423
|
+
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"])));
|
|
13424
|
+
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"])));
|
|
13293
13425
|
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"])));
|
|
13294
13426
|
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"])));
|
|
13295
13427
|
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"])));
|
|
@@ -13325,7 +13457,7 @@ var Review$1 = function (_a) {
|
|
|
13325
13457
|
});
|
|
13326
13458
|
};
|
|
13327
13459
|
}, [randomId]);
|
|
13328
|
-
return (jsxRuntime.jsxs(Container$
|
|
13460
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName$1, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13329
13461
|
__html: showMoreMobile
|
|
13330
13462
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13331
13463
|
: description,
|
|
@@ -13335,15 +13467,15 @@ var Review$1 = function (_a) {
|
|
|
13335
13467
|
: description,
|
|
13336
13468
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13337
13469
|
};
|
|
13338
|
-
var templateObject_1$
|
|
13470
|
+
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;
|
|
13339
13471
|
|
|
13340
|
-
var List = newStyled.ul(templateObject_1$
|
|
13341
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13342
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13343
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13344
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13345
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13346
|
-
var templateObject_1$
|
|
13472
|
+
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"])));
|
|
13473
|
+
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"])));
|
|
13474
|
+
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"])));
|
|
13475
|
+
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"])));
|
|
13476
|
+
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; });
|
|
13477
|
+
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; });
|
|
13478
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13347
13479
|
|
|
13348
13480
|
var DropdownListIcons = function (_a) {
|
|
13349
13481
|
var items = _a.items;
|
|
@@ -13356,7 +13488,7 @@ var Dropdown = function (_a) {
|
|
|
13356
13488
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
13357
13489
|
};
|
|
13358
13490
|
|
|
13359
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13491
|
+
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; });
|
|
13360
13492
|
var AmazonButton = function (_a) {
|
|
13361
13493
|
var onClick = _a.onClick;
|
|
13362
13494
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13365,23 +13497,23 @@ var PaypalButton = function (_a) {
|
|
|
13365
13497
|
var onClick = _a.onClick;
|
|
13366
13498
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13367
13499
|
};
|
|
13368
|
-
var templateObject_1$
|
|
13500
|
+
var templateObject_1$O;
|
|
13369
13501
|
|
|
13370
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13371
|
-
var Col = newStyled.div(templateObject_2$
|
|
13372
|
-
var Row = newStyled.div(templateObject_3$
|
|
13502
|
+
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'); });
|
|
13503
|
+
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"])));
|
|
13504
|
+
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) {
|
|
13373
13505
|
return props.rightToLeft &&
|
|
13374
13506
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13375
13507
|
});
|
|
13376
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13377
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13378
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13508
|
+
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; });
|
|
13509
|
+
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; });
|
|
13510
|
+
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; });
|
|
13379
13511
|
var CrossSellCheckbox = function (_a) {
|
|
13380
13512
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13381
13513
|
var theme = useTheme();
|
|
13382
13514
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13383
13515
|
};
|
|
13384
|
-
var templateObject_1$
|
|
13516
|
+
var templateObject_1$N, templateObject_2$y, templateObject_3$v, templateObject_4$m, templateObject_5$f, templateObject_6$e;
|
|
13385
13517
|
|
|
13386
13518
|
var index = /*#__PURE__*/Object.freeze({
|
|
13387
13519
|
__proto__: null,
|
|
@@ -13394,7 +13526,7 @@ var Spacing = function (_a) {
|
|
|
13394
13526
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13395
13527
|
};
|
|
13396
13528
|
|
|
13397
|
-
var Container$
|
|
13529
|
+
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) {
|
|
13398
13530
|
var height = _a.height;
|
|
13399
13531
|
return (height ? height : '1.5em');
|
|
13400
13532
|
}, function (_a) {
|
|
@@ -13419,16 +13551,16 @@ var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
13419
13551
|
var SkeletonBox = function (_a) {
|
|
13420
13552
|
var width = _a.width, height = _a.height;
|
|
13421
13553
|
var theme = useTheme();
|
|
13422
|
-
return jsxRuntime.jsx(Container$
|
|
13554
|
+
return jsxRuntime.jsx(Container$B, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13423
13555
|
};
|
|
13424
|
-
var templateObject_1$
|
|
13556
|
+
var templateObject_1$M;
|
|
13425
13557
|
|
|
13426
|
-
var Container$
|
|
13558
|
+
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) {
|
|
13427
13559
|
var displayBNPL = _a.displayBNPL;
|
|
13428
13560
|
return (displayBNPL ? 'flex' : 'none');
|
|
13429
13561
|
});
|
|
13430
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13431
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13562
|
+
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"])));
|
|
13563
|
+
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"])));
|
|
13432
13564
|
var BuyNowPayLater = function (_a) {
|
|
13433
13565
|
var _b;
|
|
13434
13566
|
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;
|
|
@@ -13438,14 +13570,14 @@ var BuyNowPayLater = function (_a) {
|
|
|
13438
13570
|
console.error('Icon', iconName, 'not found');
|
|
13439
13571
|
return null;
|
|
13440
13572
|
}
|
|
13441
|
-
return (jsxRuntime.jsx(Container$
|
|
13573
|
+
return (jsxRuntime.jsx(Container$A, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13442
13574
|
};
|
|
13443
|
-
var templateObject_1$
|
|
13575
|
+
var templateObject_1$L, templateObject_2$x, templateObject_3$u;
|
|
13444
13576
|
|
|
13445
|
-
var Container$
|
|
13446
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13447
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13448
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13577
|
+
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"])));
|
|
13578
|
+
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"])));
|
|
13579
|
+
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"])));
|
|
13580
|
+
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) {
|
|
13449
13581
|
var index = _a.index;
|
|
13450
13582
|
return "".concat(6 + 3 * index, "px");
|
|
13451
13583
|
}, function (_a) {
|
|
@@ -13454,24 +13586,117 @@ var Bar = newStyled('div')(templateObject_4$k || (templateObject_4$k = __makeTem
|
|
|
13454
13586
|
});
|
|
13455
13587
|
var StrengthBars = function (_a) {
|
|
13456
13588
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13457
|
-
return (jsxRuntime.jsxs(Container$
|
|
13589
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13458
13590
|
};
|
|
13459
|
-
var templateObject_1$
|
|
13460
|
-
|
|
13461
|
-
var Container$
|
|
13462
|
-
var MobileContainer = newStyled(Container$
|
|
13463
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
13464
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
13465
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
13466
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
13467
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
13591
|
+
var templateObject_1$K, templateObject_2$w, templateObject_3$t, templateObject_4$l;
|
|
13592
|
+
|
|
13593
|
+
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"])));
|
|
13594
|
+
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"])));
|
|
13595
|
+
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"])));
|
|
13596
|
+
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"])));
|
|
13597
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
13598
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
13599
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
13468
13600
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
13469
13601
|
var ClubPriceLabel = function (_a) {
|
|
13470
13602
|
var clubPrice = _a.clubPrice;
|
|
13471
13603
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
13472
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
13604
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$y, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
13605
|
+
};
|
|
13606
|
+
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;
|
|
13607
|
+
|
|
13608
|
+
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
13609
|
+
var width = _a.width, height = _a.height;
|
|
13610
|
+
return ({
|
|
13611
|
+
position: 'relative',
|
|
13612
|
+
width: width,
|
|
13613
|
+
height: height,
|
|
13614
|
+
});
|
|
13615
|
+
});
|
|
13616
|
+
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"])));
|
|
13617
|
+
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"])));
|
|
13618
|
+
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"])));
|
|
13619
|
+
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; });
|
|
13620
|
+
var getStylesBySize$2 = function (size) {
|
|
13621
|
+
switch (size) {
|
|
13622
|
+
case exports.ComponentSize.Medium:
|
|
13623
|
+
return {
|
|
13624
|
+
width: '205px',
|
|
13625
|
+
height: '274px',
|
|
13626
|
+
};
|
|
13627
|
+
case exports.ComponentSize.Small:
|
|
13628
|
+
return {
|
|
13629
|
+
width: '9.813rem',
|
|
13630
|
+
height: '13.125rem',
|
|
13631
|
+
};
|
|
13632
|
+
case exports.ComponentSize.Large:
|
|
13633
|
+
return {
|
|
13634
|
+
width: '262px',
|
|
13635
|
+
height: '350px',
|
|
13636
|
+
};
|
|
13637
|
+
/* istanbul ignore next */
|
|
13638
|
+
default:
|
|
13639
|
+
return {
|
|
13640
|
+
width: '205px',
|
|
13641
|
+
height: '274px',
|
|
13642
|
+
};
|
|
13643
|
+
}
|
|
13644
|
+
};
|
|
13645
|
+
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) {
|
|
13646
|
+
var style = _a.style;
|
|
13647
|
+
return style.width;
|
|
13648
|
+
});
|
|
13649
|
+
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) {
|
|
13650
|
+
var style = _a.style;
|
|
13651
|
+
return style.width;
|
|
13652
|
+
});
|
|
13653
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13654
|
+
var ProductItemMobile = function (_a) {
|
|
13655
|
+
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 ? {
|
|
13656
|
+
display: false,
|
|
13657
|
+
position: 'top',
|
|
13658
|
+
component: undefined,
|
|
13659
|
+
} : _e, _f = _a.isBNPL, isBNPL = _f === void 0 ? {
|
|
13660
|
+
displayBNPL: false,
|
|
13661
|
+
installments: 4,
|
|
13662
|
+
installmentPrice: '',
|
|
13663
|
+
iconFolder: 'PDP',
|
|
13664
|
+
iconName: 'Klarna',
|
|
13665
|
+
showLogo: true,
|
|
13666
|
+
iconColor: '#292929',
|
|
13667
|
+
fontSize: '12px',
|
|
13668
|
+
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
13669
|
+
strength: -1,
|
|
13670
|
+
description: '',
|
|
13671
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j;
|
|
13672
|
+
var theme = useTheme();
|
|
13673
|
+
var styles = getStylesBySize$2(size);
|
|
13674
|
+
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
13675
|
+
var space = React$2.useMemo(function () {
|
|
13676
|
+
var _a;
|
|
13677
|
+
return (_a = {},
|
|
13678
|
+
_a[exports.ComponentSize.Large] = 8,
|
|
13679
|
+
_a[exports.ComponentSize.Medium] = 4,
|
|
13680
|
+
_a[exports.ComponentSize.Small] = 2,
|
|
13681
|
+
_a)[size];
|
|
13682
|
+
}, [size]);
|
|
13683
|
+
var PriceLabelDisplay = function () {
|
|
13684
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13685
|
+
? !isMobile
|
|
13686
|
+
? {
|
|
13687
|
+
fontSize: '16px',
|
|
13688
|
+
fontWeight: 700,
|
|
13689
|
+
}
|
|
13690
|
+
: {
|
|
13691
|
+
fontSize: '12px',
|
|
13692
|
+
fontWeight: 700,
|
|
13693
|
+
}
|
|
13694
|
+
: undefined }, void 0));
|
|
13695
|
+
};
|
|
13696
|
+
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13697
|
+
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));
|
|
13473
13698
|
};
|
|
13474
|
-
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9
|
|
13699
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$9;
|
|
13475
13700
|
|
|
13476
13701
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13477
13702
|
var width = _a.width, height = _a.height;
|
|
@@ -13481,7 +13706,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13481
13706
|
height: height,
|
|
13482
13707
|
});
|
|
13483
13708
|
});
|
|
13484
|
-
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"])));
|
|
13709
|
+
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; });
|
|
13485
13710
|
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"])));
|
|
13486
13711
|
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"])));
|
|
13487
13712
|
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; });
|
|
@@ -13519,12 +13744,12 @@ var BottomTagContainer$2 = newStyled.div(templateObject_6$b || (templateObject_6
|
|
|
13519
13744
|
return style.width;
|
|
13520
13745
|
});
|
|
13521
13746
|
var MarginTopContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13522
|
-
var
|
|
13523
|
-
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size,
|
|
13747
|
+
var ProductItemTK = function (_a) {
|
|
13748
|
+
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 ? {
|
|
13524
13749
|
display: false,
|
|
13525
13750
|
position: 'top',
|
|
13526
13751
|
component: undefined,
|
|
13527
|
-
} :
|
|
13752
|
+
} : _f, _g = _a.isBNPL, isBNPL = _g === void 0 ? {
|
|
13528
13753
|
displayBNPL: false,
|
|
13529
13754
|
installments: 4,
|
|
13530
13755
|
installmentPrice: '',
|
|
@@ -13533,10 +13758,10 @@ var ProductItemMobile = function (_a) {
|
|
|
13533
13758
|
showLogo: true,
|
|
13534
13759
|
iconColor: '#292929',
|
|
13535
13760
|
fontSize: '12px',
|
|
13536
|
-
} :
|
|
13761
|
+
} : _g, _h = _a.hasStrength, hasStrength = _h === void 0 ? {
|
|
13537
13762
|
strength: -1,
|
|
13538
13763
|
description: '',
|
|
13539
|
-
} :
|
|
13764
|
+
} : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
|
|
13540
13765
|
var theme = useTheme();
|
|
13541
13766
|
var styles = getStylesBySize$1(size);
|
|
13542
13767
|
var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
|
|
@@ -13549,7 +13774,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13549
13774
|
_a)[size];
|
|
13550
13775
|
}, [size]);
|
|
13551
13776
|
var PriceLabelDisplay = function () {
|
|
13552
|
-
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13777
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, originalPriceStyled: originalPriceStyled, finalPriceStyled: false, color: price.color, size: originalPriceStyled ? exports.ComponentSize.Small : exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13553
13778
|
? !isMobile
|
|
13554
13779
|
? {
|
|
13555
13780
|
fontSize: '16px',
|
|
@@ -13562,7 +13787,12 @@ var ProductItemMobile = function (_a) {
|
|
|
13562
13787
|
: undefined }, void 0));
|
|
13563
13788
|
};
|
|
13564
13789
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13565
|
-
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'
|
|
13790
|
+
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 ? (
|
|
13791
|
+
// @ts-ignore
|
|
13792
|
+
jsx(Text$8, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
13793
|
+
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
13794
|
+
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
13795
|
+
} }, { 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));
|
|
13566
13796
|
};
|
|
13567
13797
|
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13568
13798
|
|
|
@@ -13581,6 +13811,7 @@ var templateObject_1$G;
|
|
|
13581
13811
|
var Collection = {
|
|
13582
13812
|
ProductItemMobile: ProductItemMobile,
|
|
13583
13813
|
withProductGrid: withProductGrid,
|
|
13814
|
+
ProductItemTK: ProductItemTK,
|
|
13584
13815
|
};
|
|
13585
13816
|
|
|
13586
13817
|
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) {
|
|
@@ -14329,7 +14560,7 @@ var CartProductItem = {
|
|
|
14329
14560
|
CloseButton: CloseButton$1,
|
|
14330
14561
|
};
|
|
14331
14562
|
|
|
14332
|
-
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:
|
|
14563
|
+
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; });
|
|
14333
14564
|
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"])));
|
|
14334
14565
|
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"])));
|
|
14335
14566
|
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)'; });
|
|
@@ -14355,7 +14586,7 @@ var QuantityPicker = function (_a) {
|
|
|
14355
14586
|
return clamp(value);
|
|
14356
14587
|
});
|
|
14357
14588
|
}, [value, clamp]);
|
|
14358
|
-
return (jsxRuntime.jsxs(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
14589
|
+
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
14359
14590
|
};
|
|
14360
14591
|
var templateObject_1$r, templateObject_2$l, templateObject_3$k, templateObject_4$e;
|
|
14361
14592
|
|
|
@@ -19146,12 +19377,18 @@ var AbsorbencyLevel = function (_a) {
|
|
|
19146
19377
|
};
|
|
19147
19378
|
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
|
|
19148
19379
|
|
|
19149
|
-
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:
|
|
19380
|
+
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) {
|
|
19150
19381
|
var textPosition = _a.textPosition;
|
|
19151
19382
|
return textPosition;
|
|
19152
19383
|
}, function (_a) {
|
|
19153
19384
|
var backgroundColor = _a.backgroundColor;
|
|
19154
19385
|
return backgroundColor;
|
|
19386
|
+
}, function (_a) {
|
|
19387
|
+
var borderRadius = _a.borderRadius;
|
|
19388
|
+
return borderRadius || 'unset';
|
|
19389
|
+
}, function (_a) {
|
|
19390
|
+
var borderRadius = _a.borderRadius;
|
|
19391
|
+
return borderRadius || '8px';
|
|
19155
19392
|
});
|
|
19156
19393
|
var HurryUp = function (_a) {
|
|
19157
19394
|
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;
|
|
@@ -19171,7 +19408,7 @@ var HurryUp = function (_a) {
|
|
|
19171
19408
|
seconds: seconds,
|
|
19172
19409
|
};
|
|
19173
19410
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
19174
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
19411
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$8, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
19175
19412
|
};
|
|
19176
19413
|
var templateObject_1$2;
|
|
19177
19414
|
|
|
@@ -19291,6 +19528,7 @@ exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
|
19291
19528
|
exports.BuyNowPayLater = BuyNowPayLater;
|
|
19292
19529
|
exports.Card = Card$3;
|
|
19293
19530
|
exports.CartProductItem = CartProductItem;
|
|
19531
|
+
exports.CategorySquareTag = CategorySquareTag;
|
|
19294
19532
|
exports.CategoryTag = CategoryTag;
|
|
19295
19533
|
exports.Checkbox = Checkbox;
|
|
19296
19534
|
exports.ClubOfferTag = ClubOfferTag;
|
|
@@ -19305,6 +19543,7 @@ exports.DropdownListIcons = DropdownListIcons;
|
|
|
19305
19543
|
exports.FilteringDropdown = FilteringDropdown;
|
|
19306
19544
|
exports.FilteringTags = Tags;
|
|
19307
19545
|
exports.Filters = Filters;
|
|
19546
|
+
exports.FitGuarantee = FitGuarantee;
|
|
19308
19547
|
exports.FitPredictor = FitPredictor;
|
|
19309
19548
|
exports.HurryUp = HurryUp;
|
|
19310
19549
|
exports.Icon = Icon;
|
|
@@ -19381,6 +19620,7 @@ exports.isPhoneNumber = isPhoneNumber;
|
|
|
19381
19620
|
exports.isValidDate = isValidDate;
|
|
19382
19621
|
exports.mediaQueries = mediaQueries;
|
|
19383
19622
|
exports.modalEvent = modalEvent;
|
|
19623
|
+
exports.seasonOfferRoundedTag = SeasonOfferRoundedTag;
|
|
19384
19624
|
exports.simulateMouseClick = simulateMouseClick;
|
|
19385
19625
|
exports.sliceString = sliceString;
|
|
19386
19626
|
exports.styled = newStyled;
|