@trafilea/afrodita-components 5.0.0-beta.46 → 5.0.0-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +72 -2
- package/build/index.esm.js +456 -328
- package/build/index.esm.js.map +1 -1
- package/build/index.js +457 -327
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.d.ts +6 -0
- package/build/theme/shapermint.theme.js +6 -0
- package/build/theme/truekind.theme.d.ts +6 -0
- package/build/theme/truekind.theme.js +6 -0
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -112,6 +112,21 @@ var Trash = function (_a) {
|
|
|
112
112
|
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 20, title: "trash" }, { children: jsx$1("path", { d: "M10.5714 16.875H11.1429C11.2186 16.875 11.2913 16.8421 11.3449 16.7835C11.3985 16.7249 11.4286 16.6454 11.4286 16.5625V5.9375C11.4286 5.85462 11.3985 5.77513 11.3449 5.71653C11.2913 5.65792 11.2186 5.625 11.1429 5.625H10.5714C10.4957 5.625 10.423 5.65792 10.3694 5.71653C10.3158 5.77513 10.2857 5.85462 10.2857 5.9375V16.5625C10.2857 16.6454 10.3158 16.7249 10.3694 16.7835C10.423 16.8421 10.4957 16.875 10.5714 16.875ZM4.85714 16.875H5.42857C5.50435 16.875 5.57702 16.8421 5.6306 16.7835C5.68418 16.7249 5.71429 16.6454 5.71429 16.5625V5.9375C5.71429 5.85462 5.68418 5.77513 5.6306 5.71653C5.57702 5.65792 5.50435 5.625 5.42857 5.625H4.85714C4.78137 5.625 4.70869 5.65792 4.65511 5.71653C4.60153 5.77513 4.57143 5.85462 4.57143 5.9375V16.5625C4.57143 16.6454 4.60153 16.7249 4.65511 16.7835C4.70869 16.8421 4.78137 16.875 4.85714 16.875ZM15.7143 2.5H12L10.8 0.75C10.6403 0.517132 10.4333 0.328126 10.1952 0.197949C9.95719 0.067772 9.69471 0 9.42857 0L6.57143 0C6.30529 0 6.04282 0.067772 5.80478 0.197949C5.56674 0.328126 5.35968 0.517132 5.2 0.75L4 2.5H0.285714C0.209938 2.5 0.137266 2.53292 0.0836838 2.59153C0.030102 2.65013 0 2.72962 0 2.8125L0 3.4375C0 3.52038 0.030102 3.59987 0.0836838 3.65847C0.137266 3.71708 0.209938 3.75 0.285714 3.75H1.14286V18.125C1.14286 18.6223 1.32347 19.0992 1.64496 19.4508C1.96645 19.8025 2.40249 20 2.85714 20H13.1429C13.5975 20 14.0336 19.8025 14.355 19.4508C14.6765 19.0992 14.8571 18.6223 14.8571 18.125V3.75H15.7143C15.7901 3.75 15.8627 3.71708 15.9163 3.65847C15.9699 3.59987 16 3.52038 16 3.4375V2.8125C16 2.72962 15.9699 2.65013 15.9163 2.59153C15.8627 2.53292 15.7901 2.5 15.7143 2.5ZM6.11429 1.5C6.1677 1.4226 6.23676 1.35976 6.31607 1.31639C6.39537 1.27302 6.48277 1.2503 6.57143 1.25H9.42857C9.51723 1.2503 9.60463 1.27302 9.68394 1.31639C9.76324 1.35976 9.8323 1.4226 9.88571 1.5L10.5714 2.5H5.42857L6.11429 1.5ZM13.7143 18.125C13.7143 18.2908 13.6541 18.4497 13.5469 18.5669C13.4398 18.6842 13.2944 18.75 13.1429 18.75H2.85714C2.70559 18.75 2.56025 18.6842 2.45308 18.5669C2.34592 18.4497 2.28571 18.2908 2.28571 18.125V3.75H13.7143V18.125ZM7.71429 16.875H8.28572C8.36149 16.875 8.43416 16.8421 8.48775 16.7835C8.54133 16.7249 8.57143 16.6454 8.57143 16.5625V5.9375C8.57143 5.85462 8.54133 5.77513 8.48775 5.71653C8.43416 5.65792 8.36149 5.625 8.28572 5.625H7.71429C7.63851 5.625 7.56584 5.65792 7.51226 5.71653C7.45867 5.77513 7.42857 5.85462 7.42857 5.9375V16.5625C7.42857 16.6454 7.45867 16.7249 7.51226 16.7835C7.56584 16.8421 7.63851 16.875 7.71429 16.875Z", fill: fill }, void 0) }), void 0));
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
+
var Warning = function (_a) {
|
|
116
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
117
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 500, viewBoxY: 500, title: "warning" }, { children: [jsx$1("path", { d: "M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4\n\t\t\tC268.225,344.682,256.925,333.382,243.225,333.382z", fill: fill }, void 0), jsx$1("path", { d: "M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4\n\t\t\tl-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8\n\t\t\tC430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8\n\t\t\tc-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8\n\t\t\tl156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z", fill: fill }, void 0), jsx$1("path", { d: "M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7\n\t\t\tc0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9\n\t\t\tc0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z", fill: fill }, void 0)] }), void 0));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var Edit = function (_a) {
|
|
121
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
122
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 25, viewBoxY: 24, title: "Edit" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.1753 4.97694C21.6993 4.45768 21.9914 3.85188 22 3.09895C21.9828 2.5018 21.7938 1.94793 21.3815 1.48059C21.1066 1.17769 20.8145 0.892099 20.5139 0.615161C20.0757 0.208407 19.5431 0.00935792 18.9504 0.000703593C18.1945 -0.0166051 17.5759 0.286296 17.0519 0.81421C13.9422 3.94708 10.8239 7.07994 7.69699 10.2042C7.40492 10.5071 7.20734 10.8273 7.09566 11.2427C6.82455 12.2952 6.53308 13.3426 6.24084 14.3928C6.15342 14.7069 6.06594 15.0213 5.97891 15.3362C5.87583 15.691 5.95314 15.9333 6.19367 16.0804C6.37407 16.1929 6.56306 16.1583 6.75205 16.1064C7.11291 16.0054 7.47377 15.9022 7.83484 15.799C8.71151 15.5483 9.58945 15.2972 10.4717 15.0765C11.1246 14.9121 11.6228 14.5919 12.0953 14.1159C15.1105 11.0523 18.1429 8.01461 21.1753 4.97694ZM15.1064 9.43803C13.7813 10.7709 12.4561 12.1037 11.1331 13.4322L8.64193 10.9225C9.96489 9.59399 11.29 8.26118 12.6151 6.92838C13.9401 5.59565 15.2652 4.26292 16.588 2.93452L19.0793 5.44427C17.7564 6.77264 16.4314 8.10533 15.1064 9.43803ZM19.9469 4.67404C19.0793 3.7913 18.2374 2.94317 17.3612 2.06043C17.4173 2.00608 17.4734 1.95064 17.5298 1.89493C17.6978 1.72886 17.8683 1.56041 18.0484 1.41136C18.5123 1.02191 19.2339 1.00461 19.6978 1.39405C20.0328 1.67099 20.3421 1.98254 20.6255 2.32006C20.9949 2.76143 20.9863 3.47109 20.6427 3.92977C20.5826 4.00766 20.5139 4.08555 20.4451 4.15478C20.3581 4.24243 20.2733 4.33231 20.1896 4.42103C20.108 4.5075 20.0275 4.59288 19.9469 4.67404ZM10.0334 14.0464L10.0336 14.0467C9.14877 14.289 8.22959 14.5486 7.26747 14.8256C7.36412 14.4738 7.45852 14.1277 7.55147 13.7868C7.71461 13.1886 7.87331 12.6067 8.03201 12.0389C8.6934 12.6965 9.36338 13.3715 10.0334 14.0464ZM2.85201 22H10.4373C11.5197 22 12.6107 22 13.6931 21.9827C14.0755 21.9827 14.4579 21.9838 14.8402 21.9849C15.9865 21.9881 17.1315 21.9914 18.2718 21.9654C19.6376 21.9394 20.8059 20.7538 20.8317 19.3778C20.8501 18.4446 20.8466 17.5159 20.8431 16.5853C20.8417 16.2126 20.8403 15.8397 20.8403 15.466C20.8403 15.0852 20.8403 14.7044 20.8317 14.3236C20.8231 13.9688 20.4967 13.7265 20.1617 13.8044C19.9125 13.865 19.7493 14.0986 19.7493 14.4102V19.1008C19.7493 20.1913 19.0535 20.8923 17.9797 20.8923H2.8606C2.6802 20.8923 2.4998 20.875 2.328 20.8317C1.52909 20.6153 1.09098 19.9922 1.09098 19.0835V5.0462C1.09098 4.86446 1.09957 4.68272 1.14252 4.50963C1.34869 3.71344 1.97579 3.23745 2.81765 3.23745H7.48223C7.59391 3.23745 7.71417 3.22879 7.81726 3.18552C8.05779 3.08167 8.18665 2.82204 8.1351 2.58837C8.08356 2.31144 7.8688 2.13835 7.54237 2.13835C7.08585 2.13835 6.62932 2.13694 6.1728 2.13552C5.03151 2.13199 3.89022 2.12846 2.74893 2.147C1.1597 2.17297 0 3.35861 0 4.94235C0 9.70223 0 14.4621 0.00859039 19.222C0.00859039 19.5335 0.0601328 19.8538 0.163217 20.148C0.558376 21.3077 1.56345 22 2.85201 22Z", fill: fill }, void 0) }), void 0));
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
var SignOut = function (_a) {
|
|
126
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
127
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 21, viewBoxY: 16, title: "Sign out" }, { children: jsx$1("path", { d: "M16.5939 15.5L13.3949 15.5C13.1435 15.5 12.9379 15.2891 12.9379 15.0313L12.9379 14.0938C12.9379 13.8359 13.1435 13.625 13.3949 13.625L16.5939 13.625C17.6032 13.625 18.422 12.7852 18.422 11.75L18.422 4.25C18.422 3.21484 17.6032 2.375 16.5939 2.375L13.3949 2.375C13.1435 2.375 12.9379 2.16406 12.9379 1.90625L12.9379 0.96875C12.9379 0.710937 13.1435 0.499999 13.3949 0.499999L16.5939 0.499998C18.6124 0.499998 20.25 2.17969 20.25 4.25L20.25 11.75C20.25 13.8203 18.6124 15.5 16.5939 15.5ZM7.7927 14.7383L8.53915 13.9727C8.72195 13.7852 8.71814 13.4844 8.53153 13.3047L4.22422 9.01563L13.6995 9.01563C13.9509 9.01563 14.1565 8.80469 14.1565 8.54688L14.1565 7.45312C14.1565 7.19531 13.9509 6.98437 13.6995 6.98437L4.22422 6.98438L8.53153 2.69922C8.71433 2.51562 8.71814 2.21484 8.53915 2.03125L7.7927 1.26563C7.6137 1.08203 7.32427 1.08203 7.14527 1.26563L0.88425 7.67188C0.705255 7.85547 0.705255 8.15234 0.88425 8.33594L7.14527 14.7422C7.32427 14.9219 7.6137 14.9219 7.7927 14.7383Z", fill: fill }, void 0) }), void 0));
|
|
128
|
+
};
|
|
129
|
+
|
|
115
130
|
var Actions = /*#__PURE__*/Object.freeze({
|
|
116
131
|
__proto__: null,
|
|
117
132
|
Check: Check$1,
|
|
@@ -120,7 +135,10 @@ var Actions = /*#__PURE__*/Object.freeze({
|
|
|
120
135
|
LightCheck: LightCheck,
|
|
121
136
|
Question: Question,
|
|
122
137
|
Close: Close,
|
|
123
|
-
Trash: Trash
|
|
138
|
+
Trash: Trash,
|
|
139
|
+
Warning: Warning,
|
|
140
|
+
Edit: Edit,
|
|
141
|
+
SignOut: SignOut
|
|
124
142
|
});
|
|
125
143
|
|
|
126
144
|
var FitPredictor$1 = function (_a) {
|
|
@@ -148,13 +166,19 @@ var GetDiscount = function (_a) {
|
|
|
148
166
|
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 19, title: "Get Discount" }, { children: jsx$1("path", { d: "M22.1671 15.0206C23.3117 13.8704 24 12.428 24 10.8571C24 7.46344 20.8146 4.65967 16.6592 4.15879C16.6592 4.15922 16.6596 4.15964 16.6596 4.16007C15.3488 1.71636 12.2642 0 8.66673 0C3.88009 0 0.000102776 3.03788 0.000102776 6.78571C0.000102776 8.35661 0.688433 9.799 1.83301 10.9492C1.19551 12.2529 0.277185 13.2618 0.262185 13.2771C-0.000730551 13.5608 -0.0732302 13.9781 0.0780191 14.3369C0.152353 14.5125 0.275574 14.6621 0.432473 14.7673C0.589373 14.8724 0.773084 14.9285 0.960932 14.9286C3.19176 14.9286 4.98883 14.0702 6.17633 13.2839C6.55466 13.3725 6.94507 13.44 7.34299 13.4883C8.6559 15.929 11.7388 17.6429 15.3334 17.6429C16.1996 17.6429 17.0346 17.5406 17.8238 17.3553C19.0113 18.1416 20.8083 19 23.0392 19C23.4233 19 23.7704 18.7667 23.9217 18.4079C24.0733 18.0492 24.0004 17.6318 23.7375 17.3481C23.7229 17.3328 22.8046 16.3243 22.1671 15.0206ZM6.47591 11.9615L5.92424 11.8322L5.44966 12.1464C4.61342 12.7003 3.34592 13.3445 1.79635 13.5235C2.16176 13.0443 2.63676 12.3525 3.02717 11.554L3.45717 10.6739L2.77009 9.98348C2.11468 9.32484 1.33343 8.23574 1.33343 6.78571C1.33343 3.79237 4.623 1.35714 8.66673 1.35714C12.7105 1.35714 16 3.79237 16 6.78571C16 9.77906 12.7105 12.2143 8.66673 12.2143C7.92799 12.2143 7.19091 12.129 6.47591 11.9615ZM18.5509 16.2174L18.0763 15.9032L17.5246 16.0325C16.8059 16.2009 16.0708 16.2858 15.3334 16.2857C12.6192 16.2857 10.2501 15.1856 8.98215 13.5591C13.6213 13.4281 17.3334 10.45 17.3334 6.78571C17.3334 6.38493 17.2804 5.99433 17.195 5.61263C20.3384 6.22504 22.6667 8.34091 22.6667 10.8571C22.6667 12.3072 21.8854 13.3963 21.2304 14.0545L20.5433 14.7449L20.9733 15.625C21.3642 16.4248 21.8404 17.1174 22.2038 17.5945C20.6542 17.4155 19.3871 16.7713 18.5509 16.2174ZM9.72423 6.4002L7.99257 5.87134C7.81674 5.81748 7.69299 5.63299 7.69299 5.42263C7.69299 5.1669 7.87382 4.95866 8.09548 4.95866H9.17631C9.33881 4.95866 9.49506 5.00446 9.63298 5.09013C9.76506 5.17199 9.93756 5.13891 10.0496 5.03076L10.5263 4.56975C10.6734 4.42725 10.6671 4.17873 10.5038 4.05616C10.163 3.80042 9.75506 3.64987 9.33381 3.61848V3.05357C9.33381 2.86612 9.18465 2.71429 9.00048 2.71429H8.33382C8.14965 2.71429 8.00049 2.86612 8.00049 3.05357V3.62187C7.09007 3.67658 6.35966 4.45397 6.35966 5.42263C6.35966 6.22759 6.87382 6.94687 7.60965 7.17123L9.34131 7.70009C9.51715 7.75395 9.6409 7.93844 9.6409 8.14879C9.6409 8.40453 9.46006 8.61277 9.2384 8.61277H8.15757C7.99507 8.61277 7.83882 8.56696 7.7009 8.48129C7.56882 8.39902 7.39632 8.43252 7.28424 8.54067L6.80757 9.00167C6.66049 9.14417 6.66674 9.3927 6.83007 9.51527C7.17091 9.771 7.57882 9.92156 8.00007 9.95295V10.5179C8.00007 10.7053 8.14923 10.8571 8.3334 10.8571H9.00006C9.18423 10.8571 9.3334 10.7053 9.3334 10.5179V9.94955C10.2438 9.89484 10.9742 9.11745 10.9742 8.14879C10.9742 7.34384 10.4596 6.62455 9.72423 6.4002Z", fill: "#292929" }, void 0) }), void 0));
|
|
149
167
|
};
|
|
150
168
|
|
|
169
|
+
var ShapermintLogo = function (_a) {
|
|
170
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
171
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 121, viewBoxY: 120, title: "Shapermint Logo" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M120.548 60C120.548 93.1371 93.6849 120 60.5479 120C40.0675 120 21.9837 109.739 11.1573 94.0769C11.1745 94.0425 11.191 94.0068 11.2065 93.9698C12.9467 90.3807 15.7745 86.7553 22.3364 86.7553C29.6678 86.7376 36.8521 90.0069 44.3795 93.4323C52.2625 97.0195 60.5217 100.778 69.7201 101.112C88.3545 101.801 98.5056 90.562 98.5056 75.2629C98.5056 60.4732 83.4255 55.4532 75.2996 52.7482C75.0397 52.6617 74.7868 52.5775 74.5418 52.4955C73.674 52.2029 72.8251 51.9216 71.9988 51.6478C63.8169 48.9364 57.8651 46.9641 57.8651 42.0907C57.8651 37.7402 61.708 35.0574 67.9074 35.0574C73.8893 35.0574 81.5751 37.6677 89.0071 42.1632L89.5147 42.4894L96.9829 29.0755L96.5116 28.7855C88.2458 23.3475 77.7322 20.0846 68.3062 20.0846C52.0645 20.0846 40.7171 29.9819 40.7171 44.1571C40.7171 60.2538 56.995 65.2206 64.8258 67.0695C74.3606 69.3172 81.3576 71.6012 81.3576 77.4743C81.3576 82.2598 76.8983 86.3203 69.6838 85.3051C65.0023 84.6385 58.7949 82.0218 52.1041 79.2013C42.7845 75.2726 32.5271 70.9487 24.1491 70.9487C15.5901 70.9487 8.61613 73.5015 3.40844 78.3583C1.5509 72.5722 0.547852 66.4032 0.547852 60C0.547852 26.8629 27.4108 0 60.5479 0C93.6849 0 120.548 26.8629 120.548 60Z", fill: fill }, void 0) }), void 0));
|
|
172
|
+
};
|
|
173
|
+
|
|
151
174
|
var Other = /*#__PURE__*/Object.freeze({
|
|
152
175
|
__proto__: null,
|
|
153
176
|
FitPredictor: FitPredictor$1,
|
|
154
177
|
Loading: Loading,
|
|
155
178
|
Shapermint: Shapermint,
|
|
156
179
|
McAfee: McAfee,
|
|
157
|
-
GetDiscount: GetDiscount
|
|
180
|
+
GetDiscount: GetDiscount,
|
|
181
|
+
ShapermintLogo: ShapermintLogo
|
|
158
182
|
});
|
|
159
183
|
|
|
160
184
|
var ChevronDown = function (_a) {
|
|
@@ -253,6 +277,16 @@ var Shipping = function (_a) {
|
|
|
253
277
|
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "Shipping" }, { children: jsx$1("path", { d: "M38.7573 19.8505L36.5475 17.0208L32.9942 9.99748C32.796 9.60365 32.3849 9.34839 31.9371 9.34839H26.8861V8.17419C26.8861 7.52511 26.3575 7 25.7041 7H5.95551C5.30212 7 4.77353 7.52511 4.77353 8.17419C4.77353 8.18878 4.77353 8.20337 4.77353 8.21795C4.77353 8.22525 4.77353 8.22525 4.77353 8.23254V10.0558C4.77353 10.6976 5.30212 11.2227 5.94817 11.2227H14.3835C15.0076 11.2227 15.7197 11.7259 15.7197 12.3459V12.4261C15.7197 13.046 15.0076 13.5492 14.3835 13.5492H4.77353V13.5784H4.24494C3.6356 13.5784 2.97486 13.9576 2.97486 14.7526C2.9822 15.5257 3.6356 15.9705 4.24494 15.9705H11.8728C12.5115 15.9705 13.0401 16.4592 13.0401 17.1812C13.0401 17.7865 12.4894 18.2971 11.8801 18.2971H2.10122C1.49188 18.2971 1 18.8732 1 19.4712C1 20.0766 1.49188 20.6892 2.10122 20.6892H8.89211C9.50879 20.6892 10.0007 21.1778 10.0007 21.7832C10.0007 22.3885 9.50879 23.0813 8.89945 23.0813H3.59155C2.99689 23.0813 2.49032 23.5335 2.46096 24.1243C2.43159 24.7515 2.93815 25.2693 3.56218 25.2693H5.36085V28.5512C5.36085 29.1565 5.85273 29.6452 6.46207 29.6452H8.26074C8.65718 31.5778 10.3751 33 12.394 33C14.4129 33 16.1382 31.5778 16.5273 29.6452H27.7084C28.1048 31.5778 29.8227 33 31.8416 33C33.8605 33 35.5858 31.5778 35.9749 29.6452H37.8983C38.5077 29.6452 38.9996 29.1565 38.9996 28.5512V28.223V21.9947V20.5725C39.0069 20.31 38.9188 20.0547 38.7573 19.8505ZM13.8182 30.2286C12.5702 31.4684 10.4412 30.6224 10.3751 28.894C10.309 27.1874 12.2105 26.1736 13.5907 27.1947C14.6038 27.9459 14.6772 29.3753 13.8182 30.2286ZM26.8861 16.6196V11.7041H31.2102L33.699 16.6196H26.8861ZM33.2732 30.2286C32.0252 31.4684 29.8961 30.6224 29.83 28.894C29.764 27.1874 31.6654 26.1736 33.0456 27.1947C34.0588 27.9459 34.1322 29.3753 33.2732 30.2286Z", fill: fill }, void 0) }), void 0));
|
|
254
278
|
};
|
|
255
279
|
|
|
280
|
+
var LightBulb = function (_a) {
|
|
281
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
282
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 18, viewBoxY: 14, title: "LightBulb" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.98637 11.9815C6.98671 12.1398 7.03367 12.2945 7.12139 12.4263L7.55212 13.0734C7.68386 13.2727 7.98462 13.4331 8.22316 13.4331H9.77733C10.0159 13.4331 10.3166 13.2727 10.4484 13.0734L10.8789 12.4263C10.9607 12.2917 11.0075 12.1388 11.0151 11.9815V11.0157H6.98485L6.98637 11.9815ZM8.98614 0.53701C6.41659 0.54482 4.56669 2.62771 4.56669 4.97031C4.56519 6.04361 4.95533 7.08058 5.66393 7.88672C6.08006 8.36154 6.73094 9.35324 6.97906 10.19C6.97906 10.1971 6.98082 10.2034 6.98183 10.2097H11.0182C11.0182 10.2034 11.0199 10.1971 11.0209 10.19C11.269 9.35323 11.9199 8.36154 12.3361 7.88672C13.0447 7.08058 13.4348 6.04361 13.4333 4.97031C13.4333 2.51764 11.4411 0.5292 8.98614 0.53701ZM9 2.95517C7.88759 2.95642 6.98611 3.8579 6.98486 4.97031C6.98486 5.1929 6.80442 5.37334 6.58183 5.37334C6.35924 5.37334 6.1788 5.1929 6.1788 4.97031C6.18047 3.4129 7.44258 2.15078 8.99999 2.14912C9.22257 2.14912 9.40302 2.32956 9.40302 2.55215C9.40302 2.77474 9.22258 2.95518 8.99999 2.95518L9 2.95517ZM3.76064 5.37334C3.76064 5.03946 3.48998 4.7688 3.1561 4.7688H1.54399C1.21011 4.7688 0.939453 5.03946 0.939453 5.37334C0.939453 5.70722 1.21011 5.97788 1.54399 5.97788H3.1561C3.48998 5.97788 3.76064 5.70722 3.76064 5.37334ZM16.456 4.7688H14.8439C14.51 4.7688 14.2394 5.03946 14.2394 5.37334C14.2394 5.70722 14.51 5.97788 14.8439 5.97788H16.456C16.7899 5.97788 17.0605 5.70722 17.0605 5.37334C17.0605 5.03946 16.7899 4.7688 16.456 4.7688ZM4.24125 1.92796L2.84526 1.12191C2.55618 0.95486 2.18644 1.05389 2.01947 1.34302C1.8525 1.63215 1.95154 2.00189 2.24067 2.16886L3.63671 2.97483C3.92579 3.14188 4.29553 3.04285 4.4625 2.75372C4.62947 2.46459 4.53043 2.09485 4.2413 1.92788L4.24125 1.92796ZM15.7593 8.57791L14.3633 7.77186C14.0742 7.6048 13.7045 7.70384 13.5375 7.99297C13.3705 8.2821 13.4696 8.65184 13.7587 8.81881L15.1547 9.62478C15.4438 9.79183 15.8136 9.6928 15.9805 9.40367C16.1475 9.11454 16.0485 8.7448 15.7593 8.57783L15.7593 8.57791ZM3.63671 7.77185L2.24072 8.5779C1.95154 8.74478 1.8525 9.11452 2.01947 9.40365C2.18644 9.69278 2.55618 9.79182 2.84531 9.62485L4.24125 8.81871C4.53043 8.65183 4.62947 8.28209 4.4625 7.99296C4.29553 7.70383 3.92579 7.6048 3.63666 7.77176L3.63671 7.77185ZM14.0615 3.05593C14.1677 3.05613 14.272 3.02814 14.3638 2.97482L15.7598 2.16877C16.049 2.00189 16.148 1.63215 15.981 1.34302C15.8141 1.05389 15.4443 0.95485 15.1552 1.12182L13.7593 1.92796C13.5224 2.06482 13.407 2.34366 13.4778 2.60787C13.5486 2.87209 13.788 3.05584 14.0615 3.05593H14.0615Z", fill: fill }, void 0) }), void 0));
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
var ErrorCross = function (_a) {
|
|
286
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
287
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 17, viewBoxY: 17, title: "ErrorCross" }, { children: jsxs$1("g", { children: [jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5649 13.7595L3.24133 0.43581C2.66025 -0.14527 1.71818 -0.14527 1.13801 0.43581L0.43581 1.13693C-0.14527 1.7182 -0.14527 2.66028 0.43581 3.24046L13.7594 16.5642C14.3406 17.1453 15.2827 17.1453 15.8629 16.5642L16.564 15.8631C17.1462 15.2829 17.1462 14.3406 16.5649 13.7596V13.7595Z", fill: fill }, void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.7595 0.436691L0.43581 13.7602C-0.14527 14.3413 -0.14527 15.2836 0.43581 15.8637L1.13693 16.5648C1.7182 17.1459 2.66028 17.1459 3.24046 16.5648L16.5651 3.2422C17.1464 2.66112 17.1464 1.71905 16.5651 1.13888L15.864 0.437771C15.2829 -0.144399 14.3408 -0.144399 13.7596 0.436681L13.7595 0.436691Z", fill: fill }, void 0)] }, void 0) }), void 0));
|
|
288
|
+
};
|
|
289
|
+
|
|
256
290
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
257
291
|
__proto__: null,
|
|
258
292
|
Clock: Clock,
|
|
@@ -264,7 +298,9 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
264
298
|
StarEmpty: StarEmpty,
|
|
265
299
|
StarHalf: StarHalf,
|
|
266
300
|
Stopwatch: Stopwatch,
|
|
267
|
-
Shipping: Shipping
|
|
301
|
+
Shipping: Shipping,
|
|
302
|
+
LightBulb: LightBulb,
|
|
303
|
+
ErrorCross: ErrorCross
|
|
268
304
|
});
|
|
269
305
|
|
|
270
306
|
var Facebook = function (_a) {
|
|
@@ -343,6 +379,21 @@ var Hamburger = function (_a) {
|
|
|
343
379
|
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 22, viewBoxY: 19, title: "Hamburguer" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.25 3C0.559644 3 0 2.44036 0 1.75C0 1.05964 0.559644 0.5 1.25 0.5H20.75C21.4404 0.5 22 1.05964 22 1.75C22 2.44036 21.4404 3 20.75 3H1.25ZM1.25 11C0.559644 11 0 10.4404 0 9.75C0 9.05964 0.559644 8.5 1.25 8.5H10.75C11.4404 8.5 12 9.05964 12 9.75C12 10.4404 11.4404 11 10.75 11H1.25ZM0 17.75C0 18.4404 0.559644 19 1.25 19H16.75C17.4404 19 18 18.4404 18 17.75C18 17.0596 17.4404 16.5 16.75 16.5H1.25C0.559644 16.5 0 17.0596 0 17.75Z", fill: fill }, void 0) }), void 0));
|
|
344
380
|
};
|
|
345
381
|
|
|
382
|
+
var AddressInformation = function (_a) {
|
|
383
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
384
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 25, viewBoxY: 24, title: "Address Information" }, { children: [jsxs$1("g", __assign$1({ clipPath: "url(#clip0_1_3119)" }, { children: [jsx$1("path", { d: "M24.1322 13.3311C24.1322 14.5129 24.1492 15.6947 24.127 16.8771C24.1058 17.9826 23.6972 18.958 22.8832 19.699C22.4069 20.1319 21.8152 20.4399 21.2675 20.7919C20.0326 21.5875 18.7934 22.379 17.5501 23.1666C16.9627 23.5417 16.313 23.8087 15.6316 23.9551C15.124 24.0647 14.6377 23.9636 14.1497 23.8133C13.1971 23.5185 12.4149 22.9252 11.5924 22.4013C10.2926 21.5735 8.99279 20.7458 7.70144 19.9048C7.11927 19.5254 6.77421 18.9485 6.51488 18.3208C6.29173 17.7736 6.18156 17.1869 6.19099 16.596C6.20581 14.3475 6.20581 12.0987 6.19099 9.84979C6.18622 9.04323 6.50853 8.46371 7.19654 8.03661C9.41935 6.65741 11.6173 5.24063 13.8459 3.87307C14.7271 3.33218 15.6734 3.36288 16.5525 3.908C18.8107 5.30837 21.0552 6.73732 23.3072 8.14934C23.8634 8.49864 24.1248 9.00671 24.1264 9.65397C24.1296 10.8797 24.1264 12.1054 24.1264 13.3311H24.1322ZM14.526 22.6304C14.5339 22.4717 14.5419 22.3843 14.5419 22.2991C14.5419 19.6356 14.5401 16.9718 14.5366 14.3076C14.5311 14.1064 14.485 13.9084 14.4011 13.7254C14.1793 13.2248 13.7792 12.8728 13.3294 12.5865C11.694 11.5471 10.0534 10.5149 8.40745 9.48991C8.23235 9.38918 8.04304 9.31549 7.84592 9.27133C7.62047 9.21364 7.49186 9.31578 7.45958 9.54653C7.45012 9.64308 7.44729 9.74016 7.45111 9.83709C7.45111 12.1393 7.44105 14.4415 7.46116 16.7437C7.46434 17.1142 7.56331 17.491 7.68133 17.844C7.90626 18.5161 8.44079 18.9025 9.02507 19.2671C10.5144 20.1912 11.9766 21.1581 13.459 22.0933C13.7819 22.297 14.1407 22.4389 14.526 22.6304ZM15.7766 22.6304C16.1709 22.4394 16.5175 22.3087 16.8271 22.1144C18.3847 21.1337 19.9205 20.1181 21.4845 19.1507C22.4323 18.5648 22.8642 17.7371 22.8642 16.649C22.8642 14.3736 22.8642 12.0978 22.8642 9.82174C22.8691 9.72482 22.8662 9.62766 22.8557 9.53119C22.8203 9.31473 22.7012 9.18824 22.4694 9.25757C22.2823 9.30479 22.1021 9.37594 21.9332 9.46926C20.8007 10.1661 19.6716 10.8698 18.5461 11.5804C17.9502 11.9556 17.3484 12.324 16.7753 12.732C16.1111 13.2046 15.7411 13.8085 15.757 14.6929C15.8025 17.1972 15.7729 19.7027 15.7729 22.2081L15.7766 22.6304ZM21.296 8.37797C21.1854 8.30017 21.1034 8.23772 21.0166 8.18321C20.2868 7.72436 19.5495 7.27662 18.8287 6.80295C18.6207 6.6664 18.48 6.67011 18.2725 6.80295C17.0716 7.57088 15.8597 8.32187 14.6525 9.07868C13.9179 9.5423 13.1801 10.0075 12.4085 10.4949C13.3611 11.165 14.4313 11.6381 15.1325 12.559C15.431 12.2806 15.6845 11.9736 16.002 11.7619C17.1283 11.0099 18.2778 10.2885 19.4172 9.55976C20.0317 9.1676 20.6504 8.78337 21.296 8.37797ZM9.01025 8.35574C9.09546 8.41819 9.14838 8.46159 9.20607 8.49864C9.77977 8.86064 10.3603 9.21099 10.924 9.58676C11.1389 9.73018 11.2945 9.72436 11.5109 9.58676C12.9954 8.64259 14.49 7.70901 15.9819 6.77278C16.4344 6.48911 16.8859 6.20385 17.3733 5.89689C16.8705 5.57934 16.4037 5.28826 15.9385 4.99294C15.4178 4.6627 14.9023 4.66217 14.3783 4.99294C13.1346 5.77657 11.8888 6.55703 10.6408 7.33431L9.01025 8.35574Z", fill: fill }, void 0), jsx$1("path", { d: "M4.74834 18.2906C4.6527 18.2702 4.55992 18.2383 4.47208 18.1953C3.57942 17.6837 2.68906 17.1673 1.801 16.6462C1.6945 16.59 1.60873 16.5013 1.55618 16.393C1.50363 16.2846 1.48705 16.1624 1.50886 16.0439C1.54696 15.7793 1.69674 15.5676 1.96718 15.5258C2.13918 15.4994 2.31514 15.5273 2.47049 15.6057C3.35326 16.1 4.22598 16.6113 5.09817 17.1247C5.37284 17.2861 5.48292 17.5655 5.40513 17.8439C5.32733 18.1223 5.10928 18.2874 4.74834 18.2906Z", fill: fill }, void 0), jsx$1("path", { d: "M12.6542 2.20952C12.6579 2.66414 12.1688 2.94411 11.7015 2.68954C11.1919 2.41275 10.6933 2.1169 10.1905 1.82847C9.82467 1.61889 9.45949 1.40825 9.09502 1.19655C8.76477 1.00497 8.64675 0.646674 8.81188 0.343948C8.99499 0.00893877 9.33741 -0.0990258 9.68936 0.0989102C10.5848 0.602747 11.474 1.11823 12.3636 1.63371C12.561 1.74697 12.6573 1.92691 12.6542 2.20952Z", fill: fill }, void 0), jsx$1("path", { d: "M2.11609 4.61011C2.24734 4.65509 2.38865 4.68155 2.5072 4.74877C3.34181 5.22191 4.17219 5.7014 5.00309 6.18142C5.33228 6.37142 5.47624 6.62386 5.41961 6.90383C5.32752 7.35739 4.86338 7.54421 4.42411 7.29547C3.82659 6.95729 3.23331 6.61116 2.63951 6.26716C2.35001 6.09939 2.05734 5.93797 1.77526 5.75697C1.66143 5.68666 1.57529 5.57929 1.53134 5.45292C1.48738 5.32656 1.4883 5.18891 1.53392 5.06314C1.61648 4.8001 1.8303 4.6408 2.11609 4.61011Z", fill: fill }, void 0), jsx$1("path", { d: "M8.35464 5.00567C8.26467 4.96333 8.07996 4.88871 7.9069 4.79397C7.56184 4.60344 7.22153 4.40286 6.8807 4.2044C6.51976 3.9927 6.40439 3.63811 6.58539 3.31262C6.76639 2.98714 7.12733 2.90669 7.49886 3.11733C7.92578 3.35973 8.35129 3.60512 8.77538 3.85351C9.03736 4.00752 9.14585 4.2769 9.06223 4.54946C8.97173 4.84531 8.76004 5.00726 8.35464 5.00567Z", fill: fill }, void 0), jsx$1("path", { d: "M4.71315 12.1238C4.71315 12.6477 4.2416 12.9621 3.82138 12.7477C3.33713 12.5006 2.86875 12.2217 2.40778 11.9322C2.10717 11.7432 2.0479 11.3971 2.22202 11.1002C2.39084 10.8134 2.7322 10.7112 3.04657 10.8817C3.50913 11.1325 3.96163 11.4024 4.41784 11.666C4.61683 11.7814 4.72162 11.9528 4.71315 12.1238Z", fill: "#292929" }, void 0)] }), void 0), jsx$1("defs", { children: jsx$1("clipPath", __assign$1({ id: "clip0_1_3119" }, { children: jsx$1("rect", { width: "24", height: "24", fill: "white", transform: "translate(0.5)" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
var ClubMembership = function (_a) {
|
|
388
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
389
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 25, viewBoxY: 24, title: "Club Membership" }, { children: jsx$1("path", { d: "M12.5043 0.00176581C12.1978 -0.0108544 11.8924 0.0442996 11.6106 0.163133C11.3289 0.281966 11.0781 0.461426 10.8769 0.688188L10.3966 1.24236C10.2834 1.36766 10.1335 1.45565 9.96738 1.49431C9.80124 1.53297 9.62695 1.52041 9.46837 1.45833L8.78118 1.18376C8.53378 1.08433 8.26911 1.0326 8.00169 1.03141C7.55375 1.03167 7.11828 1.17598 6.76221 1.44215C6.40613 1.70833 6.14913 2.08165 6.03071 2.50476L5.83413 3.20122C5.78922 3.36203 5.69401 3.50503 5.56187 3.61012C5.42973 3.71522 5.2673 3.77714 5.09738 3.78718L4.35892 3.83071C4.06973 3.84682 3.78737 3.92305 3.53059 4.05432C3.27382 4.18559 3.04851 4.36889 2.86967 4.59204C2.69082 4.81518 2.56253 5.07306 2.49331 5.34853C2.4241 5.624 2.41556 5.91074 2.46825 6.18969L2.6033 6.90122C2.63551 7.06665 2.6135 7.23782 2.54044 7.39026C2.46737 7.54271 2.34697 7.66864 2.19646 7.75006L1.55031 8.10333C1.29712 8.24154 1.07678 8.43084 0.903898 8.65871C0.731012 8.88658 0.609518 9.14782 0.547459 9.42513C0.485399 9.70244 0.48419 9.9895 0.543912 10.2673C0.603633 10.5451 0.722922 10.8073 0.893882 11.0366L1.32636 11.6209C1.42759 11.7557 1.48289 11.9184 1.48443 12.0858C1.48596 12.2532 1.43365 12.4168 1.33492 12.5534L0.907561 13.1461C0.740193 13.3779 0.625017 13.6419 0.569658 13.9206C0.514299 14.1993 0.520021 14.4863 0.586445 14.7627C0.652869 15.0391 0.778479 15.2985 0.954958 15.5237C1.13144 15.749 1.35476 15.9349 1.61014 16.0693L2.26141 16.4142C2.41231 16.4925 2.53427 16.6153 2.61004 16.7652C2.6858 16.9151 2.71155 17.0846 2.68363 17.2496L2.55885 17.9661C2.51069 18.2458 2.52373 18.5323 2.59711 18.8067C2.67049 19.0811 2.80253 19.337 2.98449 19.5577C3.16646 19.7783 3.3942 19.9586 3.65263 20.0866C3.91107 20.2145 4.19431 20.2873 4.48361 20.3L5.22721 20.3285C5.39775 20.3353 5.56176 20.3946 5.69588 20.498C5.82999 20.6014 5.92739 20.7436 5.97421 20.9044L6.17934 21.6009C6.30484 22.0164 6.56396 22.3812 6.91816 22.6409C7.27235 22.9006 7.7027 23.0414 8.14516 23.0423C8.42258 23.0425 8.69711 22.9872 8.952 22.8799L9.63576 22.5953C9.79257 22.5316 9.9656 22.5167 10.1314 22.5527C10.2971 22.5886 10.4476 22.6736 10.5623 22.7962L11.0597 23.337C11.2536 23.5478 11.491 23.7159 11.7562 23.8302C12.0214 23.9444 12.3083 24.0023 12.598 23.9999C12.8877 23.9976 13.1736 23.935 13.4367 23.8164C13.6999 23.6978 13.9344 23.5258 14.1247 23.3119L14.6051 22.756C14.7181 22.6306 14.868 22.5426 15.0342 22.5039C15.2004 22.4652 15.3747 22.4779 15.5332 22.5401L16.2204 22.8163C16.4679 22.9154 16.7325 22.9672 16.9999 22.9687C17.4478 22.9683 17.8832 22.8239 18.2393 22.5577C18.5953 22.2916 18.8524 21.9183 18.9709 21.4953L19.1675 20.7972C19.2124 20.6364 19.3076 20.4934 19.4397 20.3883C19.5719 20.2832 19.7343 20.2213 19.9042 20.2112L20.6427 20.1727C20.9317 20.1566 21.2139 20.0804 21.4705 19.9492C21.7272 19.818 21.9524 19.6349 22.1312 19.4119C22.31 19.189 22.4384 18.9313 22.5077 18.6561C22.577 18.3808 22.5858 18.0942 22.5334 17.8154L22.3983 17.1022C22.3663 16.9381 22.3882 16.7683 22.461 16.6173C22.5338 16.4663 22.6537 16.3418 22.8034 16.2617L23.4513 15.9085C23.7045 15.7703 23.9248 15.581 24.0977 15.3531C24.2706 15.1252 24.3921 14.864 24.4542 14.5867C24.5162 14.3094 24.5174 14.0223 24.4577 13.7445C24.398 13.4667 24.2787 13.2045 24.1077 12.9752L23.6787 12.3843C23.5773 12.2494 23.5219 12.0868 23.5204 11.9193C23.5188 11.7519 23.5712 11.5883 23.6701 11.4517L24.0957 10.859C24.2632 10.6273 24.3784 10.3634 24.4339 10.0848C24.4894 9.80617 24.4838 9.51918 24.4176 9.24283C24.3513 8.96647 24.2259 8.70705 24.0496 8.48174C23.8733 8.25642 23.6501 8.07035 23.3949 7.93584L22.7419 7.59096C22.591 7.51263 22.469 7.38983 22.3932 7.23992C22.3175 7.09 22.2917 6.92056 22.3196 6.75554L22.4461 6.03899C22.4943 5.75917 22.4812 5.47252 22.4077 5.19804C22.3343 4.92355 22.2021 4.66749 22.0199 4.44683C21.8378 4.22616 21.6098 4.04592 21.3512 3.91805C21.0925 3.79017 20.8091 3.71759 20.5196 3.70511L19.7726 3.67832C19.6025 3.67185 19.4387 3.61304 19.3046 3.51026C19.1706 3.40748 19.0729 3.26595 19.0256 3.10575L18.8188 2.4076C18.7374 2.1356 18.5982 1.88357 18.4102 1.66809C18.2222 1.45261 17.9897 1.27856 17.7281 1.15741C17.4665 1.03625 17.1817 0.970741 16.8923 0.96518C16.603 0.959619 16.3158 1.01414 16.0495 1.12514L15.3657 1.40976C15.2087 1.47398 15.0353 1.48914 14.8692 1.45318C14.703 1.41722 14.5523 1.33189 14.4376 1.20885L13.9418 0.668088C13.7599 0.468496 13.5389 0.306683 13.292 0.192229C13.045 0.0777744 12.7771 0.0130043 12.5042 0.00175253L12.5043 0.00176581ZM12.3863 1.21392C12.5087 1.20703 12.6312 1.22723 12.7445 1.27303C12.8578 1.31882 12.9592 1.38903 13.041 1.47844L13.5368 2.0192C13.7289 2.22905 13.9639 2.39697 14.2266 2.51206C14.4893 2.62714 14.7738 2.68682 15.0616 2.68722C15.3396 2.68802 15.6149 2.63274 15.8701 2.52482L16.5522 2.24021C16.6537 2.19743 16.7631 2.17576 16.8736 2.17659C17.0493 2.17754 17.22 2.23391 17.3604 2.33735C17.5008 2.44079 17.6034 2.58579 17.6531 2.75085L17.8582 3.449C17.9782 3.85112 18.2237 4.20635 18.5604 4.46486C18.897 4.72338 19.3078 4.8722 19.7351 4.89046L20.477 4.91891C20.5923 4.92244 20.7055 4.95064 20.8086 5.00154C20.9116 5.05245 21.0021 5.12481 21.0736 5.21357C21.1475 5.3008 21.2012 5.40271 21.231 5.51226C21.2608 5.62181 21.266 5.73639 21.2462 5.84809L21.1266 6.56464C21.0552 6.9783 21.1185 7.40347 21.3074 7.77996C21.4964 8.15645 21.8015 8.46519 22.1796 8.66246L22.8325 9.00569C22.9348 9.05874 23.0244 9.13251 23.0953 9.22208C23.1662 9.31165 23.2169 9.41498 23.2439 9.5252C23.2709 9.63543 23.2736 9.75001 23.2519 9.86135C23.2302 9.97269 23.1846 10.0782 23.118 10.171L22.6924 10.7637C22.4443 11.106 22.3126 11.5162 22.316 11.9361C22.3193 12.3559 22.4576 12.764 22.7112 13.1025L23.1454 13.6868C23.2694 13.8757 23.3118 14.1051 23.2633 14.3247V14.3264C23.2386 14.4371 23.19 14.5412 23.1207 14.6319C23.0514 14.7226 22.9631 14.7977 22.8616 14.8521L22.2138 15.2054C21.8396 15.4088 21.5401 15.7222 21.3576 16.1013C21.1751 16.4804 21.1188 16.906 21.1967 17.3182L21.3317 18.0297C21.3527 18.1411 21.3493 18.2557 21.3218 18.3657C21.2942 18.4757 21.2431 18.5788 21.1719 18.6681C21.1006 18.7573 21.0108 18.8308 20.9084 18.8835C20.806 18.9362 20.6933 18.9671 20.5779 18.974L19.8411 19.0125C19.4137 19.0363 19.0047 19.1907 18.6717 19.4541C18.3387 19.7175 18.0984 20.0766 17.9847 20.4808L17.7898 21.1789C17.7438 21.3493 17.6415 21.4999 17.499 21.6074C17.3565 21.7149 17.1817 21.7732 17.0018 21.7733C16.8952 21.7732 16.7897 21.7533 16.6907 21.7147L16.0035 21.4384C15.756 21.3393 15.4914 21.2875 15.224 21.2861C14.9312 21.2862 14.6418 21.3477 14.3753 21.4664C14.1088 21.5851 13.8713 21.7582 13.6787 21.9742L13.1932 22.52C13.1173 22.6056 13.0237 22.6744 12.9186 22.7219C12.8135 22.7693 12.6993 22.7944 12.5836 22.7953C12.4678 22.7963 12.3532 22.7731 12.2473 22.7274C12.1414 22.6816 12.0467 22.6144 11.9693 22.53L11.4719 21.9893C11.2797 21.7794 11.0447 21.6115 10.782 21.4964C10.5193 21.3813 10.2348 21.3216 9.94706 21.3212C9.66959 21.3206 9.39495 21.3759 9.14022 21.4836L8.45815 21.7682C8.35663 21.8108 8.24723 21.8325 8.13678 21.8319C7.96109 21.8309 7.79039 21.7745 7.64998 21.6711C7.50958 21.5677 7.40694 21.4227 7.35729 21.2576L7.15216 20.5595C7.03215 20.1573 6.78661 19.8021 6.45001 19.5436C6.1134 19.2851 5.70261 19.1363 5.27526 19.118L4.53339 19.0895C4.4179 19.0857 4.30465 19.0573 4.20159 19.0061C4.09853 18.9549 4.00815 18.8822 3.9368 18.7932C3.8631 18.7062 3.80951 18.6045 3.77971 18.4953C3.7499 18.3861 3.74459 18.2718 3.76414 18.1604L3.8838 17.4421C3.95532 17.0285 3.8921 16.6032 3.70311 16.2267C3.51412 15.8502 3.20894 15.5415 2.83081 15.3443L2.17782 14.9994C2.07509 14.9475 1.98544 14.8739 1.91536 14.7838C1.84529 14.6937 1.79656 14.5895 1.7727 14.4788C1.74512 14.3691 1.742 14.2549 1.76353 14.144C1.78506 14.033 1.83075 13.9279 1.89749 13.8358L2.32484 13.2432C2.57255 12.9006 2.70387 12.4903 2.70018 12.0705C2.6965 11.6507 2.55801 11.2427 2.30433 10.9043L1.87185 10.32C1.80222 10.229 1.754 10.124 1.73066 10.0125C1.70731 9.90111 1.70941 9.786 1.7368 9.67545C1.76118 9.5649 1.80951 9.46076 1.87851 9.37006C1.94752 9.27937 2.0356 9.20425 2.1368 9.14976L2.78466 8.79649C3.15901 8.59327 3.45864 8.27991 3.64117 7.90075C3.82369 7.52159 3.87987 7.09582 3.80176 6.68367L3.67697 5.98218C3.65469 5.87055 3.65752 5.7555 3.68527 5.64505C3.71302 5.5346 3.76502 5.4314 3.83765 5.34264C3.90837 5.2535 3.99773 5.18019 4.09973 5.12764C4.20174 5.07509 4.31404 5.0445 4.42911 5.03793L5.16758 4.9944C5.59461 4.97017 6.00316 4.81551 6.33582 4.55215C6.66848 4.28879 6.90853 3.92997 7.02225 3.52611L7.21883 2.82796C7.26487 2.65764 7.36711 2.50701 7.50964 2.39951C7.65217 2.29202 7.82699 2.23369 8.00688 2.23361C8.11343 2.23376 8.21899 2.25364 8.318 2.29221L9.00519 2.56846C9.25267 2.66763 9.51729 2.71935 9.78468 2.72081C10.0774 2.72062 10.3668 2.65912 10.6333 2.54044C10.8998 2.42177 11.1373 2.24865 11.33 2.0327L11.8154 1.48857C11.887 1.40771 11.9744 1.34175 12.0725 1.29459C12.1706 1.24742 12.2773 1.22002 12.3864 1.214L12.3863 1.21392ZM12.4838 6.50618C12.2503 6.50994 12.0231 6.58081 11.8304 6.70999C11.6377 6.83917 11.4881 7.02096 11.4 7.23277L10.5128 9.3707L8.16064 9.53979C7.92454 9.55663 7.69894 9.64207 7.5127 9.78518C7.32646 9.92829 7.18805 10.1226 7.11518 10.3432C7.04231 10.5638 7.03829 10.8006 7.10364 11.0235C7.16899 11.2463 7.30073 11.445 7.48201 11.5941L9.28373 13.0841L8.72134 15.3242C8.67682 15.4948 8.67309 15.6731 8.71045 15.8453C8.74781 16.0175 8.82524 16.179 8.93672 16.3171C9.04796 16.4571 9.19025 16.5706 9.35283 16.6489C9.51542 16.7272 9.69404 16.7683 9.87522 16.7691C10.0973 16.7696 10.315 16.708 10.5026 16.5916L12.5043 15.3728L14.506 16.5916C14.6931 16.7077 14.9101 16.7692 15.1316 16.7691C15.3128 16.7683 15.4914 16.7272 15.654 16.6489C15.8166 16.5706 15.9589 16.4571 16.0701 16.3171C16.1817 16.179 16.2591 16.0176 16.2965 15.8453C16.3339 15.6731 16.3301 15.4948 16.2855 15.3242L15.7231 13.0841L17.5248 11.5941C17.7065 11.4453 17.8386 11.2467 17.9043 11.0239C17.97 10.8011 17.9662 10.5641 17.8935 10.3434C17.8208 10.1227 17.6824 9.92829 17.4961 9.78511C17.3098 9.64193 17.0841 9.55651 16.8479 9.53979L14.494 9.3707L13.6068 7.23277C13.5162 7.01489 13.3605 6.82892 13.1601 6.69925C12.9596 6.56959 12.7239 6.50228 12.4837 6.50618H12.4838ZM12.4975 7.77687L13.4957 10.1743C13.5389 10.2787 13.6112 10.369 13.7043 10.435C13.7974 10.501 13.9076 10.5401 14.0222 10.5477L16.6565 10.7352L14.6393 12.4044C14.5518 12.4769 14.4867 12.5719 14.4513 12.6787C14.416 12.7855 14.4118 12.8998 14.4393 13.0088L15.0701 15.5201L12.8273 14.1539C12.7306 14.0942 12.6186 14.0626 12.5043 14.0626C12.3899 14.0626 12.2779 14.0942 12.1812 14.1539L9.92986 15.5302L10.5675 13.0037C10.595 12.8946 10.5907 12.7801 10.555 12.6732C10.5194 12.5664 10.4538 12.4715 10.3658 12.3993L8.34357 10.7301L10.9778 10.5426C11.0923 10.5343 11.2021 10.495 11.2951 10.4291C11.3881 10.3631 11.4605 10.2732 11.5043 10.1693L12.4975 7.77684L12.4975 7.77687Z", fill: fill }, void 0) }), void 0));
|
|
390
|
+
};
|
|
391
|
+
|
|
392
|
+
var Benefits = function (_a) {
|
|
393
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
394
|
+
return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 25, viewBoxY: 24, title: "Benefits" }, { children: [jsx$1("path", { d: "M1.50086 15.0492C1.66801 14.6891 1.94945 14.5589 2.34477 14.5718C2.99531 14.5928 3.64758 14.5817 4.29899 14.5718C4.40244 14.5688 4.50244 14.5339 4.58516 14.4716C5.67184 13.599 6.92653 13.2518 8.30153 13.2685C9.0711 13.2784 9.7947 13.4924 10.5161 13.7347C12.0871 14.2624 13.6529 14.8154 15.2397 15.2859C16.3384 15.6116 17.0874 16.5204 16.7771 17.8344C17.1432 17.736 17.45 17.5508 17.7418 17.336C18.6229 16.6877 19.5036 16.0386 20.3839 15.3886C20.8733 15.0272 21.4152 14.8988 22.0069 15.0418C22.7803 15.2301 23.253 15.7319 23.4549 16.4951C23.4674 16.5419 23.4854 16.5874 23.5009 16.6338V17.1924C23.378 17.6969 23.1571 18.1421 22.7274 18.4587C21.777 19.1574 20.8506 19.8917 19.8726 20.5492C17.1759 22.3629 14.2127 23.0237 11.0056 22.4256C9.60907 22.1652 8.22891 21.8155 6.84102 21.5057C6.35633 21.3974 5.8725 21.2869 5.36891 21.1735C5.36891 21.3218 5.36891 21.4425 5.36891 21.5632C5.36676 22.0359 5.1111 22.2937 4.64317 22.2963C3.88434 22.2963 3.12551 22.2821 2.36582 22.3027C1.96578 22.3135 1.6723 22.1944 1.5 21.8249L1.50086 15.0492ZM5.36805 19.8466C5.44625 19.8664 5.50813 19.8836 5.57043 19.8978C7.24321 20.2789 8.9177 20.6514 10.5879 21.0416C13.0053 21.6066 15.3458 21.4047 17.606 20.3678C19.2362 19.6193 20.567 18.4274 21.9957 17.3828C22.3906 17.094 22.2389 16.4624 21.7761 16.312C21.5329 16.2325 21.3172 16.2995 21.1131 16.4517C20.2414 17.1005 19.3667 17.7459 18.489 18.3878C17.3972 19.1853 16.1777 19.4835 14.856 19.1965C14.1685 19.047 13.5033 18.7866 12.8304 18.5692C12.0149 18.3056 11.2005 18.0378 10.3872 17.7656C10.0757 17.6617 9.90212 17.397 9.92532 17.0971C9.94638 16.8233 10.1496 16.5737 10.4289 16.5307C10.5767 16.5127 10.7267 16.5282 10.8676 16.5763C12.1184 16.9802 13.3663 17.3953 14.6162 17.8013C14.7431 17.8475 14.878 17.8677 15.0128 17.8606C15.1566 17.8448 15.2902 17.779 15.3903 17.6747C15.4905 17.5704 15.5508 17.4342 15.5607 17.29C15.5873 16.9626 15.4159 16.7142 15.0717 16.6003C13.3693 16.037 11.6647 15.4806 9.96356 14.9125C9.41142 14.7277 8.85755 14.5769 8.27016 14.5636C7.2518 14.5404 6.31036 14.7617 5.49567 15.4011C5.4368 15.4475 5.37364 15.5343 5.37364 15.6022C5.36805 17.0098 5.36805 18.4171 5.36805 19.8466ZM2.80539 15.8733V20.9999H4.06739V15.8733H2.80539Z", fill: fill }, void 0), jsx$1("path", { d: "M23.5008 7.25869C23.4033 7.70342 23.3435 8.16104 23.2 8.59073C22.3742 11.1074 19.9052 12.7707 17.3288 12.5675C14.5848 12.3526 12.42 10.3881 11.9749 7.71202C11.4313 4.44639 13.7959 1.36165 17.0963 1.03037C20.285 0.710248 23.0754 2.95537 23.4608 6.1501C23.4703 6.20549 23.4829 6.2603 23.4986 6.31424L23.5008 7.25869ZM17.7 2.28506C15.2156 2.28506 13.1904 4.30459 13.1883 6.78174C13.1861 9.25889 15.2078 11.2862 17.688 11.2935C20.1802 11.2995 22.2139 9.27393 22.2113 6.78518C22.2092 4.30459 20.1853 2.28506 17.7 2.28506Z", fill: fill }, void 0), jsx$1("path", { d: "M18.3501 4.24914C18.5852 4.36773 18.8103 4.46055 19.0127 4.58902C19.341 4.79613 19.4248 5.17727 19.2323 5.48235C19.0398 5.78742 18.6552 5.86906 18.3269 5.6684C17.9484 5.43766 17.5659 5.45355 17.1822 5.63617C17.101 5.67484 17.0473 5.77066 16.9811 5.84027C17.0555 5.89785 17.1216 5.98594 17.205 6.00785C17.5298 6.09379 17.8624 6.14664 18.1868 6.23129C18.4343 6.29574 18.6891 6.3602 18.9152 6.47535C19.8729 6.96176 19.9975 8.18422 19.1558 8.85281C18.9581 9.00922 18.7154 9.11406 18.4825 9.21848C18.3793 9.26488 18.3454 9.30828 18.342 9.41742C18.3286 9.81402 18.0678 10.0839 17.7082 10.0886C17.3485 10.0933 17.0735 9.82348 17.0602 9.43332C17.0559 9.31945 17.0142 9.27992 16.9154 9.23996C16.7288 9.17 16.5492 9.08252 16.3791 8.97871C16.0564 8.7716 15.9761 8.38231 16.1733 8.08196C16.3645 7.79063 16.7465 7.70469 17.0632 7.89934C17.4409 8.13094 17.8233 8.12449 18.2075 7.94231C18.2934 7.89934 18.3497 7.79793 18.4193 7.72359C18.3415 7.66859 18.2711 7.58566 18.1851 7.56375C17.8113 7.46922 17.4306 7.40176 17.0576 7.30594C16.8424 7.25508 16.6343 7.17787 16.438 7.07606C15.5455 6.58363 15.4175 5.44324 16.1896 4.77336C16.3998 4.59117 16.6808 4.49191 16.924 4.34582C16.9794 4.31273 17.0529 4.24226 17.0499 4.1907C17.0448 4.09941 17.0586 4.00806 17.0903 3.92231C17.122 3.83656 17.171 3.75825 17.2343 3.69224C17.2976 3.62623 17.3737 3.57394 17.458 3.53861C17.5424 3.50328 17.6331 3.48567 17.7245 3.48687C18.0962 3.50535 18.3299 3.77691 18.3458 4.21734C18.345 4.22894 18.3493 4.24269 18.3501 4.24914Z", fill: fill }, void 0)] }), void 0));
|
|
395
|
+
};
|
|
396
|
+
|
|
346
397
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
347
398
|
__proto__: null,
|
|
348
399
|
Search: Search,
|
|
@@ -350,7 +401,10 @@ var Navigation = /*#__PURE__*/Object.freeze({
|
|
|
350
401
|
ShoppingBag: ShoppingBag,
|
|
351
402
|
ShoppingCart: ShoppingCart,
|
|
352
403
|
MapMarker: MapMarker,
|
|
353
|
-
Hamburger: Hamburger
|
|
404
|
+
Hamburger: Hamburger,
|
|
405
|
+
AddressInformation: AddressInformation,
|
|
406
|
+
ClubMembership: ClubMembership,
|
|
407
|
+
Benefits: Benefits
|
|
354
408
|
});
|
|
355
409
|
|
|
356
410
|
var QuestionCircle = function (_a) {
|
|
@@ -3362,7 +3416,7 @@ var InputValidationType;
|
|
|
3362
3416
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3363
3417
|
})(InputValidationType || (InputValidationType = {}));
|
|
3364
3418
|
|
|
3365
|
-
var Section = newStyled.div(templateObject_1$
|
|
3419
|
+
var Section = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
3366
3420
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3367
3421
|
});
|
|
3368
3422
|
var CardHeader = function (_a) {
|
|
@@ -3373,14 +3427,14 @@ var CardFooter = function (_a) {
|
|
|
3373
3427
|
var children = _a.children;
|
|
3374
3428
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3375
3429
|
};
|
|
3376
|
-
var templateObject_1$
|
|
3430
|
+
var templateObject_1$1b;
|
|
3377
3431
|
|
|
3378
|
-
var Body = newStyled.div(templateObject_1$
|
|
3432
|
+
var Body = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
3379
3433
|
var CardBody = function (_a) {
|
|
3380
3434
|
var children = _a.children;
|
|
3381
3435
|
return jsx$1(Body, { children: children }, void 0);
|
|
3382
3436
|
};
|
|
3383
|
-
var templateObject_1$
|
|
3437
|
+
var templateObject_1$1a;
|
|
3384
3438
|
|
|
3385
3439
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3386
3440
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3525,7 +3579,7 @@ var AssetsProvider = function (_a) {
|
|
|
3525
3579
|
};
|
|
3526
3580
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3527
3581
|
|
|
3528
|
-
var Container$
|
|
3582
|
+
var Container$I = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
3529
3583
|
var flex = _a.flex;
|
|
3530
3584
|
return flex &&
|
|
3531
3585
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3538,14 +3592,14 @@ var Container$H = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
3538
3592
|
var Card$1 = function (_a) {
|
|
3539
3593
|
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;
|
|
3540
3594
|
var theme = useTheme();
|
|
3541
|
-
return (jsx$1(Container$
|
|
3595
|
+
return (jsx$1(Container$I, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3542
3596
|
};
|
|
3543
3597
|
var Card$2 = Object.assign(Card$1, {
|
|
3544
3598
|
Header: CardHeader,
|
|
3545
3599
|
Footer: CardFooter,
|
|
3546
3600
|
Body: CardBody,
|
|
3547
3601
|
});
|
|
3548
|
-
var templateObject_1$
|
|
3602
|
+
var templateObject_1$19;
|
|
3549
3603
|
|
|
3550
3604
|
var Fragment = Fragment$1;
|
|
3551
3605
|
function jsx(type, props, key) {
|
|
@@ -3687,7 +3741,7 @@ function BaseSelectOption(_a) {
|
|
|
3687
3741
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3688
3742
|
}
|
|
3689
3743
|
|
|
3690
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3744
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3691
3745
|
function BaseSelect(_a) {
|
|
3692
3746
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3693
3747
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3697,7 +3751,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3697
3751
|
Options: BaseSelectOptions,
|
|
3698
3752
|
Option: BaseSelectOption,
|
|
3699
3753
|
});
|
|
3700
|
-
var templateObject_1$
|
|
3754
|
+
var templateObject_1$18;
|
|
3701
3755
|
|
|
3702
3756
|
var CustomButton = newStyled.button(function (_a) {
|
|
3703
3757
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -3910,12 +3964,12 @@ var CustomCheckboxStyles = {
|
|
|
3910
3964
|
},
|
|
3911
3965
|
};
|
|
3912
3966
|
|
|
3913
|
-
var Container$
|
|
3967
|
+
var Container$H = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n 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"])));
|
|
3914
3968
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
3915
3969
|
CustomCheckboxStyles[props.size](props.theme),
|
|
3916
3970
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
3917
3971
|
]; });
|
|
3918
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
3972
|
+
var Input$3 = newStyled.input(templateObject_2$J || (templateObject_2$J = __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) {
|
|
3919
3973
|
var disabled = _a.disabled;
|
|
3920
3974
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
3921
3975
|
});
|
|
@@ -3934,14 +3988,19 @@ var Checkbox = function (_a) {
|
|
|
3934
3988
|
if (disabled || !mounted.current) {
|
|
3935
3989
|
return;
|
|
3936
3990
|
}
|
|
3937
|
-
|
|
3938
|
-
|
|
3991
|
+
if (checked !== isChecked) {
|
|
3992
|
+
onChange(isChecked);
|
|
3993
|
+
}
|
|
3994
|
+
}, [isChecked, onChange, disabled, checked]);
|
|
3995
|
+
useEffect(function () {
|
|
3996
|
+
setIsChecked(checked);
|
|
3997
|
+
}, [checked]);
|
|
3939
3998
|
useEffect(function () {
|
|
3940
3999
|
mounted.current = true;
|
|
3941
4000
|
}, []);
|
|
3942
|
-
return (jsxs$1(Container$
|
|
4001
|
+
return (jsxs$1(Container$H, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
3943
4002
|
};
|
|
3944
|
-
var templateObject_1$
|
|
4003
|
+
var templateObject_1$17, templateObject_2$J;
|
|
3945
4004
|
|
|
3946
4005
|
var CustomOption = newStyled.li(function (_a) {
|
|
3947
4006
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4075,11 +4134,11 @@ var SelectorSecondary = function (_a) {
|
|
|
4075
4134
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4076
4135
|
// `variants` styles that are consistent through all themes.
|
|
4077
4136
|
var TAGS = {
|
|
4078
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4079
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4080
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4081
|
-
display1: newStyled.h1(templateObject_4$
|
|
4082
|
-
display2: newStyled.h2(templateObject_5$
|
|
4137
|
+
hero1: newStyled.h1(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""]))),
|
|
4138
|
+
hero2: newStyled.h2(templateObject_2$I || (templateObject_2$I = __makeTemplateObject([""], [""]))),
|
|
4139
|
+
hero3: newStyled.h3(templateObject_3$v || (templateObject_3$v = __makeTemplateObject([""], [""]))),
|
|
4140
|
+
display1: newStyled.h1(templateObject_4$m || (templateObject_4$m = __makeTemplateObject([""], [""]))),
|
|
4141
|
+
display2: newStyled.h2(templateObject_5$d || (templateObject_5$d = __makeTemplateObject([""], [""]))),
|
|
4083
4142
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4084
4143
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4085
4144
|
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4198,9 +4257,9 @@ var DEFAULTS = {
|
|
|
4198
4257
|
size: 'regular',
|
|
4199
4258
|
},
|
|
4200
4259
|
};
|
|
4201
|
-
var templateObject_1$
|
|
4260
|
+
var templateObject_1$16, templateObject_2$I, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4202
4261
|
|
|
4203
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4262
|
+
var ButtonsContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
4204
4263
|
var inline = _a.inline;
|
|
4205
4264
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4206
4265
|
});
|
|
@@ -4218,7 +4277,7 @@ var SizeSelector = function (_a) {
|
|
|
4218
4277
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4219
4278
|
}) }), void 0)] }), void 0));
|
|
4220
4279
|
};
|
|
4221
|
-
var templateObject_1$
|
|
4280
|
+
var templateObject_1$15;
|
|
4222
4281
|
|
|
4223
4282
|
var getStylesBySize$7 = function (size) {
|
|
4224
4283
|
switch (size) {
|
|
@@ -4245,7 +4304,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4245
4304
|
} });
|
|
4246
4305
|
};
|
|
4247
4306
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4248
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4307
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$14 || (templateObject_1$14 = __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));
|
|
4249
4308
|
};
|
|
4250
4309
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4251
4310
|
if (disabled)
|
|
@@ -4261,16 +4320,16 @@ var TextButton = function (_a) {
|
|
|
4261
4320
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4262
4321
|
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));
|
|
4263
4322
|
};
|
|
4264
|
-
var templateObject_1$
|
|
4323
|
+
var templateObject_1$14;
|
|
4265
4324
|
|
|
4266
|
-
var Container$
|
|
4267
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4268
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4325
|
+
var Container$G = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
4326
|
+
var P$3 = newStyled.p(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4327
|
+
var PercentageSpan = newStyled.span(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
4269
4328
|
var SizeFitGuide = function (_a) {
|
|
4270
4329
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4271
|
-
return (jsxs$1(Container$
|
|
4330
|
+
return (jsxs$1(Container$G, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4272
4331
|
};
|
|
4273
|
-
var templateObject_1$
|
|
4332
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$u;
|
|
4274
4333
|
|
|
4275
4334
|
var getStylesBySize$6 = function (size) {
|
|
4276
4335
|
switch (size) {
|
|
@@ -4300,7 +4359,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4300
4359
|
};
|
|
4301
4360
|
}
|
|
4302
4361
|
};
|
|
4303
|
-
var Container$
|
|
4362
|
+
var Container$F = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
4304
4363
|
var backgroundColor = _a.backgroundColor;
|
|
4305
4364
|
return backgroundColor;
|
|
4306
4365
|
}, function (_a) {
|
|
@@ -4322,7 +4381,7 @@ var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __
|
|
|
4322
4381
|
var size = _a.size;
|
|
4323
4382
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4324
4383
|
});
|
|
4325
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4384
|
+
var H3$2 = newStyled.h3(templateObject_2$G || (templateObject_2$G = __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) {
|
|
4326
4385
|
var textColor = _a.textColor;
|
|
4327
4386
|
return textColor;
|
|
4328
4387
|
}, function (_a) {
|
|
@@ -4337,9 +4396,9 @@ var H3$2 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __makeTempla
|
|
|
4337
4396
|
var DiscountTag = function (_a) {
|
|
4338
4397
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
4339
4398
|
var theme = useTheme();
|
|
4340
|
-
return (jsx$1(Container$
|
|
4399
|
+
return (jsx$1(Container$F, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4341
4400
|
};
|
|
4342
|
-
var templateObject_1$
|
|
4401
|
+
var templateObject_1$12, templateObject_2$G;
|
|
4343
4402
|
|
|
4344
4403
|
var getStylesBySize$5 = function (size) {
|
|
4345
4404
|
switch (size) {
|
|
@@ -4363,8 +4422,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4363
4422
|
};
|
|
4364
4423
|
}
|
|
4365
4424
|
};
|
|
4366
|
-
var Container$
|
|
4367
|
-
var Price = newStyled.h1(templateObject_2$
|
|
4425
|
+
var Container$E = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4426
|
+
var Price = newStyled.h1(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
4368
4427
|
var weight = _a.weight;
|
|
4369
4428
|
return (weight ? weight : '400');
|
|
4370
4429
|
}, function (_a) {
|
|
@@ -4386,7 +4445,7 @@ var Price = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTempl
|
|
|
4386
4445
|
var margin = _a.margin, size = _a.size;
|
|
4387
4446
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4388
4447
|
});
|
|
4389
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4448
|
+
var TagContainer = newStyled.h1(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4390
4449
|
var _b;
|
|
4391
4450
|
var size = _a.size;
|
|
4392
4451
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4401,9 +4460,9 @@ function getTestId() {
|
|
|
4401
4460
|
var PriceLabel = function (_a) {
|
|
4402
4461
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
4403
4462
|
var theme = useTheme();
|
|
4404
|
-
return (jsxs$1(Container$
|
|
4463
|
+
return (jsxs$1(Container$E, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4405
4464
|
};
|
|
4406
|
-
var templateObject_1
|
|
4465
|
+
var templateObject_1$11, templateObject_2$F, templateObject_3$t;
|
|
4407
4466
|
|
|
4408
4467
|
var OneColorSelector = function (_a) {
|
|
4409
4468
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4442,11 +4501,11 @@ var OutOfStock = function (_a) {
|
|
|
4442
4501
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
4443
4502
|
};
|
|
4444
4503
|
|
|
4445
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4446
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4447
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4448
|
-
var Span = newStyled.span(templateObject_4$
|
|
4449
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
4504
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4505
|
+
newStyled(lt.Label)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4506
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
4507
|
+
var Span = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4508
|
+
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"])));
|
|
4450
4509
|
var Label$2 = function (_a) {
|
|
4451
4510
|
var label = _a.label, values = _a.values;
|
|
4452
4511
|
return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -4464,20 +4523,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4464
4523
|
Option: Option,
|
|
4465
4524
|
OptionsContainer: OptionsContainer,
|
|
4466
4525
|
});
|
|
4467
|
-
var templateObject_1$
|
|
4526
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$s, templateObject_4$l, templateObject_5$c;
|
|
4468
4527
|
|
|
4469
|
-
var Container$
|
|
4528
|
+
var Container$D = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
4470
4529
|
var borderColor = _a.borderColor;
|
|
4471
4530
|
return borderColor;
|
|
4472
4531
|
});
|
|
4473
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
4532
|
+
var Image$3 = newStyled.img(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
4474
4533
|
var PatternSelector = function (_a) {
|
|
4475
4534
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4476
4535
|
var theme = useTheme();
|
|
4477
4536
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4478
|
-
return (jsx$1(Container$
|
|
4537
|
+
return (jsx$1(Container$D, __assign$1({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
4479
4538
|
};
|
|
4480
|
-
var templateObject_1
|
|
4539
|
+
var templateObject_1$$, templateObject_2$D;
|
|
4481
4540
|
|
|
4482
4541
|
var renderOptions$1 = function (options) {
|
|
4483
4542
|
if (options.length === 0) {
|
|
@@ -4535,7 +4594,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4535
4594
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
4536
4595
|
};
|
|
4537
4596
|
|
|
4538
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
4597
|
+
var Image$2 = newStyled.img(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
4539
4598
|
var selected = _a.selected, theme = _a.theme;
|
|
4540
4599
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4541
4600
|
});
|
|
@@ -4544,7 +4603,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4544
4603
|
var theme = useTheme();
|
|
4545
4604
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4546
4605
|
};
|
|
4547
|
-
var templateObject_1$
|
|
4606
|
+
var templateObject_1$_;
|
|
4548
4607
|
|
|
4549
4608
|
var Button$4 = newStyled.button(function () { return ({
|
|
4550
4609
|
background: 'transparent',
|
|
@@ -8787,14 +8846,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
8787
8846
|
return Slider;
|
|
8788
8847
|
}(React__default.Component);
|
|
8789
8848
|
|
|
8790
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
8849
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
8791
8850
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
8792
8851
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
8793
8852
|
}, function (_a) {
|
|
8794
8853
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
8795
8854
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
8796
8855
|
});
|
|
8797
|
-
var templateObject_1$
|
|
8856
|
+
var templateObject_1$Z;
|
|
8798
8857
|
|
|
8799
8858
|
var getStylesBySize$4 = function (size) {
|
|
8800
8859
|
// rem units
|
|
@@ -8853,22 +8912,22 @@ var SliderNavigation = function (_a) {
|
|
|
8853
8912
|
} }, { 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));
|
|
8854
8913
|
};
|
|
8855
8914
|
|
|
8856
|
-
var horizontalStyles = css(templateObject_1$
|
|
8857
|
-
var verticalStyles = css(templateObject_2$
|
|
8858
|
-
var Container$
|
|
8915
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
8916
|
+
var verticalStyles = css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n"])));
|
|
8917
|
+
var Container$C = newStyled.div(templateObject_3$r || (templateObject_3$r = __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) {
|
|
8859
8918
|
var position = _a.position;
|
|
8860
8919
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
8861
8920
|
});
|
|
8862
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
8921
|
+
var Button$3 = newStyled.button(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
8863
8922
|
var ImagePreviewList = function (_a) {
|
|
8864
8923
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
8865
|
-
return (jsx$1(Container$
|
|
8924
|
+
return (jsx$1(Container$C, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
8866
8925
|
arrowWidth: 0.75,
|
|
8867
8926
|
arrowHeight: 1.25,
|
|
8868
8927
|
arrowPadding: 1.625,
|
|
8869
8928
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
|
|
8870
8929
|
};
|
|
8871
|
-
var templateObject_1$
|
|
8930
|
+
var templateObject_1$Y, templateObject_2$C, templateObject_3$r, templateObject_4$k;
|
|
8872
8931
|
|
|
8873
8932
|
var propTypes = {exports: {}};
|
|
8874
8933
|
|
|
@@ -10454,19 +10513,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10454
10513
|
afterZoomOut: PropTypes.func
|
|
10455
10514
|
} : {};
|
|
10456
10515
|
|
|
10457
|
-
var Container$
|
|
10458
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
10459
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
10516
|
+
var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n"], ["\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n"])));
|
|
10517
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
10518
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
10460
10519
|
var ImageProductWithTags$1 = function (_a) {
|
|
10461
10520
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10462
|
-
return (jsxs$1(Container$
|
|
10521
|
+
return (jsxs$1(Container$B, __assign$1({ "data-testid": testId, className: "stylefor".concat(position) }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
10463
10522
|
alt: image.alt,
|
|
10464
10523
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10465
10524
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, { children: topTag }, void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }), void 0));
|
|
10466
10525
|
};
|
|
10467
|
-
var templateObject_1$
|
|
10526
|
+
var templateObject_1$X, templateObject_2$B, templateObject_3$q;
|
|
10468
10527
|
|
|
10469
|
-
var Container$
|
|
10528
|
+
var Container$A = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
10470
10529
|
var ProductGallery = function (_a) {
|
|
10471
10530
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10472
10531
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10474,11 +10533,11 @@ var ProductGallery = function (_a) {
|
|
|
10474
10533
|
useEffect(function () {
|
|
10475
10534
|
setSelectedImage(initialValue);
|
|
10476
10535
|
}, [initialValue]);
|
|
10477
|
-
return (jsxs$1(Container$
|
|
10536
|
+
return (jsxs$1(Container$A, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10478
10537
|
setSelectedImage(value);
|
|
10479
10538
|
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10480
10539
|
};
|
|
10481
|
-
var templateObject_1$
|
|
10540
|
+
var templateObject_1$W;
|
|
10482
10541
|
|
|
10483
10542
|
/* base styles & size variants */
|
|
10484
10543
|
var StarStyles = {
|
|
@@ -10524,8 +10583,8 @@ var StarStyles = {
|
|
|
10524
10583
|
});
|
|
10525
10584
|
},
|
|
10526
10585
|
};
|
|
10527
|
-
var Container$
|
|
10528
|
-
var templateObject_1$
|
|
10586
|
+
var Container$z = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10587
|
+
var templateObject_1$V;
|
|
10529
10588
|
|
|
10530
10589
|
var StarContainer = newStyled.div(function (_a) {
|
|
10531
10590
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10543,7 +10602,7 @@ var sizes = {
|
|
|
10543
10602
|
var StarList = function (_a) {
|
|
10544
10603
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
10545
10604
|
var theme = useTheme();
|
|
10546
|
-
return (jsx$1(Container$
|
|
10605
|
+
return (jsx$1(Container$z, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10547
10606
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
10548
10607
|
}) }, void 0));
|
|
10549
10608
|
};
|
|
@@ -10587,8 +10646,8 @@ var LabelStyles = {
|
|
|
10587
10646
|
});
|
|
10588
10647
|
},
|
|
10589
10648
|
};
|
|
10590
|
-
var Container$
|
|
10591
|
-
var templateObject_1$
|
|
10649
|
+
var Container$y = newStyled.a(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
10650
|
+
var templateObject_1$U;
|
|
10592
10651
|
|
|
10593
10652
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10594
10653
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10626,11 +10685,11 @@ var Rating = function (_a) {
|
|
|
10626
10685
|
href: reviewsContainerId,
|
|
10627
10686
|
}
|
|
10628
10687
|
: {};
|
|
10629
|
-
return (jsxs$1(Container$
|
|
10688
|
+
return (jsxs$1(Container$y, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
10630
10689
|
};
|
|
10631
10690
|
|
|
10632
|
-
var Container$
|
|
10633
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
10691
|
+
var Container$x = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
10692
|
+
var P$2 = newStyled.p(templateObject_2$A || (templateObject_2$A = __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; });
|
|
10634
10693
|
var textButtonStyles = function (theme) { return ({
|
|
10635
10694
|
border: 'none',
|
|
10636
10695
|
background: 'transparent',
|
|
@@ -10643,9 +10702,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10643
10702
|
var FitPredictor = function (_a) {
|
|
10644
10703
|
var onClick = _a.onClick;
|
|
10645
10704
|
var theme = useTheme();
|
|
10646
|
-
return (jsxs(Container$
|
|
10705
|
+
return (jsxs(Container$x, __assign$1({ theme: theme }, { children: [jsx(Container$x, { 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));
|
|
10647
10706
|
};
|
|
10648
|
-
var templateObject_1$
|
|
10707
|
+
var templateObject_1$T, templateObject_2$A;
|
|
10649
10708
|
|
|
10650
10709
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10651
10710
|
var color = _a.color;
|
|
@@ -10659,7 +10718,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10659
10718
|
margin: '0.938rem 4.188rem',
|
|
10660
10719
|
});
|
|
10661
10720
|
});
|
|
10662
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10721
|
+
var Bar = newStyled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
10663
10722
|
var backgroundColor = _a.backgroundColor;
|
|
10664
10723
|
return backgroundColor;
|
|
10665
10724
|
}, function (_a) {
|
|
@@ -10682,7 +10741,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10682
10741
|
position: 'absolute',
|
|
10683
10742
|
});
|
|
10684
10743
|
});
|
|
10685
|
-
var Container$
|
|
10744
|
+
var Container$w = newStyled.div(function (_a) {
|
|
10686
10745
|
var widthAuto = _a.widthAuto;
|
|
10687
10746
|
return ({
|
|
10688
10747
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10696,9 +10755,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10696
10755
|
var ProgressBar = function (_a) {
|
|
10697
10756
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10698
10757
|
var theme = useTheme();
|
|
10699
|
-
return (jsxs$1(Container$
|
|
10758
|
+
return (jsxs$1(Container$w, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
10700
10759
|
};
|
|
10701
|
-
var templateObject_1$
|
|
10760
|
+
var templateObject_1$S;
|
|
10702
10761
|
|
|
10703
10762
|
var getStylesBySize$3 = function (size) {
|
|
10704
10763
|
switch (size) {
|
|
@@ -10719,7 +10778,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
10719
10778
|
};
|
|
10720
10779
|
}
|
|
10721
10780
|
};
|
|
10722
|
-
var Container$
|
|
10781
|
+
var Container$v = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
10723
10782
|
var backgroundColor = _a.backgroundColor;
|
|
10724
10783
|
return backgroundColor;
|
|
10725
10784
|
}, function (_a) {
|
|
@@ -10747,9 +10806,9 @@ var Container$u = newStyled.div(templateObject_1$P || (templateObject_1$P = __ma
|
|
|
10747
10806
|
var IconButton = function (_a) {
|
|
10748
10807
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
10749
10808
|
var theme = useTheme();
|
|
10750
|
-
return (jsx$1(Container$
|
|
10809
|
+
return (jsx$1(Container$v, __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));
|
|
10751
10810
|
};
|
|
10752
|
-
var templateObject_1$
|
|
10811
|
+
var templateObject_1$R;
|
|
10753
10812
|
|
|
10754
10813
|
var TooltipArrow = function (_a) {
|
|
10755
10814
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -10829,7 +10888,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
10829
10888
|
}
|
|
10830
10889
|
};
|
|
10831
10890
|
|
|
10832
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
10891
|
+
var Wrapper$5 = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
10833
10892
|
var position = _a.position;
|
|
10834
10893
|
return getWrapperFlexDirection(position);
|
|
10835
10894
|
});
|
|
@@ -10853,11 +10912,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
10853
10912
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
10854
10913
|
return actual === expected ? margin : '0';
|
|
10855
10914
|
};
|
|
10856
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
10915
|
+
var ContentWrapper = newStyled.div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
10857
10916
|
var borderColor = _a.borderColor;
|
|
10858
10917
|
return borderColor;
|
|
10859
10918
|
});
|
|
10860
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
10919
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __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) {
|
|
10861
10920
|
var position = _a.position;
|
|
10862
10921
|
return getArrowRotation(position);
|
|
10863
10922
|
}, function (_a) {
|
|
@@ -10867,17 +10926,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$o || (templateObject_
|
|
|
10867
10926
|
var position = _a.position;
|
|
10868
10927
|
return getArrowContainerMargin(position);
|
|
10869
10928
|
});
|
|
10870
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
10929
|
+
var TooltipText = newStyled.div(templateObject_4$j || (templateObject_4$j = __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) {
|
|
10871
10930
|
var color = _a.color;
|
|
10872
10931
|
return color;
|
|
10873
10932
|
});
|
|
10874
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
10933
|
+
var TopSection = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
10875
10934
|
var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
10876
10935
|
var color = _a.color;
|
|
10877
10936
|
return color;
|
|
10878
10937
|
});
|
|
10879
10938
|
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"])));
|
|
10880
|
-
var templateObject_1$
|
|
10939
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$b, templateObject_6$7, templateObject_7$4;
|
|
10881
10940
|
|
|
10882
10941
|
var Tooltip = function (_a) {
|
|
10883
10942
|
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;
|
|
@@ -11029,9 +11088,9 @@ var ContainerStyles = {
|
|
|
11029
11088
|
},
|
|
11030
11089
|
};
|
|
11031
11090
|
|
|
11032
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11033
|
-
var Container$
|
|
11034
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11091
|
+
var Wrapper$4 = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11092
|
+
var Container$u = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11093
|
+
var Input$2 = newStyled.input(templateObject_2$y || (templateObject_2$y = __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) {
|
|
11035
11094
|
var disabled = _a.disabled;
|
|
11036
11095
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11037
11096
|
});
|
|
@@ -11046,9 +11105,9 @@ var RadioInput = function (_a) {
|
|
|
11046
11105
|
var value = event.currentTarget.value;
|
|
11047
11106
|
onChange({ value: value, label: label });
|
|
11048
11107
|
};
|
|
11049
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11108
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$u, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11050
11109
|
};
|
|
11051
|
-
var templateObject_1$
|
|
11110
|
+
var templateObject_1$P, templateObject_2$y;
|
|
11052
11111
|
|
|
11053
11112
|
var RadioGroupInput = function (_a) {
|
|
11054
11113
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11062,37 +11121,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11062
11121
|
}) }), void 0));
|
|
11063
11122
|
};
|
|
11064
11123
|
|
|
11065
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11066
|
-
var Container$
|
|
11124
|
+
var Wrapper$3 = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11125
|
+
var Container$t = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
11067
11126
|
var Minimalistic = function (_a) {
|
|
11068
11127
|
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;
|
|
11069
11128
|
var theme = useTheme();
|
|
11070
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
11129
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$t, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$t, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11071
11130
|
};
|
|
11072
|
-
var templateObject_1$
|
|
11131
|
+
var templateObject_1$O, templateObject_2$x;
|
|
11073
11132
|
|
|
11074
|
-
var Container$
|
|
11075
|
-
var Title$4 = newStyled.h1(templateObject_2$
|
|
11076
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11077
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11133
|
+
var Container$s = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11134
|
+
var Title$4 = newStyled.h1(templateObject_2$w || (templateObject_2$w = __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; });
|
|
11135
|
+
var Details$1 = newStyled.span(templateObject_3$o || (templateObject_3$o = __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; });
|
|
11136
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
11078
11137
|
var Simple = function (_a) {
|
|
11079
11138
|
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;
|
|
11080
11139
|
var theme = useTheme();
|
|
11081
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11140
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$s, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11082
11141
|
};
|
|
11083
|
-
var templateObject_1$
|
|
11142
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$o, templateObject_4$i;
|
|
11084
11143
|
|
|
11085
11144
|
var Bundle = {
|
|
11086
11145
|
Minimalistic: Minimalistic,
|
|
11087
11146
|
Simple: Simple,
|
|
11088
11147
|
};
|
|
11089
11148
|
|
|
11090
|
-
var Container$
|
|
11149
|
+
var Container$r = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
11091
11150
|
var Tag$1 = function (_a) {
|
|
11092
11151
|
var text = _a.text, className = _a.className;
|
|
11093
|
-
return jsx$1(Container$
|
|
11152
|
+
return jsx$1(Container$r, __assign$1({ className: className }, { children: text }), void 0);
|
|
11094
11153
|
};
|
|
11095
|
-
var templateObject_1$
|
|
11154
|
+
var templateObject_1$M;
|
|
11096
11155
|
|
|
11097
11156
|
var getStylesBySize$2 = function (size) {
|
|
11098
11157
|
switch (size) {
|
|
@@ -11195,11 +11254,11 @@ var Timer = function (_a) {
|
|
|
11195
11254
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11196
11255
|
};
|
|
11197
11256
|
|
|
11198
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11257
|
+
var Label$1 = newStyled.span(templateObject_1$L || (templateObject_1$L = __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) {
|
|
11199
11258
|
var color = _a.color;
|
|
11200
11259
|
return color;
|
|
11201
11260
|
});
|
|
11202
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11261
|
+
var MandatoryIcon = newStyled.span(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
11203
11262
|
var color = _a.color;
|
|
11204
11263
|
return color;
|
|
11205
11264
|
});
|
|
@@ -11208,7 +11267,7 @@ var InputLabel = function (_a) {
|
|
|
11208
11267
|
var theme = useTheme();
|
|
11209
11268
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
11210
11269
|
};
|
|
11211
|
-
var templateObject_1$
|
|
11270
|
+
var templateObject_1$L, templateObject_2$v;
|
|
11212
11271
|
|
|
11213
11272
|
/**
|
|
11214
11273
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11262,20 +11321,20 @@ var formatPrice = function (value, _a) {
|
|
|
11262
11321
|
}).format(valueToFormat);
|
|
11263
11322
|
};
|
|
11264
11323
|
|
|
11265
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11266
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
11324
|
+
var ErrorText = newStyled.h3(templateObject_1$K || (templateObject_1$K = __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; });
|
|
11325
|
+
var ErrorContainer = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
11267
11326
|
var Error$1 = function (_a) {
|
|
11268
11327
|
var error = _a.error;
|
|
11269
11328
|
var theme = useTheme();
|
|
11270
11329
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
11271
11330
|
};
|
|
11272
|
-
var templateObject_1$
|
|
11331
|
+
var templateObject_1$K, templateObject_2$u;
|
|
11273
11332
|
|
|
11274
|
-
var Container$
|
|
11275
|
-
var color = _a.color;
|
|
11276
|
-
return color;
|
|
11333
|
+
var Container$q = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
11334
|
+
var color = _a.color, hasError = _a.hasError;
|
|
11335
|
+
return (!hasError ? color : '');
|
|
11277
11336
|
});
|
|
11278
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
11337
|
+
var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
11279
11338
|
var padding = _a.padding;
|
|
11280
11339
|
return padding;
|
|
11281
11340
|
}, function (_a) {
|
|
@@ -11285,8 +11344,8 @@ var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __
|
|
|
11285
11344
|
var borderRadius = _a.borderRadius;
|
|
11286
11345
|
return borderRadius;
|
|
11287
11346
|
}, function (_a) {
|
|
11288
|
-
var border = _a.border;
|
|
11289
|
-
return border;
|
|
11347
|
+
var border = _a.border, hasError = _a.hasError;
|
|
11348
|
+
return (hasError ? hasError : border);
|
|
11290
11349
|
}, function (_a) {
|
|
11291
11350
|
var lineHeight = _a.lineHeight;
|
|
11292
11351
|
return lineHeight;
|
|
@@ -11300,11 +11359,19 @@ var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __
|
|
|
11300
11359
|
var placeholderColor = _a.placeholderColor;
|
|
11301
11360
|
return placeholderColor;
|
|
11302
11361
|
}, function (_a) {
|
|
11303
|
-
var highlight = _a.highlight;
|
|
11304
|
-
return highlight;
|
|
11362
|
+
var highlight = _a.highlight, hasError = _a.hasError;
|
|
11363
|
+
return (!hasError ? highlight : '');
|
|
11364
|
+
}, function (_a) {
|
|
11365
|
+
var focusBorder = _a.focusBorder, hasError = _a.hasError;
|
|
11366
|
+
return (focusBorder && !hasError ? "border: ".concat(focusBorder) : '');
|
|
11305
11367
|
}, function (_a) {
|
|
11306
11368
|
var boxShadow = _a.boxShadow;
|
|
11307
11369
|
return boxShadow;
|
|
11370
|
+
}, function (_a) {
|
|
11371
|
+
var inlinePlaceholder = _a.inlinePlaceholder;
|
|
11372
|
+
return inlinePlaceholder
|
|
11373
|
+
? "& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }"
|
|
11374
|
+
: '';
|
|
11308
11375
|
}, function (_a) {
|
|
11309
11376
|
var disabledBackgroundColor = _a.disabledBackgroundColor;
|
|
11310
11377
|
return disabledBackgroundColor;
|
|
@@ -11317,19 +11384,26 @@ var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __
|
|
|
11317
11384
|
}, function (_a) {
|
|
11318
11385
|
var disabledColor = _a.disabledColor;
|
|
11319
11386
|
return disabledColor;
|
|
11387
|
+
}, function (_a) {
|
|
11388
|
+
var internalValue = _a.internalValue;
|
|
11389
|
+
return internalValue
|
|
11390
|
+
? "& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }"
|
|
11391
|
+
: '';
|
|
11320
11392
|
});
|
|
11321
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
11322
|
-
var size = _a.size;
|
|
11323
|
-
return (size === 'small' ? '36px' : '44px');
|
|
11393
|
+
var InputWrapper = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
11394
|
+
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
11395
|
+
return !inlinePlaceholder ? (size === 'small' ? '36px' : '44px') : '48px';
|
|
11324
11396
|
});
|
|
11325
|
-
var
|
|
11397
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
11398
|
+
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"])));
|
|
11399
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$n, templateObject_4$h, templateObject_5$a;
|
|
11326
11400
|
|
|
11327
11401
|
var BaseInput = function (_a) {
|
|
11328
11402
|
var _b;
|
|
11329
|
-
var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size"]);
|
|
11403
|
+
var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _d = _a.inputType, inputType = _d === void 0 ? 'text' : _d, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType"]);
|
|
11330
11404
|
var theme = useTheme();
|
|
11331
|
-
var
|
|
11332
|
-
var
|
|
11405
|
+
var _e = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : ''), internalValue = _e[0], setInternalValue = _e[1];
|
|
11406
|
+
var _f = useState(InputValidationType.Empty), status = _f[0], setStatus = _f[1];
|
|
11333
11407
|
var handleChange = function (_a) {
|
|
11334
11408
|
var target = _a.target;
|
|
11335
11409
|
if (onChange) {
|
|
@@ -11368,18 +11442,31 @@ var BaseInput = function (_a) {
|
|
|
11368
11442
|
placeholderColor: theme.component.input.placeholderColor,
|
|
11369
11443
|
disabledBackgroundColor: theme.colors.background.disabled,
|
|
11370
11444
|
disabledColor: theme.colors.text.disabled,
|
|
11371
|
-
fontSize:
|
|
11445
|
+
fontSize: inlinePlaceholder
|
|
11446
|
+
? theme.component.inputPlaceholder.fontSize
|
|
11447
|
+
: theme.component.input.fontSize,
|
|
11372
11448
|
fontWeight: theme.component.input.fontWeight,
|
|
11373
|
-
padding:
|
|
11449
|
+
padding: inlinePlaceholder
|
|
11450
|
+
? theme.component.inputPlaceholder.padding
|
|
11451
|
+
: theme.component.input.padding,
|
|
11374
11452
|
lineHeight: theme.component.input.lineHeight,
|
|
11375
11453
|
highlight: theme.colors.border.highlight,
|
|
11376
11454
|
boxShadow: theme.component.input.boxShadow,
|
|
11455
|
+
internalValue: internalValue,
|
|
11456
|
+
inlinePlaceholder: inlinePlaceholder,
|
|
11457
|
+
focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
|
|
11458
|
+
hasError: hasError ? theme.component.input.errorBorder : '',
|
|
11377
11459
|
};
|
|
11378
|
-
return (jsxs$1(Container$
|
|
11460
|
+
return (jsxs$1(Container$q, __assign$1({ color: status === InputValidationType.Valid
|
|
11379
11461
|
? theme.colors.shades['700'].color
|
|
11380
11462
|
: status === InputValidationType.Error
|
|
11381
11463
|
? theme.colors.semantic.urgent.color
|
|
11382
|
-
: '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type:
|
|
11464
|
+
: '', hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type: inputType, onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue, placeholder: inlinePlaceholder ? '' : placeholder }, rest, styling), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), inlinePlaceholder && internalValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
11465
|
+
if (onChange) {
|
|
11466
|
+
onChange('');
|
|
11467
|
+
}
|
|
11468
|
+
setInternalValue('');
|
|
11469
|
+
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
11383
11470
|
};
|
|
11384
11471
|
|
|
11385
11472
|
var Button$2 = function (_a) {
|
|
@@ -11396,11 +11483,11 @@ var Button$2 = function (_a) {
|
|
|
11396
11483
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11397
11484
|
};
|
|
11398
11485
|
|
|
11399
|
-
var Container$
|
|
11486
|
+
var Container$p = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
11400
11487
|
var theme = _a.theme;
|
|
11401
11488
|
return theme.component.inputCustom.input.borderRadius;
|
|
11402
11489
|
});
|
|
11403
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
11490
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
11404
11491
|
var theme = _a.theme;
|
|
11405
11492
|
return theme.component.inputCustom.button.borderRadius;
|
|
11406
11493
|
});
|
|
@@ -11413,23 +11500,23 @@ var Custom = function (_a) {
|
|
|
11413
11500
|
text: text,
|
|
11414
11501
|
disabled: rest.disabled,
|
|
11415
11502
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11416
|
-
return (jsx$1(Container$
|
|
11503
|
+
return (jsx$1(Container$p, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
11417
11504
|
};
|
|
11418
|
-
var templateObject_1$
|
|
11505
|
+
var templateObject_1$I, templateObject_2$s;
|
|
11419
11506
|
|
|
11420
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11507
|
+
var SuccessContainer = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
11421
11508
|
var size = _a.size;
|
|
11422
11509
|
return (size === 'small' ? '36px' : '');
|
|
11423
11510
|
});
|
|
11424
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
11425
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
11511
|
+
var SuccessMessage = newStyled.div(templateObject_2$r || (templateObject_2$r = __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"])));
|
|
11512
|
+
var SuccessText = newStyled.span(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
11426
11513
|
var Success = function (_a) {
|
|
11427
11514
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11428
11515
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
11429
11516
|
};
|
|
11430
|
-
var templateObject_1$
|
|
11517
|
+
var templateObject_1$H, templateObject_2$r, templateObject_3$m;
|
|
11431
11518
|
|
|
11432
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11519
|
+
var ButtonContainer = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
11433
11520
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11434
11521
|
return status === InputValidationType.Empty &&
|
|
11435
11522
|
type === 'primary' &&
|
|
@@ -11446,21 +11533,21 @@ var BasePlusButton = function (_a) {
|
|
|
11446
11533
|
}
|
|
11447
11534
|
return (jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
11448
11535
|
};
|
|
11449
|
-
var templateObject_1$
|
|
11536
|
+
var templateObject_1$G;
|
|
11450
11537
|
|
|
11451
|
-
var Container$
|
|
11452
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
11538
|
+
var Container$o = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
11539
|
+
var IconContainer$4 = newStyled.div(templateObject_2$q || (templateObject_2$q = __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; });
|
|
11453
11540
|
var BasePlusIcon = function (_a) {
|
|
11454
11541
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11455
11542
|
var theme = useTheme();
|
|
11456
11543
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11457
|
-
return (jsx$1(Container$
|
|
11544
|
+
return (jsx$1(Container$o, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
11458
11545
|
? theme.colors.shades['700'].color
|
|
11459
11546
|
: status === InputValidationType.Error
|
|
11460
11547
|
? theme.colors.semantic.urgent.color
|
|
11461
11548
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11462
11549
|
};
|
|
11463
|
-
var templateObject_1$
|
|
11550
|
+
var templateObject_1$F, templateObject_2$q;
|
|
11464
11551
|
|
|
11465
11552
|
var Input$1 = {
|
|
11466
11553
|
Simple: BaseInput,
|
|
@@ -11469,7 +11556,7 @@ var Input$1 = {
|
|
|
11469
11556
|
SimplePlusIcon: BasePlusIcon,
|
|
11470
11557
|
};
|
|
11471
11558
|
|
|
11472
|
-
var Container$
|
|
11559
|
+
var Container$n = newStyled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
11473
11560
|
var width = _a.width;
|
|
11474
11561
|
return width;
|
|
11475
11562
|
}, function (_a) {
|
|
@@ -11485,11 +11572,11 @@ var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
11485
11572
|
var PaymentMethod = function (_a) {
|
|
11486
11573
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11487
11574
|
var theme = useTheme();
|
|
11488
|
-
return (jsx$1(Container$
|
|
11575
|
+
return (jsx$1(Container$n, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
11489
11576
|
};
|
|
11490
|
-
var templateObject_1$
|
|
11577
|
+
var templateObject_1$E;
|
|
11491
11578
|
|
|
11492
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
11579
|
+
var Text$4 = newStyled.h3(templateObject_1$D || (templateObject_1$D = __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) {
|
|
11493
11580
|
var backgroundColor = _a.backgroundColor;
|
|
11494
11581
|
return backgroundColor;
|
|
11495
11582
|
}, function (_a) {
|
|
@@ -11501,27 +11588,27 @@ var OfferBanner = function (_a) {
|
|
|
11501
11588
|
var theme = useTheme();
|
|
11502
11589
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11503
11590
|
};
|
|
11504
|
-
var templateObject_1$
|
|
11591
|
+
var templateObject_1$D;
|
|
11505
11592
|
|
|
11506
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11507
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
11508
|
-
var Currency = newStyled.span(templateObject_3$
|
|
11509
|
-
var Container$
|
|
11593
|
+
var Wrapper$2 = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
11594
|
+
var GrandTotal = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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; });
|
|
11595
|
+
var Currency = newStyled.span(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
11596
|
+
var Container$m = newStyled.div(templateObject_4$g || (templateObject_4$g = __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; });
|
|
11510
11597
|
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"])));
|
|
11511
11598
|
var Total = function (_a) {
|
|
11512
11599
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11513
11600
|
var theme = useTheme();
|
|
11514
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
11601
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$m, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
11515
11602
|
};
|
|
11516
|
-
var templateObject_1$
|
|
11603
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$l, templateObject_4$g, templateObject_5$9;
|
|
11517
11604
|
|
|
11518
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11605
|
+
var Wrapper$1 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11519
11606
|
var color = _a.color;
|
|
11520
11607
|
return color;
|
|
11521
11608
|
});
|
|
11522
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
11523
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
11524
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
11609
|
+
var ItemContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
11610
|
+
var Item$2 = newStyled.h4(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
11611
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11525
11612
|
var color = _a.color;
|
|
11526
11613
|
return color;
|
|
11527
11614
|
});
|
|
@@ -11533,22 +11620,22 @@ var Subtotal = function (_a) {
|
|
|
11533
11620
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
11534
11621
|
})] }), void 0));
|
|
11535
11622
|
};
|
|
11536
|
-
var templateObject_1$
|
|
11623
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$k, templateObject_4$f;
|
|
11537
11624
|
|
|
11538
11625
|
var Totals = {
|
|
11539
11626
|
Total: Total,
|
|
11540
11627
|
Subtotal: Subtotal,
|
|
11541
11628
|
};
|
|
11542
11629
|
|
|
11543
|
-
var Container$
|
|
11544
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
11545
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
11546
|
-
var Details = newStyled.span(templateObject_4$
|
|
11630
|
+
var Container$l = newStyled.div(templateObject_1$A || (templateObject_1$A = __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; });
|
|
11631
|
+
var IconContainer$3 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
11632
|
+
var Text$3 = newStyled.p(templateObject_3$j || (templateObject_3$j = __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; });
|
|
11633
|
+
var Details = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
11547
11634
|
var Note = function (_a) {
|
|
11548
11635
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11549
|
-
return (jsxs$1(Container$
|
|
11636
|
+
return (jsxs$1(Container$l, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color }, { children: [jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11550
11637
|
};
|
|
11551
|
-
var templateObject_1$
|
|
11638
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$j, templateObject_4$e;
|
|
11552
11639
|
|
|
11553
11640
|
/* eslint-disable no-param-reassign */
|
|
11554
11641
|
var index$1 = function (breakpoints) {
|
|
@@ -11634,12 +11721,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11634
11721
|
literal: true,
|
|
11635
11722
|
});
|
|
11636
11723
|
|
|
11637
|
-
var Title$3 = newStyled.h1(templateObject_1$
|
|
11638
|
-
var Line = newStyled.div(templateObject_2$
|
|
11639
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
11724
|
+
var Title$3 = newStyled.h1(templateObject_1$z || (templateObject_1$z = __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; });
|
|
11725
|
+
var Line = newStyled.div(templateObject_2$m || (templateObject_2$m = __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; });
|
|
11726
|
+
var Row$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __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({
|
|
11640
11727
|
flexDirection: ['column', 'row'],
|
|
11641
11728
|
}));
|
|
11642
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
11729
|
+
var Col$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __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({
|
|
11643
11730
|
margin: ['0', '0 1.25rem'],
|
|
11644
11731
|
marginBottom: ['1.875rem', '0'],
|
|
11645
11732
|
alignItems: ['center', 'flex-start'],
|
|
@@ -11663,47 +11750,47 @@ var DeliveryDetails = function (_a) {
|
|
|
11663
11750
|
var theme = useTheme();
|
|
11664
11751
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
11665
11752
|
};
|
|
11666
|
-
var templateObject_1$
|
|
11753
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
11667
11754
|
|
|
11668
|
-
var Container$
|
|
11669
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
11755
|
+
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
11756
|
+
var H1$2 = newStyled.h1(templateObject_2$l || (templateObject_2$l = __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; });
|
|
11670
11757
|
var ScrollToTop = function (_a) {
|
|
11671
11758
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11672
11759
|
var theme = useTheme();
|
|
11673
|
-
return (jsxs$1(Container$
|
|
11760
|
+
return (jsxs$1(Container$k, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
11674
11761
|
};
|
|
11675
|
-
var templateObject_1$
|
|
11762
|
+
var templateObject_1$y, templateObject_2$l;
|
|
11676
11763
|
|
|
11677
|
-
var Container$
|
|
11678
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
11764
|
+
var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
11765
|
+
var H1$1 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __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; });
|
|
11679
11766
|
var OrderBar = function (_a) {
|
|
11680
11767
|
var message = _a.message;
|
|
11681
11768
|
var theme = useTheme();
|
|
11682
|
-
return (jsxs$1(Container$
|
|
11769
|
+
return (jsxs$1(Container$j, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
11683
11770
|
};
|
|
11684
|
-
var templateObject_1$
|
|
11771
|
+
var templateObject_1$x, templateObject_2$k;
|
|
11685
11772
|
|
|
11686
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
11687
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
11688
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
11689
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
11773
|
+
var TableElement = newStyled.table(templateObject_1$w || (templateObject_1$w = __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; });
|
|
11774
|
+
var TableCell = newStyled.td(templateObject_2$j || (templateObject_2$j = __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; });
|
|
11775
|
+
var TableHead = newStyled.th(templateObject_3$h || (templateObject_3$h = __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; });
|
|
11776
|
+
var TableRow = newStyled.tr(templateObject_4$c || (templateObject_4$c = __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; });
|
|
11690
11777
|
var SizeTable = function (_a) {
|
|
11691
11778
|
var headers = _a.headers, data = _a.data;
|
|
11692
11779
|
var theme = useTheme();
|
|
11693
11780
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
11694
11781
|
};
|
|
11695
|
-
var templateObject_1$
|
|
11782
|
+
var templateObject_1$w, templateObject_2$j, templateObject_3$h, templateObject_4$c;
|
|
11696
11783
|
|
|
11697
|
-
var Img = newStyled.img(templateObject_1$
|
|
11784
|
+
var Img = newStyled.img(templateObject_1$v || (templateObject_1$v = __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; });
|
|
11698
11785
|
var Image = function (_a) {
|
|
11699
11786
|
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;
|
|
11700
11787
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
11701
11788
|
};
|
|
11702
|
-
var templateObject_1$
|
|
11789
|
+
var templateObject_1$v;
|
|
11703
11790
|
|
|
11704
|
-
var Container$
|
|
11705
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
11706
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
11791
|
+
var Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
11792
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
11793
|
+
var DescriptionContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __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({
|
|
11707
11794
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11708
11795
|
}));
|
|
11709
11796
|
var Title$2 = newStyled.h2(function (_a) {
|
|
@@ -11726,7 +11813,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
11726
11813
|
margin: '0.063rem 0',
|
|
11727
11814
|
});
|
|
11728
11815
|
});
|
|
11729
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
11816
|
+
var PriceContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __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) {
|
|
11730
11817
|
var withTag = _a.withTag; _a.theme;
|
|
11731
11818
|
return withTag
|
|
11732
11819
|
? mediaQueries({
|
|
@@ -11739,9 +11826,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
11739
11826
|
var SimpleOrderItem = function (_a) {
|
|
11740
11827
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
11741
11828
|
var theme = useTheme();
|
|
11742
|
-
return (jsxs$1(Container$
|
|
11829
|
+
return (jsxs$1(Container$i, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
11743
11830
|
};
|
|
11744
|
-
var templateObject_1$
|
|
11831
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$g, templateObject_4$b, templateObject_5$7;
|
|
11745
11832
|
|
|
11746
11833
|
function formatDate(date) {
|
|
11747
11834
|
var day = date.getDate();
|
|
@@ -11750,15 +11837,15 @@ function formatDate(date) {
|
|
|
11750
11837
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
11751
11838
|
}
|
|
11752
11839
|
|
|
11753
|
-
var Container$
|
|
11754
|
-
var Heading = newStyled.div(templateObject_2$
|
|
11840
|
+
var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
11841
|
+
var Heading = newStyled.div(templateObject_2$h || (templateObject_2$h = __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({
|
|
11755
11842
|
fontSize: ['14px', '16px'],
|
|
11756
11843
|
lineHeight: ['22px', '24px'],
|
|
11757
11844
|
}));
|
|
11758
|
-
var Content = newStyled.div(templateObject_3$
|
|
11845
|
+
var Content = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), mediaQueries({
|
|
11759
11846
|
flexDirection: ['column', 'row'],
|
|
11760
11847
|
}));
|
|
11761
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
11848
|
+
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
|
|
11762
11849
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
11763
11850
|
}));
|
|
11764
11851
|
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({
|
|
@@ -11773,17 +11860,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
11773
11860
|
var Review = function (_a) {
|
|
11774
11861
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
11775
11862
|
var theme = useTheme();
|
|
11776
|
-
return (jsxs$1(Container$
|
|
11863
|
+
return (jsxs$1(Container$h, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
11777
11864
|
};
|
|
11778
|
-
var templateObject_1$
|
|
11865
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
11779
11866
|
|
|
11780
|
-
var List = newStyled.ul(templateObject_1$
|
|
11781
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
11782
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
11783
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
11867
|
+
var List = newStyled.ul(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
11868
|
+
var Item$1 = newStyled.li(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
11869
|
+
var DropdownWrapper = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
11870
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
11784
11871
|
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; });
|
|
11785
11872
|
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; });
|
|
11786
|
-
var templateObject_1$
|
|
11873
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
11787
11874
|
|
|
11788
11875
|
var DropdownListIcons = function (_a) {
|
|
11789
11876
|
var items = _a.items;
|
|
@@ -11796,7 +11883,7 @@ var Dropdown = function (_a) {
|
|
|
11796
11883
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
11797
11884
|
};
|
|
11798
11885
|
|
|
11799
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
11886
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$r || (templateObject_1$r = __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; });
|
|
11800
11887
|
var AmazonButton = function (_a) {
|
|
11801
11888
|
var onClick = _a.onClick;
|
|
11802
11889
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -11805,15 +11892,15 @@ var PaypalButton = function (_a) {
|
|
|
11805
11892
|
var onClick = _a.onClick;
|
|
11806
11893
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
11807
11894
|
};
|
|
11808
|
-
var templateObject_1$
|
|
11895
|
+
var templateObject_1$r;
|
|
11809
11896
|
|
|
11810
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
11811
|
-
var Col = newStyled.div(templateObject_2$
|
|
11812
|
-
var Row = newStyled.div(templateObject_3$
|
|
11897
|
+
var Wrapper = newStyled.div(templateObject_1$q || (templateObject_1$q = __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'); });
|
|
11898
|
+
var Col = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
11899
|
+
var Row = newStyled.div(templateObject_3$d || (templateObject_3$d = __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) {
|
|
11813
11900
|
return props.rightToLeft &&
|
|
11814
11901
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
11815
11902
|
});
|
|
11816
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
11903
|
+
var H5 = newStyled.h5(templateObject_4$8 || (templateObject_4$8 = __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; });
|
|
11817
11904
|
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; });
|
|
11818
11905
|
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; });
|
|
11819
11906
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -11821,7 +11908,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
11821
11908
|
var theme = useTheme();
|
|
11822
11909
|
return (jsxs$1(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
11823
11910
|
};
|
|
11824
|
-
var templateObject_1$
|
|
11911
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
11825
11912
|
|
|
11826
11913
|
var index = /*#__PURE__*/Object.freeze({
|
|
11827
11914
|
__proto__: null,
|
|
@@ -11842,8 +11929,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
11842
11929
|
height: height,
|
|
11843
11930
|
});
|
|
11844
11931
|
});
|
|
11845
|
-
var Container$
|
|
11846
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
11932
|
+
var Container$g = newStyled.a(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
11933
|
+
var H1 = newStyled.h1(templateObject_2$e || (templateObject_2$e = __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; });
|
|
11847
11934
|
var getStylesBySize = function (size) {
|
|
11848
11935
|
switch (size) {
|
|
11849
11936
|
case ComponentSize.Medium:
|
|
@@ -11869,8 +11956,8 @@ var getStylesBySize = function (size) {
|
|
|
11869
11956
|
};
|
|
11870
11957
|
}
|
|
11871
11958
|
};
|
|
11872
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
11873
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
11959
|
+
var TopTagContainer$1 = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
11960
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
11874
11961
|
var ProductItemMobile = function (_a) {
|
|
11875
11962
|
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;
|
|
11876
11963
|
var theme = useTheme();
|
|
@@ -11883,32 +11970,32 @@ var ProductItemMobile = function (_a) {
|
|
|
11883
11970
|
_a[ComponentSize.Small] = 2,
|
|
11884
11971
|
_a)[size];
|
|
11885
11972
|
}, [size]);
|
|
11886
|
-
return (jsxs(Container$
|
|
11973
|
+
return (jsxs(Container$g, __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(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
11887
11974
|
};
|
|
11888
|
-
var templateObject_1$
|
|
11975
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c, templateObject_4$7;
|
|
11889
11976
|
|
|
11890
|
-
var Container$
|
|
11977
|
+
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
11891
11978
|
function withProductGrid(ProductItemComponent, data) {
|
|
11892
11979
|
function WithProductGrid(props) {
|
|
11893
|
-
return (jsx$1(Container$
|
|
11980
|
+
return (jsx$1(Container$f, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
11894
11981
|
}
|
|
11895
11982
|
/* istanbul ignore next */
|
|
11896
11983
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
11897
11984
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
11898
11985
|
return WithProductGrid;
|
|
11899
11986
|
}
|
|
11900
|
-
var templateObject_1$
|
|
11987
|
+
var templateObject_1$o;
|
|
11901
11988
|
|
|
11902
11989
|
var Collection = {
|
|
11903
11990
|
ProductItemMobile: ProductItemMobile,
|
|
11904
11991
|
withProductGrid: withProductGrid,
|
|
11905
11992
|
};
|
|
11906
11993
|
|
|
11907
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
11994
|
+
var Backdrop = newStyled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
11908
11995
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
11909
11996
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
11910
11997
|
});
|
|
11911
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
11998
|
+
var Sidebar = newStyled.div(templateObject_2$d || (templateObject_2$d = __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) {
|
|
11912
11999
|
var width = _a.width;
|
|
11913
12000
|
return width;
|
|
11914
12001
|
}, function (_a) {
|
|
@@ -11949,28 +12036,28 @@ var Drawer = function (_a) {
|
|
|
11949
12036
|
}, [isOpen, onClose, onOpen]);
|
|
11950
12037
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
11951
12038
|
};
|
|
11952
|
-
var templateObject_1$
|
|
12039
|
+
var templateObject_1$n, templateObject_2$d;
|
|
11953
12040
|
|
|
11954
|
-
var Container$
|
|
12041
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
11955
12042
|
var size = _a.size;
|
|
11956
12043
|
return (size ? size : '100%');
|
|
11957
12044
|
}, function (_a) {
|
|
11958
12045
|
var size = _a.size;
|
|
11959
12046
|
return (size ? size : '100%');
|
|
11960
12047
|
});
|
|
11961
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12048
|
+
var Animation = newStyled.div(templateObject_2$c || (templateObject_2$c = __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) {
|
|
11962
12049
|
var animationDuration = _a.animationDuration;
|
|
11963
12050
|
return animationDuration;
|
|
11964
12051
|
});
|
|
11965
12052
|
var Spinner = function (_a) {
|
|
11966
12053
|
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;
|
|
11967
|
-
return (jsx$1(Container$
|
|
12054
|
+
return (jsx$1(Container$e, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
11968
12055
|
};
|
|
11969
|
-
var templateObject_1$
|
|
12056
|
+
var templateObject_1$m, templateObject_2$c;
|
|
11970
12057
|
|
|
11971
|
-
var UL = newStyled.ul(templateObject_1$
|
|
11972
|
-
var LI = newStyled.li(templateObject_2$
|
|
11973
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12058
|
+
var UL = newStyled.ul(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
12059
|
+
var LI = newStyled.li(templateObject_2$b || (templateObject_2$b = __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; });
|
|
12060
|
+
var CloseIconContainer = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
11974
12061
|
var Tags = function (_a) {
|
|
11975
12062
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
11976
12063
|
var theme = useTheme();
|
|
@@ -11978,7 +12065,7 @@ var Tags = function (_a) {
|
|
|
11978
12065
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
11979
12066
|
}) }), void 0));
|
|
11980
12067
|
};
|
|
11981
|
-
var templateObject_1$
|
|
12068
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$b;
|
|
11982
12069
|
|
|
11983
12070
|
function FilteringDropdown(_a) {
|
|
11984
12071
|
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;
|
|
@@ -12011,12 +12098,12 @@ function FilteringDropdown(_a) {
|
|
|
12011
12098
|
}) }, void 0)] }), void 0));
|
|
12012
12099
|
}
|
|
12013
12100
|
|
|
12014
|
-
var Container$
|
|
12015
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12016
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12101
|
+
var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
12102
|
+
var IconContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
12103
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12017
12104
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12018
12105
|
}));
|
|
12019
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12106
|
+
var PageNumber = newStyled.span(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
12020
12107
|
var bold = _a.bold;
|
|
12021
12108
|
return (bold ? '700' : '500');
|
|
12022
12109
|
}, function (_a) {
|
|
@@ -12030,7 +12117,7 @@ var PageNumber = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __ma
|
|
|
12030
12117
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12031
12118
|
width: ['1.25rem', '1.875rem'],
|
|
12032
12119
|
}));
|
|
12033
|
-
var templateObject_1$
|
|
12120
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$a, templateObject_4$6;
|
|
12034
12121
|
|
|
12035
12122
|
var Pagination = function (_a) {
|
|
12036
12123
|
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;
|
|
@@ -12043,10 +12130,10 @@ var Pagination = function (_a) {
|
|
|
12043
12130
|
setPage(page);
|
|
12044
12131
|
onChange(page);
|
|
12045
12132
|
};
|
|
12046
|
-
return (jsxs$1(Container$
|
|
12133
|
+
return (jsxs$1(Container$d, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12047
12134
|
};
|
|
12048
12135
|
|
|
12049
|
-
var Container$
|
|
12136
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __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({
|
|
12050
12137
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12051
12138
|
}));
|
|
12052
12139
|
var Description$1 = newStyled.div({
|
|
@@ -12063,25 +12150,25 @@ var Description$1 = newStyled.div({
|
|
|
12063
12150
|
var ProductItem = function (_a) {
|
|
12064
12151
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12065
12152
|
var theme = useTheme();
|
|
12066
|
-
return (jsxs$1(Container$
|
|
12153
|
+
return (jsxs$1(Container$c, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12067
12154
|
};
|
|
12068
|
-
var templateObject_1$
|
|
12155
|
+
var templateObject_1$j;
|
|
12069
12156
|
|
|
12070
|
-
var Container$
|
|
12157
|
+
var Container$b = newStyled.div({
|
|
12071
12158
|
display: 'flex',
|
|
12072
12159
|
justifyContent: 'center',
|
|
12073
12160
|
padding: '1rem',
|
|
12074
12161
|
});
|
|
12075
12162
|
var Footer = function (_a) {
|
|
12076
12163
|
var text = _a.text, onClick = _a.onClick;
|
|
12077
|
-
return (jsx$1(Container$
|
|
12164
|
+
return (jsx$1(Container$b, { children: jsx$1(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12078
12165
|
};
|
|
12079
12166
|
|
|
12080
12167
|
var Ul = newStyled.ul({
|
|
12081
12168
|
margin: '0px',
|
|
12082
12169
|
padding: '0px',
|
|
12083
12170
|
});
|
|
12084
|
-
var Li = newStyled.li(templateObject_1$
|
|
12171
|
+
var Li = newStyled.li(templateObject_1$i || (templateObject_1$i = __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({
|
|
12085
12172
|
padding: [0, '0rem 1rem'],
|
|
12086
12173
|
borderRadius: [0, '0.5rem'],
|
|
12087
12174
|
}));
|
|
@@ -12093,20 +12180,20 @@ var Anchor = newStyled.a({
|
|
|
12093
12180
|
padding: 0,
|
|
12094
12181
|
textDecoration: 'none',
|
|
12095
12182
|
});
|
|
12096
|
-
var Container$
|
|
12183
|
+
var Container$a = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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({
|
|
12097
12184
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12098
12185
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12099
12186
|
borderRadius: ['0', '0.5rem'],
|
|
12100
12187
|
}));
|
|
12101
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12188
|
+
var Header$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12102
12189
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12103
12190
|
}));
|
|
12104
12191
|
var ResultsPanel = function (_a) {
|
|
12105
12192
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12106
12193
|
var theme = useTheme();
|
|
12107
|
-
return (jsxs$1(Container$
|
|
12194
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12108
12195
|
};
|
|
12109
|
-
var templateObject_1$
|
|
12196
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$9;
|
|
12110
12197
|
|
|
12111
12198
|
var Input = newStyled.input(function (props) { return ({
|
|
12112
12199
|
padding: props.theme.component.input.padding,
|
|
@@ -12137,7 +12224,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12137
12224
|
},
|
|
12138
12225
|
}); });
|
|
12139
12226
|
|
|
12140
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12227
|
+
var Button$1 = newStyled.button(templateObject_1$h || (templateObject_1$h = __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({
|
|
12141
12228
|
right: ['1rem', '7.75rem'],
|
|
12142
12229
|
top: ['0.75rem', '0.75rem'],
|
|
12143
12230
|
}));
|
|
@@ -12146,7 +12233,7 @@ var ClearButton = function (_a) {
|
|
|
12146
12233
|
var theme = useTheme();
|
|
12147
12234
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12148
12235
|
};
|
|
12149
|
-
var templateObject_1$
|
|
12236
|
+
var templateObject_1$h;
|
|
12150
12237
|
|
|
12151
12238
|
var useOnClickOutside = function (ref, handler) {
|
|
12152
12239
|
useEffect(function () {
|
|
@@ -12232,7 +12319,7 @@ var reducer = function (state, action) {
|
|
|
12232
12319
|
}
|
|
12233
12320
|
}
|
|
12234
12321
|
};
|
|
12235
|
-
var Container$
|
|
12322
|
+
var Container$9 = newStyled.div({
|
|
12236
12323
|
position: 'relative',
|
|
12237
12324
|
display: 'flex',
|
|
12238
12325
|
});
|
|
@@ -12268,7 +12355,7 @@ var SearchBar = function (_a) {
|
|
|
12268
12355
|
onClose();
|
|
12269
12356
|
}
|
|
12270
12357
|
};
|
|
12271
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
12358
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$9, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
|
|
12272
12359
|
if (e.key === 'Enter') {
|
|
12273
12360
|
e.preventDefault();
|
|
12274
12361
|
e.stopPropagation();
|
|
@@ -12542,36 +12629,36 @@ function useSwipeable(options) {
|
|
|
12542
12629
|
return handlers;
|
|
12543
12630
|
}
|
|
12544
12631
|
|
|
12545
|
-
var Container$
|
|
12546
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12547
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12632
|
+
var Container$8 = newStyled.div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
12633
|
+
var TopTagContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12634
|
+
var BottomTagContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12548
12635
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12549
12636
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12550
|
-
return (jsxs$1(Container$
|
|
12637
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, ref: ref }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, { children: topTag }, void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
12551
12638
|
});
|
|
12552
|
-
var templateObject_1$
|
|
12639
|
+
var templateObject_1$g, templateObject_2$8, templateObject_3$8;
|
|
12553
12640
|
|
|
12554
|
-
var Button = newStyled.button(templateObject_1$
|
|
12641
|
+
var Button = newStyled.button(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
12555
12642
|
var ArrowButton = function (_a) {
|
|
12556
12643
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12557
12644
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12558
12645
|
};
|
|
12559
|
-
var templateObject_1$
|
|
12646
|
+
var templateObject_1$f;
|
|
12560
12647
|
|
|
12561
|
-
var Container$
|
|
12648
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
12562
12649
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12563
12650
|
var SlideDots = function (_a) {
|
|
12564
12651
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12565
12652
|
var theme = useTheme();
|
|
12566
|
-
return (jsx$1(Container$
|
|
12653
|
+
return (jsx$1(Container$7, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12567
12654
|
? theme.colors.shades.white.color
|
|
12568
12655
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12569
12656
|
};
|
|
12570
|
-
var templateObject_1$
|
|
12657
|
+
var templateObject_1$e;
|
|
12571
12658
|
|
|
12572
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12573
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
12574
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
12659
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
12660
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12661
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12575
12662
|
var SlideNavigation = function (_a) {
|
|
12576
12663
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12577
12664
|
var theme = useTheme();
|
|
@@ -12583,9 +12670,9 @@ var SlideNavigation = function (_a) {
|
|
|
12583
12670
|
onNavigate(selectedIndex + 1);
|
|
12584
12671
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12585
12672
|
};
|
|
12586
|
-
var templateObject_1$
|
|
12673
|
+
var templateObject_1$d, templateObject_2$7, templateObject_3$7;
|
|
12587
12674
|
|
|
12588
|
-
var Container$
|
|
12675
|
+
var Container$6 = newStyled.div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
12589
12676
|
var ProductGalleryMobile = function (_a) {
|
|
12590
12677
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12591
12678
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12607,9 +12694,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12607
12694
|
useEffect(function () {
|
|
12608
12695
|
setSelectedImage(images[index]);
|
|
12609
12696
|
}, [index, images]);
|
|
12610
|
-
return (jsxs$1(Container$
|
|
12697
|
+
return (jsxs$1(Container$6, { children: [jsx$1(ImageProductWithTags, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12611
12698
|
};
|
|
12612
|
-
var templateObject_1$
|
|
12699
|
+
var templateObject_1$c;
|
|
12613
12700
|
|
|
12614
12701
|
var Portal = function (_a) {
|
|
12615
12702
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -12742,14 +12829,14 @@ var react = __toCommonJS(react_exports);
|
|
|
12742
12829
|
var visibleStyle = function (_a) {
|
|
12743
12830
|
var opened = _a.opened;
|
|
12744
12831
|
return opened
|
|
12745
|
-
? css(templateObject_1$
|
|
12832
|
+
? css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
12746
12833
|
};
|
|
12747
12834
|
var transformStyle = function (_a) {
|
|
12748
12835
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
12749
12836
|
return opened
|
|
12750
|
-
? css(templateObject_3$
|
|
12837
|
+
? css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
12751
12838
|
};
|
|
12752
|
-
var Container$
|
|
12839
|
+
var Container$5 = 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({
|
|
12753
12840
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
12754
12841
|
}), visibleStyle, transformStyle);
|
|
12755
12842
|
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);
|
|
@@ -12762,7 +12849,7 @@ var Modal = function (_a) {
|
|
|
12762
12849
|
}
|
|
12763
12850
|
close();
|
|
12764
12851
|
};
|
|
12765
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
12852
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$5, __assign$1({ opened: opened, maxFullScreen: maxFullScreen }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
12766
12853
|
};
|
|
12767
12854
|
var modalEvent = function (id, detail) {
|
|
12768
12855
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -12790,39 +12877,39 @@ var useModal = function (id) {
|
|
|
12790
12877
|
close: close,
|
|
12791
12878
|
}); }, [close, open, opened]);
|
|
12792
12879
|
};
|
|
12793
|
-
var templateObject_1$
|
|
12880
|
+
var templateObject_1$b, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$2;
|
|
12794
12881
|
|
|
12795
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
12882
|
+
var Text$2 = newStyled.span(templateObject_1$a || (templateObject_1$a = __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; });
|
|
12796
12883
|
var Title$1 = function (_a) {
|
|
12797
12884
|
var title = _a.title;
|
|
12798
12885
|
var theme = useTheme();
|
|
12799
12886
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
12800
12887
|
};
|
|
12801
|
-
var templateObject_1$
|
|
12888
|
+
var templateObject_1$a;
|
|
12802
12889
|
|
|
12803
|
-
var P = newStyled.p(templateObject_1$
|
|
12890
|
+
var P = newStyled.p(templateObject_1$9 || (templateObject_1$9 = __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; });
|
|
12804
12891
|
var Promo = function (_a) {
|
|
12805
12892
|
var text = _a.text;
|
|
12806
12893
|
var theme = useTheme();
|
|
12807
12894
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
12808
12895
|
};
|
|
12809
|
-
var templateObject_1$
|
|
12896
|
+
var templateObject_1$9;
|
|
12810
12897
|
|
|
12811
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
12898
|
+
var Text$1 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __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; });
|
|
12812
12899
|
var Description = function (_a) {
|
|
12813
12900
|
var text = _a.text;
|
|
12814
12901
|
var theme = useTheme();
|
|
12815
12902
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
12816
12903
|
};
|
|
12817
|
-
var templateObject_1$
|
|
12904
|
+
var templateObject_1$8;
|
|
12818
12905
|
|
|
12819
|
-
var Container$
|
|
12906
|
+
var Container$4 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"); });
|
|
12820
12907
|
var CloseButton = function (_a) {
|
|
12821
12908
|
var onClick = _a.onClick, size = _a.size;
|
|
12822
12909
|
var theme = useTheme();
|
|
12823
|
-
return (jsx$1(Container$
|
|
12910
|
+
return (jsx$1(Container$4, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
12824
12911
|
};
|
|
12825
|
-
var templateObject_1$
|
|
12912
|
+
var templateObject_1$7;
|
|
12826
12913
|
|
|
12827
12914
|
var CartProductItem = {
|
|
12828
12915
|
Title: Title$1,
|
|
@@ -12832,10 +12919,10 @@ var CartProductItem = {
|
|
|
12832
12919
|
CloseButton: CloseButton,
|
|
12833
12920
|
};
|
|
12834
12921
|
|
|
12835
|
-
var Container$
|
|
12836
|
-
var Item = newStyled.span(templateObject_2$
|
|
12837
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
12838
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
12922
|
+
var Container$3 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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; });
|
|
12923
|
+
var Item = newStyled.span(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
12924
|
+
var Number$1 = newStyled(Item)(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
12925
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
12839
12926
|
var QuantityPicker = function (_a) {
|
|
12840
12927
|
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;
|
|
12841
12928
|
var theme = useTheme();
|
|
@@ -12858,9 +12945,9 @@ var QuantityPicker = function (_a) {
|
|
|
12858
12945
|
return clamp(value);
|
|
12859
12946
|
});
|
|
12860
12947
|
}, [value, clamp]);
|
|
12861
|
-
return (jsxs$1(Container$
|
|
12948
|
+
return (jsxs$1(Container$3, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
12862
12949
|
};
|
|
12863
|
-
var templateObject_1$
|
|
12950
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
12864
12951
|
|
|
12865
12952
|
var htmlReactParser = {exports: {}};
|
|
12866
12953
|
|
|
@@ -16641,16 +16728,16 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16641
16728
|
HTMLReactParser$1.attributesToProps;
|
|
16642
16729
|
HTMLReactParser$1.Element;
|
|
16643
16730
|
|
|
16644
|
-
var Container$
|
|
16645
|
-
var Card = newStyled.div(templateObject_2$
|
|
16646
|
-
var Tag = newStyled.div(templateObject_3$
|
|
16647
|
-
var Label = newStyled.div(templateObject_4$
|
|
16731
|
+
var Container$2 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
16732
|
+
var Card = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
16733
|
+
var Tag = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
16734
|
+
var Label = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
16648
16735
|
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"])));
|
|
16649
16736
|
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"])));
|
|
16650
16737
|
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"])));
|
|
16651
16738
|
var PackSelector = function (_a) {
|
|
16652
16739
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16653
|
-
return (jsx$1(Container$
|
|
16740
|
+
return (jsx$1(Container$2, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16654
16741
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16655
16742
|
}) }), void 0));
|
|
16656
16743
|
};
|
|
@@ -16667,28 +16754,28 @@ var PackCard = function (_a) {
|
|
|
16667
16754
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16668
16755
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16669
16756
|
};
|
|
16670
|
-
var templateObject_1$
|
|
16757
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7$1;
|
|
16671
16758
|
|
|
16672
|
-
var Title = newStyled.div(templateObject_1$
|
|
16673
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
16674
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
16759
|
+
var Title = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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; });
|
|
16760
|
+
var H2 = newStyled.h2(templateObject_2$3 || (templateObject_2$3 = __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; });
|
|
16761
|
+
var ArrowContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
16675
16762
|
var Accordion = function (_a) {
|
|
16676
16763
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
16677
16764
|
var theme = useTheme();
|
|
16678
16765
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
16679
16766
|
return (jsxs$1("div", __assign$1({ "data-testid": "FiltersAccordion" }, { children: [jsxs$1(Title, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
16680
16767
|
};
|
|
16681
|
-
var templateObject_1$
|
|
16768
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$3;
|
|
16682
16769
|
|
|
16683
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
16684
|
-
var Header = newStyled.div(templateObject_2$
|
|
16685
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
16686
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
16770
|
+
var SectionContent = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
16771
|
+
var Header = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
16772
|
+
var MobileHeader = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
16773
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
16687
16774
|
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; });
|
|
16688
16775
|
var ClearAll = newStyled.span(templateObject_6 || (templateObject_6 = __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; });
|
|
16689
16776
|
var MobileFooter = newStyled.div(templateObject_7 || (templateObject_7 = __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"])));
|
|
16690
16777
|
var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 = __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"])));
|
|
16691
|
-
var templateObject_1$
|
|
16778
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
16692
16779
|
|
|
16693
16780
|
var Filters = function (_a) {
|
|
16694
16781
|
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;
|
|
@@ -16704,9 +16791,12 @@ var Filters = function (_a) {
|
|
|
16704
16791
|
var handleCheckboxClick = useCallback(function (_a) {
|
|
16705
16792
|
var sectionIndex = _a.sectionIndex, itemIndex = _a.itemIndex, checked = _a.checked;
|
|
16706
16793
|
setFilterSection({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
16794
|
+
var currentFilter = filters[sectionIndex];
|
|
16707
16795
|
setCheckedItems(function (prev) {
|
|
16796
|
+
if (!currentFilter.isMultiselect)
|
|
16797
|
+
resetCheckedItems(__spreadArray([], prev, true));
|
|
16708
16798
|
return checked
|
|
16709
|
-
? __spreadArray(__spreadArray([], prev, true), [
|
|
16799
|
+
? __spreadArray(__spreadArray([], (currentFilter.isMultiselect ? prev : []), true), [
|
|
16710
16800
|
{ sectionIndex: sectionIndex, itemIndex: itemIndex, label: filters[sectionIndex].items[itemIndex].label },
|
|
16711
16801
|
], false) : prev.filter(function (item) { return item.sectionIndex !== sectionIndex || item.itemIndex !== itemIndex; });
|
|
16712
16802
|
});
|
|
@@ -16717,7 +16807,7 @@ var Filters = function (_a) {
|
|
|
16717
16807
|
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value, indexItems) {
|
|
16718
16808
|
return {
|
|
16719
16809
|
label: value.label,
|
|
16720
|
-
checked: itemIndex === indexItems ? checked : value.checked,
|
|
16810
|
+
checked: itemIndex === indexItems ? checked : filter.isMultiselect ? value.checked : false,
|
|
16721
16811
|
};
|
|
16722
16812
|
}) });
|
|
16723
16813
|
});
|
|
@@ -16729,11 +16819,15 @@ var Filters = function (_a) {
|
|
|
16729
16819
|
var element = document.getElementById("filter[".concat(sectionIndex, ",").concat(itemIndex, "]"));
|
|
16730
16820
|
simulateMouseClick(element);
|
|
16731
16821
|
};
|
|
16732
|
-
var
|
|
16733
|
-
|
|
16822
|
+
var resetCheckedItems = function (items) {
|
|
16823
|
+
items.forEach(function (item) {
|
|
16734
16824
|
var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
|
|
16735
16825
|
handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
|
|
16736
16826
|
});
|
|
16827
|
+
};
|
|
16828
|
+
var handleClearAllClick = function () {
|
|
16829
|
+
resetCheckedItems(checkedItems);
|
|
16830
|
+
setCheckedItems([]);
|
|
16737
16831
|
setFilter(function (prev) {
|
|
16738
16832
|
return prev.map(function (filter) {
|
|
16739
16833
|
return __assign$1(__assign$1({}, filter), { items: filter.items.map(function (value) {
|
|
@@ -16746,32 +16840,66 @@ var Filters = function (_a) {
|
|
|
16746
16840
|
});
|
|
16747
16841
|
onResetValues();
|
|
16748
16842
|
};
|
|
16749
|
-
return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex },
|
|
16843
|
+
return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item.label, checked: item.checked, itemIndex: itemIndex, sectionIndex: sectionIndex }, "".concat(item.checked, "-").concat(item.label))); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
|
|
16750
16844
|
};
|
|
16751
16845
|
var FilterCheckbox = function (_a) {
|
|
16752
16846
|
var sectionIndex = _a.sectionIndex, text = _a.text, itemIndex = _a.itemIndex, onChangeProp = _a.onChange, checked = _a.checked;
|
|
16753
|
-
var _b = React__default.useState(checked), defaultChecked = _b[0], setDefaultChecked = _b[1];
|
|
16754
16847
|
var onChange = useCallback(function (checked) {
|
|
16755
|
-
|
|
16756
|
-
}, []);
|
|
16757
|
-
|
|
16758
|
-
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: defaultChecked });
|
|
16759
|
-
}, [sectionIndex, itemIndex, onChangeProp, defaultChecked]);
|
|
16760
|
-
return (jsx$1(Checkbox, { onChange: onChange, checked: defaultChecked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
16848
|
+
onChangeProp({ sectionIndex: sectionIndex, itemIndex: itemIndex, checked: checked });
|
|
16849
|
+
}, [sectionIndex, itemIndex, onChangeProp]);
|
|
16850
|
+
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
16761
16851
|
};
|
|
16762
16852
|
|
|
16763
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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"])));
|
|
16764
|
-
var BackArrow = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
16765
|
-
var BoldSpan = newStyled.span(templateObject_3 || (templateObject_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"])));
|
|
16766
|
-
var NormalSpan = newStyled.span(templateObject_4 || (templateObject_4 = __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"])));
|
|
16853
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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"])));
|
|
16854
|
+
var BackArrow = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
16855
|
+
var BoldSpan = newStyled.span(templateObject_3$1 || (templateObject_3$1 = __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"])));
|
|
16856
|
+
var NormalSpan = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
16767
16857
|
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"])));
|
|
16768
16858
|
var SearchNavigation = function (_a) {
|
|
16769
16859
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
16770
|
-
return (jsxs$1(Container, { children: [jsxs$1(Text$5, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
16860
|
+
return (jsxs$1(Container$1, { children: [jsxs$1(Text$5, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
16771
16861
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
16772
16862
|
}) }, void 0)] }, void 0));
|
|
16773
16863
|
};
|
|
16774
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
16864
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
|
|
16865
|
+
|
|
16866
|
+
var TabContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __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) {
|
|
16867
|
+
var titleSize = _a.titleSize;
|
|
16868
|
+
return titleSize;
|
|
16869
|
+
}, function (_a) {
|
|
16870
|
+
var height = _a.height;
|
|
16871
|
+
return height;
|
|
16872
|
+
}, function (_a) {
|
|
16873
|
+
var tabsMaxWidth = _a.tabsMaxWidth;
|
|
16874
|
+
return tabsMaxWidth;
|
|
16875
|
+
}, function (_a) {
|
|
16876
|
+
var selected = _a.selected, color = _a.color, selectedTitleWeight = _a.selectedTitleWeight;
|
|
16877
|
+
return selected ? "border-bottom: 3px solid ".concat(color, "; font-weight: ").concat(selectedTitleWeight, ";") : '';
|
|
16878
|
+
});
|
|
16879
|
+
var Tab = function (_a) {
|
|
16880
|
+
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;
|
|
16881
|
+
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
16882
|
+
};
|
|
16883
|
+
var templateObject_1$1;
|
|
16884
|
+
|
|
16885
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
16886
|
+
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) {
|
|
16887
|
+
var backgroundColor = _a.backgroundColor;
|
|
16888
|
+
return backgroundColor;
|
|
16889
|
+
});
|
|
16890
|
+
var TabContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16891
|
+
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"])));
|
|
16892
|
+
var Tabs = function (_a) {
|
|
16893
|
+
var _b;
|
|
16894
|
+
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
16895
|
+
var _d = useState(initialSelected), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
16896
|
+
if (!Array.isArray(tabs) || tabs.length === 0) {
|
|
16897
|
+
return null;
|
|
16898
|
+
}
|
|
16899
|
+
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
16900
|
+
return (jsxs$1(Container, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
16901
|
+
};
|
|
16902
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
16775
16903
|
|
|
16776
|
-
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
16904
|
+
export { Accordion$1 as Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
16777
16905
|
//# sourceMappingURL=index.esm.js.map
|