@trafilea/afrodita-components 5.0.0-beta.74 → 5.0.0-beta.77
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.css +1 -1
- package/build/index.d.ts +50 -5
- package/build/index.esm.css +1 -1
- package/build/index.esm.js +383 -311
- package/build/index.esm.js.map +1 -1
- package/build/index.js +383 -310
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -71,6 +71,11 @@ var Frown = function (_a) {
|
|
|
71
71
|
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 68, viewBoxY: 68, title: title, fill: "none" }, { children: [jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", fill: "".concat(fill, "b6") }, void 0), jsx$1("path", { d: "M64 34.0296C64.0064 29.5175 62.9753 25.0627 60.9841 21C59.9702 30.9185 58.3731 39.7073 49.0635 48.6699C39.8271 57.5622 25.9923 57.4947 9 50.0686C14.4495 58.1257 23.0411 64 33.6008 64C41.6631 64 49.3953 60.8424 55.0963 55.2219C60.7972 49.6013 64 41.9783 64 34.0296Z", fill: fill }, void 0), jsx$1("path", { d: "M34 64C50.5685 64 64 50.5685 64 34C64 17.4315 50.5685 4 34 4C17.4315 4 4 17.4315 4 34C4 50.5685 17.4315 64 34 64Z", stroke: "#292929", strokeWidth: "2", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M44.1292 48.8737C44.1292 48.8737 41.7372 42.8737 34.1292 42.8737C26.5212 42.8737 24.1292 48.8737 24.1292 48.8737", stroke: "#292929", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0), jsx$1("path", { d: "M24.6292 32.1304C24.6292 33.5111 23.5099 34.6304 22.1292 34.6304C20.7485 34.6304 19.6292 33.5111 19.6292 32.1304C19.6292 30.7497 20.7485 29.6304 22.1292 29.6304C23.5099 29.6304 24.6292 30.7497 24.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M48.6292 32.1304C48.6292 33.5111 47.5099 34.6304 46.1292 34.6304C44.7485 34.6304 43.6292 33.5111 43.6292 32.1304C43.6292 30.7497 44.7485 29.6304 46.1292 29.6304C47.5099 29.6304 48.6292 30.7497 48.6292 32.1304Z", fill: "#292929", stroke: "#292929" }, void 0), jsx$1("path", { d: "M14.7553 23.6181C16.5344 19.9142 19.3229 16.7876 22.8 14.5982C26.2771 12.4087 30.3017 11.2452 34.4107 11.2415", stroke: "white", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
+
var Smiling = function (_a) {
|
|
75
|
+
var height = _a.height, width = _a.width, fill = _a.fill, title = _a.title;
|
|
76
|
+
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 45, viewBoxY: 45, title: title }, { children: [jsxs$1("g", { children: [jsx$1("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), jsx$1("circle", { cx: "12.5127", cy: "18.5227", r: "2.45545", fill: fill }, void 0), jsx$1("circle", { cx: "28.9282", cy: "18.5227", r: "2.45545", fill: fill }, void 0), jsx$1("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), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0_13_1543" }, { children: jsx$1("rect", { width: "40.678", height: "40.6781", fill: "white", transform: "translate(0.390137 0.621948)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
77
|
+
};
|
|
78
|
+
|
|
74
79
|
var BulletOne = function (_a) {
|
|
75
80
|
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
76
81
|
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: title, fill: "none" }, { children: [jsx$1("circle", { cx: "12", cy: "12", r: "10.25", stroke: fill, strokeWidth: "1.5" }, void 0), jsx$1("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));
|
|
@@ -90,6 +95,7 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
90
95
|
__proto__: null,
|
|
91
96
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
92
97
|
Frown: Frown,
|
|
98
|
+
Smiling: Smiling,
|
|
93
99
|
BulletOne: BulletOne,
|
|
94
100
|
BulletTwo: BulletTwo,
|
|
95
101
|
BulletThree: BulletThree
|
|
@@ -518,12 +524,18 @@ var Mail = function (_a) {
|
|
|
518
524
|
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: "message icon" }, { children: [jsx$1("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), jsxs$1("g", { children: [jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("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));
|
|
519
525
|
};
|
|
520
526
|
|
|
527
|
+
var Community$1 = function (_a) {
|
|
528
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
529
|
+
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 44, viewBoxY: 35, title: "Messenger" }, { children: [jsx$1("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), jsx$1("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));
|
|
530
|
+
};
|
|
531
|
+
|
|
521
532
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
522
533
|
__proto__: null,
|
|
523
534
|
QuestionCircle: QuestionCircle,
|
|
524
535
|
Messenger: Messenger,
|
|
525
536
|
Comment: Comment$1,
|
|
526
|
-
Mail: Mail
|
|
537
|
+
Mail: Mail,
|
|
538
|
+
Community: Community$1
|
|
527
539
|
});
|
|
528
540
|
|
|
529
541
|
var AppleStore = function (_a) {
|
|
@@ -3560,7 +3572,7 @@ var InputValidationType;
|
|
|
3560
3572
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3561
3573
|
})(InputValidationType || (InputValidationType = {}));
|
|
3562
3574
|
|
|
3563
|
-
var Section = newStyled.div(templateObject_1$
|
|
3575
|
+
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) {
|
|
3564
3576
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3565
3577
|
});
|
|
3566
3578
|
var CardHeader = function (_a) {
|
|
@@ -3571,14 +3583,14 @@ var CardFooter = function (_a) {
|
|
|
3571
3583
|
var children = _a.children;
|
|
3572
3584
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3573
3585
|
};
|
|
3574
|
-
var templateObject_1$
|
|
3586
|
+
var templateObject_1$1e;
|
|
3575
3587
|
|
|
3576
|
-
var Body = newStyled.div(templateObject_1$
|
|
3588
|
+
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"])));
|
|
3577
3589
|
var CardBody = function (_a) {
|
|
3578
3590
|
var children = _a.children;
|
|
3579
3591
|
return jsx$1(Body, { children: children }, void 0);
|
|
3580
3592
|
};
|
|
3581
|
-
var templateObject_1$
|
|
3593
|
+
var templateObject_1$1d;
|
|
3582
3594
|
|
|
3583
3595
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3584
3596
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3688,7 +3700,7 @@ var transformFonts = function (fonts) {
|
|
|
3688
3700
|
return inline("@font-face { ".concat(css.join(';\n'), "; }"));
|
|
3689
3701
|
})
|
|
3690
3702
|
.join('\n');
|
|
3691
|
-
return inline("\n ".concat(css, "\n body {\n font-family: \"").concat(fonts.config[0].family, "\";\n }\n "));
|
|
3703
|
+
return inline("\n ".concat(css, "\n body, input {\n font-family: \"").concat(fonts.config[0].family, "\";\n }\n "));
|
|
3692
3704
|
};
|
|
3693
3705
|
var inline = function (text) {
|
|
3694
3706
|
return text.trim().replace(/\s+/g, ' ').replace(/\n/g, '');
|
|
@@ -3723,7 +3735,7 @@ var AssetsProvider = function (_a) {
|
|
|
3723
3735
|
};
|
|
3724
3736
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3725
3737
|
|
|
3726
|
-
var Container$
|
|
3738
|
+
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) {
|
|
3727
3739
|
var flex = _a.flex;
|
|
3728
3740
|
return flex &&
|
|
3729
3741
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3736,14 +3748,14 @@ var Container$J = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
3736
3748
|
var Card$1 = function (_a) {
|
|
3737
3749
|
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;
|
|
3738
3750
|
var theme = useTheme();
|
|
3739
|
-
return (jsx$1(Container$
|
|
3751
|
+
return (jsx$1(Container$K, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3740
3752
|
};
|
|
3741
3753
|
var Card$2 = Object.assign(Card$1, {
|
|
3742
3754
|
Header: CardHeader,
|
|
3743
3755
|
Footer: CardFooter,
|
|
3744
3756
|
Body: CardBody,
|
|
3745
3757
|
});
|
|
3746
|
-
var templateObject_1$
|
|
3758
|
+
var templateObject_1$1c;
|
|
3747
3759
|
|
|
3748
3760
|
var Fragment = Fragment$1;
|
|
3749
3761
|
function jsx(type, props, key) {
|
|
@@ -3885,7 +3897,7 @@ function BaseSelectOption(_a) {
|
|
|
3885
3897
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3886
3898
|
}
|
|
3887
3899
|
|
|
3888
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3900
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3889
3901
|
function BaseSelect(_a) {
|
|
3890
3902
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3891
3903
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3895,7 +3907,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3895
3907
|
Options: BaseSelectOptions,
|
|
3896
3908
|
Option: BaseSelectOption,
|
|
3897
3909
|
});
|
|
3898
|
-
var templateObject_1$
|
|
3910
|
+
var templateObject_1$1b;
|
|
3899
3911
|
|
|
3900
3912
|
var CustomButton = newStyled.button(function (_a) {
|
|
3901
3913
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4108,12 +4120,12 @@ var CustomCheckboxStyles = {
|
|
|
4108
4120
|
},
|
|
4109
4121
|
};
|
|
4110
4122
|
|
|
4111
|
-
var Container$
|
|
4123
|
+
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"])));
|
|
4112
4124
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4113
4125
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4114
4126
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
4115
4127
|
]; });
|
|
4116
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4128
|
+
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) {
|
|
4117
4129
|
var disabled = _a.disabled;
|
|
4118
4130
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4119
4131
|
});
|
|
@@ -4142,9 +4154,9 @@ var Checkbox = function (_a) {
|
|
|
4142
4154
|
useEffect(function () {
|
|
4143
4155
|
mounted.current = true;
|
|
4144
4156
|
}, []);
|
|
4145
|
-
return (jsxs$1(Container$
|
|
4157
|
+
return (jsxs$1(Container$J, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4146
4158
|
};
|
|
4147
|
-
var templateObject_1$
|
|
4159
|
+
var templateObject_1$1a, templateObject_2$L;
|
|
4148
4160
|
|
|
4149
4161
|
var CustomOption = newStyled.li(function (_a) {
|
|
4150
4162
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4281,10 +4293,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4281
4293
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4282
4294
|
// `variants` styles that are consistent through all themes.
|
|
4283
4295
|
var TAGS = {
|
|
4284
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4285
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4286
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4287
|
-
display1: newStyled.h1(templateObject_4$
|
|
4296
|
+
hero1: newStyled.h1(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject([""], [""]))),
|
|
4297
|
+
hero2: newStyled.h2(templateObject_2$K || (templateObject_2$K = __makeTemplateObject([""], [""]))),
|
|
4298
|
+
hero3: newStyled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject([""], [""]))),
|
|
4299
|
+
display1: newStyled.h1(templateObject_4$o || (templateObject_4$o = __makeTemplateObject([""], [""]))),
|
|
4288
4300
|
display2: newStyled.h2(templateObject_5$e || (templateObject_5$e = __makeTemplateObject([""], [""]))),
|
|
4289
4301
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4290
4302
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4404,9 +4416,9 @@ var DEFAULTS = {
|
|
|
4404
4416
|
size: 'regular',
|
|
4405
4417
|
},
|
|
4406
4418
|
};
|
|
4407
|
-
var templateObject_1$
|
|
4419
|
+
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;
|
|
4408
4420
|
|
|
4409
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4421
|
+
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) {
|
|
4410
4422
|
var inline = _a.inline;
|
|
4411
4423
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4412
4424
|
});
|
|
@@ -4424,7 +4436,7 @@ var SizeSelector = function (_a) {
|
|
|
4424
4436
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4425
4437
|
}) }), void 0)] }), void 0));
|
|
4426
4438
|
};
|
|
4427
|
-
var templateObject_1$
|
|
4439
|
+
var templateObject_1$18;
|
|
4428
4440
|
|
|
4429
4441
|
var getStylesBySize$7 = function (size) {
|
|
4430
4442
|
switch (size) {
|
|
@@ -4451,7 +4463,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4451
4463
|
} });
|
|
4452
4464
|
};
|
|
4453
4465
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4454
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4466
|
+
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));
|
|
4455
4467
|
};
|
|
4456
4468
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4457
4469
|
if (disabled)
|
|
@@ -4467,16 +4479,16 @@ var TextButton = function (_a) {
|
|
|
4467
4479
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4468
4480
|
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));
|
|
4469
4481
|
};
|
|
4470
|
-
var templateObject_1$
|
|
4482
|
+
var templateObject_1$17;
|
|
4471
4483
|
|
|
4472
|
-
var Container$
|
|
4473
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4474
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4484
|
+
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"])));
|
|
4485
|
+
var P$3 = newStyled.p(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4486
|
+
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"])));
|
|
4475
4487
|
var SizeFitGuide = function (_a) {
|
|
4476
4488
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4477
|
-
return (jsxs$1(Container$
|
|
4489
|
+
return (jsxs$1(Container$I, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4478
4490
|
};
|
|
4479
|
-
var templateObject_1$
|
|
4491
|
+
var templateObject_1$16, templateObject_2$J, templateObject_3$w;
|
|
4480
4492
|
|
|
4481
4493
|
var getStylesBySize$6 = function (size) {
|
|
4482
4494
|
switch (size) {
|
|
@@ -4506,7 +4518,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4506
4518
|
};
|
|
4507
4519
|
}
|
|
4508
4520
|
};
|
|
4509
|
-
var Container$
|
|
4521
|
+
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) {
|
|
4510
4522
|
var backgroundColor = _a.backgroundColor;
|
|
4511
4523
|
return backgroundColor;
|
|
4512
4524
|
}, function (_a) {
|
|
@@ -4528,7 +4540,7 @@ var Container$G = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __
|
|
|
4528
4540
|
var size = _a.size;
|
|
4529
4541
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4530
4542
|
});
|
|
4531
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4543
|
+
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) {
|
|
4532
4544
|
var textColor = _a.textColor;
|
|
4533
4545
|
return textColor;
|
|
4534
4546
|
}, function (_a) {
|
|
@@ -4543,9 +4555,9 @@ var H3$2 = newStyled.h3(templateObject_2$G || (templateObject_2$G = __makeTempla
|
|
|
4543
4555
|
var DiscountTag = function (_a) {
|
|
4544
4556
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
4545
4557
|
var theme = useTheme();
|
|
4546
|
-
return (jsx$1(Container$
|
|
4558
|
+
return (jsx$1(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: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4547
4559
|
};
|
|
4548
|
-
var templateObject_1$
|
|
4560
|
+
var templateObject_1$15, templateObject_2$I;
|
|
4549
4561
|
|
|
4550
4562
|
var getStylesBySize$5 = function (size) {
|
|
4551
4563
|
switch (size) {
|
|
@@ -4567,7 +4579,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4567
4579
|
};
|
|
4568
4580
|
case ComponentSize.Small:
|
|
4569
4581
|
return {
|
|
4570
|
-
fontSize: '
|
|
4582
|
+
fontSize: '16px',
|
|
4571
4583
|
finalPricefontSize: '24px',
|
|
4572
4584
|
finalPricefontSizeSmall: '12px',
|
|
4573
4585
|
margin: '0 0 0 0.5rem',
|
|
@@ -4575,8 +4587,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4575
4587
|
};
|
|
4576
4588
|
}
|
|
4577
4589
|
};
|
|
4578
|
-
var Container$
|
|
4579
|
-
var Price = newStyled.p(templateObject_2$
|
|
4590
|
+
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"])));
|
|
4591
|
+
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) {
|
|
4580
4592
|
var weight = _a.weight;
|
|
4581
4593
|
return (weight ? weight : '400');
|
|
4582
4594
|
}, function (_a) {
|
|
@@ -4605,12 +4617,12 @@ var Price = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTempla
|
|
|
4605
4617
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
4606
4618
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
4607
4619
|
});
|
|
4608
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
4620
|
+
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) {
|
|
4609
4621
|
var _b;
|
|
4610
4622
|
var size = _a.size;
|
|
4611
4623
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4612
4624
|
});
|
|
4613
|
-
var FinalPriceContainer = newStyled.div(templateObject_4$
|
|
4625
|
+
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"])));
|
|
4614
4626
|
var FinalPriceStyledContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4615
4627
|
function getTestId() {
|
|
4616
4628
|
var args = [];
|
|
@@ -4632,9 +4644,9 @@ var PriceLabel = function (_a) {
|
|
|
4632
4644
|
weight: 700,
|
|
4633
4645
|
};
|
|
4634
4646
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)); };
|
|
4635
|
-
return (jsxs$1(Container$
|
|
4647
|
+
return (jsxs$1(Container$G, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxs$1(FinalPriceContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'price') }, priceCommonProps, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4636
4648
|
};
|
|
4637
|
-
var templateObject_1$
|
|
4649
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$v, templateObject_4$n, templateObject_5$d;
|
|
4638
4650
|
|
|
4639
4651
|
var OneColorSelector = function (_a) {
|
|
4640
4652
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4675,10 +4687,10 @@ var OutOfStock = function (_a) {
|
|
|
4675
4687
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4676
4688
|
};
|
|
4677
4689
|
|
|
4678
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4679
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4680
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4681
|
-
var Span = newStyled.span(templateObject_4$
|
|
4690
|
+
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"])));
|
|
4691
|
+
newStyled(lt.Label)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4692
|
+
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"])));
|
|
4693
|
+
var Span = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4682
4694
|
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"])));
|
|
4683
4695
|
var Label$2 = function (_a) {
|
|
4684
4696
|
var label = _a.label, values = _a.values;
|
|
@@ -4697,20 +4709,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4697
4709
|
Option: Option,
|
|
4698
4710
|
OptionsContainer: OptionsContainer,
|
|
4699
4711
|
});
|
|
4700
|
-
var templateObject_1$
|
|
4712
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$u, templateObject_4$m, templateObject_5$c;
|
|
4701
4713
|
|
|
4702
|
-
var Container$
|
|
4714
|
+
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) {
|
|
4703
4715
|
var borderColor = _a.borderColor;
|
|
4704
4716
|
return borderColor;
|
|
4705
4717
|
});
|
|
4706
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
4718
|
+
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"])));
|
|
4707
4719
|
var PatternSelector = function (_a) {
|
|
4708
4720
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4709
4721
|
var theme = useTheme();
|
|
4710
4722
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4711
|
-
return (jsx$1(Container$
|
|
4723
|
+
return (jsx$1(Container$F, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4712
4724
|
};
|
|
4713
|
-
var templateObject_1$
|
|
4725
|
+
var templateObject_1$12, templateObject_2$F;
|
|
4714
4726
|
|
|
4715
4727
|
var renderOptions$1 = function (options) {
|
|
4716
4728
|
if (options.length === 0) {
|
|
@@ -4768,7 +4780,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4768
4780
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4769
4781
|
};
|
|
4770
4782
|
|
|
4771
|
-
var Image$2 = newStyled.img(templateObject_1
|
|
4783
|
+
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) {
|
|
4772
4784
|
var selected = _a.selected, theme = _a.theme;
|
|
4773
4785
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4774
4786
|
});
|
|
@@ -4777,7 +4789,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4777
4789
|
var theme = useTheme();
|
|
4778
4790
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4779
4791
|
};
|
|
4780
|
-
var templateObject_1
|
|
4792
|
+
var templateObject_1$11;
|
|
4781
4793
|
|
|
4782
4794
|
var Button$4 = newStyled.button(function () { return ({
|
|
4783
4795
|
background: 'transparent',
|
|
@@ -9020,14 +9032,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9020
9032
|
return Slider;
|
|
9021
9033
|
}(React__default.Component);
|
|
9022
9034
|
|
|
9023
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9035
|
+
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) {
|
|
9024
9036
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9025
9037
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9026
9038
|
}, function (_a) {
|
|
9027
9039
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9028
9040
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9029
9041
|
});
|
|
9030
|
-
var templateObject_1$
|
|
9042
|
+
var templateObject_1$10;
|
|
9031
9043
|
|
|
9032
9044
|
var getStylesBySize$4 = function (size) {
|
|
9033
9045
|
// rem units
|
|
@@ -9086,22 +9098,22 @@ var SliderNavigation = function (_a) {
|
|
|
9086
9098
|
} }, { 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));
|
|
9087
9099
|
};
|
|
9088
9100
|
|
|
9089
|
-
var horizontalStyles = css(templateObject_1
|
|
9090
|
-
var verticalStyles = css(templateObject_2$
|
|
9091
|
-
var Container$
|
|
9101
|
+
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"])));
|
|
9102
|
+
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"])));
|
|
9103
|
+
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) {
|
|
9092
9104
|
var position = _a.position;
|
|
9093
9105
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9094
9106
|
});
|
|
9095
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9107
|
+
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"])));
|
|
9096
9108
|
var ImagePreviewList = function (_a) {
|
|
9097
9109
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
9098
|
-
return (jsx$1(Container$
|
|
9110
|
+
return (jsx$1(Container$E, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9099
9111
|
arrowWidth: 0.75,
|
|
9100
9112
|
arrowHeight: 1.25,
|
|
9101
9113
|
arrowPadding: 1.625,
|
|
9102
9114
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
|
|
9103
9115
|
};
|
|
9104
|
-
var templateObject_1
|
|
9116
|
+
var templateObject_1$$, templateObject_2$E, templateObject_3$t, templateObject_4$l;
|
|
9105
9117
|
|
|
9106
9118
|
var propTypes = {exports: {}};
|
|
9107
9119
|
|
|
@@ -10687,19 +10699,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10687
10699
|
afterZoomOut: PropTypes.func
|
|
10688
10700
|
} : {};
|
|
10689
10701
|
|
|
10690
|
-
var Container$
|
|
10691
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
10692
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
10702
|
+
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"])));
|
|
10703
|
+
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"])));
|
|
10704
|
+
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"])));
|
|
10693
10705
|
var ImageProductWithTags$1 = function (_a) {
|
|
10694
10706
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10695
|
-
return (jsxs$1(Container$
|
|
10707
|
+
return (jsxs$1(Container$D, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
10696
10708
|
alt: image.alt,
|
|
10697
10709
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10698
10710
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, { children: topTag }, void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
10699
10711
|
};
|
|
10700
|
-
var templateObject_1$
|
|
10712
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$s;
|
|
10701
10713
|
|
|
10702
|
-
var Container$
|
|
10714
|
+
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"])));
|
|
10703
10715
|
var ProductGallery = function (_a) {
|
|
10704
10716
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10705
10717
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10707,11 +10719,11 @@ var ProductGallery = function (_a) {
|
|
|
10707
10719
|
useEffect(function () {
|
|
10708
10720
|
setSelectedImage(initialValue);
|
|
10709
10721
|
}, [initialValue]);
|
|
10710
|
-
return (jsxs$1(Container$
|
|
10722
|
+
return (jsxs$1(Container$C, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10711
10723
|
setSelectedImage(value);
|
|
10712
10724
|
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10713
10725
|
};
|
|
10714
|
-
var templateObject_1$
|
|
10726
|
+
var templateObject_1$Z;
|
|
10715
10727
|
|
|
10716
10728
|
/* base styles & size variants */
|
|
10717
10729
|
var StarStyles = {
|
|
@@ -10757,8 +10769,8 @@ var StarStyles = {
|
|
|
10757
10769
|
});
|
|
10758
10770
|
},
|
|
10759
10771
|
};
|
|
10760
|
-
var Container$
|
|
10761
|
-
var templateObject_1$
|
|
10772
|
+
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"])));
|
|
10773
|
+
var templateObject_1$Y;
|
|
10762
10774
|
|
|
10763
10775
|
var StarContainer = newStyled.div(function (_a) {
|
|
10764
10776
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10776,7 +10788,7 @@ var sizes = {
|
|
|
10776
10788
|
var StarList = function (_a) {
|
|
10777
10789
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
10778
10790
|
var theme = useTheme();
|
|
10779
|
-
return (jsx$1(Container$
|
|
10791
|
+
return (jsx$1(Container$B, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10780
10792
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
10781
10793
|
}) }, void 0));
|
|
10782
10794
|
};
|
|
@@ -10820,8 +10832,8 @@ var LabelStyles = {
|
|
|
10820
10832
|
});
|
|
10821
10833
|
},
|
|
10822
10834
|
};
|
|
10823
|
-
var Container$
|
|
10824
|
-
var templateObject_1$
|
|
10835
|
+
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"])));
|
|
10836
|
+
var templateObject_1$X;
|
|
10825
10837
|
|
|
10826
10838
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10827
10839
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10859,11 +10871,11 @@ var Rating = function (_a) {
|
|
|
10859
10871
|
href: reviewsContainerId,
|
|
10860
10872
|
}
|
|
10861
10873
|
: {};
|
|
10862
|
-
return (jsxs$1(Container$
|
|
10874
|
+
return (jsxs$1(Container$A, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
10863
10875
|
};
|
|
10864
10876
|
|
|
10865
|
-
var Container$
|
|
10866
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
10877
|
+
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"])));
|
|
10878
|
+
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; });
|
|
10867
10879
|
var textButtonStyles = function (theme) { return ({
|
|
10868
10880
|
border: 'none',
|
|
10869
10881
|
background: 'transparent',
|
|
@@ -10876,9 +10888,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10876
10888
|
var FitPredictor = function (_a) {
|
|
10877
10889
|
var onClick = _a.onClick;
|
|
10878
10890
|
var theme = useTheme();
|
|
10879
|
-
return (jsxs(Container$
|
|
10891
|
+
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));
|
|
10880
10892
|
};
|
|
10881
|
-
var templateObject_1$
|
|
10893
|
+
var templateObject_1$W, templateObject_2$C;
|
|
10882
10894
|
|
|
10883
10895
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10884
10896
|
var color = _a.color;
|
|
@@ -10892,7 +10904,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10892
10904
|
margin: '0.938rem 4.188rem',
|
|
10893
10905
|
});
|
|
10894
10906
|
});
|
|
10895
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10907
|
+
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) {
|
|
10896
10908
|
var backgroundColor = _a.backgroundColor;
|
|
10897
10909
|
return backgroundColor;
|
|
10898
10910
|
}, function (_a) {
|
|
@@ -10915,7 +10927,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10915
10927
|
position: 'absolute',
|
|
10916
10928
|
});
|
|
10917
10929
|
});
|
|
10918
|
-
var Container$
|
|
10930
|
+
var Container$y = newStyled.div(function (_a) {
|
|
10919
10931
|
var widthAuto = _a.widthAuto;
|
|
10920
10932
|
return ({
|
|
10921
10933
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10929,9 +10941,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10929
10941
|
var ProgressBar = function (_a) {
|
|
10930
10942
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10931
10943
|
var theme = useTheme();
|
|
10932
|
-
return (jsxs$1(Container$
|
|
10944
|
+
return (jsxs$1(Container$y, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
10933
10945
|
};
|
|
10934
|
-
var templateObject_1$
|
|
10946
|
+
var templateObject_1$V;
|
|
10935
10947
|
|
|
10936
10948
|
var getStylesBySize$3 = function (size) {
|
|
10937
10949
|
switch (size) {
|
|
@@ -10952,7 +10964,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
10952
10964
|
};
|
|
10953
10965
|
}
|
|
10954
10966
|
};
|
|
10955
|
-
var Container$
|
|
10967
|
+
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) {
|
|
10956
10968
|
var backgroundColor = _a.backgroundColor;
|
|
10957
10969
|
return backgroundColor;
|
|
10958
10970
|
}, function (_a) {
|
|
@@ -10980,9 +10992,9 @@ var Container$w = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
10980
10992
|
var IconButton = function (_a) {
|
|
10981
10993
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
10982
10994
|
var theme = useTheme();
|
|
10983
|
-
return (jsx$1(Container$
|
|
10995
|
+
return (jsx$1(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));
|
|
10984
10996
|
};
|
|
10985
|
-
var templateObject_1$
|
|
10997
|
+
var templateObject_1$U;
|
|
10986
10998
|
|
|
10987
10999
|
var TooltipArrow = function (_a) {
|
|
10988
11000
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11062,7 +11074,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11062
11074
|
}
|
|
11063
11075
|
};
|
|
11064
11076
|
|
|
11065
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11077
|
+
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) {
|
|
11066
11078
|
var position = _a.position;
|
|
11067
11079
|
return getWrapperFlexDirection(position);
|
|
11068
11080
|
});
|
|
@@ -11086,11 +11098,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11086
11098
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11087
11099
|
return actual === expected ? margin : '0';
|
|
11088
11100
|
};
|
|
11089
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11101
|
+
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) {
|
|
11090
11102
|
var borderColor = _a.borderColor;
|
|
11091
11103
|
return borderColor;
|
|
11092
11104
|
});
|
|
11093
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11105
|
+
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) {
|
|
11094
11106
|
var position = _a.position;
|
|
11095
11107
|
return getArrowRotation(position);
|
|
11096
11108
|
}, function (_a) {
|
|
@@ -11100,7 +11112,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$p || (templateObject_
|
|
|
11100
11112
|
var position = _a.position;
|
|
11101
11113
|
return getArrowContainerMargin(position);
|
|
11102
11114
|
});
|
|
11103
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
11115
|
+
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) {
|
|
11104
11116
|
var color = _a.color;
|
|
11105
11117
|
return color;
|
|
11106
11118
|
});
|
|
@@ -11110,7 +11122,7 @@ var Title$6 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
|
|
|
11110
11122
|
return color;
|
|
11111
11123
|
});
|
|
11112
11124
|
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"])));
|
|
11113
|
-
var templateObject_1$
|
|
11125
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$r, templateObject_4$k, templateObject_5$b, templateObject_6$7, templateObject_7$4;
|
|
11114
11126
|
|
|
11115
11127
|
var Tooltip = function (_a) {
|
|
11116
11128
|
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;
|
|
@@ -11262,9 +11274,9 @@ var ContainerStyles = {
|
|
|
11262
11274
|
},
|
|
11263
11275
|
};
|
|
11264
11276
|
|
|
11265
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11266
|
-
var Container$
|
|
11267
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11277
|
+
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"])));
|
|
11278
|
+
var Container$w = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11279
|
+
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) {
|
|
11268
11280
|
var disabled = _a.disabled;
|
|
11269
11281
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11270
11282
|
});
|
|
@@ -11279,9 +11291,9 @@ var RadioInput = function (_a) {
|
|
|
11279
11291
|
var value = event.currentTarget.value;
|
|
11280
11292
|
onChange({ value: value, label: label });
|
|
11281
11293
|
};
|
|
11282
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11294
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$w, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11283
11295
|
};
|
|
11284
|
-
var templateObject_1$
|
|
11296
|
+
var templateObject_1$S, templateObject_2$A;
|
|
11285
11297
|
|
|
11286
11298
|
var RadioGroupInput = function (_a) {
|
|
11287
11299
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11295,37 +11307,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11295
11307
|
}) }), void 0));
|
|
11296
11308
|
};
|
|
11297
11309
|
|
|
11298
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11299
|
-
var Container$
|
|
11310
|
+
var Wrapper$3 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n padding: 12px 58px;\n"], ["\n padding: 12px 58px;\n"])));
|
|
11311
|
+
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"])));
|
|
11300
11312
|
var Minimalistic = function (_a) {
|
|
11301
11313
|
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;
|
|
11302
11314
|
var theme = useTheme();
|
|
11303
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11315
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$v, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$v, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(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), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11304
11316
|
};
|
|
11305
|
-
var templateObject_1$
|
|
11317
|
+
var templateObject_1$R, templateObject_2$z;
|
|
11306
11318
|
|
|
11307
|
-
var Container$
|
|
11308
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11309
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11310
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11319
|
+
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"])));
|
|
11320
|
+
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; });
|
|
11321
|
+
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; });
|
|
11322
|
+
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"])));
|
|
11311
11323
|
var Simple = function (_a) {
|
|
11312
11324
|
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;
|
|
11313
11325
|
var theme = useTheme();
|
|
11314
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11326
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$u, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11315
11327
|
};
|
|
11316
|
-
var templateObject_1$
|
|
11328
|
+
var templateObject_1$Q, templateObject_2$y, templateObject_3$q, templateObject_4$j;
|
|
11317
11329
|
|
|
11318
11330
|
var Bundle = {
|
|
11319
11331
|
Minimalistic: Minimalistic,
|
|
11320
11332
|
Simple: Simple,
|
|
11321
11333
|
};
|
|
11322
11334
|
|
|
11323
|
-
var Container$
|
|
11335
|
+
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"])));
|
|
11324
11336
|
var Tag$1 = function (_a) {
|
|
11325
11337
|
var text = _a.text, className = _a.className;
|
|
11326
|
-
return jsx$1(Container$
|
|
11338
|
+
return jsx$1(Container$t, __assign$1({ className: className }, { children: text }), void 0);
|
|
11327
11339
|
};
|
|
11328
|
-
var templateObject_1$
|
|
11340
|
+
var templateObject_1$P;
|
|
11329
11341
|
|
|
11330
11342
|
var getStylesBySize$2 = function (size) {
|
|
11331
11343
|
switch (size) {
|
|
@@ -11428,11 +11440,11 @@ var Timer = function (_a) {
|
|
|
11428
11440
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11429
11441
|
};
|
|
11430
11442
|
|
|
11431
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11443
|
+
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) {
|
|
11432
11444
|
var color = _a.color;
|
|
11433
11445
|
return color;
|
|
11434
11446
|
});
|
|
11435
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11447
|
+
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) {
|
|
11436
11448
|
var color = _a.color;
|
|
11437
11449
|
return color;
|
|
11438
11450
|
});
|
|
@@ -11441,7 +11453,7 @@ var InputLabel = function (_a) {
|
|
|
11441
11453
|
var theme = useTheme();
|
|
11442
11454
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11443
11455
|
};
|
|
11444
|
-
var templateObject_1$
|
|
11456
|
+
var templateObject_1$O, templateObject_2$x;
|
|
11445
11457
|
|
|
11446
11458
|
/**
|
|
11447
11459
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11495,20 +11507,20 @@ var formatPrice = function (value, _a) {
|
|
|
11495
11507
|
}).format(valueToFormat);
|
|
11496
11508
|
};
|
|
11497
11509
|
|
|
11498
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11499
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
11510
|
+
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; });
|
|
11511
|
+
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"])));
|
|
11500
11512
|
var Error$1 = function (_a) {
|
|
11501
11513
|
var error = _a.error;
|
|
11502
11514
|
var theme = useTheme();
|
|
11503
11515
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
11504
11516
|
};
|
|
11505
|
-
var templateObject_1$
|
|
11517
|
+
var templateObject_1$N, templateObject_2$w;
|
|
11506
11518
|
|
|
11507
|
-
var Container$
|
|
11519
|
+
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) {
|
|
11508
11520
|
var color = _a.color, hasError = _a.hasError;
|
|
11509
11521
|
return (!hasError ? color : '');
|
|
11510
11522
|
});
|
|
11511
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
11523
|
+
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) {
|
|
11512
11524
|
var padding = _a.padding;
|
|
11513
11525
|
return padding;
|
|
11514
11526
|
}, function (_a) {
|
|
@@ -11564,13 +11576,13 @@ var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __
|
|
|
11564
11576
|
? "& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }"
|
|
11565
11577
|
: '';
|
|
11566
11578
|
});
|
|
11567
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
11579
|
+
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) {
|
|
11568
11580
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
11569
|
-
return !inlinePlaceholder ? (size === 'small' ? '36px' : '
|
|
11581
|
+
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
11570
11582
|
});
|
|
11571
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_4$
|
|
11583
|
+
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"])));
|
|
11572
11584
|
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"])));
|
|
11573
|
-
var templateObject_1$
|
|
11585
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$p, templateObject_4$i, templateObject_5$a;
|
|
11574
11586
|
|
|
11575
11587
|
var BaseInput = function (_a) {
|
|
11576
11588
|
var _b;
|
|
@@ -11616,6 +11628,7 @@ var BaseInput = function (_a) {
|
|
|
11616
11628
|
placeholderColor: theme.component.input.placeholderColor,
|
|
11617
11629
|
disabledBackgroundColor: theme.colors.background.disabled,
|
|
11618
11630
|
disabledColor: theme.colors.text.disabled,
|
|
11631
|
+
fontFamily: theme.fonts.config[0].family,
|
|
11619
11632
|
fontSize: inlinePlaceholder
|
|
11620
11633
|
? theme.component.inputPlaceholder.fontSize
|
|
11621
11634
|
: theme.component.input.fontSize,
|
|
@@ -11631,7 +11644,7 @@ var BaseInput = function (_a) {
|
|
|
11631
11644
|
focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
|
|
11632
11645
|
hasError: hasError ? theme.component.input.errorBorder : '',
|
|
11633
11646
|
};
|
|
11634
|
-
return (jsxs$1(Container$
|
|
11647
|
+
return (jsxs$1(Container$s, __assign$1({ color: status === InputValidationType.Valid
|
|
11635
11648
|
? theme.colors.shades['700'].color
|
|
11636
11649
|
: status === InputValidationType.Error
|
|
11637
11650
|
? theme.colors.semantic.urgent.color
|
|
@@ -11657,11 +11670,11 @@ var Button$2 = function (_a) {
|
|
|
11657
11670
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11658
11671
|
};
|
|
11659
11672
|
|
|
11660
|
-
var Container$
|
|
11673
|
+
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) {
|
|
11661
11674
|
var theme = _a.theme;
|
|
11662
11675
|
return theme.component.inputCustom.input.borderRadius;
|
|
11663
11676
|
});
|
|
11664
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
11677
|
+
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) {
|
|
11665
11678
|
var theme = _a.theme;
|
|
11666
11679
|
return theme.component.inputCustom.button.borderRadius;
|
|
11667
11680
|
});
|
|
@@ -11674,23 +11687,23 @@ var Custom = function (_a) {
|
|
|
11674
11687
|
text: text,
|
|
11675
11688
|
disabled: rest.disabled,
|
|
11676
11689
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11677
|
-
return (jsx$1(Container$
|
|
11690
|
+
return (jsx$1(Container$r, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
11678
11691
|
};
|
|
11679
|
-
var templateObject_1$
|
|
11692
|
+
var templateObject_1$L, templateObject_2$u;
|
|
11680
11693
|
|
|
11681
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11694
|
+
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) {
|
|
11682
11695
|
var size = _a.size;
|
|
11683
11696
|
return (size === 'small' ? '36px' : '');
|
|
11684
11697
|
});
|
|
11685
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
11686
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
11698
|
+
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"])));
|
|
11699
|
+
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"])));
|
|
11687
11700
|
var Success = function (_a) {
|
|
11688
11701
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11689
11702
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
11690
11703
|
};
|
|
11691
|
-
var templateObject_1$
|
|
11704
|
+
var templateObject_1$K, templateObject_2$t, templateObject_3$o;
|
|
11692
11705
|
|
|
11693
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11706
|
+
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) {
|
|
11694
11707
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11695
11708
|
return status === InputValidationType.Empty &&
|
|
11696
11709
|
type === 'primary' &&
|
|
@@ -11707,21 +11720,21 @@ var BasePlusButton = function (_a) {
|
|
|
11707
11720
|
}
|
|
11708
11721
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
11709
11722
|
};
|
|
11710
|
-
var templateObject_1$
|
|
11723
|
+
var templateObject_1$J;
|
|
11711
11724
|
|
|
11712
|
-
var Container$
|
|
11713
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
11725
|
+
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"])));
|
|
11726
|
+
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; });
|
|
11714
11727
|
var BasePlusIcon = function (_a) {
|
|
11715
11728
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11716
11729
|
var theme = useTheme();
|
|
11717
11730
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11718
|
-
return (jsx$1(Container$
|
|
11731
|
+
return (jsx$1(Container$q, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
11719
11732
|
? theme.colors.shades['700'].color
|
|
11720
11733
|
: status === InputValidationType.Error
|
|
11721
11734
|
? theme.colors.semantic.urgent.color
|
|
11722
11735
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11723
11736
|
};
|
|
11724
|
-
var templateObject_1$
|
|
11737
|
+
var templateObject_1$I, templateObject_2$s;
|
|
11725
11738
|
|
|
11726
11739
|
var Input$1 = {
|
|
11727
11740
|
Simple: BaseInput,
|
|
@@ -11730,7 +11743,7 @@ var Input$1 = {
|
|
|
11730
11743
|
SimplePlusIcon: BasePlusIcon,
|
|
11731
11744
|
};
|
|
11732
11745
|
|
|
11733
|
-
var Container$
|
|
11746
|
+
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) {
|
|
11734
11747
|
var width = _a.width;
|
|
11735
11748
|
return width;
|
|
11736
11749
|
}, function (_a) {
|
|
@@ -11746,11 +11759,11 @@ var Container$o = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
11746
11759
|
var PaymentMethod = function (_a) {
|
|
11747
11760
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11748
11761
|
var theme = useTheme();
|
|
11749
|
-
return (jsx$1(Container$
|
|
11762
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
11750
11763
|
};
|
|
11751
|
-
var templateObject_1$
|
|
11764
|
+
var templateObject_1$H;
|
|
11752
11765
|
|
|
11753
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
11766
|
+
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) {
|
|
11754
11767
|
var backgroundColor = _a.backgroundColor;
|
|
11755
11768
|
return backgroundColor;
|
|
11756
11769
|
}, function (_a) {
|
|
@@ -11762,27 +11775,27 @@ var OfferBanner = function (_a) {
|
|
|
11762
11775
|
var theme = useTheme();
|
|
11763
11776
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11764
11777
|
};
|
|
11765
|
-
var templateObject_1$
|
|
11778
|
+
var templateObject_1$G;
|
|
11766
11779
|
|
|
11767
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11768
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
11769
|
-
var Currency = newStyled.span(templateObject_3$
|
|
11770
|
-
var Container$
|
|
11780
|
+
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"])));
|
|
11781
|
+
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; });
|
|
11782
|
+
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"])));
|
|
11783
|
+
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; });
|
|
11771
11784
|
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"])));
|
|
11772
11785
|
var Total = function (_a) {
|
|
11773
11786
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11774
11787
|
var theme = useTheme();
|
|
11775
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
11788
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$o, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
11776
11789
|
};
|
|
11777
|
-
var templateObject_1$
|
|
11790
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$9;
|
|
11778
11791
|
|
|
11779
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11792
|
+
var Wrapper$1 = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11780
11793
|
var color = _a.color;
|
|
11781
11794
|
return color;
|
|
11782
11795
|
});
|
|
11783
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
11784
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
11785
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
11796
|
+
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"])));
|
|
11797
|
+
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"])));
|
|
11798
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11786
11799
|
var color = _a.color;
|
|
11787
11800
|
return color;
|
|
11788
11801
|
});
|
|
@@ -11794,22 +11807,22 @@ var Subtotal = function (_a) {
|
|
|
11794
11807
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
11795
11808
|
})] }), void 0));
|
|
11796
11809
|
};
|
|
11797
|
-
var templateObject_1$
|
|
11810
|
+
var templateObject_1$E, templateObject_2$q, templateObject_3$m, templateObject_4$g;
|
|
11798
11811
|
|
|
11799
11812
|
var Totals = {
|
|
11800
11813
|
Total: Total,
|
|
11801
11814
|
Subtotal: Subtotal,
|
|
11802
11815
|
};
|
|
11803
11816
|
|
|
11804
|
-
var Container$
|
|
11805
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
11806
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
11807
|
-
var Details = newStyled.span(templateObject_4$
|
|
11817
|
+
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; });
|
|
11818
|
+
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"])));
|
|
11819
|
+
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; });
|
|
11820
|
+
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; });
|
|
11808
11821
|
var Note = function (_a) {
|
|
11809
11822
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11810
|
-
return (jsxs$1(Container$
|
|
11823
|
+
return (jsxs$1(Container$n, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11811
11824
|
};
|
|
11812
|
-
var templateObject_1$
|
|
11825
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
11813
11826
|
|
|
11814
11827
|
/* eslint-disable no-param-reassign */
|
|
11815
11828
|
var index$1 = function (breakpoints) {
|
|
@@ -11895,12 +11908,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11895
11908
|
literal: true,
|
|
11896
11909
|
});
|
|
11897
11910
|
|
|
11898
|
-
var Title$4 = newStyled.h1(templateObject_1$
|
|
11899
|
-
var Line = newStyled.div(templateObject_2$
|
|
11900
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
11911
|
+
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; });
|
|
11912
|
+
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; });
|
|
11913
|
+
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({
|
|
11901
11914
|
flexDirection: ['column', 'row'],
|
|
11902
11915
|
}));
|
|
11903
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
11916
|
+
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({
|
|
11904
11917
|
margin: ['0', '0 1.25rem'],
|
|
11905
11918
|
marginBottom: ['1.875rem', '0'],
|
|
11906
11919
|
alignItems: ['center', 'flex-start'],
|
|
@@ -11924,47 +11937,47 @@ var DeliveryDetails = function (_a) {
|
|
|
11924
11937
|
var theme = useTheme();
|
|
11925
11938
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11926
11939
|
};
|
|
11927
|
-
var templateObject_1$
|
|
11940
|
+
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;
|
|
11928
11941
|
|
|
11929
|
-
var Container$
|
|
11930
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
11942
|
+
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"])));
|
|
11943
|
+
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; });
|
|
11931
11944
|
var ScrollToTop = function (_a) {
|
|
11932
11945
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11933
11946
|
var theme = useTheme();
|
|
11934
|
-
return (jsxs$1(Container$
|
|
11947
|
+
return (jsxs$1(Container$m, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
11935
11948
|
};
|
|
11936
|
-
var templateObject_1$
|
|
11949
|
+
var templateObject_1$B, templateObject_2$n;
|
|
11937
11950
|
|
|
11938
|
-
var Container$
|
|
11939
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
11951
|
+
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"])));
|
|
11952
|
+
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; });
|
|
11940
11953
|
var OrderBar = function (_a) {
|
|
11941
11954
|
var message = _a.message;
|
|
11942
11955
|
var theme = useTheme();
|
|
11943
|
-
return (jsxs$1(Container$
|
|
11956
|
+
return (jsxs$1(Container$l, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11944
11957
|
};
|
|
11945
|
-
var templateObject_1$
|
|
11958
|
+
var templateObject_1$A, templateObject_2$m;
|
|
11946
11959
|
|
|
11947
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
11948
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
11949
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
11950
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
11960
|
+
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; });
|
|
11961
|
+
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; });
|
|
11962
|
+
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; });
|
|
11963
|
+
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; });
|
|
11951
11964
|
var SizeTable = function (_a) {
|
|
11952
11965
|
var headers = _a.headers, data = _a.data;
|
|
11953
11966
|
var theme = useTheme();
|
|
11954
11967
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
11955
11968
|
};
|
|
11956
|
-
var templateObject_1$
|
|
11969
|
+
var templateObject_1$z, templateObject_2$l, templateObject_3$j, templateObject_4$d;
|
|
11957
11970
|
|
|
11958
|
-
var Img = newStyled.img(templateObject_1$
|
|
11971
|
+
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; });
|
|
11959
11972
|
var Image = function (_a) {
|
|
11960
11973
|
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;
|
|
11961
11974
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
11962
11975
|
};
|
|
11963
|
-
var templateObject_1$
|
|
11976
|
+
var templateObject_1$y;
|
|
11964
11977
|
|
|
11965
|
-
var Container$
|
|
11966
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
11967
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
11978
|
+
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"])));
|
|
11979
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
11980
|
+
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({
|
|
11968
11981
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11969
11982
|
}));
|
|
11970
11983
|
var Title$3 = newStyled.h2(function (_a) {
|
|
@@ -11987,7 +12000,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
11987
12000
|
margin: '0.063rem 0',
|
|
11988
12001
|
});
|
|
11989
12002
|
});
|
|
11990
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12003
|
+
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) {
|
|
11991
12004
|
var withTag = _a.withTag; _a.theme;
|
|
11992
12005
|
return withTag
|
|
11993
12006
|
? mediaQueries({
|
|
@@ -12000,9 +12013,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
12000
12013
|
var SimpleOrderItem = function (_a) {
|
|
12001
12014
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
12002
12015
|
var theme = useTheme();
|
|
12003
|
-
return (jsxs$1(Container$
|
|
12016
|
+
return (jsxs$1(Container$k, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
12004
12017
|
};
|
|
12005
|
-
var templateObject_1$
|
|
12018
|
+
var templateObject_1$x, templateObject_2$k, templateObject_3$i, templateObject_4$c, templateObject_5$7;
|
|
12006
12019
|
|
|
12007
12020
|
function formatDate(date) {
|
|
12008
12021
|
var day = date.getDate();
|
|
@@ -12011,15 +12024,15 @@ function formatDate(date) {
|
|
|
12011
12024
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12012
12025
|
}
|
|
12013
12026
|
|
|
12014
|
-
var Container$
|
|
12015
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12027
|
+
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"])));
|
|
12028
|
+
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({
|
|
12016
12029
|
fontSize: ['14px', '16px'],
|
|
12017
12030
|
lineHeight: ['22px', '24px'],
|
|
12018
12031
|
}));
|
|
12019
|
-
var Content = newStyled.div(templateObject_3$
|
|
12032
|
+
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({
|
|
12020
12033
|
flexDirection: ['column', 'row'],
|
|
12021
12034
|
}));
|
|
12022
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
12035
|
+
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({
|
|
12023
12036
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
12024
12037
|
}));
|
|
12025
12038
|
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({
|
|
@@ -12034,17 +12047,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
12034
12047
|
var Review = function (_a) {
|
|
12035
12048
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
12036
12049
|
var theme = useTheme();
|
|
12037
|
-
return (jsxs$1(Container$
|
|
12050
|
+
return (jsxs$1(Container$j, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
12038
12051
|
};
|
|
12039
|
-
var templateObject_1$
|
|
12052
|
+
var templateObject_1$w, templateObject_2$j, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
12040
12053
|
|
|
12041
|
-
var List = newStyled.ul(templateObject_1$
|
|
12042
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12043
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12044
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12054
|
+
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"])));
|
|
12055
|
+
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"])));
|
|
12056
|
+
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"])));
|
|
12057
|
+
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"])));
|
|
12045
12058
|
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; });
|
|
12046
12059
|
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; });
|
|
12047
|
-
var templateObject_1$
|
|
12060
|
+
var templateObject_1$v, templateObject_2$i, templateObject_3$g, templateObject_4$a, templateObject_5$5, templateObject_6$4;
|
|
12048
12061
|
|
|
12049
12062
|
var DropdownListIcons = function (_a) {
|
|
12050
12063
|
var items = _a.items;
|
|
@@ -12057,7 +12070,7 @@ var Dropdown = function (_a) {
|
|
|
12057
12070
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12058
12071
|
};
|
|
12059
12072
|
|
|
12060
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12073
|
+
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; });
|
|
12061
12074
|
var AmazonButton = function (_a) {
|
|
12062
12075
|
var onClick = _a.onClick;
|
|
12063
12076
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12066,15 +12079,15 @@ var PaypalButton = function (_a) {
|
|
|
12066
12079
|
var onClick = _a.onClick;
|
|
12067
12080
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12068
12081
|
};
|
|
12069
|
-
var templateObject_1$
|
|
12082
|
+
var templateObject_1$u;
|
|
12070
12083
|
|
|
12071
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12072
|
-
var Col = newStyled.div(templateObject_2$
|
|
12073
|
-
var Row = newStyled.div(templateObject_3$
|
|
12084
|
+
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'); });
|
|
12085
|
+
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"])));
|
|
12086
|
+
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) {
|
|
12074
12087
|
return props.rightToLeft &&
|
|
12075
12088
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12076
12089
|
});
|
|
12077
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12090
|
+
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; });
|
|
12078
12091
|
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; });
|
|
12079
12092
|
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; });
|
|
12080
12093
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12082,7 +12095,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12082
12095
|
var theme = useTheme();
|
|
12083
12096
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12084
12097
|
};
|
|
12085
|
-
var templateObject_1$
|
|
12098
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$f, templateObject_4$9, templateObject_5$4, templateObject_6$3;
|
|
12086
12099
|
|
|
12087
12100
|
var index = /*#__PURE__*/Object.freeze({
|
|
12088
12101
|
__proto__: null,
|
|
@@ -12103,8 +12116,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12103
12116
|
height: height,
|
|
12104
12117
|
});
|
|
12105
12118
|
});
|
|
12106
|
-
var Container$
|
|
12107
|
-
var Title$2 = newStyled.p(templateObject_2$
|
|
12119
|
+
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"])));
|
|
12120
|
+
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; });
|
|
12108
12121
|
var getStylesBySize = function (size) {
|
|
12109
12122
|
switch (size) {
|
|
12110
12123
|
case ComponentSize.Medium:
|
|
@@ -12130,8 +12143,8 @@ var getStylesBySize = function (size) {
|
|
|
12130
12143
|
};
|
|
12131
12144
|
}
|
|
12132
12145
|
};
|
|
12133
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
12134
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
12146
|
+
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"])));
|
|
12147
|
+
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"])));
|
|
12135
12148
|
var ProductItemMobile = function (_a) {
|
|
12136
12149
|
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;
|
|
12137
12150
|
var theme = useTheme();
|
|
@@ -12144,32 +12157,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12144
12157
|
_a[ComponentSize.Small] = 2,
|
|
12145
12158
|
_a)[size];
|
|
12146
12159
|
}, [size]);
|
|
12147
|
-
return (jsxs(Container$
|
|
12160
|
+
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: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12148
12161
|
};
|
|
12149
|
-
var templateObject_1$
|
|
12162
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$8;
|
|
12150
12163
|
|
|
12151
|
-
var Container$
|
|
12164
|
+
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"])));
|
|
12152
12165
|
function withProductGrid(ProductItemComponent, data) {
|
|
12153
12166
|
function WithProductGrid(props) {
|
|
12154
|
-
return (jsx$1(Container$
|
|
12167
|
+
return (jsx$1(Container$h, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12155
12168
|
}
|
|
12156
12169
|
/* istanbul ignore next */
|
|
12157
12170
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12158
12171
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12159
12172
|
return WithProductGrid;
|
|
12160
12173
|
}
|
|
12161
|
-
var templateObject_1$
|
|
12174
|
+
var templateObject_1$r;
|
|
12162
12175
|
|
|
12163
12176
|
var Collection = {
|
|
12164
12177
|
ProductItemMobile: ProductItemMobile,
|
|
12165
12178
|
withProductGrid: withProductGrid,
|
|
12166
12179
|
};
|
|
12167
12180
|
|
|
12168
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12181
|
+
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) {
|
|
12169
12182
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12170
12183
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12171
12184
|
});
|
|
12172
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12185
|
+
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) {
|
|
12173
12186
|
var width = _a.width;
|
|
12174
12187
|
return width;
|
|
12175
12188
|
}, function (_a) {
|
|
@@ -12210,28 +12223,28 @@ var Drawer = function (_a) {
|
|
|
12210
12223
|
}, [isOpen, onClose, onOpen]);
|
|
12211
12224
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12212
12225
|
};
|
|
12213
|
-
var templateObject_1$
|
|
12226
|
+
var templateObject_1$q, templateObject_2$f;
|
|
12214
12227
|
|
|
12215
|
-
var Container$
|
|
12228
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12216
12229
|
var size = _a.size;
|
|
12217
12230
|
return (size ? size : '100%');
|
|
12218
12231
|
}, function (_a) {
|
|
12219
12232
|
var size = _a.size;
|
|
12220
12233
|
return (size ? size : '100%');
|
|
12221
12234
|
});
|
|
12222
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12235
|
+
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) {
|
|
12223
12236
|
var animationDuration = _a.animationDuration;
|
|
12224
12237
|
return animationDuration;
|
|
12225
12238
|
});
|
|
12226
12239
|
var Spinner = function (_a) {
|
|
12227
12240
|
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;
|
|
12228
|
-
return (jsx$1(Container$
|
|
12241
|
+
return (jsx$1(Container$g, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12229
12242
|
};
|
|
12230
|
-
var templateObject_1$
|
|
12243
|
+
var templateObject_1$p, templateObject_2$e;
|
|
12231
12244
|
|
|
12232
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12233
|
-
var LI = newStyled.li(templateObject_2$
|
|
12234
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12245
|
+
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"])));
|
|
12246
|
+
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; });
|
|
12247
|
+
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"])));
|
|
12235
12248
|
var Tags = function (_a) {
|
|
12236
12249
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12237
12250
|
var theme = useTheme();
|
|
@@ -12239,7 +12252,7 @@ var Tags = function (_a) {
|
|
|
12239
12252
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12240
12253
|
}) }), void 0));
|
|
12241
12254
|
};
|
|
12242
|
-
var templateObject_1$
|
|
12255
|
+
var templateObject_1$o, templateObject_2$d, templateObject_3$d;
|
|
12243
12256
|
|
|
12244
12257
|
function FilteringDropdown(_a) {
|
|
12245
12258
|
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;
|
|
@@ -12272,12 +12285,12 @@ function FilteringDropdown(_a) {
|
|
|
12272
12285
|
}) }, void 0)] }), void 0));
|
|
12273
12286
|
}
|
|
12274
12287
|
|
|
12275
|
-
var Container$
|
|
12276
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12277
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12288
|
+
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"])));
|
|
12289
|
+
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"])));
|
|
12290
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12278
12291
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12279
12292
|
}));
|
|
12280
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12293
|
+
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) {
|
|
12281
12294
|
var bold = _a.bold;
|
|
12282
12295
|
return (bold ? '700' : '500');
|
|
12283
12296
|
}, function (_a) {
|
|
@@ -12291,7 +12304,7 @@ var PageNumber = newStyled.span(templateObject_4$6 || (templateObject_4$6 = __ma
|
|
|
12291
12304
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12292
12305
|
width: ['1.25rem', '1.875rem'],
|
|
12293
12306
|
}));
|
|
12294
|
-
var templateObject_1$
|
|
12307
|
+
var templateObject_1$n, templateObject_2$c, templateObject_3$c, templateObject_4$7;
|
|
12295
12308
|
|
|
12296
12309
|
var Pagination = function (_a) {
|
|
12297
12310
|
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;
|
|
@@ -12304,10 +12317,10 @@ var Pagination = function (_a) {
|
|
|
12304
12317
|
setPage(page);
|
|
12305
12318
|
onChange(page);
|
|
12306
12319
|
};
|
|
12307
|
-
return (jsxs$1(Container$
|
|
12320
|
+
return (jsxs$1(Container$f, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(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), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12308
12321
|
};
|
|
12309
12322
|
|
|
12310
|
-
var Container$
|
|
12323
|
+
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({
|
|
12311
12324
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12312
12325
|
}));
|
|
12313
12326
|
var Description$1 = newStyled.div({
|
|
@@ -12324,25 +12337,25 @@ var Description$1 = newStyled.div({
|
|
|
12324
12337
|
var ProductItem = function (_a) {
|
|
12325
12338
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12326
12339
|
var theme = useTheme();
|
|
12327
|
-
return (jsxs$1(Container$
|
|
12340
|
+
return (jsxs$1(Container$e, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12328
12341
|
};
|
|
12329
|
-
var templateObject_1$
|
|
12342
|
+
var templateObject_1$m;
|
|
12330
12343
|
|
|
12331
|
-
var Container$
|
|
12344
|
+
var Container$d = newStyled.div({
|
|
12332
12345
|
display: 'flex',
|
|
12333
12346
|
justifyContent: 'center',
|
|
12334
12347
|
padding: '1rem',
|
|
12335
12348
|
});
|
|
12336
12349
|
var Footer = function (_a) {
|
|
12337
12350
|
var text = _a.text, onClick = _a.onClick;
|
|
12338
|
-
return (jsx$1(Container$
|
|
12351
|
+
return (jsx$1(Container$d, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12339
12352
|
};
|
|
12340
12353
|
|
|
12341
12354
|
var Ul = newStyled.ul({
|
|
12342
12355
|
margin: '0px',
|
|
12343
12356
|
padding: '0px',
|
|
12344
12357
|
});
|
|
12345
|
-
var Li = newStyled.li(templateObject_1$
|
|
12358
|
+
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({
|
|
12346
12359
|
padding: [0, '0rem 1rem'],
|
|
12347
12360
|
borderRadius: [0, '0.5rem'],
|
|
12348
12361
|
}));
|
|
@@ -12354,20 +12367,20 @@ var Anchor = newStyled.a({
|
|
|
12354
12367
|
padding: 0,
|
|
12355
12368
|
textDecoration: 'none',
|
|
12356
12369
|
});
|
|
12357
|
-
var Container$
|
|
12370
|
+
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({
|
|
12358
12371
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12359
12372
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12360
12373
|
borderRadius: ['0', '0.5rem'],
|
|
12361
12374
|
}));
|
|
12362
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12375
|
+
var Header$1 = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12363
12376
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12364
12377
|
}));
|
|
12365
12378
|
var ResultsPanel = function (_a) {
|
|
12366
12379
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12367
12380
|
var theme = useTheme();
|
|
12368
|
-
return (jsxs$1(Container$
|
|
12381
|
+
return (jsxs$1(Container$c, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12369
12382
|
};
|
|
12370
|
-
var templateObject_1$
|
|
12383
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$b;
|
|
12371
12384
|
|
|
12372
12385
|
var Input = newStyled.input(function (props) { return ({
|
|
12373
12386
|
padding: props.theme.component.input.padding,
|
|
@@ -12398,7 +12411,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12398
12411
|
},
|
|
12399
12412
|
}); });
|
|
12400
12413
|
|
|
12401
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12414
|
+
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({
|
|
12402
12415
|
right: ['1rem', '7.75rem'],
|
|
12403
12416
|
top: ['0.75rem', '0.75rem'],
|
|
12404
12417
|
}));
|
|
@@ -12407,7 +12420,7 @@ var ClearButton = function (_a) {
|
|
|
12407
12420
|
var theme = useTheme();
|
|
12408
12421
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12409
12422
|
};
|
|
12410
|
-
var templateObject_1$
|
|
12423
|
+
var templateObject_1$k;
|
|
12411
12424
|
|
|
12412
12425
|
var useOnClickOutside = function (ref, handler) {
|
|
12413
12426
|
useEffect(function () {
|
|
@@ -12493,7 +12506,7 @@ var reducer = function (state, action) {
|
|
|
12493
12506
|
}
|
|
12494
12507
|
}
|
|
12495
12508
|
};
|
|
12496
|
-
var Container$
|
|
12509
|
+
var Container$b = newStyled.div({
|
|
12497
12510
|
position: 'relative',
|
|
12498
12511
|
display: 'flex',
|
|
12499
12512
|
});
|
|
@@ -12529,7 +12542,7 @@ var SearchBar = function (_a) {
|
|
|
12529
12542
|
onClose();
|
|
12530
12543
|
}
|
|
12531
12544
|
};
|
|
12532
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
12545
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$b, __assign$1({ theme: theme }, { children: [jsx$1(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) {
|
|
12533
12546
|
if (e.key === 'Enter') {
|
|
12534
12547
|
e.preventDefault();
|
|
12535
12548
|
e.stopPropagation();
|
|
@@ -12803,36 +12816,36 @@ function useSwipeable(options) {
|
|
|
12803
12816
|
return handlers;
|
|
12804
12817
|
}
|
|
12805
12818
|
|
|
12806
|
-
var Container$
|
|
12807
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12808
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12819
|
+
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"])));
|
|
12820
|
+
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"])));
|
|
12821
|
+
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"])));
|
|
12809
12822
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12810
12823
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12811
|
-
return (jsxs$1(Container$
|
|
12824
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, { children: topTag }, void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
12812
12825
|
});
|
|
12813
|
-
var templateObject_1$
|
|
12826
|
+
var templateObject_1$j, templateObject_2$a, templateObject_3$a;
|
|
12814
12827
|
|
|
12815
|
-
var Button = newStyled.button(templateObject_1$
|
|
12828
|
+
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"])));
|
|
12816
12829
|
var ArrowButton = function (_a) {
|
|
12817
12830
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12818
12831
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12819
12832
|
};
|
|
12820
|
-
var templateObject_1$
|
|
12833
|
+
var templateObject_1$i;
|
|
12821
12834
|
|
|
12822
|
-
var Container$
|
|
12835
|
+
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"])));
|
|
12823
12836
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12824
12837
|
var SlideDots = function (_a) {
|
|
12825
12838
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12826
12839
|
var theme = useTheme();
|
|
12827
|
-
return (jsx$1(Container$
|
|
12840
|
+
return (jsx$1(Container$9, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12828
12841
|
? theme.colors.shades.white.color
|
|
12829
12842
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12830
12843
|
};
|
|
12831
|
-
var templateObject_1$
|
|
12844
|
+
var templateObject_1$h;
|
|
12832
12845
|
|
|
12833
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12834
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
12835
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
12846
|
+
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"])));
|
|
12847
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12848
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12836
12849
|
var SlideNavigation = function (_a) {
|
|
12837
12850
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12838
12851
|
var theme = useTheme();
|
|
@@ -12844,9 +12857,9 @@ var SlideNavigation = function (_a) {
|
|
|
12844
12857
|
onNavigate(selectedIndex + 1);
|
|
12845
12858
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12846
12859
|
};
|
|
12847
|
-
var templateObject_1$
|
|
12860
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$9;
|
|
12848
12861
|
|
|
12849
|
-
var Container$
|
|
12862
|
+
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"])));
|
|
12850
12863
|
var ProductGalleryMobile = function (_a) {
|
|
12851
12864
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12852
12865
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12868,9 +12881,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12868
12881
|
useEffect(function () {
|
|
12869
12882
|
setSelectedImage(images[index]);
|
|
12870
12883
|
}, [index, images]);
|
|
12871
|
-
return (jsxs$1(Container$
|
|
12884
|
+
return (jsxs$1(Container$8, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12872
12885
|
};
|
|
12873
|
-
var templateObject_1$
|
|
12886
|
+
var templateObject_1$f;
|
|
12874
12887
|
|
|
12875
12888
|
var Portal = function (_a) {
|
|
12876
12889
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13003,14 +13016,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13003
13016
|
var visibleStyle = function (_a) {
|
|
13004
13017
|
var opened = _a.opened;
|
|
13005
13018
|
return opened
|
|
13006
|
-
? css(templateObject_1$
|
|
13019
|
+
? 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 "])));
|
|
13007
13020
|
};
|
|
13008
13021
|
var transformStyle = function (_a) {
|
|
13009
13022
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13010
13023
|
return opened
|
|
13011
|
-
? css(templateObject_3$
|
|
13024
|
+
? 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%)');
|
|
13012
13025
|
};
|
|
13013
|
-
var Container$
|
|
13026
|
+
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({
|
|
13014
13027
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13015
13028
|
}), visibleStyle, transformStyle);
|
|
13016
13029
|
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);
|
|
@@ -13023,7 +13036,7 @@ var Modal = function (_a) {
|
|
|
13023
13036
|
}
|
|
13024
13037
|
close();
|
|
13025
13038
|
};
|
|
13026
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13039
|
+
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));
|
|
13027
13040
|
};
|
|
13028
13041
|
var modalEvent = function (id, detail) {
|
|
13029
13042
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13051,39 +13064,39 @@ var useModal = function (id) {
|
|
|
13051
13064
|
close: close,
|
|
13052
13065
|
}); }, [close, open, opened]);
|
|
13053
13066
|
};
|
|
13054
|
-
var templateObject_1$
|
|
13067
|
+
var templateObject_1$e, templateObject_2$8, templateObject_3$8, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
13055
13068
|
|
|
13056
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13069
|
+
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; });
|
|
13057
13070
|
var Title$1 = function (_a) {
|
|
13058
13071
|
var title = _a.title;
|
|
13059
13072
|
var theme = useTheme();
|
|
13060
13073
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13061
13074
|
};
|
|
13062
|
-
var templateObject_1$
|
|
13075
|
+
var templateObject_1$d;
|
|
13063
13076
|
|
|
13064
|
-
var P = newStyled.p(templateObject_1$
|
|
13077
|
+
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; });
|
|
13065
13078
|
var Promo = function (_a) {
|
|
13066
13079
|
var text = _a.text;
|
|
13067
13080
|
var theme = useTheme();
|
|
13068
13081
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13069
13082
|
};
|
|
13070
|
-
var templateObject_1$
|
|
13083
|
+
var templateObject_1$c;
|
|
13071
13084
|
|
|
13072
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13085
|
+
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; });
|
|
13073
13086
|
var Description = function (_a) {
|
|
13074
13087
|
var text = _a.text;
|
|
13075
13088
|
var theme = useTheme();
|
|
13076
13089
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13077
13090
|
};
|
|
13078
|
-
var templateObject_1$
|
|
13091
|
+
var templateObject_1$b;
|
|
13079
13092
|
|
|
13080
|
-
var Container$
|
|
13093
|
+
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"); });
|
|
13081
13094
|
var CloseButton = function (_a) {
|
|
13082
13095
|
var onClick = _a.onClick, size = _a.size;
|
|
13083
13096
|
var theme = useTheme();
|
|
13084
|
-
return (jsx$1(Container$
|
|
13097
|
+
return (jsx$1(Container$6, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13085
13098
|
};
|
|
13086
|
-
var templateObject_1$
|
|
13099
|
+
var templateObject_1$a;
|
|
13087
13100
|
|
|
13088
13101
|
var CartProductItem = {
|
|
13089
13102
|
Title: Title$1,
|
|
@@ -13093,10 +13106,10 @@ var CartProductItem = {
|
|
|
13093
13106
|
CloseButton: CloseButton,
|
|
13094
13107
|
};
|
|
13095
13108
|
|
|
13096
|
-
var Container$
|
|
13097
|
-
var Item = newStyled.span(templateObject_2$
|
|
13098
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13099
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13109
|
+
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; });
|
|
13110
|
+
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"])));
|
|
13111
|
+
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"])));
|
|
13112
|
+
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"])));
|
|
13100
13113
|
var QuantityPicker = function (_a) {
|
|
13101
13114
|
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;
|
|
13102
13115
|
var theme = useTheme();
|
|
@@ -13119,9 +13132,9 @@ var QuantityPicker = function (_a) {
|
|
|
13119
13132
|
return clamp(value);
|
|
13120
13133
|
});
|
|
13121
13134
|
}, [value, clamp]);
|
|
13122
|
-
return (jsxs$1(Container$
|
|
13135
|
+
return (jsxs$1(Container$5, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13123
13136
|
};
|
|
13124
|
-
var templateObject_1$
|
|
13137
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$7, templateObject_4$5;
|
|
13125
13138
|
|
|
13126
13139
|
var htmlReactParser = {exports: {}};
|
|
13127
13140
|
|
|
@@ -16902,17 +16915,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16902
16915
|
HTMLReactParser$1.attributesToProps;
|
|
16903
16916
|
HTMLReactParser$1.Element;
|
|
16904
16917
|
|
|
16905
|
-
var Container$
|
|
16906
|
-
var Card = newStyled.div(templateObject_2$
|
|
16907
|
-
var Tag = newStyled.div(templateObject_3$
|
|
16908
|
-
var Label = newStyled.div(templateObject_4$
|
|
16918
|
+
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"])));
|
|
16919
|
+
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"])));
|
|
16920
|
+
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"])));
|
|
16921
|
+
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"])));
|
|
16909
16922
|
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"])));
|
|
16910
16923
|
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"])));
|
|
16911
16924
|
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"])));
|
|
16912
16925
|
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"])));
|
|
16913
16926
|
var PackSelector = function (_a) {
|
|
16914
16927
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16915
|
-
return (jsx$1(Container$
|
|
16928
|
+
return (jsx$1(Container$4, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16916
16929
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16917
16930
|
}) }), void 0));
|
|
16918
16931
|
};
|
|
@@ -16929,30 +16942,30 @@ var PackCard = function (_a) {
|
|
|
16929
16942
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16930
16943
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$6, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice) }), void 0), jsxs$1(Text$6, __assign$1({ variant: "label", size: "small" }, { children: [' - ', " ", formatPrice(pack.meta.price)] }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16931
16944
|
};
|
|
16932
|
-
var templateObject_1$
|
|
16945
|
+
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;
|
|
16933
16946
|
|
|
16934
|
-
var Title = newStyled.div(templateObject_1$
|
|
16935
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
16936
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
16947
|
+
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; });
|
|
16948
|
+
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; });
|
|
16949
|
+
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"])));
|
|
16937
16950
|
var Accordion = function (_a) {
|
|
16938
16951
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
16939
16952
|
var theme = useTheme();
|
|
16940
16953
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
16941
16954
|
return (jsxs$1("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
16942
16955
|
};
|
|
16943
|
-
var templateObject_1$
|
|
16956
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$5;
|
|
16944
16957
|
|
|
16945
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
16946
|
-
var Header = newStyled.div(templateObject_2$
|
|
16947
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
16948
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
16958
|
+
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; });
|
|
16959
|
+
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"])));
|
|
16960
|
+
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"])));
|
|
16961
|
+
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"])));
|
|
16949
16962
|
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; });
|
|
16950
16963
|
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; });
|
|
16951
16964
|
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"])));
|
|
16952
16965
|
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; });
|
|
16953
16966
|
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"])));
|
|
16954
16967
|
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"])));
|
|
16955
|
-
var templateObject_1$
|
|
16968
|
+
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;
|
|
16956
16969
|
|
|
16957
16970
|
var Filters = function (_a) {
|
|
16958
16971
|
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;
|
|
@@ -17039,20 +17052,20 @@ var FilterCheckbox = function (_a) {
|
|
|
17039
17052
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
17040
17053
|
};
|
|
17041
17054
|
|
|
17042
|
-
var Container$
|
|
17043
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17044
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17045
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17055
|
+
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"])));
|
|
17056
|
+
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"])));
|
|
17057
|
+
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"])));
|
|
17058
|
+
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"])));
|
|
17046
17059
|
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"])));
|
|
17047
17060
|
var SearchNavigation = function (_a) {
|
|
17048
17061
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17049
|
-
return (jsxs$1(Container$
|
|
17062
|
+
return (jsxs$1(Container$3, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17050
17063
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17051
17064
|
}) }, void 0)] }, void 0));
|
|
17052
17065
|
};
|
|
17053
|
-
var templateObject_1$
|
|
17066
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$3, templateObject_4$2, templateObject_5;
|
|
17054
17067
|
|
|
17055
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17068
|
+
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) {
|
|
17056
17069
|
var titleSize = _a.titleSize;
|
|
17057
17070
|
return titleSize;
|
|
17058
17071
|
}, function (_a) {
|
|
@@ -17069,15 +17082,15 @@ var Tab = function (_a) {
|
|
|
17069
17082
|
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;
|
|
17070
17083
|
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17071
17084
|
};
|
|
17072
|
-
var templateObject_1$
|
|
17085
|
+
var templateObject_1$4;
|
|
17073
17086
|
|
|
17074
|
-
var Container$
|
|
17075
|
-
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) {
|
|
17087
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17088
|
+
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) {
|
|
17076
17089
|
var backgroundColor = _a.backgroundColor;
|
|
17077
17090
|
return backgroundColor;
|
|
17078
17091
|
});
|
|
17079
|
-
var TabContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17080
|
-
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"])));
|
|
17092
|
+
var TabContent = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17093
|
+
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"])));
|
|
17081
17094
|
var Tabs = function (_a) {
|
|
17082
17095
|
var _b;
|
|
17083
17096
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17086,11 +17099,11 @@ var Tabs = function (_a) {
|
|
|
17086
17099
|
return null;
|
|
17087
17100
|
}
|
|
17088
17101
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17089
|
-
return (jsxs$1(Container$
|
|
17102
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17090
17103
|
};
|
|
17091
|
-
var templateObject_1$
|
|
17104
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$1;
|
|
17092
17105
|
|
|
17093
|
-
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"])));
|
|
17106
|
+
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"])));
|
|
17094
17107
|
var IconWrapper = newStyled.div(function (props) { return ({
|
|
17095
17108
|
borderRadius: '500px',
|
|
17096
17109
|
width: '120px',
|
|
@@ -17115,14 +17128,73 @@ var IconsWithTitle = function (_a) {
|
|
|
17115
17128
|
console.error('Icon', iconName, 'not found');
|
|
17116
17129
|
return null;
|
|
17117
17130
|
}
|
|
17118
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", style: {
|
|
17131
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$1, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi", style: {
|
|
17119
17132
|
fontSize: '14px',
|
|
17120
17133
|
textTransform: 'uppercase',
|
|
17121
17134
|
textAlign: 'center',
|
|
17122
|
-
lineHeight: '
|
|
17135
|
+
lineHeight: '18px',
|
|
17123
17136
|
} }, { children: iconTitle }), void 0)] }, void 0) }, void 0));
|
|
17124
17137
|
};
|
|
17125
|
-
var templateObject_1;
|
|
17138
|
+
var templateObject_1$2;
|
|
17139
|
+
|
|
17140
|
+
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"])));
|
|
17141
|
+
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"])));
|
|
17142
|
+
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"])));
|
|
17143
|
+
var ImageVideo = function (_a) {
|
|
17144
|
+
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17145
|
+
var video = useRef(null);
|
|
17146
|
+
var _b = useState(false), opened = _b[0], setOpened = _b[1];
|
|
17147
|
+
var handleOnClick = function () {
|
|
17148
|
+
setOpened(true);
|
|
17149
|
+
};
|
|
17150
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$6, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$6, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$6, __assign$1({ variant: "link", style: {
|
|
17151
|
+
position: 'absolute',
|
|
17152
|
+
top: '10px',
|
|
17153
|
+
right: '10px',
|
|
17154
|
+
zIndex: 99,
|
|
17155
|
+
cursor: 'pointer',
|
|
17156
|
+
}, onClick: function () { return setOpened(false); } }, { children: jsx$1(Icon.Actions.Close, { fill: "#292929" }, void 0) }), void 0), jsx$1("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: {
|
|
17157
|
+
position: 'absolute',
|
|
17158
|
+
width: '100%',
|
|
17159
|
+
height: '100%',
|
|
17160
|
+
} }, void 0)] }, void 0))] }, void 0));
|
|
17161
|
+
};
|
|
17162
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1;
|
|
17163
|
+
|
|
17164
|
+
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"])));
|
|
17165
|
+
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"])));
|
|
17166
|
+
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);
|
|
17167
|
+
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"])));
|
|
17168
|
+
var TextWithImage = function (_a) {
|
|
17169
|
+
var _b, _c, _d, _e;
|
|
17170
|
+
var title = _a.title, text = _a.text, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, props = __rest(_a, ["title", "text", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle"]);
|
|
17171
|
+
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17172
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$6, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
17173
|
+
? titleStyle
|
|
17174
|
+
: {
|
|
17175
|
+
color: '#000000',
|
|
17176
|
+
textAlign: 'center',
|
|
17177
|
+
} }, { children: title }), void 0)) : (jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
17178
|
+
? titleStyle
|
|
17179
|
+
: {
|
|
17180
|
+
color: '#000000',
|
|
17181
|
+
textAlign: 'center',
|
|
17182
|
+
} }, { children: title }), void 0)) }, void 0)); };
|
|
17183
|
+
var buttonAction = function () {
|
|
17184
|
+
// @ts-ignore
|
|
17185
|
+
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick;
|
|
17186
|
+
};
|
|
17187
|
+
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: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17188
|
+
backgroundColor: props.btnBGColor,
|
|
17189
|
+
color: '#ffffff',
|
|
17190
|
+
border: props.btnBGColor,
|
|
17191
|
+
transition: '0.3s linear',
|
|
17192
|
+
'&:hover': {
|
|
17193
|
+
backgroundColor: props.btnHoverBGColor,
|
|
17194
|
+
},
|
|
17195
|
+
} }, 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));
|
|
17196
|
+
};
|
|
17197
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
17126
17198
|
|
|
17127
|
-
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17199
|
+
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17128
17200
|
//# sourceMappingURL=index.esm.js.map
|