@trafilea/afrodita-components 5.0.0-beta.47 → 5.0.0-beta.48
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 +45 -1
- package/build/index.esm.js +377 -297
- package/build/index.esm.js.map +1 -1
- package/build/index.js +377 -296
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -112,6 +112,16 @@ 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 Edit = function (_a) {
|
|
116
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
117
|
+
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));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var SignOut = 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: 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));
|
|
123
|
+
};
|
|
124
|
+
|
|
115
125
|
var Actions = /*#__PURE__*/Object.freeze({
|
|
116
126
|
__proto__: null,
|
|
117
127
|
Check: Check$1,
|
|
@@ -120,7 +130,9 @@ var Actions = /*#__PURE__*/Object.freeze({
|
|
|
120
130
|
LightCheck: LightCheck,
|
|
121
131
|
Question: Question,
|
|
122
132
|
Close: Close,
|
|
123
|
-
Trash: Trash
|
|
133
|
+
Trash: Trash,
|
|
134
|
+
Edit: Edit,
|
|
135
|
+
SignOut: SignOut
|
|
124
136
|
});
|
|
125
137
|
|
|
126
138
|
var FitPredictor$1 = function (_a) {
|
|
@@ -148,13 +160,19 @@ var GetDiscount = function (_a) {
|
|
|
148
160
|
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
161
|
};
|
|
150
162
|
|
|
163
|
+
var ShapermintLogo = function (_a) {
|
|
164
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
165
|
+
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));
|
|
166
|
+
};
|
|
167
|
+
|
|
151
168
|
var Other = /*#__PURE__*/Object.freeze({
|
|
152
169
|
__proto__: null,
|
|
153
170
|
FitPredictor: FitPredictor$1,
|
|
154
171
|
Loading: Loading,
|
|
155
172
|
Shapermint: Shapermint,
|
|
156
173
|
McAfee: McAfee,
|
|
157
|
-
GetDiscount: GetDiscount
|
|
174
|
+
GetDiscount: GetDiscount,
|
|
175
|
+
ShapermintLogo: ShapermintLogo
|
|
158
176
|
});
|
|
159
177
|
|
|
160
178
|
var ChevronDown = function (_a) {
|
|
@@ -253,6 +271,16 @@ var Shipping = function (_a) {
|
|
|
253
271
|
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
272
|
};
|
|
255
273
|
|
|
274
|
+
var LightBulb = function (_a) {
|
|
275
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
276
|
+
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));
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
var ErrorCross = function (_a) {
|
|
280
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
281
|
+
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));
|
|
282
|
+
};
|
|
283
|
+
|
|
256
284
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
257
285
|
__proto__: null,
|
|
258
286
|
Clock: Clock,
|
|
@@ -264,7 +292,9 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
264
292
|
StarEmpty: StarEmpty,
|
|
265
293
|
StarHalf: StarHalf,
|
|
266
294
|
Stopwatch: Stopwatch,
|
|
267
|
-
Shipping: Shipping
|
|
295
|
+
Shipping: Shipping,
|
|
296
|
+
LightBulb: LightBulb,
|
|
297
|
+
ErrorCross: ErrorCross
|
|
268
298
|
});
|
|
269
299
|
|
|
270
300
|
var Facebook = function (_a) {
|
|
@@ -343,6 +373,21 @@ var Hamburger = function (_a) {
|
|
|
343
373
|
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
374
|
};
|
|
345
375
|
|
|
376
|
+
var AddressInformation = function (_a) {
|
|
377
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
378
|
+
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));
|
|
379
|
+
};
|
|
380
|
+
|
|
381
|
+
var ClubMembership = function (_a) {
|
|
382
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
383
|
+
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));
|
|
384
|
+
};
|
|
385
|
+
|
|
386
|
+
var Benefits = function (_a) {
|
|
387
|
+
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
388
|
+
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));
|
|
389
|
+
};
|
|
390
|
+
|
|
346
391
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
347
392
|
__proto__: null,
|
|
348
393
|
Search: Search,
|
|
@@ -350,7 +395,10 @@ var Navigation = /*#__PURE__*/Object.freeze({
|
|
|
350
395
|
ShoppingBag: ShoppingBag,
|
|
351
396
|
ShoppingCart: ShoppingCart,
|
|
352
397
|
MapMarker: MapMarker,
|
|
353
|
-
Hamburger: Hamburger
|
|
398
|
+
Hamburger: Hamburger,
|
|
399
|
+
AddressInformation: AddressInformation,
|
|
400
|
+
ClubMembership: ClubMembership,
|
|
401
|
+
Benefits: Benefits
|
|
354
402
|
});
|
|
355
403
|
|
|
356
404
|
var QuestionCircle = function (_a) {
|
|
@@ -3362,7 +3410,7 @@ var InputValidationType;
|
|
|
3362
3410
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3363
3411
|
})(InputValidationType || (InputValidationType = {}));
|
|
3364
3412
|
|
|
3365
|
-
var Section = newStyled.div(templateObject_1$
|
|
3413
|
+
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
3414
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3367
3415
|
});
|
|
3368
3416
|
var CardHeader = function (_a) {
|
|
@@ -3373,14 +3421,14 @@ var CardFooter = function (_a) {
|
|
|
3373
3421
|
var children = _a.children;
|
|
3374
3422
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3375
3423
|
};
|
|
3376
|
-
var templateObject_1$
|
|
3424
|
+
var templateObject_1$1b;
|
|
3377
3425
|
|
|
3378
|
-
var Body = newStyled.div(templateObject_1$
|
|
3426
|
+
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
3427
|
var CardBody = function (_a) {
|
|
3380
3428
|
var children = _a.children;
|
|
3381
3429
|
return jsx$1(Body, { children: children }, void 0);
|
|
3382
3430
|
};
|
|
3383
|
-
var templateObject_1$
|
|
3431
|
+
var templateObject_1$1a;
|
|
3384
3432
|
|
|
3385
3433
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3386
3434
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3525,7 +3573,7 @@ var AssetsProvider = function (_a) {
|
|
|
3525
3573
|
};
|
|
3526
3574
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3527
3575
|
|
|
3528
|
-
var Container$
|
|
3576
|
+
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
3577
|
var flex = _a.flex;
|
|
3530
3578
|
return flex &&
|
|
3531
3579
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3538,14 +3586,14 @@ var Container$H = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __
|
|
|
3538
3586
|
var Card$1 = function (_a) {
|
|
3539
3587
|
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
3588
|
var theme = useTheme();
|
|
3541
|
-
return (jsx$1(Container$
|
|
3589
|
+
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
3590
|
};
|
|
3543
3591
|
var Card$2 = Object.assign(Card$1, {
|
|
3544
3592
|
Header: CardHeader,
|
|
3545
3593
|
Footer: CardFooter,
|
|
3546
3594
|
Body: CardBody,
|
|
3547
3595
|
});
|
|
3548
|
-
var templateObject_1$
|
|
3596
|
+
var templateObject_1$19;
|
|
3549
3597
|
|
|
3550
3598
|
var Fragment = Fragment$1;
|
|
3551
3599
|
function jsx(type, props, key) {
|
|
@@ -3687,7 +3735,7 @@ function BaseSelectOption(_a) {
|
|
|
3687
3735
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3688
3736
|
}
|
|
3689
3737
|
|
|
3690
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3738
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3691
3739
|
function BaseSelect(_a) {
|
|
3692
3740
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3693
3741
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3697,7 +3745,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3697
3745
|
Options: BaseSelectOptions,
|
|
3698
3746
|
Option: BaseSelectOption,
|
|
3699
3747
|
});
|
|
3700
|
-
var templateObject_1$
|
|
3748
|
+
var templateObject_1$18;
|
|
3701
3749
|
|
|
3702
3750
|
var CustomButton = newStyled.button(function (_a) {
|
|
3703
3751
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -3910,12 +3958,12 @@ var CustomCheckboxStyles = {
|
|
|
3910
3958
|
},
|
|
3911
3959
|
};
|
|
3912
3960
|
|
|
3913
|
-
var Container$
|
|
3961
|
+
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
3962
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
3915
3963
|
CustomCheckboxStyles[props.size](props.theme),
|
|
3916
3964
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
3917
3965
|
]; });
|
|
3918
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
3966
|
+
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
3967
|
var disabled = _a.disabled;
|
|
3920
3968
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
3921
3969
|
});
|
|
@@ -3944,9 +3992,9 @@ var Checkbox = function (_a) {
|
|
|
3944
3992
|
useEffect(function () {
|
|
3945
3993
|
mounted.current = true;
|
|
3946
3994
|
}, []);
|
|
3947
|
-
return (jsxs$1(Container$
|
|
3995
|
+
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));
|
|
3948
3996
|
};
|
|
3949
|
-
var templateObject_1$
|
|
3997
|
+
var templateObject_1$17, templateObject_2$J;
|
|
3950
3998
|
|
|
3951
3999
|
var CustomOption = newStyled.li(function (_a) {
|
|
3952
4000
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4080,10 +4128,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4080
4128
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4081
4129
|
// `variants` styles that are consistent through all themes.
|
|
4082
4130
|
var TAGS = {
|
|
4083
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4084
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4085
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4086
|
-
display1: newStyled.h1(templateObject_4$
|
|
4131
|
+
hero1: newStyled.h1(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""]))),
|
|
4132
|
+
hero2: newStyled.h2(templateObject_2$I || (templateObject_2$I = __makeTemplateObject([""], [""]))),
|
|
4133
|
+
hero3: newStyled.h3(templateObject_3$v || (templateObject_3$v = __makeTemplateObject([""], [""]))),
|
|
4134
|
+
display1: newStyled.h1(templateObject_4$l || (templateObject_4$l = __makeTemplateObject([""], [""]))),
|
|
4087
4135
|
display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
|
|
4088
4136
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4089
4137
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4203,9 +4251,9 @@ var DEFAULTS = {
|
|
|
4203
4251
|
size: 'regular',
|
|
4204
4252
|
},
|
|
4205
4253
|
};
|
|
4206
|
-
var templateObject_1$
|
|
4254
|
+
var templateObject_1$16, templateObject_2$I, templateObject_3$v, templateObject_4$l, templateObject_5$c, 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;
|
|
4207
4255
|
|
|
4208
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4256
|
+
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) {
|
|
4209
4257
|
var inline = _a.inline;
|
|
4210
4258
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4211
4259
|
});
|
|
@@ -4223,7 +4271,7 @@ var SizeSelector = function (_a) {
|
|
|
4223
4271
|
}, 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));
|
|
4224
4272
|
}) }), void 0)] }), void 0));
|
|
4225
4273
|
};
|
|
4226
|
-
var templateObject_1$
|
|
4274
|
+
var templateObject_1$15;
|
|
4227
4275
|
|
|
4228
4276
|
var getStylesBySize$7 = function (size) {
|
|
4229
4277
|
switch (size) {
|
|
@@ -4250,7 +4298,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4250
4298
|
} });
|
|
4251
4299
|
};
|
|
4252
4300
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4253
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4301
|
+
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));
|
|
4254
4302
|
};
|
|
4255
4303
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4256
4304
|
if (disabled)
|
|
@@ -4266,16 +4314,16 @@ var TextButton = function (_a) {
|
|
|
4266
4314
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4267
4315
|
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));
|
|
4268
4316
|
};
|
|
4269
|
-
var templateObject_1$
|
|
4317
|
+
var templateObject_1$14;
|
|
4270
4318
|
|
|
4271
|
-
var Container$
|
|
4272
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
4273
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4319
|
+
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"])));
|
|
4320
|
+
var P$3 = newStyled.p(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4321
|
+
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"])));
|
|
4274
4322
|
var SizeFitGuide = function (_a) {
|
|
4275
4323
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4276
|
-
return (jsxs$1(Container$
|
|
4324
|
+
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));
|
|
4277
4325
|
};
|
|
4278
|
-
var templateObject_1$
|
|
4326
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$u;
|
|
4279
4327
|
|
|
4280
4328
|
var getStylesBySize$6 = function (size) {
|
|
4281
4329
|
switch (size) {
|
|
@@ -4305,7 +4353,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4305
4353
|
};
|
|
4306
4354
|
}
|
|
4307
4355
|
};
|
|
4308
|
-
var Container$
|
|
4356
|
+
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) {
|
|
4309
4357
|
var backgroundColor = _a.backgroundColor;
|
|
4310
4358
|
return backgroundColor;
|
|
4311
4359
|
}, function (_a) {
|
|
@@ -4327,7 +4375,7 @@ var Container$E = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __
|
|
|
4327
4375
|
var size = _a.size;
|
|
4328
4376
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
4329
4377
|
});
|
|
4330
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
4378
|
+
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) {
|
|
4331
4379
|
var textColor = _a.textColor;
|
|
4332
4380
|
return textColor;
|
|
4333
4381
|
}, function (_a) {
|
|
@@ -4342,9 +4390,9 @@ var H3$2 = newStyled.h3(templateObject_2$F || (templateObject_2$F = __makeTempla
|
|
|
4342
4390
|
var DiscountTag = function (_a) {
|
|
4343
4391
|
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;
|
|
4344
4392
|
var theme = useTheme();
|
|
4345
|
-
return (jsx$1(Container$
|
|
4393
|
+
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));
|
|
4346
4394
|
};
|
|
4347
|
-
var templateObject_1$
|
|
4395
|
+
var templateObject_1$12, templateObject_2$G;
|
|
4348
4396
|
|
|
4349
4397
|
var getStylesBySize$5 = function (size) {
|
|
4350
4398
|
switch (size) {
|
|
@@ -4368,8 +4416,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
4368
4416
|
};
|
|
4369
4417
|
}
|
|
4370
4418
|
};
|
|
4371
|
-
var Container$
|
|
4372
|
-
var Price = newStyled.h1(templateObject_2$
|
|
4419
|
+
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"])));
|
|
4420
|
+
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) {
|
|
4373
4421
|
var weight = _a.weight;
|
|
4374
4422
|
return (weight ? weight : '400');
|
|
4375
4423
|
}, function (_a) {
|
|
@@ -4391,7 +4439,7 @@ var Price = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTempl
|
|
|
4391
4439
|
var margin = _a.margin, size = _a.size;
|
|
4392
4440
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4393
4441
|
});
|
|
4394
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4442
|
+
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) {
|
|
4395
4443
|
var _b;
|
|
4396
4444
|
var size = _a.size;
|
|
4397
4445
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4406,9 +4454,9 @@ function getTestId() {
|
|
|
4406
4454
|
var PriceLabel = function (_a) {
|
|
4407
4455
|
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;
|
|
4408
4456
|
var theme = useTheme();
|
|
4409
|
-
return (jsxs$1(Container$
|
|
4457
|
+
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));
|
|
4410
4458
|
};
|
|
4411
|
-
var templateObject_1
|
|
4459
|
+
var templateObject_1$11, templateObject_2$F, templateObject_3$t;
|
|
4412
4460
|
|
|
4413
4461
|
var OneColorSelector = function (_a) {
|
|
4414
4462
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4447,10 +4495,10 @@ var OutOfStock = function (_a) {
|
|
|
4447
4495
|
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));
|
|
4448
4496
|
};
|
|
4449
4497
|
|
|
4450
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
4451
|
-
newStyled(lt.Label)(templateObject_2$
|
|
4452
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4453
|
-
var Span = newStyled.span(templateObject_4$
|
|
4498
|
+
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"])));
|
|
4499
|
+
newStyled(lt.Label)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4500
|
+
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"])));
|
|
4501
|
+
var Span = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4454
4502
|
var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
4455
4503
|
var Label$2 = function (_a) {
|
|
4456
4504
|
var label = _a.label, values = _a.values;
|
|
@@ -4469,20 +4517,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4469
4517
|
Option: Option,
|
|
4470
4518
|
OptionsContainer: OptionsContainer,
|
|
4471
4519
|
});
|
|
4472
|
-
var templateObject_1$
|
|
4520
|
+
var templateObject_1$10, templateObject_2$E, templateObject_3$s, templateObject_4$k, templateObject_5$b;
|
|
4473
4521
|
|
|
4474
|
-
var Container$
|
|
4522
|
+
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) {
|
|
4475
4523
|
var borderColor = _a.borderColor;
|
|
4476
4524
|
return borderColor;
|
|
4477
4525
|
});
|
|
4478
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
4526
|
+
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"])));
|
|
4479
4527
|
var PatternSelector = function (_a) {
|
|
4480
4528
|
var url = _a.url, selected = _a.selected, testId = _a.testId;
|
|
4481
4529
|
var theme = useTheme();
|
|
4482
4530
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
4483
|
-
return (jsx$1(Container$
|
|
4531
|
+
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));
|
|
4484
4532
|
};
|
|
4485
|
-
var templateObject_1
|
|
4533
|
+
var templateObject_1$$, templateObject_2$D;
|
|
4486
4534
|
|
|
4487
4535
|
var renderOptions$1 = function (options) {
|
|
4488
4536
|
if (options.length === 0) {
|
|
@@ -4540,7 +4588,7 @@ var MultiColorPicker = function (_a) {
|
|
|
4540
4588
|
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));
|
|
4541
4589
|
};
|
|
4542
4590
|
|
|
4543
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
4591
|
+
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) {
|
|
4544
4592
|
var selected = _a.selected, theme = _a.theme;
|
|
4545
4593
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
4546
4594
|
});
|
|
@@ -4549,7 +4597,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
4549
4597
|
var theme = useTheme();
|
|
4550
4598
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
4551
4599
|
};
|
|
4552
|
-
var templateObject_1$
|
|
4600
|
+
var templateObject_1$_;
|
|
4553
4601
|
|
|
4554
4602
|
var Button$4 = newStyled.button(function () { return ({
|
|
4555
4603
|
background: 'transparent',
|
|
@@ -8792,14 +8840,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
8792
8840
|
return Slider;
|
|
8793
8841
|
}(React__default.Component);
|
|
8794
8842
|
|
|
8795
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
8843
|
+
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) {
|
|
8796
8844
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
8797
8845
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
8798
8846
|
}, function (_a) {
|
|
8799
8847
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
8800
8848
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
8801
8849
|
});
|
|
8802
|
-
var templateObject_1$
|
|
8850
|
+
var templateObject_1$Z;
|
|
8803
8851
|
|
|
8804
8852
|
var getStylesBySize$4 = function (size) {
|
|
8805
8853
|
// rem units
|
|
@@ -8858,22 +8906,22 @@ var SliderNavigation = function (_a) {
|
|
|
8858
8906
|
} }, { 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));
|
|
8859
8907
|
};
|
|
8860
8908
|
|
|
8861
|
-
var horizontalStyles = css(templateObject_1$
|
|
8862
|
-
var verticalStyles = css(templateObject_2$
|
|
8863
|
-
var Container$
|
|
8909
|
+
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"])));
|
|
8910
|
+
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"])));
|
|
8911
|
+
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) {
|
|
8864
8912
|
var position = _a.position;
|
|
8865
8913
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
8866
8914
|
});
|
|
8867
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
8915
|
+
var Button$3 = newStyled.button(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
8868
8916
|
var ImagePreviewList = function (_a) {
|
|
8869
8917
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
8870
|
-
return (jsx$1(Container$
|
|
8918
|
+
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: {
|
|
8871
8919
|
arrowWidth: 0.75,
|
|
8872
8920
|
arrowHeight: 1.25,
|
|
8873
8921
|
arrowPadding: 1.625,
|
|
8874
8922
|
}, 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));
|
|
8875
8923
|
};
|
|
8876
|
-
var templateObject_1$
|
|
8924
|
+
var templateObject_1$Y, templateObject_2$C, templateObject_3$r, templateObject_4$j;
|
|
8877
8925
|
|
|
8878
8926
|
var propTypes = {exports: {}};
|
|
8879
8927
|
|
|
@@ -10459,19 +10507,19 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
10459
10507
|
afterZoomOut: PropTypes.func
|
|
10460
10508
|
} : {};
|
|
10461
10509
|
|
|
10462
|
-
var Container$
|
|
10463
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
10464
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
10510
|
+
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"])));
|
|
10511
|
+
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"])));
|
|
10512
|
+
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"])));
|
|
10465
10513
|
var ImageProductWithTags$1 = function (_a) {
|
|
10466
10514
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position;
|
|
10467
|
-
return (jsxs$1(Container$
|
|
10515
|
+
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: {
|
|
10468
10516
|
alt: image.alt,
|
|
10469
10517
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
10470
10518
|
}, 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));
|
|
10471
10519
|
};
|
|
10472
|
-
var templateObject_1$
|
|
10520
|
+
var templateObject_1$X, templateObject_2$B, templateObject_3$q;
|
|
10473
10521
|
|
|
10474
|
-
var Container$
|
|
10522
|
+
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"])));
|
|
10475
10523
|
var ProductGallery = function (_a) {
|
|
10476
10524
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
10477
10525
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -10479,11 +10527,11 @@ var ProductGallery = function (_a) {
|
|
|
10479
10527
|
useEffect(function () {
|
|
10480
10528
|
setSelectedImage(initialValue);
|
|
10481
10529
|
}, [initialValue]);
|
|
10482
|
-
return (jsxs$1(Container$
|
|
10530
|
+
return (jsxs$1(Container$A, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
10483
10531
|
setSelectedImage(value);
|
|
10484
10532
|
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition }, void 0)] }, void 0));
|
|
10485
10533
|
};
|
|
10486
|
-
var templateObject_1$
|
|
10534
|
+
var templateObject_1$W;
|
|
10487
10535
|
|
|
10488
10536
|
/* base styles & size variants */
|
|
10489
10537
|
var StarStyles = {
|
|
@@ -10529,8 +10577,8 @@ var StarStyles = {
|
|
|
10529
10577
|
});
|
|
10530
10578
|
},
|
|
10531
10579
|
};
|
|
10532
|
-
var Container$
|
|
10533
|
-
var templateObject_1$
|
|
10580
|
+
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"])));
|
|
10581
|
+
var templateObject_1$V;
|
|
10534
10582
|
|
|
10535
10583
|
var StarContainer = newStyled.div(function (_a) {
|
|
10536
10584
|
var size = _a.size, theme = _a.theme;
|
|
@@ -10548,7 +10596,7 @@ var sizes = {
|
|
|
10548
10596
|
var StarList = function (_a) {
|
|
10549
10597
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
10550
10598
|
var theme = useTheme();
|
|
10551
|
-
return (jsx$1(Container$
|
|
10599
|
+
return (jsx$1(Container$z, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
10552
10600
|
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));
|
|
10553
10601
|
}) }, void 0));
|
|
10554
10602
|
};
|
|
@@ -10592,8 +10640,8 @@ var LabelStyles = {
|
|
|
10592
10640
|
});
|
|
10593
10641
|
},
|
|
10594
10642
|
};
|
|
10595
|
-
var Container$
|
|
10596
|
-
var templateObject_1$
|
|
10643
|
+
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"])));
|
|
10644
|
+
var templateObject_1$U;
|
|
10597
10645
|
|
|
10598
10646
|
var CustomLabel = newStyled.div(function (_a) {
|
|
10599
10647
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -10631,11 +10679,11 @@ var Rating = function (_a) {
|
|
|
10631
10679
|
href: reviewsContainerId,
|
|
10632
10680
|
}
|
|
10633
10681
|
: {};
|
|
10634
|
-
return (jsxs$1(Container$
|
|
10682
|
+
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));
|
|
10635
10683
|
};
|
|
10636
10684
|
|
|
10637
|
-
var Container$
|
|
10638
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
10685
|
+
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"])));
|
|
10686
|
+
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; });
|
|
10639
10687
|
var textButtonStyles = function (theme) { return ({
|
|
10640
10688
|
border: 'none',
|
|
10641
10689
|
background: 'transparent',
|
|
@@ -10648,9 +10696,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
10648
10696
|
var FitPredictor = function (_a) {
|
|
10649
10697
|
var onClick = _a.onClick;
|
|
10650
10698
|
var theme = useTheme();
|
|
10651
|
-
return (jsxs(Container$
|
|
10699
|
+
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));
|
|
10652
10700
|
};
|
|
10653
|
-
var templateObject_1$
|
|
10701
|
+
var templateObject_1$T, templateObject_2$A;
|
|
10654
10702
|
|
|
10655
10703
|
var H2$2 = newStyled.h2(function (_a) {
|
|
10656
10704
|
var color = _a.color;
|
|
@@ -10664,7 +10712,7 @@ var H2$2 = newStyled.h2(function (_a) {
|
|
|
10664
10712
|
margin: '0.938rem 4.188rem',
|
|
10665
10713
|
});
|
|
10666
10714
|
});
|
|
10667
|
-
var Bar = newStyled.div(templateObject_1$
|
|
10715
|
+
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) {
|
|
10668
10716
|
var backgroundColor = _a.backgroundColor;
|
|
10669
10717
|
return backgroundColor;
|
|
10670
10718
|
}, function (_a) {
|
|
@@ -10687,7 +10735,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
10687
10735
|
position: 'absolute',
|
|
10688
10736
|
});
|
|
10689
10737
|
});
|
|
10690
|
-
var Container$
|
|
10738
|
+
var Container$w = newStyled.div(function (_a) {
|
|
10691
10739
|
var widthAuto = _a.widthAuto;
|
|
10692
10740
|
return ({
|
|
10693
10741
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -10701,9 +10749,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
10701
10749
|
var ProgressBar = function (_a) {
|
|
10702
10750
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
10703
10751
|
var theme = useTheme();
|
|
10704
|
-
return (jsxs$1(Container$
|
|
10752
|
+
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));
|
|
10705
10753
|
};
|
|
10706
|
-
var templateObject_1$
|
|
10754
|
+
var templateObject_1$S;
|
|
10707
10755
|
|
|
10708
10756
|
var getStylesBySize$3 = function (size) {
|
|
10709
10757
|
switch (size) {
|
|
@@ -10724,7 +10772,7 @@ var getStylesBySize$3 = function (size) {
|
|
|
10724
10772
|
};
|
|
10725
10773
|
}
|
|
10726
10774
|
};
|
|
10727
|
-
var Container$
|
|
10775
|
+
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) {
|
|
10728
10776
|
var backgroundColor = _a.backgroundColor;
|
|
10729
10777
|
return backgroundColor;
|
|
10730
10778
|
}, function (_a) {
|
|
@@ -10752,9 +10800,9 @@ var Container$u = newStyled.div(templateObject_1$P || (templateObject_1$P = __ma
|
|
|
10752
10800
|
var IconButton = function (_a) {
|
|
10753
10801
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
10754
10802
|
var theme = useTheme();
|
|
10755
|
-
return (jsx$1(Container$
|
|
10803
|
+
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));
|
|
10756
10804
|
};
|
|
10757
|
-
var templateObject_1$
|
|
10805
|
+
var templateObject_1$R;
|
|
10758
10806
|
|
|
10759
10807
|
var TooltipArrow = function (_a) {
|
|
10760
10808
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -10834,7 +10882,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
10834
10882
|
}
|
|
10835
10883
|
};
|
|
10836
10884
|
|
|
10837
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
10885
|
+
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) {
|
|
10838
10886
|
var position = _a.position;
|
|
10839
10887
|
return getWrapperFlexDirection(position);
|
|
10840
10888
|
});
|
|
@@ -10858,11 +10906,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
10858
10906
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
10859
10907
|
return actual === expected ? margin : '0';
|
|
10860
10908
|
};
|
|
10861
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
10909
|
+
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) {
|
|
10862
10910
|
var borderColor = _a.borderColor;
|
|
10863
10911
|
return borderColor;
|
|
10864
10912
|
});
|
|
10865
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
10913
|
+
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) {
|
|
10866
10914
|
var position = _a.position;
|
|
10867
10915
|
return getArrowRotation(position);
|
|
10868
10916
|
}, function (_a) {
|
|
@@ -10872,7 +10920,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$o || (templateObject_
|
|
|
10872
10920
|
var position = _a.position;
|
|
10873
10921
|
return getArrowContainerMargin(position);
|
|
10874
10922
|
});
|
|
10875
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
10923
|
+
var TooltipText = newStyled.div(templateObject_4$i || (templateObject_4$i = __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) {
|
|
10876
10924
|
var color = _a.color;
|
|
10877
10925
|
return color;
|
|
10878
10926
|
});
|
|
@@ -10882,7 +10930,7 @@ var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTem
|
|
|
10882
10930
|
return color;
|
|
10883
10931
|
});
|
|
10884
10932
|
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"])));
|
|
10885
|
-
var templateObject_1$
|
|
10933
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$p, templateObject_4$i, templateObject_5$a, templateObject_6$7, templateObject_7$4;
|
|
10886
10934
|
|
|
10887
10935
|
var Tooltip = function (_a) {
|
|
10888
10936
|
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;
|
|
@@ -11034,9 +11082,9 @@ var ContainerStyles = {
|
|
|
11034
11082
|
},
|
|
11035
11083
|
};
|
|
11036
11084
|
|
|
11037
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11038
|
-
var Container$
|
|
11039
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11085
|
+
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"])));
|
|
11086
|
+
var Container$u = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11087
|
+
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) {
|
|
11040
11088
|
var disabled = _a.disabled;
|
|
11041
11089
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11042
11090
|
});
|
|
@@ -11051,9 +11099,9 @@ var RadioInput = function (_a) {
|
|
|
11051
11099
|
var value = event.currentTarget.value;
|
|
11052
11100
|
onChange({ value: value, label: label });
|
|
11053
11101
|
};
|
|
11054
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
11102
|
+
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));
|
|
11055
11103
|
};
|
|
11056
|
-
var templateObject_1$
|
|
11104
|
+
var templateObject_1$P, templateObject_2$y;
|
|
11057
11105
|
|
|
11058
11106
|
var RadioGroupInput = function (_a) {
|
|
11059
11107
|
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;
|
|
@@ -11067,37 +11115,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11067
11115
|
}) }), void 0));
|
|
11068
11116
|
};
|
|
11069
11117
|
|
|
11070
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
11071
|
-
var Container$
|
|
11118
|
+
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"])));
|
|
11119
|
+
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"])));
|
|
11072
11120
|
var Minimalistic = function (_a) {
|
|
11073
11121
|
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;
|
|
11074
11122
|
var theme = useTheme();
|
|
11075
|
-
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$
|
|
11123
|
+
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));
|
|
11076
11124
|
};
|
|
11077
|
-
var templateObject_1$
|
|
11125
|
+
var templateObject_1$O, templateObject_2$x;
|
|
11078
11126
|
|
|
11079
|
-
var Container$
|
|
11080
|
-
var Title$4 = newStyled.h1(templateObject_2$
|
|
11081
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11082
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
11127
|
+
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"])));
|
|
11128
|
+
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; });
|
|
11129
|
+
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; });
|
|
11130
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
11083
11131
|
var Simple = function (_a) {
|
|
11084
11132
|
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;
|
|
11085
11133
|
var theme = useTheme();
|
|
11086
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
11134
|
+
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));
|
|
11087
11135
|
};
|
|
11088
|
-
var templateObject_1$
|
|
11136
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$o, templateObject_4$h;
|
|
11089
11137
|
|
|
11090
11138
|
var Bundle = {
|
|
11091
11139
|
Minimalistic: Minimalistic,
|
|
11092
11140
|
Simple: Simple,
|
|
11093
11141
|
};
|
|
11094
11142
|
|
|
11095
|
-
var Container$
|
|
11143
|
+
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"])));
|
|
11096
11144
|
var Tag$1 = function (_a) {
|
|
11097
11145
|
var text = _a.text, className = _a.className;
|
|
11098
|
-
return jsx$1(Container$
|
|
11146
|
+
return jsx$1(Container$r, __assign$1({ className: className }, { children: text }), void 0);
|
|
11099
11147
|
};
|
|
11100
|
-
var templateObject_1$
|
|
11148
|
+
var templateObject_1$M;
|
|
11101
11149
|
|
|
11102
11150
|
var getStylesBySize$2 = function (size) {
|
|
11103
11151
|
switch (size) {
|
|
@@ -11200,11 +11248,11 @@ var Timer = function (_a) {
|
|
|
11200
11248
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
11201
11249
|
};
|
|
11202
11250
|
|
|
11203
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
11251
|
+
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) {
|
|
11204
11252
|
var color = _a.color;
|
|
11205
11253
|
return color;
|
|
11206
11254
|
});
|
|
11207
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
11255
|
+
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) {
|
|
11208
11256
|
var color = _a.color;
|
|
11209
11257
|
return color;
|
|
11210
11258
|
});
|
|
@@ -11213,7 +11261,7 @@ var InputLabel = function (_a) {
|
|
|
11213
11261
|
var theme = useTheme();
|
|
11214
11262
|
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));
|
|
11215
11263
|
};
|
|
11216
|
-
var templateObject_1$
|
|
11264
|
+
var templateObject_1$L, templateObject_2$v;
|
|
11217
11265
|
|
|
11218
11266
|
/**
|
|
11219
11267
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -11267,20 +11315,20 @@ var formatPrice = function (value, _a) {
|
|
|
11267
11315
|
}).format(valueToFormat);
|
|
11268
11316
|
};
|
|
11269
11317
|
|
|
11270
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
11271
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
11318
|
+
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; });
|
|
11319
|
+
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"])));
|
|
11272
11320
|
var Error$1 = function (_a) {
|
|
11273
11321
|
var error = _a.error;
|
|
11274
11322
|
var theme = useTheme();
|
|
11275
11323
|
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));
|
|
11276
11324
|
};
|
|
11277
|
-
var templateObject_1$
|
|
11325
|
+
var templateObject_1$K, templateObject_2$u;
|
|
11278
11326
|
|
|
11279
|
-
var Container$
|
|
11327
|
+
var Container$q = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
11280
11328
|
var color = _a.color;
|
|
11281
11329
|
return color;
|
|
11282
11330
|
});
|
|
11283
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
11331
|
+
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 box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\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 box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
11284
11332
|
var padding = _a.padding;
|
|
11285
11333
|
return padding;
|
|
11286
11334
|
}, function (_a) {
|
|
@@ -11323,11 +11371,11 @@ var StyledInput = newStyled.input(templateObject_2$s || (templateObject_2$s = __
|
|
|
11323
11371
|
var disabledColor = _a.disabledColor;
|
|
11324
11372
|
return disabledColor;
|
|
11325
11373
|
});
|
|
11326
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
11374
|
+
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) {
|
|
11327
11375
|
var size = _a.size;
|
|
11328
11376
|
return (size === 'small' ? '36px' : '44px');
|
|
11329
11377
|
});
|
|
11330
|
-
var templateObject_1$
|
|
11378
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$n;
|
|
11331
11379
|
|
|
11332
11380
|
var BaseInput = function (_a) {
|
|
11333
11381
|
var _b;
|
|
@@ -11380,7 +11428,7 @@ var BaseInput = function (_a) {
|
|
|
11380
11428
|
highlight: theme.colors.border.highlight,
|
|
11381
11429
|
boxShadow: theme.component.input.boxShadow,
|
|
11382
11430
|
};
|
|
11383
|
-
return (jsxs$1(Container$
|
|
11431
|
+
return (jsxs$1(Container$q, __assign$1({ color: status === InputValidationType.Valid
|
|
11384
11432
|
? theme.colors.shades['700'].color
|
|
11385
11433
|
: status === InputValidationType.Error
|
|
11386
11434
|
? theme.colors.semantic.urgent.color
|
|
@@ -11401,11 +11449,11 @@ var Button$2 = function (_a) {
|
|
|
11401
11449
|
throw new Error("Invalid button variant ".concat(variant));
|
|
11402
11450
|
};
|
|
11403
11451
|
|
|
11404
|
-
var Container$
|
|
11452
|
+
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) {
|
|
11405
11453
|
var theme = _a.theme;
|
|
11406
11454
|
return theme.component.inputCustom.input.borderRadius;
|
|
11407
11455
|
});
|
|
11408
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
11456
|
+
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) {
|
|
11409
11457
|
var theme = _a.theme;
|
|
11410
11458
|
return theme.component.inputCustom.button.borderRadius;
|
|
11411
11459
|
});
|
|
@@ -11418,23 +11466,23 @@ var Custom = function (_a) {
|
|
|
11418
11466
|
text: text,
|
|
11419
11467
|
disabled: rest.disabled,
|
|
11420
11468
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
11421
|
-
return (jsx$1(Container$
|
|
11469
|
+
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));
|
|
11422
11470
|
};
|
|
11423
|
-
var templateObject_1$
|
|
11471
|
+
var templateObject_1$I, templateObject_2$s;
|
|
11424
11472
|
|
|
11425
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
11473
|
+
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) {
|
|
11426
11474
|
var size = _a.size;
|
|
11427
11475
|
return (size === 'small' ? '36px' : '');
|
|
11428
11476
|
});
|
|
11429
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
11430
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
11477
|
+
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"])));
|
|
11478
|
+
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"])));
|
|
11431
11479
|
var Success = function (_a) {
|
|
11432
11480
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
11433
11481
|
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));
|
|
11434
11482
|
};
|
|
11435
|
-
var templateObject_1$
|
|
11483
|
+
var templateObject_1$H, templateObject_2$r, templateObject_3$m;
|
|
11436
11484
|
|
|
11437
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
11485
|
+
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) {
|
|
11438
11486
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
11439
11487
|
return status === InputValidationType.Empty &&
|
|
11440
11488
|
type === 'primary' &&
|
|
@@ -11451,21 +11499,21 @@ var BasePlusButton = function (_a) {
|
|
|
11451
11499
|
}
|
|
11452
11500
|
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));
|
|
11453
11501
|
};
|
|
11454
|
-
var templateObject_1$
|
|
11502
|
+
var templateObject_1$G;
|
|
11455
11503
|
|
|
11456
|
-
var Container$
|
|
11457
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
11504
|
+
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"])));
|
|
11505
|
+
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; });
|
|
11458
11506
|
var BasePlusIcon = function (_a) {
|
|
11459
11507
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
11460
11508
|
var theme = useTheme();
|
|
11461
11509
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
11462
|
-
return (jsx$1(Container$
|
|
11510
|
+
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
|
|
11463
11511
|
? theme.colors.shades['700'].color
|
|
11464
11512
|
: status === InputValidationType.Error
|
|
11465
11513
|
? theme.colors.semantic.urgent.color
|
|
11466
11514
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
11467
11515
|
};
|
|
11468
|
-
var templateObject_1$
|
|
11516
|
+
var templateObject_1$F, templateObject_2$q;
|
|
11469
11517
|
|
|
11470
11518
|
var Input$1 = {
|
|
11471
11519
|
Simple: BaseInput,
|
|
@@ -11474,7 +11522,7 @@ var Input$1 = {
|
|
|
11474
11522
|
SimplePlusIcon: BasePlusIcon,
|
|
11475
11523
|
};
|
|
11476
11524
|
|
|
11477
|
-
var Container$
|
|
11525
|
+
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) {
|
|
11478
11526
|
var width = _a.width;
|
|
11479
11527
|
return width;
|
|
11480
11528
|
}, function (_a) {
|
|
@@ -11490,11 +11538,11 @@ var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
11490
11538
|
var PaymentMethod = function (_a) {
|
|
11491
11539
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
11492
11540
|
var theme = useTheme();
|
|
11493
|
-
return (jsx$1(Container$
|
|
11541
|
+
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));
|
|
11494
11542
|
};
|
|
11495
|
-
var templateObject_1$
|
|
11543
|
+
var templateObject_1$E;
|
|
11496
11544
|
|
|
11497
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
11545
|
+
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) {
|
|
11498
11546
|
var backgroundColor = _a.backgroundColor;
|
|
11499
11547
|
return backgroundColor;
|
|
11500
11548
|
}, function (_a) {
|
|
@@ -11506,27 +11554,27 @@ var OfferBanner = function (_a) {
|
|
|
11506
11554
|
var theme = useTheme();
|
|
11507
11555
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11508
11556
|
};
|
|
11509
|
-
var templateObject_1$
|
|
11557
|
+
var templateObject_1$D;
|
|
11510
11558
|
|
|
11511
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
11512
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
11513
|
-
var Currency = newStyled.span(templateObject_3$
|
|
11514
|
-
var Container$
|
|
11559
|
+
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"])));
|
|
11560
|
+
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; });
|
|
11561
|
+
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"])));
|
|
11562
|
+
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; });
|
|
11515
11563
|
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"])));
|
|
11516
11564
|
var Total = function (_a) {
|
|
11517
11565
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
11518
11566
|
var theme = useTheme();
|
|
11519
|
-
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$
|
|
11567
|
+
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));
|
|
11520
11568
|
};
|
|
11521
|
-
var templateObject_1$
|
|
11569
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$l, templateObject_4$g, templateObject_5$9;
|
|
11522
11570
|
|
|
11523
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
11571
|
+
var Wrapper$1 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11524
11572
|
var color = _a.color;
|
|
11525
11573
|
return color;
|
|
11526
11574
|
});
|
|
11527
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
11528
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
11529
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
11575
|
+
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"])));
|
|
11576
|
+
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"])));
|
|
11577
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
11530
11578
|
var color = _a.color;
|
|
11531
11579
|
return color;
|
|
11532
11580
|
});
|
|
@@ -11538,22 +11586,22 @@ var Subtotal = function (_a) {
|
|
|
11538
11586
|
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));
|
|
11539
11587
|
})] }), void 0));
|
|
11540
11588
|
};
|
|
11541
|
-
var templateObject_1$
|
|
11589
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$k, templateObject_4$f;
|
|
11542
11590
|
|
|
11543
11591
|
var Totals = {
|
|
11544
11592
|
Total: Total,
|
|
11545
11593
|
Subtotal: Subtotal,
|
|
11546
11594
|
};
|
|
11547
11595
|
|
|
11548
|
-
var Container$
|
|
11549
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
11550
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
11551
|
-
var Details = newStyled.span(templateObject_4$
|
|
11596
|
+
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; });
|
|
11597
|
+
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"])));
|
|
11598
|
+
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; });
|
|
11599
|
+
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; });
|
|
11552
11600
|
var Note = function (_a) {
|
|
11553
11601
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11554
|
-
return (jsxs$1(Container$
|
|
11602
|
+
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));
|
|
11555
11603
|
};
|
|
11556
|
-
var templateObject_1$
|
|
11604
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$j, templateObject_4$e;
|
|
11557
11605
|
|
|
11558
11606
|
/* eslint-disable no-param-reassign */
|
|
11559
11607
|
var index$1 = function (breakpoints) {
|
|
@@ -11639,12 +11687,12 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
11639
11687
|
literal: true,
|
|
11640
11688
|
});
|
|
11641
11689
|
|
|
11642
|
-
var Title$3 = newStyled.h1(templateObject_1$
|
|
11643
|
-
var Line = newStyled.div(templateObject_2$
|
|
11644
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
11690
|
+
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; });
|
|
11691
|
+
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; });
|
|
11692
|
+
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({
|
|
11645
11693
|
flexDirection: ['column', 'row'],
|
|
11646
11694
|
}));
|
|
11647
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
11695
|
+
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({
|
|
11648
11696
|
margin: ['0', '0 1.25rem'],
|
|
11649
11697
|
marginBottom: ['1.875rem', '0'],
|
|
11650
11698
|
alignItems: ['center', 'flex-start'],
|
|
@@ -11668,47 +11716,47 @@ var DeliveryDetails = function (_a) {
|
|
|
11668
11716
|
var theme = useTheme();
|
|
11669
11717
|
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));
|
|
11670
11718
|
};
|
|
11671
|
-
var templateObject_1$
|
|
11719
|
+
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;
|
|
11672
11720
|
|
|
11673
|
-
var Container$
|
|
11674
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
11721
|
+
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"])));
|
|
11722
|
+
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; });
|
|
11675
11723
|
var ScrollToTop = function (_a) {
|
|
11676
11724
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11677
11725
|
var theme = useTheme();
|
|
11678
|
-
return (jsxs$1(Container$
|
|
11726
|
+
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));
|
|
11679
11727
|
};
|
|
11680
|
-
var templateObject_1$
|
|
11728
|
+
var templateObject_1$y, templateObject_2$l;
|
|
11681
11729
|
|
|
11682
|
-
var Container$
|
|
11683
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
11730
|
+
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"])));
|
|
11731
|
+
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; });
|
|
11684
11732
|
var OrderBar = function (_a) {
|
|
11685
11733
|
var message = _a.message;
|
|
11686
11734
|
var theme = useTheme();
|
|
11687
|
-
return (jsxs$1(Container$
|
|
11735
|
+
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));
|
|
11688
11736
|
};
|
|
11689
|
-
var templateObject_1$
|
|
11737
|
+
var templateObject_1$x, templateObject_2$k;
|
|
11690
11738
|
|
|
11691
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
11692
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
11693
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
11694
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
11739
|
+
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; });
|
|
11740
|
+
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; });
|
|
11741
|
+
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; });
|
|
11742
|
+
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; });
|
|
11695
11743
|
var SizeTable = function (_a) {
|
|
11696
11744
|
var headers = _a.headers, data = _a.data;
|
|
11697
11745
|
var theme = useTheme();
|
|
11698
11746
|
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));
|
|
11699
11747
|
};
|
|
11700
|
-
var templateObject_1$
|
|
11748
|
+
var templateObject_1$w, templateObject_2$j, templateObject_3$h, templateObject_4$c;
|
|
11701
11749
|
|
|
11702
|
-
var Img = newStyled.img(templateObject_1$
|
|
11750
|
+
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; });
|
|
11703
11751
|
var Image = function (_a) {
|
|
11704
11752
|
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;
|
|
11705
11753
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
11706
11754
|
};
|
|
11707
|
-
var templateObject_1$
|
|
11755
|
+
var templateObject_1$v;
|
|
11708
11756
|
|
|
11709
|
-
var Container$
|
|
11710
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
11711
|
-
var DescriptionContainer = newStyled.div(templateObject_3$
|
|
11757
|
+
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"])));
|
|
11758
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
11759
|
+
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({
|
|
11712
11760
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
11713
11761
|
}));
|
|
11714
11762
|
var Title$2 = newStyled.h2(function (_a) {
|
|
@@ -11731,7 +11779,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
11731
11779
|
margin: '0.063rem 0',
|
|
11732
11780
|
});
|
|
11733
11781
|
});
|
|
11734
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
11782
|
+
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) {
|
|
11735
11783
|
var withTag = _a.withTag; _a.theme;
|
|
11736
11784
|
return withTag
|
|
11737
11785
|
? mediaQueries({
|
|
@@ -11744,9 +11792,9 @@ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeT
|
|
|
11744
11792
|
var SimpleOrderItem = function (_a) {
|
|
11745
11793
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
11746
11794
|
var theme = useTheme();
|
|
11747
|
-
return (jsxs$1(Container$
|
|
11795
|
+
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));
|
|
11748
11796
|
};
|
|
11749
|
-
var templateObject_1$
|
|
11797
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$g, templateObject_4$b, templateObject_5$7;
|
|
11750
11798
|
|
|
11751
11799
|
function formatDate(date) {
|
|
11752
11800
|
var day = date.getDate();
|
|
@@ -11755,15 +11803,15 @@ function formatDate(date) {
|
|
|
11755
11803
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
11756
11804
|
}
|
|
11757
11805
|
|
|
11758
|
-
var Container$
|
|
11759
|
-
var Heading = newStyled.div(templateObject_2$
|
|
11806
|
+
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"])));
|
|
11807
|
+
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({
|
|
11760
11808
|
fontSize: ['14px', '16px'],
|
|
11761
11809
|
lineHeight: ['22px', '24px'],
|
|
11762
11810
|
}));
|
|
11763
|
-
var Content = newStyled.div(templateObject_3$
|
|
11811
|
+
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({
|
|
11764
11812
|
flexDirection: ['column', 'row'],
|
|
11765
11813
|
}));
|
|
11766
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
11814
|
+
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({
|
|
11767
11815
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
11768
11816
|
}));
|
|
11769
11817
|
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({
|
|
@@ -11778,17 +11826,17 @@ var P$1 = newStyled.p(templateObject_7$2 || (templateObject_7$2 = __makeTemplate
|
|
|
11778
11826
|
var Review = function (_a) {
|
|
11779
11827
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
11780
11828
|
var theme = useTheme();
|
|
11781
|
-
return (jsxs$1(Container$
|
|
11829
|
+
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));
|
|
11782
11830
|
};
|
|
11783
|
-
var templateObject_1$
|
|
11831
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
11784
11832
|
|
|
11785
|
-
var List = newStyled.ul(templateObject_1$
|
|
11786
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
11787
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
11788
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
11833
|
+
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"])));
|
|
11834
|
+
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"])));
|
|
11835
|
+
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"])));
|
|
11836
|
+
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"])));
|
|
11789
11837
|
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; });
|
|
11790
11838
|
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; });
|
|
11791
|
-
var templateObject_1$
|
|
11839
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
11792
11840
|
|
|
11793
11841
|
var DropdownListIcons = function (_a) {
|
|
11794
11842
|
var items = _a.items;
|
|
@@ -11801,7 +11849,7 @@ var Dropdown = function (_a) {
|
|
|
11801
11849
|
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));
|
|
11802
11850
|
};
|
|
11803
11851
|
|
|
11804
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
11852
|
+
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; });
|
|
11805
11853
|
var AmazonButton = function (_a) {
|
|
11806
11854
|
var onClick = _a.onClick;
|
|
11807
11855
|
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));
|
|
@@ -11810,15 +11858,15 @@ var PaypalButton = function (_a) {
|
|
|
11810
11858
|
var onClick = _a.onClick;
|
|
11811
11859
|
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));
|
|
11812
11860
|
};
|
|
11813
|
-
var templateObject_1$
|
|
11861
|
+
var templateObject_1$r;
|
|
11814
11862
|
|
|
11815
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
11816
|
-
var Col = newStyled.div(templateObject_2$
|
|
11817
|
-
var Row = newStyled.div(templateObject_3$
|
|
11863
|
+
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'); });
|
|
11864
|
+
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"])));
|
|
11865
|
+
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) {
|
|
11818
11866
|
return props.rightToLeft &&
|
|
11819
11867
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
11820
11868
|
});
|
|
11821
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
11869
|
+
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; });
|
|
11822
11870
|
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; });
|
|
11823
11871
|
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; });
|
|
11824
11872
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -11826,7 +11874,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
11826
11874
|
var theme = useTheme();
|
|
11827
11875
|
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));
|
|
11828
11876
|
};
|
|
11829
|
-
var templateObject_1$
|
|
11877
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$4, templateObject_6$3;
|
|
11830
11878
|
|
|
11831
11879
|
var index = /*#__PURE__*/Object.freeze({
|
|
11832
11880
|
__proto__: null,
|
|
@@ -11847,8 +11895,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
11847
11895
|
height: height,
|
|
11848
11896
|
});
|
|
11849
11897
|
});
|
|
11850
|
-
var Container$
|
|
11851
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
11898
|
+
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"])));
|
|
11899
|
+
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; });
|
|
11852
11900
|
var getStylesBySize = function (size) {
|
|
11853
11901
|
switch (size) {
|
|
11854
11902
|
case ComponentSize.Medium:
|
|
@@ -11874,8 +11922,8 @@ var getStylesBySize = function (size) {
|
|
|
11874
11922
|
};
|
|
11875
11923
|
}
|
|
11876
11924
|
};
|
|
11877
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
11878
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
11925
|
+
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"])));
|
|
11926
|
+
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"])));
|
|
11879
11927
|
var ProductItemMobile = function (_a) {
|
|
11880
11928
|
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;
|
|
11881
11929
|
var theme = useTheme();
|
|
@@ -11888,32 +11936,32 @@ var ProductItemMobile = function (_a) {
|
|
|
11888
11936
|
_a[ComponentSize.Small] = 2,
|
|
11889
11937
|
_a)[size];
|
|
11890
11938
|
}, [size]);
|
|
11891
|
-
return (jsxs(Container$
|
|
11939
|
+
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));
|
|
11892
11940
|
};
|
|
11893
|
-
var templateObject_1$
|
|
11941
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$c, templateObject_4$7;
|
|
11894
11942
|
|
|
11895
|
-
var Container$
|
|
11943
|
+
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"])));
|
|
11896
11944
|
function withProductGrid(ProductItemComponent, data) {
|
|
11897
11945
|
function WithProductGrid(props) {
|
|
11898
|
-
return (jsx$1(Container$
|
|
11946
|
+
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));
|
|
11899
11947
|
}
|
|
11900
11948
|
/* istanbul ignore next */
|
|
11901
11949
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
11902
11950
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
11903
11951
|
return WithProductGrid;
|
|
11904
11952
|
}
|
|
11905
|
-
var templateObject_1$
|
|
11953
|
+
var templateObject_1$o;
|
|
11906
11954
|
|
|
11907
11955
|
var Collection = {
|
|
11908
11956
|
ProductItemMobile: ProductItemMobile,
|
|
11909
11957
|
withProductGrid: withProductGrid,
|
|
11910
11958
|
};
|
|
11911
11959
|
|
|
11912
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
11960
|
+
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) {
|
|
11913
11961
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
11914
11962
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
11915
11963
|
});
|
|
11916
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
11964
|
+
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) {
|
|
11917
11965
|
var width = _a.width;
|
|
11918
11966
|
return width;
|
|
11919
11967
|
}, function (_a) {
|
|
@@ -11954,28 +12002,28 @@ var Drawer = function (_a) {
|
|
|
11954
12002
|
}, [isOpen, onClose, onOpen]);
|
|
11955
12003
|
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;
|
|
11956
12004
|
};
|
|
11957
|
-
var templateObject_1$
|
|
12005
|
+
var templateObject_1$n, templateObject_2$d;
|
|
11958
12006
|
|
|
11959
|
-
var Container$
|
|
12007
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
11960
12008
|
var size = _a.size;
|
|
11961
12009
|
return (size ? size : '100%');
|
|
11962
12010
|
}, function (_a) {
|
|
11963
12011
|
var size = _a.size;
|
|
11964
12012
|
return (size ? size : '100%');
|
|
11965
12013
|
});
|
|
11966
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12014
|
+
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) {
|
|
11967
12015
|
var animationDuration = _a.animationDuration;
|
|
11968
12016
|
return animationDuration;
|
|
11969
12017
|
});
|
|
11970
12018
|
var Spinner = function (_a) {
|
|
11971
12019
|
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;
|
|
11972
|
-
return (jsx$1(Container$
|
|
12020
|
+
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));
|
|
11973
12021
|
};
|
|
11974
|
-
var templateObject_1$
|
|
12022
|
+
var templateObject_1$m, templateObject_2$c;
|
|
11975
12023
|
|
|
11976
|
-
var UL = newStyled.ul(templateObject_1$
|
|
11977
|
-
var LI = newStyled.li(templateObject_2$
|
|
11978
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12024
|
+
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"])));
|
|
12025
|
+
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; });
|
|
12026
|
+
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"])));
|
|
11979
12027
|
var Tags = function (_a) {
|
|
11980
12028
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
11981
12029
|
var theme = useTheme();
|
|
@@ -11983,7 +12031,7 @@ var Tags = function (_a) {
|
|
|
11983
12031
|
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));
|
|
11984
12032
|
}) }), void 0));
|
|
11985
12033
|
};
|
|
11986
|
-
var templateObject_1$
|
|
12034
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$b;
|
|
11987
12035
|
|
|
11988
12036
|
function FilteringDropdown(_a) {
|
|
11989
12037
|
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;
|
|
@@ -12016,12 +12064,12 @@ function FilteringDropdown(_a) {
|
|
|
12016
12064
|
}) }, void 0)] }), void 0));
|
|
12017
12065
|
}
|
|
12018
12066
|
|
|
12019
|
-
var Container$
|
|
12020
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
12021
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12067
|
+
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"])));
|
|
12068
|
+
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"])));
|
|
12069
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
12022
12070
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12023
12071
|
}));
|
|
12024
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12072
|
+
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) {
|
|
12025
12073
|
var bold = _a.bold;
|
|
12026
12074
|
return (bold ? '700' : '500');
|
|
12027
12075
|
}, function (_a) {
|
|
@@ -12035,7 +12083,7 @@ var PageNumber = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __ma
|
|
|
12035
12083
|
lineHeight: ['1.5rem', '1.75rem'],
|
|
12036
12084
|
width: ['1.25rem', '1.875rem'],
|
|
12037
12085
|
}));
|
|
12038
|
-
var templateObject_1$
|
|
12086
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$a, templateObject_4$6;
|
|
12039
12087
|
|
|
12040
12088
|
var Pagination = function (_a) {
|
|
12041
12089
|
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;
|
|
@@ -12048,10 +12096,10 @@ var Pagination = function (_a) {
|
|
|
12048
12096
|
setPage(page);
|
|
12049
12097
|
onChange(page);
|
|
12050
12098
|
};
|
|
12051
|
-
return (jsxs$1(Container$
|
|
12099
|
+
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));
|
|
12052
12100
|
};
|
|
12053
12101
|
|
|
12054
|
-
var Container$
|
|
12102
|
+
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({
|
|
12055
12103
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
12056
12104
|
}));
|
|
12057
12105
|
var Description$1 = newStyled.div({
|
|
@@ -12068,25 +12116,25 @@ var Description$1 = newStyled.div({
|
|
|
12068
12116
|
var ProductItem = function (_a) {
|
|
12069
12117
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12070
12118
|
var theme = useTheme();
|
|
12071
|
-
return (jsxs$1(Container$
|
|
12119
|
+
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));
|
|
12072
12120
|
};
|
|
12073
|
-
var templateObject_1$
|
|
12121
|
+
var templateObject_1$j;
|
|
12074
12122
|
|
|
12075
|
-
var Container$
|
|
12123
|
+
var Container$b = newStyled.div({
|
|
12076
12124
|
display: 'flex',
|
|
12077
12125
|
justifyContent: 'center',
|
|
12078
12126
|
padding: '1rem',
|
|
12079
12127
|
});
|
|
12080
12128
|
var Footer = function (_a) {
|
|
12081
12129
|
var text = _a.text, onClick = _a.onClick;
|
|
12082
|
-
return (jsx$1(Container$
|
|
12130
|
+
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));
|
|
12083
12131
|
};
|
|
12084
12132
|
|
|
12085
12133
|
var Ul = newStyled.ul({
|
|
12086
12134
|
margin: '0px',
|
|
12087
12135
|
padding: '0px',
|
|
12088
12136
|
});
|
|
12089
|
-
var Li = newStyled.li(templateObject_1$
|
|
12137
|
+
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({
|
|
12090
12138
|
padding: [0, '0rem 1rem'],
|
|
12091
12139
|
borderRadius: [0, '0.5rem'],
|
|
12092
12140
|
}));
|
|
@@ -12098,20 +12146,20 @@ var Anchor = newStyled.a({
|
|
|
12098
12146
|
padding: 0,
|
|
12099
12147
|
textDecoration: 'none',
|
|
12100
12148
|
});
|
|
12101
|
-
var Container$
|
|
12149
|
+
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({
|
|
12102
12150
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
12103
12151
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12104
12152
|
borderRadius: ['0', '0.5rem'],
|
|
12105
12153
|
}));
|
|
12106
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
12154
|
+
var Header$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
12107
12155
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12108
12156
|
}));
|
|
12109
12157
|
var ResultsPanel = function (_a) {
|
|
12110
12158
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12111
12159
|
var theme = useTheme();
|
|
12112
|
-
return (jsxs$1(Container$
|
|
12160
|
+
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));
|
|
12113
12161
|
};
|
|
12114
|
-
var templateObject_1$
|
|
12162
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$9;
|
|
12115
12163
|
|
|
12116
12164
|
var Input = newStyled.input(function (props) { return ({
|
|
12117
12165
|
padding: props.theme.component.input.padding,
|
|
@@ -12142,7 +12190,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12142
12190
|
},
|
|
12143
12191
|
}); });
|
|
12144
12192
|
|
|
12145
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12193
|
+
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({
|
|
12146
12194
|
right: ['1rem', '7.75rem'],
|
|
12147
12195
|
top: ['0.75rem', '0.75rem'],
|
|
12148
12196
|
}));
|
|
@@ -12151,7 +12199,7 @@ var ClearButton = function (_a) {
|
|
|
12151
12199
|
var theme = useTheme();
|
|
12152
12200
|
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));
|
|
12153
12201
|
};
|
|
12154
|
-
var templateObject_1$
|
|
12202
|
+
var templateObject_1$h;
|
|
12155
12203
|
|
|
12156
12204
|
var useOnClickOutside = function (ref, handler) {
|
|
12157
12205
|
useEffect(function () {
|
|
@@ -12237,7 +12285,7 @@ var reducer = function (state, action) {
|
|
|
12237
12285
|
}
|
|
12238
12286
|
}
|
|
12239
12287
|
};
|
|
12240
|
-
var Container$
|
|
12288
|
+
var Container$9 = newStyled.div({
|
|
12241
12289
|
position: 'relative',
|
|
12242
12290
|
display: 'flex',
|
|
12243
12291
|
});
|
|
@@ -12273,7 +12321,7 @@ var SearchBar = function (_a) {
|
|
|
12273
12321
|
onClose();
|
|
12274
12322
|
}
|
|
12275
12323
|
};
|
|
12276
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
12324
|
+
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) {
|
|
12277
12325
|
if (e.key === 'Enter') {
|
|
12278
12326
|
e.preventDefault();
|
|
12279
12327
|
e.stopPropagation();
|
|
@@ -12547,36 +12595,36 @@ function useSwipeable(options) {
|
|
|
12547
12595
|
return handlers;
|
|
12548
12596
|
}
|
|
12549
12597
|
|
|
12550
|
-
var Container$
|
|
12551
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12552
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12598
|
+
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"])));
|
|
12599
|
+
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"])));
|
|
12600
|
+
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"])));
|
|
12553
12601
|
var ImageProductWithTags = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
12554
12602
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId;
|
|
12555
|
-
return (jsxs$1(Container$
|
|
12603
|
+
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));
|
|
12556
12604
|
});
|
|
12557
|
-
var templateObject_1$
|
|
12605
|
+
var templateObject_1$g, templateObject_2$8, templateObject_3$8;
|
|
12558
12606
|
|
|
12559
|
-
var Button = newStyled.button(templateObject_1$
|
|
12607
|
+
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"])));
|
|
12560
12608
|
var ArrowButton = function (_a) {
|
|
12561
12609
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12562
12610
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12563
12611
|
};
|
|
12564
|
-
var templateObject_1$
|
|
12612
|
+
var templateObject_1$f;
|
|
12565
12613
|
|
|
12566
|
-
var Container$
|
|
12614
|
+
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"])));
|
|
12567
12615
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12568
12616
|
var SlideDots = function (_a) {
|
|
12569
12617
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12570
12618
|
var theme = useTheme();
|
|
12571
|
-
return (jsx$1(Container$
|
|
12619
|
+
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
|
|
12572
12620
|
? theme.colors.shades.white.color
|
|
12573
12621
|
: theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12574
12622
|
};
|
|
12575
|
-
var templateObject_1$
|
|
12623
|
+
var templateObject_1$e;
|
|
12576
12624
|
|
|
12577
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12578
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
12579
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
12625
|
+
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"])));
|
|
12626
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12627
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12580
12628
|
var SlideNavigation = function (_a) {
|
|
12581
12629
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
12582
12630
|
var theme = useTheme();
|
|
@@ -12588,9 +12636,9 @@ var SlideNavigation = function (_a) {
|
|
|
12588
12636
|
onNavigate(selectedIndex + 1);
|
|
12589
12637
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
12590
12638
|
};
|
|
12591
|
-
var templateObject_1$
|
|
12639
|
+
var templateObject_1$d, templateObject_2$7, templateObject_3$7;
|
|
12592
12640
|
|
|
12593
|
-
var Container$
|
|
12641
|
+
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"])));
|
|
12594
12642
|
var ProductGalleryMobile = function (_a) {
|
|
12595
12643
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12596
12644
|
var _b = useState(0), index = _b[0], setIndex = _b[1];
|
|
@@ -12612,9 +12660,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12612
12660
|
useEffect(function () {
|
|
12613
12661
|
setSelectedImage(images[index]);
|
|
12614
12662
|
}, [index, images]);
|
|
12615
|
-
return (jsxs$1(Container$
|
|
12663
|
+
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));
|
|
12616
12664
|
};
|
|
12617
|
-
var templateObject_1$
|
|
12665
|
+
var templateObject_1$c;
|
|
12618
12666
|
|
|
12619
12667
|
var Portal = function (_a) {
|
|
12620
12668
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -12747,14 +12795,14 @@ var react = __toCommonJS(react_exports);
|
|
|
12747
12795
|
var visibleStyle = function (_a) {
|
|
12748
12796
|
var opened = _a.opened;
|
|
12749
12797
|
return opened
|
|
12750
|
-
? css(templateObject_1$
|
|
12798
|
+
? 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 "])));
|
|
12751
12799
|
};
|
|
12752
12800
|
var transformStyle = function (_a) {
|
|
12753
12801
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
12754
12802
|
return opened
|
|
12755
|
-
? css(templateObject_3$
|
|
12803
|
+
? 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%)');
|
|
12756
12804
|
};
|
|
12757
|
-
var Container$
|
|
12805
|
+
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({
|
|
12758
12806
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
12759
12807
|
}), visibleStyle, transformStyle);
|
|
12760
12808
|
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);
|
|
@@ -12767,7 +12815,7 @@ var Modal = function (_a) {
|
|
|
12767
12815
|
}
|
|
12768
12816
|
close();
|
|
12769
12817
|
};
|
|
12770
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
12818
|
+
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));
|
|
12771
12819
|
};
|
|
12772
12820
|
var modalEvent = function (id, detail) {
|
|
12773
12821
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -12795,39 +12843,39 @@ var useModal = function (id) {
|
|
|
12795
12843
|
close: close,
|
|
12796
12844
|
}); }, [close, open, opened]);
|
|
12797
12845
|
};
|
|
12798
|
-
var templateObject_1$
|
|
12846
|
+
var templateObject_1$b, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$2;
|
|
12799
12847
|
|
|
12800
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
12848
|
+
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; });
|
|
12801
12849
|
var Title$1 = function (_a) {
|
|
12802
12850
|
var title = _a.title;
|
|
12803
12851
|
var theme = useTheme();
|
|
12804
12852
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
12805
12853
|
};
|
|
12806
|
-
var templateObject_1$
|
|
12854
|
+
var templateObject_1$a;
|
|
12807
12855
|
|
|
12808
|
-
var P = newStyled.p(templateObject_1$
|
|
12856
|
+
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; });
|
|
12809
12857
|
var Promo = function (_a) {
|
|
12810
12858
|
var text = _a.text;
|
|
12811
12859
|
var theme = useTheme();
|
|
12812
12860
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
12813
12861
|
};
|
|
12814
|
-
var templateObject_1$
|
|
12862
|
+
var templateObject_1$9;
|
|
12815
12863
|
|
|
12816
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
12864
|
+
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; });
|
|
12817
12865
|
var Description = function (_a) {
|
|
12818
12866
|
var text = _a.text;
|
|
12819
12867
|
var theme = useTheme();
|
|
12820
12868
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
12821
12869
|
};
|
|
12822
|
-
var templateObject_1$
|
|
12870
|
+
var templateObject_1$8;
|
|
12823
12871
|
|
|
12824
|
-
var Container$
|
|
12872
|
+
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"); });
|
|
12825
12873
|
var CloseButton = function (_a) {
|
|
12826
12874
|
var onClick = _a.onClick, size = _a.size;
|
|
12827
12875
|
var theme = useTheme();
|
|
12828
|
-
return (jsx$1(Container$
|
|
12876
|
+
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));
|
|
12829
12877
|
};
|
|
12830
|
-
var templateObject_1$
|
|
12878
|
+
var templateObject_1$7;
|
|
12831
12879
|
|
|
12832
12880
|
var CartProductItem = {
|
|
12833
12881
|
Title: Title$1,
|
|
@@ -12837,10 +12885,10 @@ var CartProductItem = {
|
|
|
12837
12885
|
CloseButton: CloseButton,
|
|
12838
12886
|
};
|
|
12839
12887
|
|
|
12840
|
-
var Container$
|
|
12841
|
-
var Item = newStyled.span(templateObject_2$
|
|
12842
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
12843
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
12888
|
+
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; });
|
|
12889
|
+
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"])));
|
|
12890
|
+
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"])));
|
|
12891
|
+
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"])));
|
|
12844
12892
|
var QuantityPicker = function (_a) {
|
|
12845
12893
|
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;
|
|
12846
12894
|
var theme = useTheme();
|
|
@@ -12863,9 +12911,9 @@ var QuantityPicker = function (_a) {
|
|
|
12863
12911
|
return clamp(value);
|
|
12864
12912
|
});
|
|
12865
12913
|
}, [value, clamp]);
|
|
12866
|
-
return (jsxs$1(Container$
|
|
12914
|
+
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));
|
|
12867
12915
|
};
|
|
12868
|
-
var templateObject_1$
|
|
12916
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5, templateObject_4$4;
|
|
12869
12917
|
|
|
12870
12918
|
var htmlReactParser = {exports: {}};
|
|
12871
12919
|
|
|
@@ -16646,16 +16694,16 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
16646
16694
|
HTMLReactParser$1.attributesToProps;
|
|
16647
16695
|
HTMLReactParser$1.Element;
|
|
16648
16696
|
|
|
16649
|
-
var Container$
|
|
16650
|
-
var Card = newStyled.div(templateObject_2$
|
|
16651
|
-
var Tag = newStyled.div(templateObject_3$
|
|
16652
|
-
var Label = newStyled.div(templateObject_4$
|
|
16697
|
+
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"])));
|
|
16698
|
+
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"])));
|
|
16699
|
+
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"])));
|
|
16700
|
+
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"])));
|
|
16653
16701
|
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"])));
|
|
16654
16702
|
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"])));
|
|
16655
16703
|
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"])));
|
|
16656
16704
|
var PackSelector = function (_a) {
|
|
16657
16705
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
16658
|
-
return (jsx$1(Container$
|
|
16706
|
+
return (jsx$1(Container$2, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
16659
16707
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack }, pack.label));
|
|
16660
16708
|
}) }), void 0));
|
|
16661
16709
|
};
|
|
@@ -16672,28 +16720,28 @@ var PackCard = function (_a) {
|
|
|
16672
16720
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16673
16721
|
} }, { 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));
|
|
16674
16722
|
};
|
|
16675
|
-
var templateObject_1$
|
|
16723
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7$1;
|
|
16676
16724
|
|
|
16677
|
-
var Title = newStyled.div(templateObject_1$
|
|
16678
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
16679
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
16725
|
+
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; });
|
|
16726
|
+
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; });
|
|
16727
|
+
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"])));
|
|
16680
16728
|
var Accordion = function (_a) {
|
|
16681
16729
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b;
|
|
16682
16730
|
var theme = useTheme();
|
|
16683
16731
|
var _c = React__default.useState(isOpenByDefault), isOpen = _c[0], setIsOpen = _c[1];
|
|
16684
16732
|
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));
|
|
16685
16733
|
};
|
|
16686
|
-
var templateObject_1$
|
|
16734
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$3;
|
|
16687
16735
|
|
|
16688
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
16689
|
-
var Header = newStyled.div(templateObject_2$
|
|
16690
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
16691
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
16736
|
+
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; });
|
|
16737
|
+
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"])));
|
|
16738
|
+
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"])));
|
|
16739
|
+
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"])));
|
|
16692
16740
|
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; });
|
|
16693
16741
|
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; });
|
|
16694
16742
|
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"])));
|
|
16695
16743
|
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"])));
|
|
16696
|
-
var templateObject_1$
|
|
16744
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
|
|
16697
16745
|
|
|
16698
16746
|
var Filters = function (_a) {
|
|
16699
16747
|
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;
|
|
@@ -16768,18 +16816,50 @@ var FilterCheckbox = function (_a) {
|
|
|
16768
16816
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Small, variant: "secondary" }, itemIndex));
|
|
16769
16817
|
};
|
|
16770
16818
|
|
|
16771
|
-
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"])));
|
|
16772
|
-
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"])));
|
|
16773
|
-
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"])));
|
|
16774
|
-
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"])));
|
|
16819
|
+
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"])));
|
|
16820
|
+
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"])));
|
|
16821
|
+
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"])));
|
|
16822
|
+
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"])));
|
|
16775
16823
|
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"])));
|
|
16776
16824
|
var SearchNavigation = function (_a) {
|
|
16777
16825
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
16778
|
-
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) {
|
|
16826
|
+
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) {
|
|
16779
16827
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
16780
16828
|
}) }, void 0)] }, void 0));
|
|
16781
16829
|
};
|
|
16782
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
16830
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
|
|
16831
|
+
|
|
16832
|
+
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: 14px;\n height: 4.5rem;\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: 14px;\n height: 4.5rem;\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) {
|
|
16833
|
+
var tabsMaxWidth = _a.tabsMaxWidth;
|
|
16834
|
+
return tabsMaxWidth;
|
|
16835
|
+
}, function (_a) {
|
|
16836
|
+
var selected = _a.selected, color = _a.color;
|
|
16837
|
+
return selected ? "border-bottom: 3px solid ".concat(color, "; font-weight: 700;") : '';
|
|
16838
|
+
});
|
|
16839
|
+
var Tab = function (_a) {
|
|
16840
|
+
var title = _a.title, selected = _a.selected, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'var(--colors-pallete-primary-color)' : _b, _c = _a.tabsMaxWidth, tabsMaxWidth = _c === void 0 ? '11rem' : _c;
|
|
16841
|
+
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
16842
|
+
};
|
|
16843
|
+
var templateObject_1$1;
|
|
16844
|
+
|
|
16845
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
16846
|
+
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) {
|
|
16847
|
+
var backgroundColor = _a.backgroundColor;
|
|
16848
|
+
return backgroundColor;
|
|
16849
|
+
});
|
|
16850
|
+
var TabContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16851
|
+
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"])));
|
|
16852
|
+
var Tabs = function (_a) {
|
|
16853
|
+
var _b;
|
|
16854
|
+
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
16855
|
+
var _d = useState(initialSelected), selectedTab = _d[0], setSelectedTab = _d[1];
|
|
16856
|
+
if (!Array.isArray(tabs) || tabs.length === 0) {
|
|
16857
|
+
return null;
|
|
16858
|
+
}
|
|
16859
|
+
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
16860
|
+
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));
|
|
16861
|
+
};
|
|
16862
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
16783
16863
|
|
|
16784
|
-
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 };
|
|
16864
|
+
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, 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 };
|
|
16785
16865
|
//# sourceMappingURL=index.esm.js.map
|