@trafilea/afrodita-components 5.0.0-beta.74 → 5.0.0-beta.75
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 +34 -1
- package/build/index.esm.js +375 -308
- package/build/index.esm.js.map +1 -1
- package/build/index.js +375 -307
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -97,6 +97,11 @@ var Frown = function (_a) {
|
|
|
97
97
|
return (jsxRuntime.jsxs(IconWrapper$1, __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));
|
|
98
98
|
};
|
|
99
99
|
|
|
100
|
+
var Smiling = function (_a) {
|
|
101
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
102
|
+
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 45, viewBoxY: 45, title: title }, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M20.7207 41.3C9.48878 41.2953 0.386968 32.1871 0.390138 20.9553C0.393188 9.7235 9.50025 0.620378 20.7319 0.621948C31.9609 0.621948 41.0667 9.7263 41.0681 20.9581C41.0557 32.1897 31.9523 41.2905 20.7207 41.3ZM20.7207 3.07741C10.8438 3.07741 2.83717 11.0842 2.83717 20.961C2.83717 30.8378 10.8438 38.8446 20.7207 38.8446C30.5975 38.8446 38.6042 30.8379 38.6042 20.961C38.6138 11.0747 30.6069 3.0526 20.7207 3.04308V3.07741Z", fill: fill }, void 0), jsxRuntime.jsx("circle", { cx: "12.5127", cy: "18.5227", r: "2.45545", fill: fill }, void 0), jsxRuntime.jsx("circle", { cx: "28.9282", cy: "18.5227", r: "2.45545", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M20.695 31.7015C17.505 31.7073 14.4889 30.2483 12.513 27.7436C12.0909 27.2102 12.1812 26.4356 12.7147 26.0136C13.2481 25.5916 14.0228 25.682 14.4447 26.2154C15.9658 28.1361 18.2854 29.251 20.7353 29.2393C23.1854 29.2276 25.4941 28.0904 26.9968 26.1553C27.4154 25.6284 28.1786 25.533 28.714 25.9407C28.9712 26.1392 29.1385 26.4321 29.1788 26.7545C29.2191 27.0769 29.129 27.4021 28.9287 27.6578C26.9626 30.2132 23.9193 31.7079 20.695 31.7015H20.695Z", fill: fill }, void 0)] }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign$1({ id: "clip0_13_1543" }, { children: jsxRuntime.jsx("rect", { width: "40.678", height: "40.6781", fill: "white", transform: "translate(0.390137 0.621948)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
103
|
+
};
|
|
104
|
+
|
|
100
105
|
var BulletOne = function (_a) {
|
|
101
106
|
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
102
107
|
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: title, fill: "none" }, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10.25", stroke: fill, strokeWidth: "1.5" }, void 0), jsxRuntime.jsx("path", { d: "M11.5812 18.0002H13.5012V6.67218H11.7572L8.22119 9.52018L9.34119 10.8482L11.5812 9.00818V18.0002Z", fill: fill }, void 0)] }), void 0));
|
|
@@ -116,6 +121,7 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
116
121
|
__proto__: null,
|
|
117
122
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
118
123
|
Frown: Frown,
|
|
124
|
+
Smiling: Smiling,
|
|
119
125
|
BulletOne: BulletOne,
|
|
120
126
|
BulletTwo: BulletTwo,
|
|
121
127
|
BulletThree: BulletThree
|
|
@@ -544,12 +550,18 @@ var Mail = function (_a) {
|
|
|
544
550
|
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: "message icon" }, { children: [jsxRuntime.jsx("path", { d: "M21.4-14.3c0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0s0.1,0,0.2,0s0.1,0,0.2,0c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2,0,0.2\n\tc0,0.1,0,0.2,0,0.2h0.1c0,0.1,0,0.2,0,0.3l0,0l0,0c0-0.1,0-0.2,0-0.3c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0.1s0,0.2,0,0.2\n\tc0,0.1,0,0.3,0,0.4l0,0l0,0c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1\n\tv0.1v0.1v0.1v0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1V-9v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1v0.1V-8\n\tv0.1v0.1v0.1v0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0.2,0,0.3,0,0.5c0,0.1,0,0.2,0,0.3v0.1v0.1v0.1v0.1v0.1V-6v0.1v0.1v0.1v0.1\n\tc0,0.2,0,0.5,0,0.7c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3v0.1V-5v0.1H22c0,0,0,0,0,0.1s0,0.1,0,0.2s0,0.1,0,0.2s0,0.1,0,0.2\n\tc-0.2,0-0.4,0-0.7,0c0,0.1,0,0.2,0,0.3l0,0l0,0c-4.5,0-9,0-13.5,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.2,0-0.4,0-0.6\n\tc-0.1,0-0.2,0-0.3,0l0,0l0,0c0.1,0,0.2,0,0.3,0v-0.1c-0.1,0-0.2,0-0.3,0c0-2.9,0-5.9,0-8.8c0.1,0,0.2,0,0.3,0v-0.1\n\tc-0.1,0-0.2,0-0.3,0l0,0c0.1,0,0.2,0,0.3,0c0-0.2,0-0.4,0-0.6c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3C12.4-14.3,16.9-14.3,21.4-14.3z\n\t M21-4.4L21-4.4c0-0.2,0-0.3,0-0.4c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.2,0-0.4,0-0.7,0l0,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0l0,0c0,0.1,0,0.2,0,0.3c-0.5,0-1,0-1.5,0c0-0.1,0-0.1,0-0.2c0.1,0,0.1,0,0.2,0c-0.1,0-0.1,0-0.2,0v-0.1l0,0v0.1\n\th-0.1v-0.1c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3l0,0\n\tl0,0c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c0,0,0,0,0-0.1h-0.1h-0.1H13h-0.1h-0.1h-0.1h-0.1v0.1v0.1v0.1c-0.1,0-0.2,0-0.3,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1\n\tc0,0,0,0,0,0.1c0,0,0,0,0,0.1c-0.1,0-0.2,0-0.3,0l0,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0l0,0c0,0,0,0,0,0.1s0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3c0,0,0,0,0,0.1\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.2,0,12.4,0,12.5,0\n\tC21-4.2,21-4.3,21-4.4C21-4.3,21-4.3,21-4.4C21-4.3,21-4.3,21-4.4z M21-13.4c0-0.1,0-0.1,0-0.2c-4.2,0-8.3,0-12.5,0\n\tc0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.3,0,0.7,0,1c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0\n\tc0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0l0,0\n\tc0,0.1,0,0.2,0,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3l0,0c0.1,0,0.2,0,0.3,0v0.1v0.1v0.1l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0\n\tc0,0,0,0,0,0.1s0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0,0,0,0.1,0c0,0.1,0,0.2,0,0.3c0.6,0,1.1,0,1.7,0c0-0.1,0-0.2,0-0.3l0,0\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3l0,0c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0s0.1,0,0.2,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0,0,0,0,0-0.1c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0l0,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.2,0c0.1,0,0.2,0,0.2,0c0.1,0,0.1,0,0.2,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0\n\tc0-0.1,0-0.2,0-0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.1,0-0.2h0.1h0.1c0,0.1,0,0.1,0,0.2\n\tl0,0l0,0c0-0.1,0-0.1,0-0.2h0.1l0,0h-0.1v-0.1h0.1c0-0.2,0-0.4,0-0.7c-0.1,0-0.2,0-0.3,0C21-13.3,21-13.3,21-13.4\n\tC21-13.3,21-13.3,21-13.4L21-13.4L21-13.4z M18.3-9.2c0,0.2,0,0.5,0,0.7l0,0h0.1h0.1c0,0,0,0,0.1,0h0.1c0,0.1,0,0.2,0,0.3l0,0\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0l0,0l0,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3l0,0l0,0c0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3\n\tc0.1,0,0.2,0,0.3,0c0,0.1,0,0.2,0,0.3c0.1,0,0.2,0,0.3,0c0-1.8,0-3.6,0-5.4l0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0h-0.1h-0.1l0,0\n\tc0,0.1,0,0.2,0,0.3c-0.2,0-0.3,0-0.5,0c-0.1,0-0.1,0-0.2,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3\n\tc-0.1,0-0.2,0-0.3,0l0,0l0,0c0,0.1,0,0.2,0,0.3c-0.1,0-0.2,0-0.2,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0v0.1v0.1v0.1\n\tc-0.1,0-0.2,0-0.3,0c0,0.1,0,0.2,0,0.3C18.6-9.2,18.4-9.2,18.3-9.2z M8.2-5.8c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3l0,0l0,0\n\tc0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0\n\tc0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3c0.1,0,0.2,0,0.3,0c0-0.1,0-0.2,0-0.3\n\tc0.1,0,0.2,0,0.3,0l0,0c0-0.1,0-0.2,0-0.3s0-0.2,0-0.4c0,0,0,0,0-0.1c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0l0,0\n\tc0-0.1,0-0.1,0-0.2h-0.1v0.1v0.1c0-0.1,0-0.1,0-0.2c-0.1,0-0.2,0-0.2,0h0.1h0.1v-0.1c-0.1,0-0.2,0-0.3,0s-0.1,0-0.2,0\n\tc0-0.1,0-0.2,0-0.3l0,0c-0.1,0-0.2,0-0.3,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0v-0.1v-0.1v-0.1c-0.1,0-0.2,0-0.2,0\n\tc-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c0-0.1,0-0.2,0-0.3c-0.1,0-0.2,0-0.3,0C8.2-9.4,8.2-7.6,8.2-5.8z M10.5-9.9v0.1h0.1\n\tC10.5-9.8,10.5-9.8,10.5-9.9L10.5-9.9z" }, void 0), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M4.8,9.4H2.3C2,9.4,1.8,9.2,1.8,8.8c0-0.3,0.2-0.6,0.5-0.6h2.5c0.3,0,0.5,0.3,0.5,0.6C5.3,9.2,5,9.4,4.8,9.4z" }, void 0), jsxRuntime.jsx("path", { d: "M4.8,12H3.7c-0.3,0-0.5-0.2-0.5-0.5S3.4,11,3.7,11h1.1c0.3,0,0.5,0.2,0.5,0.5S5.1,12,4.8,12z" }, void 0), jsxRuntime.jsx("path", { d: "M4.8,14.6H1.6c-0.3,0-0.5-0.3-0.5-0.6c0-0.3,0.2-0.6,0.5-0.6h3.2c0.3,0,0.5,0.3,0.5,0.6C5.3,14.3,5.1,14.6,4.8,14.6z" }, void 0), jsxRuntime.jsx("path", { d: "M21.3,6.1H8.1c-0.9,0-1.7,0.7-1.7,1.7v8.5c0,0.9,0.7,1.7,1.7,1.7h13.3c0.9,0,1.7-0.7,1.7-1.7V7.8C23,6.9,22.3,6.1,21.3,6.1\n\t\tz M18.4,11.7c1.3-1,2.7-2.1,3.6-2.7v6.4L18.4,11.7z M8.1,7.2h13.3c0.3,0,0.5,0.2,0.6,0.5c-1,0.8-5.4,4.2-7,5.4\n\t\tc-0.2,0.1-0.3,0.1-0.5,0c-1.6-1.2-5.7-4.1-7-5V7.8C7.5,7.4,7.8,7.2,8.1,7.2z M7.5,15.3v-6c0.9,0.6,2.3,1.6,3.6,2.6L7.5,15.3z\n\t\t M8.1,16.8c-0.2,0-0.3-0.1-0.4-0.2l4.3-4.1c0.7,0.5,1.4,1,1.9,1.3c0.3,0.2,0.6,0.3,0.9,0.3s0.6-0.1,0.9-0.3c0.5-0.3,1.2-0.9,2-1.5\n\t\tl4.2,4.3c-0.1,0.1-0.2,0.2-0.4,0.2H8.1z" }, void 0)] }, void 0)] }), void 0));
|
|
545
551
|
};
|
|
546
552
|
|
|
553
|
+
var Community$1 = function (_a) {
|
|
554
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
555
|
+
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 44, viewBoxY: 35, title: "Messenger" }, { children: [jsxRuntime.jsx("path", { d: "M36.7393 6.25122C28.0886 -0.997151 15.4849 -0.997151 6.83411 6.25122C2.91144 9.55264 0.626988 14.4031 0.580078 19.5299C0.614018 23.698 2.14398 27.7151 4.89127 30.8498C4.34696 32.0819 3.461 33.1322 2.33829 33.8764C1.77439 34.2431 1.49878 34.9225 1.64789 35.5784C1.80045 36.2227 2.33286 36.7073 2.98862 36.7987C3.65885 36.8926 4.33493 36.9382 5.01172 36.9352C7.03693 36.9639 9.03827 36.4953 10.8402 35.5704C14.2113 37.3646 17.9719 38.302 21.7907 38.3C27.2685 38.3566 32.5805 36.4224 36.7393 32.8568C40.704 29.5855 43.0001 24.7142 43.0001 19.5741C43.0001 14.434 40.704 9.56269 36.7393 6.29136V6.25122ZM21.7907 36.1645C18.1368 36.177 14.5417 35.245 11.354 33.459C11.198 33.3674 11.021 33.3177 10.8402 33.3145C10.6505 33.3166 10.4649 33.3693 10.3023 33.467C8.69864 34.4026 6.86795 34.8776 5.01169 34.8398H4.53C5.68805 33.7955 6.56815 32.4795 7.09097 31.0103C7.22293 30.6405 7.14294 30.2282 6.88226 29.9346C4.2045 27.1336 2.70187 23.413 2.68347 19.538C2.68347 10.3697 11.2496 2.91149 21.7987 2.91149C32.3478 2.91149 40.914 10.3778 40.914 19.538C40.914 28.6982 32.3318 36.1645 21.7907 36.1645L21.7907 36.1645Z", fill: fill }, void 0), jsxRuntime.jsx("path", { d: "M25.6687 11.6544C24.2567 11.6527 22.8873 12.1376 21.791 13.0273C19.2677 10.9044 15.5166 11.16 13.3046 13.6056C11.0926 16.0511 11.2135 19.8089 13.5781 22.1072L20.4985 29.0276C20.8406 29.3717 21.3058 29.5653 21.791 29.5653C22.2763 29.5653 22.7415 29.3717 23.0835 29.0276L29.9959 22.1152C31.7328 20.362 32.2481 17.7377 31.3028 15.4579C30.3576 13.1782 28.1365 11.6883 25.6686 11.6785L25.6687 11.6544ZM28.5107 20.6461L21.791 27.3657L15.0714 20.622C13.4974 19.0502 13.4956 16.5 15.0674 14.9259C16.6392 13.3519 19.1894 13.3501 20.7634 14.9219L21.0524 15.211C21.2474 15.4081 21.5138 15.5182 21.791 15.516C22.07 15.515 22.3377 15.4056 22.5377 15.211L22.8106 14.93C24.3891 13.3559 26.9447 13.3595 28.5187 14.938C30.0927 16.5164 30.0891 19.072 28.5107 20.6461L28.5107 20.6461Z", fill: fill }, void 0)] }), void 0));
|
|
556
|
+
};
|
|
557
|
+
|
|
547
558
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
548
559
|
__proto__: null,
|
|
549
560
|
QuestionCircle: QuestionCircle,
|
|
550
561
|
Messenger: Messenger,
|
|
551
562
|
Comment: Comment$1,
|
|
552
|
-
Mail: Mail
|
|
563
|
+
Mail: Mail,
|
|
564
|
+
Community: Community$1
|
|
553
565
|
});
|
|
554
566
|
|
|
555
567
|
var AppleStore = function (_a) {
|
|
@@ -3586,7 +3598,7 @@ exports.InputValidationType = void 0;
|
|
|
3586
3598
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3587
3599
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3588
3600
|
|
|
3589
|
-
var Section = newStyled.div(templateObject_1$
|
|
3601
|
+
var Section = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
3590
3602
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3591
3603
|
});
|
|
3592
3604
|
var CardHeader = function (_a) {
|
|
@@ -3597,14 +3609,14 @@ var CardFooter = function (_a) {
|
|
|
3597
3609
|
var children = _a.children;
|
|
3598
3610
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3599
3611
|
};
|
|
3600
|
-
var templateObject_1$
|
|
3612
|
+
var templateObject_1$1e;
|
|
3601
3613
|
|
|
3602
|
-
var Body = newStyled.div(templateObject_1$
|
|
3614
|
+
var Body = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
3603
3615
|
var CardBody = function (_a) {
|
|
3604
3616
|
var children = _a.children;
|
|
3605
3617
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3606
3618
|
};
|
|
3607
|
-
var templateObject_1$
|
|
3619
|
+
var templateObject_1$1d;
|
|
3608
3620
|
|
|
3609
3621
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3610
3622
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3749,7 +3761,7 @@ var AssetsProvider = function (_a) {
|
|
|
3749
3761
|
};
|
|
3750
3762
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
3751
3763
|
|
|
3752
|
-
var Container$
|
|
3764
|
+
var Container$K = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
3753
3765
|
var flex = _a.flex;
|
|
3754
3766
|
return flex &&
|
|
3755
3767
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3762,14 +3774,14 @@ var Container$J = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
3762
3774
|
var Card$1 = function (_a) {
|
|
3763
3775
|
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;
|
|
3764
3776
|
var theme = useTheme();
|
|
3765
|
-
return (jsxRuntime.jsx(Container$
|
|
3777
|
+
return (jsxRuntime.jsx(Container$K, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3766
3778
|
};
|
|
3767
3779
|
var Card$2 = Object.assign(Card$1, {
|
|
3768
3780
|
Header: CardHeader,
|
|
3769
3781
|
Footer: CardFooter,
|
|
3770
3782
|
Body: CardBody,
|
|
3771
3783
|
});
|
|
3772
|
-
var templateObject_1$
|
|
3784
|
+
var templateObject_1$1c;
|
|
3773
3785
|
|
|
3774
3786
|
var Fragment = jsxRuntime.Fragment;
|
|
3775
3787
|
function jsx(type, props, key) {
|
|
@@ -3911,7 +3923,7 @@ function BaseSelectOption(_a) {
|
|
|
3911
3923
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3912
3924
|
}
|
|
3913
3925
|
|
|
3914
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3926
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3915
3927
|
function BaseSelect(_a) {
|
|
3916
3928
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3917
3929
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3921,7 +3933,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3921
3933
|
Options: BaseSelectOptions,
|
|
3922
3934
|
Option: BaseSelectOption,
|
|
3923
3935
|
});
|
|
3924
|
-
var templateObject_1$
|
|
3936
|
+
var templateObject_1$1b;
|
|
3925
3937
|
|
|
3926
3938
|
var CustomButton = newStyled.button(function (_a) {
|
|
3927
3939
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4134,12 +4146,12 @@ var CustomCheckboxStyles = {
|
|
|
4134
4146
|
},
|
|
4135
4147
|
};
|
|
4136
4148
|
|
|
4137
|
-
var Container$
|
|
4149
|
+
var Container$J = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4138
4150
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4139
4151
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4140
4152
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4141
4153
|
]; });
|
|
4142
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4154
|
+
var Input$3 = newStyled.input(templateObject_2$L || (templateObject_2$L = __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) {
|
|
4143
4155
|
var disabled = _a.disabled;
|
|
4144
4156
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4145
4157
|
});
|
|
@@ -4168,9 +4180,9 @@ var Checkbox = function (_a) {
|
|
|
4168
4180
|
React$2.useEffect(function () {
|
|
4169
4181
|
mounted.current = true;
|
|
4170
4182
|
}, []);
|
|
4171
|
-
return (jsxRuntime.jsxs(Container$
|
|
4183
|
+
return (jsxRuntime.jsxs(Container$J, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4172
4184
|
};
|
|
4173
|
-
var templateObject_1$
|
|
4185
|
+
var templateObject_1$1a, templateObject_2$L;
|
|
4174
4186
|
|
|
4175
4187
|
var CustomOption = newStyled.li(function (_a) {
|
|
4176
4188
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4307,10 +4319,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4307
4319
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4308
4320
|
// `variants` styles that are consistent through all themes.
|
|
4309
4321
|
var TAGS = {
|
|
4310
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4311
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4312
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4313
|
-
display1: newStyled.h1(templateObject_4$
|
|
4322
|
+
hero1: newStyled.h1(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject([""], [""]))),
|
|
4323
|
+
hero2: newStyled.h2(templateObject_2$K || (templateObject_2$K = __makeTemplateObject([""], [""]))),
|
|
4324
|
+
hero3: newStyled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject([""], [""]))),
|
|
4325
|
+
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
4314
4326
|
display2: newStyled.h2(templateObject_5$e || (templateObject_5$e = __makeTemplateObject([""], [""]))),
|
|
4315
4327
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4316
4328
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4430,9 +4442,9 @@ var DEFAULTS = {
|
|
|
4430
4442
|
size: 'regular',
|
|
4431
4443
|
},
|
|
4432
4444
|
};
|
|
4433
|
-
var templateObject_1$
|
|
4445
|
+
var templateObject_1$19, templateObject_2$K, templateObject_3$x, templateObject_4$o, templateObject_5$e, templateObject_6$8, templateObject_7$5, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4434
4446
|
|
|
4435
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4447
|
+
var ButtonsContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
4436
4448
|
var inline = _a.inline;
|
|
4437
4449
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4438
4450
|
});
|
|
@@ -4450,7 +4462,7 @@ var SizeSelector = function (_a) {
|
|
|
4450
4462
|
}, 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 }, size.label));
|
|
4451
4463
|
}) }), void 0)] }), void 0));
|
|
4452
4464
|
};
|
|
4453
|
-
var templateObject_1$
|
|
4465
|
+
var templateObject_1$18;
|
|
4454
4466
|
|
|
4455
4467
|
var getStylesBySize$7 = function (size) {
|
|
4456
4468
|
switch (size) {
|
|
@@ -4477,7 +4489,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4477
4489
|
} });
|
|
4478
4490
|
};
|
|
4479
4491
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4480
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4492
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$17 || (templateObject_1$17 = __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));
|
|
4481
4493
|
};
|
|
4482
4494
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4483
4495
|
if (disabled)
|
|
@@ -4493,16 +4505,16 @@ var TextButton = function (_a) {
|
|
|
4493
4505
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4494
4506
|
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));
|
|
4495
4507
|
};
|
|
4496
|
-
var templateObject_1$
|
|
4508
|
+
var templateObject_1$17;
|
|
4497
4509
|
|
|
4498
|
-
var Container$
|
|
4499
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4500
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4510
|
+
var Container$I = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
4511
|
+
var P$3 = newStyled.p(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4512
|
+
var PercentageSpan = newStyled.span(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
4501
4513
|
var SizeFitGuide = function (_a) {
|
|
4502
4514
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4503
|
-
return (jsxRuntime.jsxs(Container$
|
|
4515
|
+
return (jsxRuntime.jsxs(Container$I, { 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));
|
|
4504
4516
|
};
|
|
4505
|
-
var templateObject_1$
|
|
4517
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$w;
|
|
4506
4518
|
|
|
4507
4519
|
var getStylesBySize$6 = function (size) {
|
|
4508
4520
|
switch (size) {
|
|
@@ -4532,7 +4544,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4532
4544
|
};
|
|
4533
4545
|
}
|
|
4534
4546
|
};
|
|
4535
|
-
var Container$
|
|
4547
|
+
var Container$H = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
4536
4548
|
var backgroundColor = _a.backgroundColor;
|
|
4537
4549
|
return backgroundColor;
|
|
4538
4550
|
}, function (_a) {
|
|
@@ -4554,7 +4566,7 @@ var Container$G = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
4554
4566
|
var size = _a.size;
|
|
4555
4567
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4556
4568
|
});
|
|
4557
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4569
|
+
var H3$2 = newStyled.h3(templateObject_2$I || (templateObject_2$I = __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) {
|
|
4558
4570
|
var textColor = _a.textColor;
|
|
4559
4571
|
return textColor;
|
|
4560
4572
|
}, function (_a) {
|
|
@@ -4569,9 +4581,9 @@ var H3$2 = newStyled.h3(templateObject_2$G || (templateObject_2$G = __makeTempla
|
|
|
4569
4581
|
var DiscountTag = function (_a) {
|
|
4570
4582
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
4571
4583
|
var theme = useTheme();
|
|
4572
|
-
return (jsxRuntime.jsx(Container$
|
|
4584
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4573
4585
|
};
|
|
4574
|
-
var templateObject_1$
|
|
4586
|
+
var templateObject_1$15, templateObject_2$I;
|
|
4575
4587
|
|
|
4576
4588
|
var getStylesBySize$5 = function (size) {
|
|
4577
4589
|
switch (size) {
|
|
@@ -4593,7 +4605,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4593
4605
|
};
|
|
4594
4606
|
case exports.ComponentSize.Small:
|
|
4595
4607
|
return {
|
|
4596
|
-
fontSize: '
|
|
4608
|
+
fontSize: '16px',
|
|
4597
4609
|
finalPricefontSize: '24px',
|
|
4598
4610
|
finalPricefontSizeSmall: '12px',
|
|
4599
4611
|
margin: '0 0 0 0.5rem',
|
|
@@ -4601,8 +4613,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4601
4613
|
};
|
|
4602
4614
|
}
|
|
4603
4615
|
};
|
|
4604
|
-
var Container$
|
|
4605
|
-
var Price = newStyled.p(templateObject_2$
|
|
4616
|
+
var Container$G = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4617
|
+
var Price = newStyled.p(templateObject_2$H || (templateObject_2$H = __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) {
|
|
4606
4618
|
var weight = _a.weight;
|
|
4607
4619
|
return (weight ? weight : '400');
|
|
4608
4620
|
}, function (_a) {
|
|
@@ -4631,12 +4643,12 @@ var Price = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTempla
|
|
|
4631
4643
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
4632
4644
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
4633
4645
|
});
|
|
4634
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
4646
|
+
var TagContainer = newStyled.p(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4635
4647
|
var _b;
|
|
4636
4648
|
var size = _a.size;
|
|
4637
4649
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4638
4650
|
});
|
|
4639
|
-
var FinalPriceContainer = newStyled.div(templateObject_4$
|
|
4651
|
+
var FinalPriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4640
4652
|
var FinalPriceStyledContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4641
4653
|
function getTestId() {
|
|
4642
4654
|
var args = [];
|
|
@@ -4658,9 +4670,9 @@ var PriceLabel = function (_a) {
|
|
|
4658
4670
|
weight: 700,
|
|
4659
4671
|
};
|
|
4660
4672
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)); };
|
|
4661
|
-
return (jsxRuntime.jsxs(Container$
|
|
4673
|
+
return (jsxRuntime.jsxs(Container$G, { children: [availableFinalPriceStyled && originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxRuntime.jsxs(FinalPriceContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'price') }, priceCommonProps, { 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));
|
|
4662
4674
|
};
|
|
4663
|
-
var templateObject_1$
|
|
4675
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$v, templateObject_4$n, templateObject_5$d;
|
|
4664
4676
|
|
|
4665
4677
|
var OneColorSelector = function (_a) {
|
|
4666
4678
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4701,10 +4713,10 @@ var OutOfStock = function (_a) {
|
|
|
4701
4713
|
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));
|
|
4702
4714
|
};
|
|
4703
4715
|
|
|
4704
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4705
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4706
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4707
|
-
var Span = newStyled.span(templateObject_4$
|
|
4716
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4717
|
+
newStyled(lt.Label)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4718
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
4719
|
+
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4708
4720
|
var OptionsContainer = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
4709
4721
|
var Label$2 = function (_a) {
|
|
4710
4722
|
var label = _a.label, values = _a.values;
|
|
@@ -4723,20 +4735,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4723
4735
|
Option: Option,
|
|
4724
4736
|
OptionsContainer: OptionsContainer,
|
|
4725
4737
|
});
|
|
4726
|
-
var templateObject_1$
|
|
4738
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$u, templateObject_4$m, templateObject_5$c;
|
|
4727
4739
|
|
|
4728
|
-
var Container$
|
|
4740
|
+
var Container$F = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
|
|
4729
4741
|
var borderColor = _a.borderColor;
|
|
4730
4742
|
return borderColor;
|
|
4731
4743
|
});
|
|
4732
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
4744
|
+
var Image$3 = newStyled.img(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
4733
4745
|
var PatternSelector = function (_a) {
|
|
4734
4746
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4735
4747
|
var theme = useTheme();
|
|
4736
4748
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4737
|
-
return (jsxRuntime.jsx(Container$
|
|
4749
|
+
return (jsxRuntime.jsx(Container$F, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4738
4750
|
};
|
|
4739
|
-
var templateObject_1$
|
|
4751
|
+
var templateObject_1$12, templateObject_2$F;
|
|
4740
4752
|
|
|
4741
4753
|
var renderOptions$1 = function (options) {
|
|
4742
4754
|
if (options.length === 0) {
|
|
@@ -4794,7 +4806,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4794
4806
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4795
4807
|
};
|
|
4796
4808
|
|
|
4797
|
-
var Image$2 = newStyled.img(templateObject_1
|
|
4809
|
+
var Image$2 = newStyled.img(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
4798
4810
|
var selected = _a.selected, theme = _a.theme;
|
|
4799
4811
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4800
4812
|
});
|
|
@@ -4803,7 +4815,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4803
4815
|
var theme = useTheme();
|
|
4804
4816
|
return jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4805
4817
|
};
|
|
4806
|
-
var templateObject_1
|
|
4818
|
+
var templateObject_1$11;
|
|
4807
4819
|
|
|
4808
4820
|
var Button$4 = newStyled.button(function () { return ({
|
|
4809
4821
|
background: 'transparent',
|
|
@@ -9046,14 +9058,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9046
9058
|
return Slider;
|
|
9047
9059
|
}(React__default["default"].Component);
|
|
9048
9060
|
|
|
9049
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9061
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
9050
9062
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9051
9063
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9052
9064
|
}, function (_a) {
|
|
9053
9065
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9054
9066
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9055
9067
|
});
|
|
9056
|
-
var templateObject_1$
|
|
9068
|
+
var templateObject_1$10;
|
|
9057
9069
|
|
|
9058
9070
|
var getStylesBySize$4 = function (size) {
|
|
9059
9071
|
// rem units
|
|
@@ -9112,22 +9124,22 @@ var SliderNavigation = function (_a) {
|
|
|
9112
9124
|
} }, { 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));
|
|
9113
9125
|
};
|
|
9114
9126
|
|
|
9115
|
-
var horizontalStyles = css(templateObject_1
|
|
9116
|
-
var verticalStyles = css(templateObject_2$
|
|
9117
|
-
var Container$
|
|
9127
|
+
var horizontalStyles = css(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
9128
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
9129
|
+
var Container$E = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9118
9130
|
var position = _a.position;
|
|
9119
9131
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9120
9132
|
});
|
|
9121
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9133
|
+
var Button$3 = newStyled.button(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
9122
9134
|
var ImagePreviewList = function (_a) {
|
|
9123
9135
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
9124
|
-
return (jsxRuntime.jsx(Container$
|
|
9136
|
+
return (jsxRuntime.jsx(Container$E, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9125
9137
|
arrowWidth: 0.75,
|
|
9126
9138
|
arrowHeight: 1.25,
|
|
9127
9139
|
arrowPadding: 1.625,
|
|
9128
9140
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
|
|
9129
9141
|
};
|
|
9130
|
-
var templateObject_1
|
|
9142
|
+
var templateObject_1$$, templateObject_2$E, templateObject_3$t, templateObject_4$l;
|
|
9131
9143
|
|
|
9132
9144
|
var propTypes = {exports: {}};
|
|
9133
9145
|
|
|
@@ -10713,19 +10725,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10713
10725
|
afterZoomOut: PropTypes.func
|
|
10714
10726
|
} : {};
|
|
10715
10727
|
|
|
10716
|
-
var Container$
|
|
10717
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
10718
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
10728
|
+
var Container$D = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\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 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"])));
|
|
10729
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10730
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10719
10731
|
var ImageProductWithTags$1 = function (_a) {
|
|
10720
10732
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10721
|
-
return (jsxRuntime.jsxs(Container$
|
|
10733
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
10722
10734
|
alt: image.alt,
|
|
10723
10735
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10724
10736
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
10725
10737
|
};
|
|
10726
|
-
var templateObject_1$
|
|
10738
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$s;
|
|
10727
10739
|
|
|
10728
|
-
var Container$
|
|
10740
|
+
var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
10729
10741
|
var ProductGallery = function (_a) {
|
|
10730
10742
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10731
10743
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10733,11 +10745,11 @@ var ProductGallery = function (_a) {
|
|
|
10733
10745
|
React$2.useEffect(function () {
|
|
10734
10746
|
setSelectedImage(initialValue);
|
|
10735
10747
|
}, [initialValue]);
|
|
10736
|
-
return (jsxRuntime.jsxs(Container$
|
|
10748
|
+
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10737
10749
|
setSelectedImage(value);
|
|
10738
10750
|
}, position: thumbnailPosition }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10739
10751
|
};
|
|
10740
|
-
var templateObject_1$
|
|
10752
|
+
var templateObject_1$Z;
|
|
10741
10753
|
|
|
10742
10754
|
/* base styles & size variants */
|
|
10743
10755
|
var StarStyles = {
|
|
@@ -10783,8 +10795,8 @@ var StarStyles = {
|
|
|
10783
10795
|
});
|
|
10784
10796
|
},
|
|
10785
10797
|
};
|
|
10786
|
-
var Container$
|
|
10787
|
-
var templateObject_1$
|
|
10798
|
+
var Container$B = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10799
|
+
var templateObject_1$Y;
|
|
10788
10800
|
|
|
10789
10801
|
var StarContainer = newStyled.div(function (_a) {
|
|
10790
10802
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10802,7 +10814,7 @@ var sizes = {
|
|
|
10802
10814
|
var StarList = function (_a) {
|
|
10803
10815
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
10804
10816
|
var theme = useTheme();
|
|
10805
|
-
return (jsxRuntime.jsx(Container$
|
|
10817
|
+
return (jsxRuntime.jsx(Container$B, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10806
10818
|
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));
|
|
10807
10819
|
}) }, void 0));
|
|
10808
10820
|
};
|
|
@@ -10846,8 +10858,8 @@ var LabelStyles = {
|
|
|
10846
10858
|
});
|
|
10847
10859
|
},
|
|
10848
10860
|
};
|
|
10849
|
-
var Container$
|
|
10850
|
-
var templateObject_1$
|
|
10861
|
+
var Container$A = newStyled.a(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10862
|
+
var templateObject_1$X;
|
|
10851
10863
|
|
|
10852
10864
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10853
10865
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10885,11 +10897,11 @@ var Rating = function (_a) {
|
|
|
10885
10897
|
href: reviewsContainerId,
|
|
10886
10898
|
}
|
|
10887
10899
|
: {};
|
|
10888
|
-
return (jsxRuntime.jsxs(Container$
|
|
10900
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
10889
10901
|
};
|
|
10890
10902
|
|
|
10891
|
-
var Container$
|
|
10892
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
10903
|
+
var Container$z = newStyled.div(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
10904
|
+
var P$2 = newStyled.p(templateObject_2$C || (templateObject_2$C = __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; });
|
|
10893
10905
|
var textButtonStyles = function (theme) { return ({
|
|
10894
10906
|
border: 'none',
|
|
10895
10907
|
background: 'transparent',
|
|
@@ -10902,9 +10914,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10902
10914
|
var FitPredictor = function (_a) {
|
|
10903
10915
|
var onClick = _a.onClick;
|
|
10904
10916
|
var theme = useTheme();
|
|
10905
|
-
return (jsxs(Container$
|
|
10917
|
+
return (jsxs(Container$z, __assign$1({ theme: theme }, { children: [jsx(Container$z, { 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));
|
|
10906
10918
|
};
|
|
10907
|
-
var templateObject_1$
|
|
10919
|
+
var templateObject_1$W, templateObject_2$C;
|
|
10908
10920
|
|
|
10909
10921
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10910
10922
|
var color = _a.color;
|
|
@@ -10918,7 +10930,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10918
10930
|
margin: '0.938rem 4.188rem',
|
|
10919
10931
|
});
|
|
10920
10932
|
});
|
|
10921
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10933
|
+
var Bar = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
10922
10934
|
var backgroundColor = _a.backgroundColor;
|
|
10923
10935
|
return backgroundColor;
|
|
10924
10936
|
}, function (_a) {
|
|
@@ -10941,7 +10953,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10941
10953
|
position: 'absolute',
|
|
10942
10954
|
});
|
|
10943
10955
|
});
|
|
10944
|
-
var Container$
|
|
10956
|
+
var Container$y = newStyled.div(function (_a) {
|
|
10945
10957
|
var widthAuto = _a.widthAuto;
|
|
10946
10958
|
return ({
|
|
10947
10959
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10955,9 +10967,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10955
10967
|
var ProgressBar = function (_a) {
|
|
10956
10968
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10957
10969
|
var theme = useTheme();
|
|
10958
|
-
return (jsxRuntime.jsxs(Container$
|
|
10970
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
10959
10971
|
};
|
|
10960
|
-
var templateObject_1$
|
|
10972
|
+
var templateObject_1$V;
|
|
10961
10973
|
|
|
10962
10974
|
var getStylesBySize$3 = function (size) {
|
|
10963
10975
|
switch (size) {
|
|
@@ -10978,7 +10990,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
10978
10990
|
};
|
|
10979
10991
|
}
|
|
10980
10992
|
};
|
|
10981
|
-
var Container$
|
|
10993
|
+
var Container$x = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
10982
10994
|
var backgroundColor = _a.backgroundColor;
|
|
10983
10995
|
return backgroundColor;
|
|
10984
10996
|
}, function (_a) {
|
|
@@ -11006,9 +11018,9 @@ var Container$w = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
11006
11018
|
var IconButton = function (_a) {
|
|
11007
11019
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11008
11020
|
var theme = useTheme();
|
|
11009
|
-
return (jsxRuntime.jsx(Container$
|
|
11021
|
+
return (jsxRuntime.jsx(Container$x, __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));
|
|
11010
11022
|
};
|
|
11011
|
-
var templateObject_1$
|
|
11023
|
+
var templateObject_1$U;
|
|
11012
11024
|
|
|
11013
11025
|
var TooltipArrow = function (_a) {
|
|
11014
11026
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11088,7 +11100,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11088
11100
|
}
|
|
11089
11101
|
};
|
|
11090
11102
|
|
|
11091
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11103
|
+
var Wrapper$5 = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
11092
11104
|
var position = _a.position;
|
|
11093
11105
|
return getWrapperFlexDirection(position);
|
|
11094
11106
|
});
|
|
@@ -11112,11 +11124,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11112
11124
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11113
11125
|
return actual === expected ? margin : '0';
|
|
11114
11126
|
};
|
|
11115
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11127
|
+
var ContentWrapper = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
11116
11128
|
var borderColor = _a.borderColor;
|
|
11117
11129
|
return borderColor;
|
|
11118
11130
|
});
|
|
11119
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11131
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$r || (templateObject_3$r = __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) {
|
|
11120
11132
|
var position = _a.position;
|
|
11121
11133
|
return getArrowRotation(position);
|
|
11122
11134
|
}, function (_a) {
|
|
@@ -11126,7 +11138,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$p || (templateObject_
|
|
|
11126
11138
|
var position = _a.position;
|
|
11127
11139
|
return getArrowContainerMargin(position);
|
|
11128
11140
|
});
|
|
11129
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11141
|
+
var TooltipText = newStyled.div(templateObject_4$k || (templateObject_4$k = __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) {
|
|
11130
11142
|
var color = _a.color;
|
|
11131
11143
|
return color;
|
|
11132
11144
|
});
|
|
@@ -11136,7 +11148,7 @@ var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
|
|
|
11136
11148
|
return color;
|
|
11137
11149
|
});
|
|
11138
11150
|
var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
|
|
11139
|
-
var templateObject_1$
|
|
11151
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$r, templateObject_4$k, templateObject_5$b, templateObject_6$7, templateObject_7$4;
|
|
11140
11152
|
|
|
11141
11153
|
var Tooltip = function (_a) {
|
|
11142
11154
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -11288,9 +11300,9 @@ var ContainerStyles = {
|
|
|
11288
11300
|
},
|
|
11289
11301
|
};
|
|
11290
11302
|
|
|
11291
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11292
|
-
var Container$
|
|
11293
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11303
|
+
var Wrapper$4 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11304
|
+
var Container$w = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11305
|
+
var Input$2 = newStyled.input(templateObject_2$A || (templateObject_2$A = __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) {
|
|
11294
11306
|
var disabled = _a.disabled;
|
|
11295
11307
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11296
11308
|
});
|
|
@@ -11305,9 +11317,9 @@ var RadioInput = function (_a) {
|
|
|
11305
11317
|
var value = event.currentTarget.value;
|
|
11306
11318
|
onChange({ value: value, label: label });
|
|
11307
11319
|
};
|
|
11308
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11320
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$w, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11309
11321
|
};
|
|
11310
|
-
var templateObject_1$
|
|
11322
|
+
var templateObject_1$S, templateObject_2$A;
|
|
11311
11323
|
|
|
11312
11324
|
var RadioGroupInput = function (_a) {
|
|
11313
11325
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11321,37 +11333,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11321
11333
|
}) }), void 0));
|
|
11322
11334
|
};
|
|
11323
11335
|
|
|
11324
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11325
|
-
var Container$
|
|
11336
|
+
var Wrapper$3 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n padding: 12px 58px;\n"], ["\n padding: 12px 58px;\n"])));
|
|
11337
|
+
var Container$v = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
11326
11338
|
var Minimalistic = function (_a) {
|
|
11327
11339
|
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;
|
|
11328
11340
|
var theme = useTheme();
|
|
11329
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11341
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11330
11342
|
};
|
|
11331
|
-
var templateObject_1$
|
|
11343
|
+
var templateObject_1$R, templateObject_2$z;
|
|
11332
11344
|
|
|
11333
|
-
var Container$
|
|
11334
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11335
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11336
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11345
|
+
var Container$u = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11346
|
+
var Title$5 = newStyled.h1(templateObject_2$y || (templateObject_2$y = __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; });
|
|
11347
|
+
var Details$1 = newStyled.span(templateObject_3$q || (templateObject_3$q = __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; });
|
|
11348
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
11337
11349
|
var Simple = function (_a) {
|
|
11338
11350
|
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;
|
|
11339
11351
|
var theme = useTheme();
|
|
11340
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11352
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$u, { children: [jsxRuntime.jsx(Title$5, __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));
|
|
11341
11353
|
};
|
|
11342
|
-
var templateObject_1$
|
|
11354
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$q, templateObject_4$j;
|
|
11343
11355
|
|
|
11344
11356
|
var Bundle = {
|
|
11345
11357
|
Minimalistic: Minimalistic,
|
|
11346
11358
|
Simple: Simple,
|
|
11347
11359
|
};
|
|
11348
11360
|
|
|
11349
|
-
var Container$
|
|
11361
|
+
var Container$t = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
11350
11362
|
var Tag$1 = function (_a) {
|
|
11351
11363
|
var text = _a.text, className = _a.className;
|
|
11352
|
-
return jsxRuntime.jsx(Container$
|
|
11364
|
+
return jsxRuntime.jsx(Container$t, __assign$1({ className: className }, { children: text }), void 0);
|
|
11353
11365
|
};
|
|
11354
|
-
var templateObject_1$
|
|
11366
|
+
var templateObject_1$P;
|
|
11355
11367
|
|
|
11356
11368
|
var getStylesBySize$2 = function (size) {
|
|
11357
11369
|
switch (size) {
|
|
@@ -11454,11 +11466,11 @@ var Timer = function (_a) {
|
|
|
11454
11466
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11455
11467
|
};
|
|
11456
11468
|
|
|
11457
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11469
|
+
var Label$1 = newStyled.span(templateObject_1$O || (templateObject_1$O = __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) {
|
|
11458
11470
|
var color = _a.color;
|
|
11459
11471
|
return color;
|
|
11460
11472
|
});
|
|
11461
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11473
|
+
var MandatoryIcon = newStyled.span(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
11462
11474
|
var color = _a.color;
|
|
11463
11475
|
return color;
|
|
11464
11476
|
});
|
|
@@ -11467,7 +11479,7 @@ var InputLabel = function (_a) {
|
|
|
11467
11479
|
var theme = useTheme();
|
|
11468
11480
|
return (jsxRuntime.jsxs(Label$1, __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));
|
|
11469
11481
|
};
|
|
11470
|
-
var templateObject_1$
|
|
11482
|
+
var templateObject_1$O, templateObject_2$x;
|
|
11471
11483
|
|
|
11472
11484
|
/**
|
|
11473
11485
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11521,20 +11533,20 @@ var formatPrice = function (value, _a) {
|
|
|
11521
11533
|
}).format(valueToFormat);
|
|
11522
11534
|
};
|
|
11523
11535
|
|
|
11524
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11525
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
11536
|
+
var ErrorText = newStyled.h3(templateObject_1$N || (templateObject_1$N = __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; });
|
|
11537
|
+
var ErrorContainer = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
11526
11538
|
var Error$1 = function (_a) {
|
|
11527
11539
|
var error = _a.error;
|
|
11528
11540
|
var theme = useTheme();
|
|
11529
11541
|
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));
|
|
11530
11542
|
};
|
|
11531
|
-
var templateObject_1$
|
|
11543
|
+
var templateObject_1$N, templateObject_2$w;
|
|
11532
11544
|
|
|
11533
|
-
var Container$
|
|
11545
|
+
var Container$s = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
11534
11546
|
var color = _a.color, hasError = _a.hasError;
|
|
11535
11547
|
return (!hasError ? color : '');
|
|
11536
11548
|
});
|
|
11537
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
11549
|
+
var StyledInput = newStyled.input(templateObject_2$v || (templateObject_2$v = __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 &: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 &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
11538
11550
|
var padding = _a.padding;
|
|
11539
11551
|
return padding;
|
|
11540
11552
|
}, function (_a) {
|
|
@@ -11590,13 +11602,13 @@ var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __
|
|
|
11590
11602
|
? "& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }"
|
|
11591
11603
|
: '';
|
|
11592
11604
|
});
|
|
11593
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
11605
|
+
var InputWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
11594
11606
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
11595
11607
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '44px') : '48px';
|
|
11596
11608
|
});
|
|
11597
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
11609
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
11598
11610
|
var ClearInput = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
11599
|
-
var templateObject_1$
|
|
11611
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$p, templateObject_4$i, templateObject_5$a;
|
|
11600
11612
|
|
|
11601
11613
|
var BaseInput = function (_a) {
|
|
11602
11614
|
var _b;
|
|
@@ -11657,7 +11669,7 @@ var BaseInput = function (_a) {
|
|
|
11657
11669
|
focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
|
|
11658
11670
|
hasError: hasError ? theme.component.input.errorBorder : '',
|
|
11659
11671
|
};
|
|
11660
|
-
return (jsxRuntime.jsxs(Container$
|
|
11672
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
11661
11673
|
? theme.colors.shades['700'].color
|
|
11662
11674
|
: status === exports.InputValidationType.Error
|
|
11663
11675
|
? theme.colors.semantic.urgent.color
|
|
@@ -11683,11 +11695,11 @@ var Button$2 = function (_a) {
|
|
|
11683
11695
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11684
11696
|
};
|
|
11685
11697
|
|
|
11686
|
-
var Container$
|
|
11698
|
+
var Container$r = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
11687
11699
|
var theme = _a.theme;
|
|
11688
11700
|
return theme.component.inputCustom.input.borderRadius;
|
|
11689
11701
|
});
|
|
11690
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
11702
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
11691
11703
|
var theme = _a.theme;
|
|
11692
11704
|
return theme.component.inputCustom.button.borderRadius;
|
|
11693
11705
|
});
|
|
@@ -11700,23 +11712,23 @@ var Custom = function (_a) {
|
|
|
11700
11712
|
text: text,
|
|
11701
11713
|
disabled: rest.disabled,
|
|
11702
11714
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11703
|
-
return (jsxRuntime.jsx(Container$
|
|
11715
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
11704
11716
|
};
|
|
11705
|
-
var templateObject_1$
|
|
11717
|
+
var templateObject_1$L, templateObject_2$u;
|
|
11706
11718
|
|
|
11707
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11719
|
+
var SuccessContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
11708
11720
|
var size = _a.size;
|
|
11709
11721
|
return (size === 'small' ? '36px' : '');
|
|
11710
11722
|
});
|
|
11711
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
11712
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
11723
|
+
var SuccessMessage = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
11724
|
+
var SuccessText = newStyled.span(templateObject_3$o || (templateObject_3$o = __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"])));
|
|
11713
11725
|
var Success = function (_a) {
|
|
11714
11726
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11715
11727
|
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));
|
|
11716
11728
|
};
|
|
11717
|
-
var templateObject_1$
|
|
11729
|
+
var templateObject_1$K, templateObject_2$t, templateObject_3$o;
|
|
11718
11730
|
|
|
11719
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11731
|
+
var ButtonContainer = newStyled.div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
11720
11732
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11721
11733
|
return status === exports.InputValidationType.Empty &&
|
|
11722
11734
|
type === 'primary' &&
|
|
@@ -11733,21 +11745,21 @@ var BasePlusButton = function (_a) {
|
|
|
11733
11745
|
}
|
|
11734
11746
|
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));
|
|
11735
11747
|
};
|
|
11736
|
-
var templateObject_1$
|
|
11748
|
+
var templateObject_1$J;
|
|
11737
11749
|
|
|
11738
|
-
var Container$
|
|
11739
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
11750
|
+
var Container$q = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
11751
|
+
var IconContainer$4 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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; });
|
|
11740
11752
|
var BasePlusIcon = function (_a) {
|
|
11741
11753
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11742
11754
|
var theme = useTheme();
|
|
11743
11755
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11744
|
-
return (jsxRuntime.jsx(Container$
|
|
11756
|
+
return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
11745
11757
|
? theme.colors.shades['700'].color
|
|
11746
11758
|
: status === exports.InputValidationType.Error
|
|
11747
11759
|
? theme.colors.semantic.urgent.color
|
|
11748
11760
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11749
11761
|
};
|
|
11750
|
-
var templateObject_1$
|
|
11762
|
+
var templateObject_1$I, templateObject_2$s;
|
|
11751
11763
|
|
|
11752
11764
|
var Input$1 = {
|
|
11753
11765
|
Simple: BaseInput,
|
|
@@ -11756,7 +11768,7 @@ var Input$1 = {
|
|
|
11756
11768
|
SimplePlusIcon: BasePlusIcon,
|
|
11757
11769
|
};
|
|
11758
11770
|
|
|
11759
|
-
var Container$
|
|
11771
|
+
var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
11760
11772
|
var width = _a.width;
|
|
11761
11773
|
return width;
|
|
11762
11774
|
}, function (_a) {
|
|
@@ -11772,11 +11784,11 @@ var Container$o = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
11772
11784
|
var PaymentMethod = function (_a) {
|
|
11773
11785
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11774
11786
|
var theme = useTheme();
|
|
11775
|
-
return (jsxRuntime.jsx(Container$
|
|
11787
|
+
return (jsxRuntime.jsx(Container$p, __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));
|
|
11776
11788
|
};
|
|
11777
|
-
var templateObject_1$
|
|
11789
|
+
var templateObject_1$H;
|
|
11778
11790
|
|
|
11779
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
11791
|
+
var Text$5 = newStyled.h3(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
11780
11792
|
var backgroundColor = _a.backgroundColor;
|
|
11781
11793
|
return backgroundColor;
|
|
11782
11794
|
}, function (_a) {
|
|
@@ -11788,27 +11800,27 @@ var OfferBanner = function (_a) {
|
|
|
11788
11800
|
var theme = useTheme();
|
|
11789
11801
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11790
11802
|
};
|
|
11791
|
-
var templateObject_1$
|
|
11803
|
+
var templateObject_1$G;
|
|
11792
11804
|
|
|
11793
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11794
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
11795
|
-
var Currency = newStyled.span(templateObject_3$
|
|
11796
|
-
var Container$
|
|
11805
|
+
var Wrapper$2 = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
11806
|
+
var GrandTotal = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
11807
|
+
var Currency = newStyled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
11808
|
+
var Container$o = newStyled.div(templateObject_4$h || (templateObject_4$h = __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; });
|
|
11797
11809
|
var Discount = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
11798
11810
|
var Total = function (_a) {
|
|
11799
11811
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11800
11812
|
var theme = useTheme();
|
|
11801
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
11813
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$o, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
11802
11814
|
};
|
|
11803
|
-
var templateObject_1$
|
|
11815
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$9;
|
|
11804
11816
|
|
|
11805
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11817
|
+
var Wrapper$1 = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11806
11818
|
var color = _a.color;
|
|
11807
11819
|
return color;
|
|
11808
11820
|
});
|
|
11809
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
11810
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
11811
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
11821
|
+
var ItemContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
11822
|
+
var Item$2 = newStyled.h4(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
11823
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11812
11824
|
var color = _a.color;
|
|
11813
11825
|
return color;
|
|
11814
11826
|
});
|
|
@@ -11820,22 +11832,22 @@ var Subtotal = function (_a) {
|
|
|
11820
11832
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
11821
11833
|
})] }), void 0));
|
|
11822
11834
|
};
|
|
11823
|
-
var templateObject_1$
|
|
11835
|
+
var templateObject_1$E, templateObject_2$q, templateObject_3$m, templateObject_4$g;
|
|
11824
11836
|
|
|
11825
11837
|
var Totals = {
|
|
11826
11838
|
Total: Total,
|
|
11827
11839
|
Subtotal: Subtotal,
|
|
11828
11840
|
};
|
|
11829
11841
|
|
|
11830
|
-
var Container$
|
|
11831
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
11832
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
11833
|
-
var Details = newStyled.span(templateObject_4$
|
|
11842
|
+
var Container$n = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
11843
|
+
var IconContainer$3 = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
11844
|
+
var Text$4 = newStyled.p(templateObject_3$l || (templateObject_3$l = __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; });
|
|
11845
|
+
var Details = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
11834
11846
|
var Note = function (_a) {
|
|
11835
11847
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11836
|
-
return (jsxRuntime.jsxs(Container$
|
|
11848
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxRuntime.jsxs(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11837
11849
|
};
|
|
11838
|
-
var templateObject_1$
|
|
11850
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
11839
11851
|
|
|
11840
11852
|
/* eslint-disable no-param-reassign */
|
|
11841
11853
|
var index$1 = function (breakpoints) {
|
|
@@ -11921,12 +11933,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11921
11933
|
literal: true,
|
|
11922
11934
|
});
|
|
11923
11935
|
|
|
11924
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
11925
|
-
var Line = newStyled.div(templateObject_2$
|
|
11926
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
11936
|
+
var Title$4 = newStyled.h1(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11937
|
+
var Line = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
11938
|
+
var Row$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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({
|
|
11927
11939
|
flexDirection: ['column', 'row'],
|
|
11928
11940
|
}));
|
|
11929
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
11941
|
+
var Col$1 = newStyled.div(templateObject_4$e || (templateObject_4$e = __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({
|
|
11930
11942
|
margin: ['0', '0 1.25rem'],
|
|
11931
11943
|
marginBottom: ['1.875rem', '0'],
|
|
11932
11944
|
alignItems: ['center', 'flex-start'],
|
|
@@ -11950,47 +11962,47 @@ var DeliveryDetails = function (_a) {
|
|
|
11950
11962
|
var theme = useTheme();
|
|
11951
11963
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), 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));
|
|
11952
11964
|
};
|
|
11953
|
-
var templateObject_1$
|
|
11965
|
+
var templateObject_1$C, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$2;
|
|
11954
11966
|
|
|
11955
|
-
var Container$
|
|
11956
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
11967
|
+
var Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
11968
|
+
var Text$3 = newStyled.p(templateObject_2$n || (templateObject_2$n = __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; });
|
|
11957
11969
|
var ScrollToTop = function (_a) {
|
|
11958
11970
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11959
11971
|
var theme = useTheme();
|
|
11960
|
-
return (jsxRuntime.jsxs(Container$
|
|
11972
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
11961
11973
|
};
|
|
11962
|
-
var templateObject_1$
|
|
11974
|
+
var templateObject_1$B, templateObject_2$n;
|
|
11963
11975
|
|
|
11964
|
-
var Container$
|
|
11965
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
11976
|
+
var Container$l = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
11977
|
+
var H1 = newStyled.h1(templateObject_2$m || (templateObject_2$m = __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; });
|
|
11966
11978
|
var OrderBar = function (_a) {
|
|
11967
11979
|
var message = _a.message;
|
|
11968
11980
|
var theme = useTheme();
|
|
11969
|
-
return (jsxRuntime.jsxs(Container$
|
|
11981
|
+
return (jsxRuntime.jsxs(Container$l, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11970
11982
|
};
|
|
11971
|
-
var templateObject_1$
|
|
11983
|
+
var templateObject_1$A, templateObject_2$m;
|
|
11972
11984
|
|
|
11973
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
11974
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
11975
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
11976
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
11985
|
+
var TableElement = newStyled.table(templateObject_1$z || (templateObject_1$z = __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; });
|
|
11986
|
+
var TableCell = newStyled.td(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
11987
|
+
var TableHead = newStyled.th(templateObject_3$j || (templateObject_3$j = __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; });
|
|
11988
|
+
var TableRow = newStyled.tr(templateObject_4$d || (templateObject_4$d = __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; });
|
|
11977
11989
|
var SizeTable = function (_a) {
|
|
11978
11990
|
var headers = _a.headers, data = _a.data;
|
|
11979
11991
|
var theme = useTheme();
|
|
11980
11992
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __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, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: 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));
|
|
11981
11993
|
};
|
|
11982
|
-
var templateObject_1$
|
|
11994
|
+
var templateObject_1$z, templateObject_2$l, templateObject_3$j, templateObject_4$d;
|
|
11983
11995
|
|
|
11984
|
-
var Img = newStyled.img(templateObject_1$
|
|
11996
|
+
var Img = newStyled.img(templateObject_1$y || (templateObject_1$y = __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; });
|
|
11985
11997
|
var Image = function (_a) {
|
|
11986
11998
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
11987
11999
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
11988
12000
|
};
|
|
11989
|
-
var templateObject_1$
|
|
12001
|
+
var templateObject_1$y;
|
|
11990
12002
|
|
|
11991
|
-
var Container$
|
|
11992
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
11993
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
12003
|
+
var Container$k = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12004
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12005
|
+
var DescriptionContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
11994
12006
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11995
12007
|
}));
|
|
11996
12008
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -12013,7 +12025,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12013
12025
|
margin: '0.063rem 0',
|
|
12014
12026
|
});
|
|
12015
12027
|
});
|
|
12016
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12028
|
+
var PriceContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __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) {
|
|
12017
12029
|
var withTag = _a.withTag; _a.theme;
|
|
12018
12030
|
return withTag
|
|
12019
12031
|
? mediaQueries({
|
|
@@ -12026,9 +12038,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
12026
12038
|
var SimpleOrderItem = function (_a) {
|
|
12027
12039
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
12028
12040
|
var theme = useTheme();
|
|
12029
|
-
return (jsxRuntime.jsxs(Container$
|
|
12041
|
+
return (jsxRuntime.jsxs(Container$k, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12030
12042
|
};
|
|
12031
|
-
var templateObject_1$
|
|
12043
|
+
var templateObject_1$x, templateObject_2$k, templateObject_3$i, templateObject_4$c, templateObject_5$7;
|
|
12032
12044
|
|
|
12033
12045
|
function formatDate(date) {
|
|
12034
12046
|
var day = date.getDate();
|
|
@@ -12037,15 +12049,15 @@ function formatDate(date) {
|
|
|
12037
12049
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12038
12050
|
}
|
|
12039
12051
|
|
|
12040
|
-
var Container$
|
|
12041
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12052
|
+
var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
12053
|
+
var Heading = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), mediaQueries({
|
|
12042
12054
|
fontSize: ['14px', '16px'],
|
|
12043
12055
|
lineHeight: ['22px', '24px'],
|
|
12044
12056
|
}));
|
|
12045
|
-
var Content = newStyled.div(templateObject_3$
|
|
12057
|
+
var Content = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
|
|
12046
12058
|
flexDirection: ['column', 'row'],
|
|
12047
12059
|
}));
|
|
12048
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12060
|
+
var ReviewContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
12049
12061
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12050
12062
|
}));
|
|
12051
12063
|
var H2$1 = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
|
|
@@ -12060,17 +12072,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
12060
12072
|
var Review = function (_a) {
|
|
12061
12073
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12062
12074
|
var theme = useTheme();
|
|
12063
|
-
return (jsxRuntime.jsxs(Container$
|
|
12075
|
+
return (jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12064
12076
|
};
|
|
12065
|
-
var templateObject_1$
|
|
12077
|
+
var templateObject_1$w, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
12066
12078
|
|
|
12067
|
-
var List = newStyled.ul(templateObject_1$
|
|
12068
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12069
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12070
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12079
|
+
var List = newStyled.ul(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12080
|
+
var Item$1 = newStyled.li(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
12081
|
+
var DropdownWrapper = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
12082
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
12071
12083
|
var StyledDropdown = newStyled.ul(templateObject_5$5 || (templateObject_5$5 = __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; });
|
|
12072
12084
|
var DropdownItem = newStyled.li(templateObject_6$4 || (templateObject_6$4 = __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; });
|
|
12073
|
-
var templateObject_1$
|
|
12085
|
+
var templateObject_1$v, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12074
12086
|
|
|
12075
12087
|
var DropdownListIcons = function (_a) {
|
|
12076
12088
|
var items = _a.items;
|
|
@@ -12083,7 +12095,7 @@ var Dropdown = function (_a) {
|
|
|
12083
12095
|
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));
|
|
12084
12096
|
};
|
|
12085
12097
|
|
|
12086
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12098
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$u || (templateObject_1$u = __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; });
|
|
12087
12099
|
var AmazonButton = function (_a) {
|
|
12088
12100
|
var onClick = _a.onClick;
|
|
12089
12101
|
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));
|
|
@@ -12092,15 +12104,15 @@ var PaypalButton = function (_a) {
|
|
|
12092
12104
|
var onClick = _a.onClick;
|
|
12093
12105
|
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));
|
|
12094
12106
|
};
|
|
12095
|
-
var templateObject_1$
|
|
12107
|
+
var templateObject_1$u;
|
|
12096
12108
|
|
|
12097
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12098
|
-
var Col = newStyled.div(templateObject_2$
|
|
12099
|
-
var Row = newStyled.div(templateObject_3$
|
|
12109
|
+
var Wrapper = newStyled.div(templateObject_1$t || (templateObject_1$t = __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'); });
|
|
12110
|
+
var Col = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12111
|
+
var Row = newStyled.div(templateObject_3$f || (templateObject_3$f = __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) {
|
|
12100
12112
|
return props.rightToLeft &&
|
|
12101
12113
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12102
12114
|
});
|
|
12103
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12115
|
+
var H5 = newStyled.h5(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
12104
12116
|
var H3 = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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; });
|
|
12105
12117
|
var FreeShipping = newStyled.span(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12106
12118
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12108,7 +12120,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12108
12120
|
var theme = useTheme();
|
|
12109
12121
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12110
12122
|
};
|
|
12111
|
-
var templateObject_1$
|
|
12123
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$f, templateObject_4$9, templateObject_5$4, templateObject_6$3;
|
|
12112
12124
|
|
|
12113
12125
|
var index = /*#__PURE__*/Object.freeze({
|
|
12114
12126
|
__proto__: null,
|
|
@@ -12129,8 +12141,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12129
12141
|
height: height,
|
|
12130
12142
|
});
|
|
12131
12143
|
});
|
|
12132
|
-
var Container$
|
|
12133
|
-
var Title$2 = newStyled.p(templateObject_2$
|
|
12144
|
+
var Container$i = newStyled.a(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
12145
|
+
var Title$2 = newStyled.p(templateObject_2$g || (templateObject_2$g = __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; });
|
|
12134
12146
|
var getStylesBySize = function (size) {
|
|
12135
12147
|
switch (size) {
|
|
12136
12148
|
case exports.ComponentSize.Medium:
|
|
@@ -12156,8 +12168,8 @@ var getStylesBySize = function (size) {
|
|
|
12156
12168
|
};
|
|
12157
12169
|
}
|
|
12158
12170
|
};
|
|
12159
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
12160
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
12171
|
+
var TopTagContainer$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"])));
|
|
12172
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"])));
|
|
12161
12173
|
var ProductItemMobile = function (_a) {
|
|
12162
12174
|
var title = _a.title, image = _a.image, 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;
|
|
12163
12175
|
var theme = useTheme();
|
|
@@ -12170,32 +12182,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12170
12182
|
_a[exports.ComponentSize.Small] = 2,
|
|
12171
12183
|
_a)[size];
|
|
12172
12184
|
}, [size]);
|
|
12173
|
-
return (jsxs(Container$
|
|
12185
|
+
return (jsxs(Container$i, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12174
12186
|
};
|
|
12175
|
-
var templateObject_1$
|
|
12187
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$8;
|
|
12176
12188
|
|
|
12177
|
-
var Container$
|
|
12189
|
+
var Container$h = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12178
12190
|
function withProductGrid(ProductItemComponent, data) {
|
|
12179
12191
|
function WithProductGrid(props) {
|
|
12180
|
-
return (jsxRuntime.jsx(Container$
|
|
12192
|
+
return (jsxRuntime.jsx(Container$h, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12181
12193
|
}
|
|
12182
12194
|
/* istanbul ignore next */
|
|
12183
12195
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12184
12196
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12185
12197
|
return WithProductGrid;
|
|
12186
12198
|
}
|
|
12187
|
-
var templateObject_1$
|
|
12199
|
+
var templateObject_1$r;
|
|
12188
12200
|
|
|
12189
12201
|
var Collection = {
|
|
12190
12202
|
ProductItemMobile: ProductItemMobile,
|
|
12191
12203
|
withProductGrid: withProductGrid,
|
|
12192
12204
|
};
|
|
12193
12205
|
|
|
12194
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12206
|
+
var Backdrop = newStyled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
12195
12207
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12196
12208
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12197
12209
|
});
|
|
12198
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12210
|
+
var Sidebar = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
12199
12211
|
var width = _a.width;
|
|
12200
12212
|
return width;
|
|
12201
12213
|
}, function (_a) {
|
|
@@ -12236,28 +12248,28 @@ var Drawer = function (_a) {
|
|
|
12236
12248
|
}, [isOpen, onClose, onOpen]);
|
|
12237
12249
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12238
12250
|
};
|
|
12239
|
-
var templateObject_1$
|
|
12251
|
+
var templateObject_1$q, templateObject_2$f;
|
|
12240
12252
|
|
|
12241
|
-
var Container$
|
|
12253
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12242
12254
|
var size = _a.size;
|
|
12243
12255
|
return (size ? size : '100%');
|
|
12244
12256
|
}, function (_a) {
|
|
12245
12257
|
var size = _a.size;
|
|
12246
12258
|
return (size ? size : '100%');
|
|
12247
12259
|
});
|
|
12248
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12260
|
+
var Animation = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
12249
12261
|
var animationDuration = _a.animationDuration;
|
|
12250
12262
|
return animationDuration;
|
|
12251
12263
|
});
|
|
12252
12264
|
var Spinner = function (_a) {
|
|
12253
12265
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12254
|
-
return (jsxRuntime.jsx(Container$
|
|
12266
|
+
return (jsxRuntime.jsx(Container$g, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12255
12267
|
};
|
|
12256
|
-
var templateObject_1$
|
|
12268
|
+
var templateObject_1$p, templateObject_2$e;
|
|
12257
12269
|
|
|
12258
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12259
|
-
var LI = newStyled.li(templateObject_2$
|
|
12260
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12270
|
+
var UL = newStyled.ul(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
12271
|
+
var LI = newStyled.li(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
12272
|
+
var CloseIconContainer = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
12261
12273
|
var Tags = function (_a) {
|
|
12262
12274
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12263
12275
|
var theme = useTheme();
|
|
@@ -12265,7 +12277,7 @@ var Tags = function (_a) {
|
|
|
12265
12277
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12266
12278
|
}) }), void 0));
|
|
12267
12279
|
};
|
|
12268
|
-
var templateObject_1$
|
|
12280
|
+
var templateObject_1$o, templateObject_2$d, templateObject_3$d;
|
|
12269
12281
|
|
|
12270
12282
|
function FilteringDropdown(_a) {
|
|
12271
12283
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -12298,12 +12310,12 @@ function FilteringDropdown(_a) {
|
|
|
12298
12310
|
}) }, void 0)] }), void 0));
|
|
12299
12311
|
}
|
|
12300
12312
|
|
|
12301
|
-
var Container$
|
|
12302
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12303
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12313
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
12314
|
+
var IconContainer$1 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12315
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12304
12316
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12305
12317
|
}));
|
|
12306
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12318
|
+
var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
12307
12319
|
var bold = _a.bold;
|
|
12308
12320
|
return (bold ? '700' : '500');
|
|
12309
12321
|
}, function (_a) {
|
|
@@ -12317,7 +12329,7 @@ var PageNumber = newStyled.span(templateObject_4$6 || (templateObject_4$6 = __ma
|
|
|
12317
12329
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12318
12330
|
width: ['1.25rem', '1.875rem'],
|
|
12319
12331
|
}));
|
|
12320
|
-
var templateObject_1$
|
|
12332
|
+
var templateObject_1$n, templateObject_2$c, templateObject_3$c, templateObject_4$7;
|
|
12321
12333
|
|
|
12322
12334
|
var Pagination = function (_a) {
|
|
12323
12335
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
@@ -12330,10 +12342,10 @@ var Pagination = function (_a) {
|
|
|
12330
12342
|
setPage(page);
|
|
12331
12343
|
onChange(page);
|
|
12332
12344
|
};
|
|
12333
|
-
return (jsxRuntime.jsxs(Container$
|
|
12345
|
+
return (jsxRuntime.jsxs(Container$f, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12334
12346
|
};
|
|
12335
12347
|
|
|
12336
|
-
var Container$
|
|
12348
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
12337
12349
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12338
12350
|
}));
|
|
12339
12351
|
var Description$1 = newStyled.div({
|
|
@@ -12350,25 +12362,25 @@ var Description$1 = newStyled.div({
|
|
|
12350
12362
|
var ProductItem = function (_a) {
|
|
12351
12363
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12352
12364
|
var theme = useTheme();
|
|
12353
|
-
return (jsxRuntime.jsxs(Container$
|
|
12365
|
+
return (jsxRuntime.jsxs(Container$e, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12354
12366
|
};
|
|
12355
|
-
var templateObject_1$
|
|
12367
|
+
var templateObject_1$m;
|
|
12356
12368
|
|
|
12357
|
-
var Container$
|
|
12369
|
+
var Container$d = newStyled.div({
|
|
12358
12370
|
display: 'flex',
|
|
12359
12371
|
justifyContent: 'center',
|
|
12360
12372
|
padding: '1rem',
|
|
12361
12373
|
});
|
|
12362
12374
|
var Footer = function (_a) {
|
|
12363
12375
|
var text = _a.text, onClick = _a.onClick;
|
|
12364
|
-
return (jsxRuntime.jsx(Container$
|
|
12376
|
+
return (jsxRuntime.jsx(Container$d, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12365
12377
|
};
|
|
12366
12378
|
|
|
12367
12379
|
var Ul = newStyled.ul({
|
|
12368
12380
|
margin: '0px',
|
|
12369
12381
|
padding: '0px',
|
|
12370
12382
|
});
|
|
12371
|
-
var Li = newStyled.li(templateObject_1$
|
|
12383
|
+
var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
12372
12384
|
padding: [0, '0rem 1rem'],
|
|
12373
12385
|
borderRadius: [0, '0.5rem'],
|
|
12374
12386
|
}));
|
|
@@ -12380,20 +12392,20 @@ var Anchor = newStyled.a({
|
|
|
12380
12392
|
padding: 0,
|
|
12381
12393
|
textDecoration: 'none',
|
|
12382
12394
|
});
|
|
12383
|
-
var Container$
|
|
12395
|
+
var Container$c = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
12384
12396
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12385
12397
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12386
12398
|
borderRadius: ['0', '0.5rem'],
|
|
12387
12399
|
}));
|
|
12388
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12400
|
+
var Header$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12389
12401
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12390
12402
|
}));
|
|
12391
12403
|
var ResultsPanel = function (_a) {
|
|
12392
12404
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12393
12405
|
var theme = useTheme();
|
|
12394
|
-
return (jsxRuntime.jsxs(Container$
|
|
12406
|
+
return (jsxRuntime.jsxs(Container$c, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12395
12407
|
};
|
|
12396
|
-
var templateObject_1$
|
|
12408
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$b;
|
|
12397
12409
|
|
|
12398
12410
|
var Input = newStyled.input(function (props) { return ({
|
|
12399
12411
|
padding: props.theme.component.input.padding,
|
|
@@ -12424,7 +12436,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12424
12436
|
},
|
|
12425
12437
|
}); });
|
|
12426
12438
|
|
|
12427
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12439
|
+
var Button$1 = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
12428
12440
|
right: ['1rem', '7.75rem'],
|
|
12429
12441
|
top: ['0.75rem', '0.75rem'],
|
|
12430
12442
|
}));
|
|
@@ -12433,7 +12445,7 @@ var ClearButton = function (_a) {
|
|
|
12433
12445
|
var theme = useTheme();
|
|
12434
12446
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12435
12447
|
};
|
|
12436
|
-
var templateObject_1$
|
|
12448
|
+
var templateObject_1$k;
|
|
12437
12449
|
|
|
12438
12450
|
var useOnClickOutside = function (ref, handler) {
|
|
12439
12451
|
React$2.useEffect(function () {
|
|
@@ -12519,7 +12531,7 @@ var reducer = function (state, action) {
|
|
|
12519
12531
|
}
|
|
12520
12532
|
}
|
|
12521
12533
|
};
|
|
12522
|
-
var Container$
|
|
12534
|
+
var Container$b = newStyled.div({
|
|
12523
12535
|
position: 'relative',
|
|
12524
12536
|
display: 'flex',
|
|
12525
12537
|
});
|
|
@@ -12555,7 +12567,7 @@ var SearchBar = function (_a) {
|
|
|
12555
12567
|
onClose();
|
|
12556
12568
|
}
|
|
12557
12569
|
};
|
|
12558
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
12570
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$b, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
|
|
12559
12571
|
if (e.key === 'Enter') {
|
|
12560
12572
|
e.preventDefault();
|
|
12561
12573
|
e.stopPropagation();
|
|
@@ -12829,36 +12841,36 @@ function useSwipeable(options) {
|
|
|
12829
12841
|
return handlers;
|
|
12830
12842
|
}
|
|
12831
12843
|
|
|
12832
|
-
var Container$
|
|
12833
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12834
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12844
|
+
var Container$a = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])));
|
|
12845
|
+
var TopTagContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12846
|
+
var BottomTagContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12835
12847
|
var ImageProductWithTags = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12836
12848
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12837
|
-
return (jsxRuntime.jsxs(Container$
|
|
12849
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: topTag }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
12838
12850
|
});
|
|
12839
|
-
var templateObject_1$
|
|
12851
|
+
var templateObject_1$j, templateObject_2$a, templateObject_3$a;
|
|
12840
12852
|
|
|
12841
|
-
var Button = newStyled.button(templateObject_1$
|
|
12853
|
+
var Button = newStyled.button(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
12842
12854
|
var ArrowButton = function (_a) {
|
|
12843
12855
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12844
12856
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12845
12857
|
};
|
|
12846
|
-
var templateObject_1$
|
|
12858
|
+
var templateObject_1$i;
|
|
12847
12859
|
|
|
12848
|
-
var Container$
|
|
12860
|
+
var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
12849
12861
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12850
12862
|
var SlideDots = function (_a) {
|
|
12851
12863
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12852
12864
|
var theme = useTheme();
|
|
12853
|
-
return (jsxRuntime.jsx(Container$
|
|
12865
|
+
return (jsxRuntime.jsx(Container$9, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12854
12866
|
? theme.colors.shades.white.color
|
|
12855
12867
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12856
12868
|
};
|
|
12857
|
-
var templateObject_1$
|
|
12869
|
+
var templateObject_1$h;
|
|
12858
12870
|
|
|
12859
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12860
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
12861
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
12871
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12872
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12873
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12862
12874
|
var SlideNavigation = function (_a) {
|
|
12863
12875
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12864
12876
|
var theme = useTheme();
|
|
@@ -12870,9 +12882,9 @@ var SlideNavigation = function (_a) {
|
|
|
12870
12882
|
onNavigate(selectedIndex + 1);
|
|
12871
12883
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12872
12884
|
};
|
|
12873
|
-
var templateObject_1$
|
|
12885
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$9;
|
|
12874
12886
|
|
|
12875
|
-
var Container$
|
|
12887
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
12876
12888
|
var ProductGalleryMobile = function (_a) {
|
|
12877
12889
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12878
12890
|
var _b = React$2.useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12894,9 +12906,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12894
12906
|
React$2.useEffect(function () {
|
|
12895
12907
|
setSelectedImage(images[index]);
|
|
12896
12908
|
}, [index, images]);
|
|
12897
|
-
return (jsxRuntime.jsxs(Container$
|
|
12909
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12898
12910
|
};
|
|
12899
|
-
var templateObject_1$
|
|
12911
|
+
var templateObject_1$f;
|
|
12900
12912
|
|
|
12901
12913
|
var Portal = function (_a) {
|
|
12902
12914
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13029,14 +13041,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13029
13041
|
var visibleStyle = function (_a) {
|
|
13030
13042
|
var opened = _a.opened;
|
|
13031
13043
|
return opened
|
|
13032
|
-
? css(templateObject_1$
|
|
13044
|
+
? css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13033
13045
|
};
|
|
13034
13046
|
var transformStyle = function (_a) {
|
|
13035
13047
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13036
13048
|
return opened
|
|
13037
|
-
? css(templateObject_3$
|
|
13049
|
+
? css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13038
13050
|
};
|
|
13039
|
-
var Container$
|
|
13051
|
+
var Container$7 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13040
13052
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13041
13053
|
}), visibleStyle, transformStyle);
|
|
13042
13054
|
var Overlay = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -13049,7 +13061,7 @@ var Modal = function (_a) {
|
|
|
13049
13061
|
}
|
|
13050
13062
|
close();
|
|
13051
13063
|
};
|
|
13052
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13064
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$7, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13053
13065
|
};
|
|
13054
13066
|
var modalEvent = function (id, detail) {
|
|
13055
13067
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13077,39 +13089,39 @@ var useModal = function (id) {
|
|
|
13077
13089
|
close: close,
|
|
13078
13090
|
}); }, [close, open, opened]);
|
|
13079
13091
|
};
|
|
13080
|
-
var templateObject_1$
|
|
13092
|
+
var templateObject_1$e, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
13081
13093
|
|
|
13082
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13094
|
+
var Text$2 = newStyled.span(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13083
13095
|
var Title$1 = function (_a) {
|
|
13084
13096
|
var title = _a.title;
|
|
13085
13097
|
var theme = useTheme();
|
|
13086
13098
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13087
13099
|
};
|
|
13088
|
-
var templateObject_1$
|
|
13100
|
+
var templateObject_1$d;
|
|
13089
13101
|
|
|
13090
|
-
var P = newStyled.p(templateObject_1$
|
|
13102
|
+
var P = newStyled.p(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13091
13103
|
var Promo = function (_a) {
|
|
13092
13104
|
var text = _a.text;
|
|
13093
13105
|
var theme = useTheme();
|
|
13094
13106
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13095
13107
|
};
|
|
13096
|
-
var templateObject_1$
|
|
13108
|
+
var templateObject_1$c;
|
|
13097
13109
|
|
|
13098
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13110
|
+
var Text$1 = newStyled.span(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13099
13111
|
var Description = function (_a) {
|
|
13100
13112
|
var text = _a.text;
|
|
13101
13113
|
var theme = useTheme();
|
|
13102
13114
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13103
13115
|
};
|
|
13104
|
-
var templateObject_1$
|
|
13116
|
+
var templateObject_1$b;
|
|
13105
13117
|
|
|
13106
|
-
var Container$
|
|
13118
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13107
13119
|
var CloseButton = function (_a) {
|
|
13108
13120
|
var onClick = _a.onClick, size = _a.size;
|
|
13109
13121
|
var theme = useTheme();
|
|
13110
|
-
return (jsxRuntime.jsx(Container$
|
|
13122
|
+
return (jsxRuntime.jsx(Container$6, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13111
13123
|
};
|
|
13112
|
-
var templateObject_1$
|
|
13124
|
+
var templateObject_1$a;
|
|
13113
13125
|
|
|
13114
13126
|
var CartProductItem = {
|
|
13115
13127
|
Title: Title$1,
|
|
@@ -13119,10 +13131,10 @@ var CartProductItem = {
|
|
|
13119
13131
|
CloseButton: CloseButton,
|
|
13120
13132
|
};
|
|
13121
13133
|
|
|
13122
|
-
var Container$
|
|
13123
|
-
var Item = newStyled.span(templateObject_2$
|
|
13124
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13125
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13134
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13135
|
+
var Item = newStyled.span(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
13136
|
+
var Number$1 = newStyled(Item)(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
13137
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
13126
13138
|
var QuantityPicker = function (_a) {
|
|
13127
13139
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
13128
13140
|
var theme = useTheme();
|
|
@@ -13145,9 +13157,9 @@ var QuantityPicker = function (_a) {
|
|
|
13145
13157
|
return clamp(value);
|
|
13146
13158
|
});
|
|
13147
13159
|
}, [value, clamp]);
|
|
13148
|
-
return (jsxRuntime.jsxs(Container$
|
|
13160
|
+
return (jsxRuntime.jsxs(Container$5, __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({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13149
13161
|
};
|
|
13150
|
-
var templateObject_1$
|
|
13162
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7, templateObject_4$5;
|
|
13151
13163
|
|
|
13152
13164
|
var htmlReactParser = {exports: {}};
|
|
13153
13165
|
|
|
@@ -16928,17 +16940,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16928
16940
|
HTMLReactParser$1.attributesToProps;
|
|
16929
16941
|
HTMLReactParser$1.Element;
|
|
16930
16942
|
|
|
16931
|
-
var Container$
|
|
16932
|
-
var Card = newStyled.div(templateObject_2$
|
|
16933
|
-
var Tag = newStyled.div(templateObject_3$
|
|
16934
|
-
var Label = newStyled.div(templateObject_4$
|
|
16943
|
+
var Container$4 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
16944
|
+
var Card = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
16945
|
+
var Tag = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
16946
|
+
var Label = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
16935
16947
|
var Check = newStyled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
16936
16948
|
var IconContainer = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
16937
16949
|
var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
16938
16950
|
var DiscountContainer = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
16939
16951
|
var PackSelector = function (_a) {
|
|
16940
16952
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16941
|
-
return (jsxRuntime.jsx(Container$
|
|
16953
|
+
return (jsxRuntime.jsx(Container$4, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16942
16954
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16943
16955
|
}) }), void 0));
|
|
16944
16956
|
};
|
|
@@ -16955,30 +16967,30 @@ var PackCard = function (_a) {
|
|
|
16955
16967
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16956
16968
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16957
16969
|
};
|
|
16958
|
-
var templateObject_1$
|
|
16970
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$6, templateObject_4$4, templateObject_5$2, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
16959
16971
|
|
|
16960
|
-
var Title = newStyled.div(templateObject_1$
|
|
16961
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
16962
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
16972
|
+
var Title = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
16973
|
+
var H2 = newStyled.h2(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
16974
|
+
var ArrowContainer = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
16963
16975
|
var Accordion = function (_a) {
|
|
16964
16976
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
16965
16977
|
var theme = useTheme();
|
|
16966
16978
|
var _c = React__default["default"].useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
16967
16979
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxRuntime.jsxs(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
16968
16980
|
};
|
|
16969
|
-
var templateObject_1$
|
|
16981
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$5;
|
|
16970
16982
|
|
|
16971
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
16972
|
-
var Header = newStyled.div(templateObject_2$
|
|
16973
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
16974
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
16983
|
+
var SectionContent = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 1.125rem;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
16984
|
+
var Header = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
16985
|
+
var MobileHeader = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
16986
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
16975
16987
|
var H4 = newStyled.h4(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
16976
16988
|
var FilterLink = newStyled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
16977
16989
|
var OptionContainer = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
16978
16990
|
var ClearAll = newStyled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
16979
16991
|
var MobileFooter = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
16980
16992
|
var MobileClearContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
16981
|
-
var templateObject_1$
|
|
16993
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
16982
16994
|
|
|
16983
16995
|
var Filters = function (_a) {
|
|
16984
16996
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17065,20 +17077,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17065
17077
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
17066
17078
|
};
|
|
17067
17079
|
|
|
17068
|
-
var Container$
|
|
17069
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17070
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17071
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17080
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17081
|
+
var BackArrow = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17082
|
+
var BoldSpan = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17083
|
+
var NormalSpan = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
17072
17084
|
var SearchNavigationParents = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17073
17085
|
var SearchNavigation = function (_a) {
|
|
17074
17086
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17075
|
-
return (jsxRuntime.jsxs(Container$
|
|
17087
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17076
17088
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17077
17089
|
}) }, void 0)] }, void 0));
|
|
17078
17090
|
};
|
|
17079
|
-
var templateObject_1$
|
|
17091
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5;
|
|
17080
17092
|
|
|
17081
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17093
|
+
var TabContainer = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17082
17094
|
var titleSize = _a.titleSize;
|
|
17083
17095
|
return titleSize;
|
|
17084
17096
|
}, function (_a) {
|
|
@@ -17095,15 +17107,15 @@ var Tab = function (_a) {
|
|
|
17095
17107
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17096
17108
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17097
17109
|
};
|
|
17098
|
-
var templateObject_1$
|
|
17110
|
+
var templateObject_1$4;
|
|
17099
17111
|
|
|
17100
|
-
var Container$
|
|
17101
|
-
var TabList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17112
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17113
|
+
var TabList = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17102
17114
|
var backgroundColor = _a.backgroundColor;
|
|
17103
17115
|
return backgroundColor;
|
|
17104
17116
|
});
|
|
17105
|
-
var TabContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17106
|
-
var TabSeparator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17117
|
+
var TabContent = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17118
|
+
var TabSeparator = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17107
17119
|
var Tabs = function (_a) {
|
|
17108
17120
|
var _b;
|
|
17109
17121
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17112,11 +17124,11 @@ var Tabs = function (_a) {
|
|
|
17112
17124
|
return null;
|
|
17113
17125
|
}
|
|
17114
17126
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17115
|
-
return (jsxRuntime.jsxs(Container$
|
|
17127
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17116
17128
|
};
|
|
17117
|
-
var templateObject_1$
|
|
17129
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$1;
|
|
17118
17130
|
|
|
17119
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: auto;\n text-align: center;\n"], ["\n height: auto;\n text-align: center;\n"])));
|
|
17131
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n height: auto;\n text-align: center;\n"], ["\n height: auto;\n text-align: center;\n"])));
|
|
17120
17132
|
var IconWrapper = newStyled.div(function (props) { return ({
|
|
17121
17133
|
borderRadius: '500px',
|
|
17122
17134
|
width: '120px',
|
|
@@ -17141,14 +17153,69 @@ var IconsWithTitle = function (_a) {
|
|
|
17141
17153
|
console.error('Icon', iconName, 'not found');
|
|
17142
17154
|
return null;
|
|
17143
17155
|
}
|
|
17144
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", style: {
|
|
17156
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", style: {
|
|
17145
17157
|
fontSize: '14px',
|
|
17146
17158
|
textTransform: 'uppercase',
|
|
17147
17159
|
textAlign: 'center',
|
|
17148
17160
|
lineHeight: '16px',
|
|
17149
17161
|
} }, { children: iconTitle }), void 0)] }, void 0) }, void 0));
|
|
17150
17162
|
};
|
|
17151
|
-
var templateObject_1;
|
|
17163
|
+
var templateObject_1$2;
|
|
17164
|
+
|
|
17165
|
+
var ImageWrapper = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17166
|
+
var VideoOverlay = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17167
|
+
var FullscreenVideo = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17168
|
+
var ImageVideo = function (_a) {
|
|
17169
|
+
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17170
|
+
var video = React$2.useRef(null);
|
|
17171
|
+
var _b = React$2.useState(false), opened = _b[0], setOpened = _b[1];
|
|
17172
|
+
var handleOnClick = function () {
|
|
17173
|
+
setOpened(true);
|
|
17174
|
+
};
|
|
17175
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", style: {
|
|
17176
|
+
position: 'absolute',
|
|
17177
|
+
top: '10px',
|
|
17178
|
+
right: '10px',
|
|
17179
|
+
zIndex: 99,
|
|
17180
|
+
cursor: 'pointer',
|
|
17181
|
+
}, onClick: function () { return setOpened(false); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: "#292929" }, void 0) }), void 0), jsxRuntime.jsx("iframe", { ref: video, title: "shapermint_frame_vide", width: "100%", height: "100%", src: isVideo === null || isVideo === void 0 ? void 0 : isVideo.videoLink, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, style: {
|
|
17182
|
+
position: 'absolute',
|
|
17183
|
+
width: '100%',
|
|
17184
|
+
height: '100%',
|
|
17185
|
+
} }, void 0)] }, void 0))] }, void 0));
|
|
17186
|
+
};
|
|
17187
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
17188
|
+
|
|
17189
|
+
var ContainerDesktop = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17190
|
+
var ContainerMobile = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 0;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 0;\n }\n"])));
|
|
17191
|
+
var Container = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17192
|
+
var TextContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17193
|
+
var TextWithImage = function (_a) {
|
|
17194
|
+
var _b, _c, _d, _e;
|
|
17195
|
+
var title = _a.title, text = _a.text, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, props = __rest(_a, ["title", "text", "buttomText", "backgroundColor", "imageLeftSide"]);
|
|
17196
|
+
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17197
|
+
var ImageTitle = function () { return (jsxs(Fragment, { children: [!isMobile && (jsx(Text$6, __assign$1({ variant: "heading2", weight: "bold", style: {
|
|
17198
|
+
color: '#000000',
|
|
17199
|
+
textAlign: 'center',
|
|
17200
|
+
} }, { children: title }), void 0)), isMobile && (jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: {
|
|
17201
|
+
color: '#000000',
|
|
17202
|
+
textAlign: 'center',
|
|
17203
|
+
} }, { children: title }), void 0))] }, void 0)); };
|
|
17204
|
+
var buttonAction = function () {
|
|
17205
|
+
// @ts-ignore
|
|
17206
|
+
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17207
|
+
};
|
|
17208
|
+
return (jsxs(Container, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17209
|
+
backgroundColor: props.btnBGColor,
|
|
17210
|
+
color: '#ffffff',
|
|
17211
|
+
border: props.btnBGColor,
|
|
17212
|
+
transition: '0.3s linear',
|
|
17213
|
+
'&:hover': {
|
|
17214
|
+
backgroundColor: props.btnHoverBGColor,
|
|
17215
|
+
},
|
|
17216
|
+
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17217
|
+
};
|
|
17218
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17152
17219
|
|
|
17153
17220
|
exports.Accordion = Accordion$1;
|
|
17154
17221
|
exports.AmazonButton = AmazonButton;
|
|
@@ -17214,6 +17281,7 @@ exports.Tab = Tab;
|
|
|
17214
17281
|
exports.Tabs = Tabs;
|
|
17215
17282
|
exports.Text = Text$6;
|
|
17216
17283
|
exports.TextButton = TextButton;
|
|
17284
|
+
exports.TextWithImage = TextWithImage;
|
|
17217
17285
|
exports.ThemeProvider = ThemeProvider;
|
|
17218
17286
|
exports.ThemeVariables = ThemeVariables;
|
|
17219
17287
|
exports.Timer = Timer;
|