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