@trafilea/afrodita-components 6.17.3 → 6.18.1
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 +46 -18
- package/build/index.esm.js +767 -700
- package/build/index.esm.js.map +1 -1
- package/build/index.js +767 -699
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thebodcon.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3127,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3127
|
desktop: 1280,
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Container$
|
|
3130
|
+
var Container$1f = newStyled.div(templateObject_1$20 || (templateObject_1$20 = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3131
3131
|
var height = _a.height;
|
|
3132
3132
|
return (height ? height : '1.5em');
|
|
3133
3133
|
}, function (_a) {
|
|
@@ -3152,11 +3152,11 @@ var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = _
|
|
|
3152
3152
|
var SkeletonBox = function (_a) {
|
|
3153
3153
|
var width = _a.width, height = _a.height;
|
|
3154
3154
|
var theme = useTheme();
|
|
3155
|
-
return jsx$1(Container$
|
|
3155
|
+
return jsx$1(Container$1f, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3156
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$20;
|
|
3158
3158
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3160
3160
|
var width = _a.width;
|
|
3161
3161
|
return width;
|
|
3162
3162
|
}, function (_a) {
|
|
@@ -3172,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1_ || (templateObject_1$1_
|
|
|
3172
3172
|
var opacity = _a.opacity;
|
|
3173
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3174
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3176
3176
|
var width = _a.width;
|
|
3177
3177
|
return width;
|
|
3178
3178
|
}, function (_a) {
|
|
@@ -3185,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1l || (templateObject_2$
|
|
|
3185
3185
|
var opacity = _a.opacity;
|
|
3186
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3187
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$1$, templateObject_2$1m;
|
|
3189
3189
|
|
|
3190
3190
|
/* eslint-disable no-undef */
|
|
3191
3191
|
var cache = new Map();
|
|
@@ -3361,7 +3361,7 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
3363
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3364
|
+
var Img = newStyled.img(templateObject_1$1_ || (templateObject_1$1_ = __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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
3366
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3367
3367
|
var config = useTheme().config;
|
|
@@ -3370,7 +3370,7 @@ var Image$3 = function (_a) {
|
|
|
3370
3370
|
: src;
|
|
3371
3371
|
return (jsx$1(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3372
3372
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3373
|
+
var templateObject_1$1_;
|
|
3374
3374
|
|
|
3375
3375
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3376
3376
|
|
|
@@ -3568,6 +3568,8 @@ var Arrows = /*#__PURE__*/Object.freeze({
|
|
|
3568
3568
|
|
|
3569
3569
|
var Atom = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "custom/atom" }), void 0); };
|
|
3570
3570
|
|
|
3571
|
+
var BeautyFace = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "beauty_face" }, props, { name: "custom/beauty_face" }), void 0)); };
|
|
3572
|
+
|
|
3571
3573
|
var Bra = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "custom/bra" }), void 0); };
|
|
3572
3574
|
|
|
3573
3575
|
var Bubbles = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "custom/bubbles" }), void 0); };
|
|
@@ -3586,14 +3588,22 @@ var CrueltyFree = function (props) { return jsx$1(Icon$1, __assign$1({}, props,
|
|
|
3586
3588
|
|
|
3587
3589
|
var FairAdvantages = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/fair_advantages" }), void 0)); };
|
|
3588
3590
|
|
|
3591
|
+
var Focus = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "focus" }, props, { name: "custom/focus" }), void 0)); };
|
|
3592
|
+
|
|
3593
|
+
var FreeShippingTruck = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/free_shipping_truck" }), void 0)); };
|
|
3594
|
+
|
|
3589
3595
|
var Frown = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "custom/frown" }), void 0); };
|
|
3590
3596
|
|
|
3597
|
+
var HigherDiscounts = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/higher_discounts" }), void 0)); };
|
|
3598
|
+
|
|
3591
3599
|
var MoneyFlow = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "custom/money_flow" }), void 0); };
|
|
3592
3600
|
|
|
3593
3601
|
var NewSixtyDaysGuarantee = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/new_sixty_days_guarantee" }), void 0)); };
|
|
3594
3602
|
|
|
3595
3603
|
var PacksAndBundles = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/packs_and_bundles" }), void 0)); };
|
|
3596
3604
|
|
|
3605
|
+
var PrioritySupport = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/priority_support" }), void 0)); };
|
|
3606
|
+
|
|
3597
3607
|
var SeamlessSupportBra = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/seamless_support_bra" }), void 0)); };
|
|
3598
3608
|
|
|
3599
3609
|
var SixtyDaysBold = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/sixty_days_bold" }), void 0)); };
|
|
@@ -3616,15 +3626,12 @@ var WireFreeComfort = function (props) { return (jsx$1(Icon$1, __assign$1({}, pr
|
|
|
3616
3626
|
|
|
3617
3627
|
var WireFreeComfortBold = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort_bold" }), void 0)); };
|
|
3618
3628
|
|
|
3619
|
-
var
|
|
3620
|
-
|
|
3621
|
-
var HigherDiscounts = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/higher_discounts" }), void 0)); };
|
|
3622
|
-
|
|
3623
|
-
var PrioritySupport = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/priority_support" }), void 0)); };
|
|
3629
|
+
var Zoom = function (props) { return jsx$1(Icon$1, __assign$1({ testId: "zoom" }, props, { name: "custom/zoom" }), void 0); };
|
|
3624
3630
|
|
|
3625
3631
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
3626
3632
|
__proto__: null,
|
|
3627
3633
|
Atom: Atom,
|
|
3634
|
+
BeautyFace: BeautyFace,
|
|
3628
3635
|
Bra: Bra,
|
|
3629
3636
|
Bubbles: Bubbles,
|
|
3630
3637
|
BulletOne: BulletOne,
|
|
@@ -3634,10 +3641,14 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
3634
3641
|
ClinicallyTested: ClinicallyTested,
|
|
3635
3642
|
CrueltyFree: CrueltyFree,
|
|
3636
3643
|
FairAdvantages: FairAdvantages,
|
|
3644
|
+
Focus: Focus,
|
|
3645
|
+
FreeShippingTruck: FreeShippingTruck,
|
|
3637
3646
|
Frown: Frown,
|
|
3647
|
+
HigherDiscounts: HigherDiscounts,
|
|
3638
3648
|
MoneyFlow: MoneyFlow,
|
|
3639
3649
|
NewSixtyDaysGuarantee: NewSixtyDaysGuarantee,
|
|
3640
3650
|
PacksAndBundles: PacksAndBundles,
|
|
3651
|
+
PrioritySupport: PrioritySupport,
|
|
3641
3652
|
SeamlessSupportBra: SeamlessSupportBra,
|
|
3642
3653
|
SixtyDaysBold: SixtyDaysBold,
|
|
3643
3654
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
@@ -3649,9 +3660,7 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
3649
3660
|
Underwear: Underwear,
|
|
3650
3661
|
WireFreeComfort: WireFreeComfort,
|
|
3651
3662
|
WireFreeComfortBold: WireFreeComfortBold,
|
|
3652
|
-
|
|
3653
|
-
HigherDiscounts: HigherDiscounts,
|
|
3654
|
-
PrioritySupport: PrioritySupport
|
|
3663
|
+
Zoom: Zoom
|
|
3655
3664
|
});
|
|
3656
3665
|
|
|
3657
3666
|
var AppleStore = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "download/apple_store" }), void 0); };
|
|
@@ -3995,8 +4004,12 @@ var Drop = function (props) { return jsx$1(Icon$1, __assign$1({ testId: "drop" }
|
|
|
3995
4004
|
|
|
3996
4005
|
var DropEmpty = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "drop-empty" }, props, { name: "pdp/drop_empty" }), void 0)); };
|
|
3997
4006
|
|
|
4007
|
+
var DropV2 = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "drop_v2" }, props, { name: "pdp/drop_v2" }), void 0)); };
|
|
4008
|
+
|
|
3998
4009
|
var ErrorCross = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/error_cross" }), void 0); };
|
|
3999
4010
|
|
|
4011
|
+
var FewDrops = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "few_drops" }, props, { name: "pdp/few_drops" }), void 0)); };
|
|
4012
|
+
|
|
4000
4013
|
var FlagUSA = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
|
|
4001
4014
|
|
|
4002
4015
|
var FreeReturnsV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/free_returns_v2" }), void 0)); };
|
|
@@ -4049,7 +4062,9 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
4049
4062
|
Clock: Clock,
|
|
4050
4063
|
Drop: Drop,
|
|
4051
4064
|
DropEmpty: DropEmpty,
|
|
4065
|
+
DropV2: DropV2,
|
|
4052
4066
|
ErrorCross: ErrorCross,
|
|
4067
|
+
FewDrops: FewDrops,
|
|
4053
4068
|
FlagUSA: FlagUSA,
|
|
4054
4069
|
FreeReturnsV2: FreeReturnsV2,
|
|
4055
4070
|
FreeShippingV2: FreeShippingV2,
|
|
@@ -4173,17 +4188,17 @@ function jsxs(type, props, key) {
|
|
|
4173
4188
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4174
4189
|
// `variants` styles that are consistent through all themes.
|
|
4175
4190
|
var TAGS = {
|
|
4176
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4177
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4178
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4179
|
-
display1: newStyled.h1(templateObject_4$
|
|
4180
|
-
display2: newStyled.h2(templateObject_5$
|
|
4181
|
-
display3: newStyled.h3(templateObject_6$
|
|
4182
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4183
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4184
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4185
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4186
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4191
|
+
hero1: newStyled.h1(templateObject_1$1Z || (templateObject_1$1Z = __makeTemplateObject([""], [""]))),
|
|
4192
|
+
hero2: newStyled.h2(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject([""], [""]))),
|
|
4193
|
+
hero3: newStyled.h3(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject([""], [""]))),
|
|
4194
|
+
display1: newStyled.h1(templateObject_4$N || (templateObject_4$N = __makeTemplateObject([""], [""]))),
|
|
4195
|
+
display2: newStyled.h2(templateObject_5$z || (templateObject_5$z = __makeTemplateObject([""], [""]))),
|
|
4196
|
+
display3: newStyled.h3(templateObject_6$t || (templateObject_6$t = __makeTemplateObject([""], [""]))),
|
|
4197
|
+
heading1: newStyled.h1(templateObject_7$k || (templateObject_7$k = __makeTemplateObject([""], [""]))),
|
|
4198
|
+
heading2: newStyled.h2(templateObject_8$i || (templateObject_8$i = __makeTemplateObject([""], [""]))),
|
|
4199
|
+
heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
|
|
4200
|
+
heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
|
|
4201
|
+
heading5: newStyled.h5(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject([""], [""]))),
|
|
4187
4202
|
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4188
4203
|
heading7: newStyled.h1(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""]))),
|
|
4189
4204
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4309,17 +4324,17 @@ var DEFAULTS = {
|
|
|
4309
4324
|
size: 'regular',
|
|
4310
4325
|
},
|
|
4311
4326
|
};
|
|
4312
|
-
var templateObject_1$
|
|
4313
|
-
|
|
4314
|
-
var Container$
|
|
4315
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4316
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4317
|
-
var Label$
|
|
4318
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4319
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4327
|
+
var templateObject_1$1Z, templateObject_2$1l, templateObject_3$11, templateObject_4$N, templateObject_5$z, templateObject_6$t, templateObject_7$k, templateObject_8$i, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4328
|
+
|
|
4329
|
+
var Container$1e = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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"])));
|
|
4330
|
+
var Card$3 = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __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: 16px 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 p {\n color: var(--color);\n }\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: 16px 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 p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4331
|
+
var Tag$2 = newStyled.div(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
4332
|
+
var Label$6 = newStyled.div(templateObject_4$M || (templateObject_4$M = __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"])));
|
|
4333
|
+
var Check$1 = newStyled.div(templateObject_5$y || (templateObject_5$y = __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"])));
|
|
4334
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4320
4335
|
var PackSelectorV2 = function (_a) {
|
|
4321
4336
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4322
|
-
return (jsx$1(Container$
|
|
4337
|
+
return (jsx$1(Container$1e, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4323
4338
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4324
4339
|
}) }), void 0));
|
|
4325
4340
|
};
|
|
@@ -4333,7 +4348,7 @@ var PackCard$1 = function (_a) {
|
|
|
4333
4348
|
.then(function (icon) { return setIcon(icon); })
|
|
4334
4349
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4335
4350
|
}, [pack.meta.icon]);
|
|
4336
|
-
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
4351
|
+
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$6, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4337
4352
|
locale: 'en-US',
|
|
4338
4353
|
currency: currencyCode || 'USD',
|
|
4339
4354
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4341,27 +4356,27 @@ var PackCard$1 = function (_a) {
|
|
|
4341
4356
|
currency: currencyCode || 'USD',
|
|
4342
4357
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4343
4358
|
};
|
|
4344
|
-
var templateObject_1$
|
|
4359
|
+
var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s;
|
|
4345
4360
|
|
|
4346
|
-
var Container$
|
|
4347
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4361
|
+
var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4362
|
+
var DropContainer = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4348
4363
|
var DropList = function (_a) {
|
|
4349
4364
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4350
|
-
return (jsx$1(Container$
|
|
4365
|
+
return (jsx$1(Container$1d, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4351
4366
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4352
4367
|
}) }, void 0));
|
|
4353
4368
|
};
|
|
4354
|
-
var templateObject_1$
|
|
4369
|
+
var templateObject_1$1X, templateObject_2$1j;
|
|
4355
4370
|
|
|
4356
4371
|
var DROPS_TOTAL = 5;
|
|
4357
|
-
var Container$
|
|
4358
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4359
|
-
var Description$3 = newStyled.p(templateObject_3
|
|
4372
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4373
|
+
var Title$8 = newStyled.p(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4374
|
+
var Description$3 = newStyled.p(templateObject_3$$ || (templateObject_3$$ = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4360
4375
|
var AbsorbencyLevel = function (_a) {
|
|
4361
4376
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4362
|
-
return (jsxs$1(Container$
|
|
4377
|
+
return (jsxs$1(Container$1c, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4363
4378
|
};
|
|
4364
|
-
var templateObject_1$
|
|
4379
|
+
var templateObject_1$1W, templateObject_2$1i, templateObject_3$$;
|
|
4365
4380
|
|
|
4366
4381
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4367
4382
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4437,7 +4452,7 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4437
4452
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4438
4453
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4439
4454
|
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4440
|
-
var StyledContent$1 = newStyled.button(templateObject_1$
|
|
4455
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4441
4456
|
var Accordion$1 = function (_a) {
|
|
4442
4457
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4443
4458
|
var theme = useTheme();
|
|
@@ -4461,9 +4476,9 @@ var Accordion$1 = function (_a) {
|
|
|
4461
4476
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4462
4477
|
} }), void 0));
|
|
4463
4478
|
};
|
|
4464
|
-
var templateObject_1$
|
|
4479
|
+
var templateObject_1$1V;
|
|
4465
4480
|
|
|
4466
|
-
var Container$
|
|
4481
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4467
4482
|
var AccordionOptions = function (_a) {
|
|
4468
4483
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4469
4484
|
var _b = useState({
|
|
@@ -4476,7 +4491,7 @@ var AccordionOptions = function (_a) {
|
|
|
4476
4491
|
}
|
|
4477
4492
|
return false;
|
|
4478
4493
|
};
|
|
4479
|
-
return (jsx$1(Container$
|
|
4494
|
+
return (jsx$1(Container$1b, { children: accordions.map(function (accordion, index) {
|
|
4480
4495
|
var forceOpenValue = getForceOpen(index);
|
|
4481
4496
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4482
4497
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4487,7 +4502,7 @@ var AccordionOptions = function (_a) {
|
|
|
4487
4502
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4488
4503
|
}) }, void 0));
|
|
4489
4504
|
};
|
|
4490
|
-
var templateObject_1$
|
|
4505
|
+
var templateObject_1$1U;
|
|
4491
4506
|
|
|
4492
4507
|
var CardSectionType;
|
|
4493
4508
|
(function (CardSectionType) {
|
|
@@ -4649,29 +4664,29 @@ var isValidDate = function (value) {
|
|
|
4649
4664
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4650
4665
|
};
|
|
4651
4666
|
|
|
4652
|
-
var Bold = newStyled.span(templateObject_1$
|
|
4653
|
-
var FlexContainer$2 = newStyled.div(templateObject_2$
|
|
4654
|
-
var templateObject_1$
|
|
4667
|
+
var Bold = newStyled.span(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4668
|
+
var FlexContainer$2 = newStyled.div(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
4669
|
+
var templateObject_1$1T, templateObject_2$1h;
|
|
4655
4670
|
|
|
4656
|
-
var Container$
|
|
4671
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
4657
4672
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4658
4673
|
return width;
|
|
4659
4674
|
}, function (_a) {
|
|
4660
4675
|
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4661
4676
|
return height;
|
|
4662
4677
|
});
|
|
4663
|
-
var FlexCentered = newStyled.div(templateObject_2$
|
|
4664
|
-
var LeftSide = newStyled.div(templateObject_3$
|
|
4665
|
-
var RightSide = newStyled.div(templateObject_4$
|
|
4666
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
4667
|
-
var templateObject_1$
|
|
4678
|
+
var FlexCentered = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
4679
|
+
var LeftSide = newStyled.div(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
4680
|
+
var RightSide = newStyled.div(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
4681
|
+
var FlexStart = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
4682
|
+
var templateObject_1$1S, templateObject_2$1g, templateObject_3$_, templateObject_4$L, templateObject_5$x;
|
|
4668
4683
|
|
|
4669
4684
|
var _this$1 = undefined;
|
|
4670
4685
|
var CouponCard = function (_a) {
|
|
4671
4686
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
|
|
4672
4687
|
var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4673
4688
|
var handleCopy = useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4674
|
-
return (jsxs$1(Container$
|
|
4689
|
+
return (jsxs$1(Container$1a, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Large, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
|
|
4675
4690
|
name: 'actions/copy_outlined',
|
|
4676
4691
|
position: 'right',
|
|
4677
4692
|
margin: '10px',
|
|
@@ -4719,14 +4734,14 @@ var CancellationFlowAccordionContentPerPartner = {
|
|
|
4719
4734
|
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4720
4735
|
};
|
|
4721
4736
|
|
|
4722
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4723
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4737
|
+
var ErrorText = newStyled.h3(templateObject_1$1R || (templateObject_1$1R = __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; });
|
|
4738
|
+
var ErrorContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4724
4739
|
var Error$1 = function (_a) {
|
|
4725
4740
|
var error = _a.error;
|
|
4726
4741
|
var theme = useTheme();
|
|
4727
4742
|
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));
|
|
4728
4743
|
};
|
|
4729
|
-
var templateObject_1$
|
|
4744
|
+
var templateObject_1$1R, templateObject_2$1f;
|
|
4730
4745
|
|
|
4731
4746
|
var BaseSelectButton = function (_a) {
|
|
4732
4747
|
var children = _a.children, as = _a.as;
|
|
@@ -4743,7 +4758,7 @@ function BaseSelectOption(_a) {
|
|
|
4743
4758
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4744
4759
|
}
|
|
4745
4760
|
|
|
4746
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4761
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4747
4762
|
function BaseSelect(_a) {
|
|
4748
4763
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4749
4764
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4753,7 +4768,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4753
4768
|
Options: BaseSelectOptions,
|
|
4754
4769
|
Option: BaseSelectOption,
|
|
4755
4770
|
});
|
|
4756
|
-
var templateObject_1$
|
|
4771
|
+
var templateObject_1$1Q;
|
|
4757
4772
|
|
|
4758
4773
|
var CustomButton = newStyled.button(function (_a) {
|
|
4759
4774
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4792,7 +4807,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4792
4807
|
});
|
|
4793
4808
|
});
|
|
4794
4809
|
// TODO Remove this when we find the real solution
|
|
4795
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4810
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4796
4811
|
var open = _a.open;
|
|
4797
4812
|
return open &&
|
|
4798
4813
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4812,7 +4827,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4812
4827
|
} }), void 0));
|
|
4813
4828
|
};
|
|
4814
4829
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4815
|
-
var templateObject_1$
|
|
4830
|
+
var templateObject_1$1P;
|
|
4816
4831
|
|
|
4817
4832
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4818
4833
|
var theme = _a.theme;
|
|
@@ -4890,7 +4905,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4890
4905
|
Styles[props.variant](props.theme),
|
|
4891
4906
|
Styles[props.size](props.theme),
|
|
4892
4907
|
]; });
|
|
4893
|
-
var Label$
|
|
4908
|
+
var Label$5 = function (_a) {
|
|
4894
4909
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4895
4910
|
var theme = useTheme();
|
|
4896
4911
|
return (jsx$1(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -4979,7 +4994,7 @@ var CustomCheckboxStyles = {
|
|
|
4979
4994
|
},
|
|
4980
4995
|
};
|
|
4981
4996
|
|
|
4982
|
-
var Container$
|
|
4997
|
+
var Container$19 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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"])));
|
|
4983
4998
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4984
4999
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4985
5000
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4990,7 +5005,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4990
5005
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4991
5006
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4992
5007
|
]; });
|
|
4993
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
5008
|
+
var Input$5 = newStyled.input(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
4994
5009
|
var disabled = _a.disabled;
|
|
4995
5010
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4996
5011
|
});
|
|
@@ -5004,9 +5019,9 @@ var Checkbox = function (_a) {
|
|
|
5004
5019
|
}
|
|
5005
5020
|
onChange(e.target.checked);
|
|
5006
5021
|
};
|
|
5007
|
-
return (jsxs$1(Container$
|
|
5022
|
+
return (jsxs$1(Container$19, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$5, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
5008
5023
|
};
|
|
5009
|
-
var templateObject_1$
|
|
5024
|
+
var templateObject_1$1O, templateObject_2$1e;
|
|
5010
5025
|
|
|
5011
5026
|
var CustomOption = newStyled.li(function (_a) {
|
|
5012
5027
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -5055,9 +5070,9 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
5055
5070
|
Option: BaseDropdownOption,
|
|
5056
5071
|
});
|
|
5057
5072
|
|
|
5058
|
-
var Container$
|
|
5059
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5060
|
-
var SelectedOption = newStyled.span(templateObject_3$
|
|
5073
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""])));
|
|
5074
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
5075
|
+
var SelectedOption = newStyled.span(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5061
5076
|
var fontWeight = _a.fontWeight;
|
|
5062
5077
|
return fontWeight || '';
|
|
5063
5078
|
});
|
|
@@ -5089,10 +5104,10 @@ function SimpleDropdown(_a) {
|
|
|
5089
5104
|
}
|
|
5090
5105
|
setSelectedValue(value);
|
|
5091
5106
|
}, [value, options, initialValue]);
|
|
5092
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5107
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$18 : Fragment$1;
|
|
5093
5108
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsx$1(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsx$1(Fragment$2, { children: selectedOptionLabel }, void 0))] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5094
5109
|
}
|
|
5095
|
-
var templateObject_1$
|
|
5110
|
+
var templateObject_1$1N, templateObject_2$1d, templateObject_3$Z;
|
|
5096
5111
|
|
|
5097
5112
|
/* base styles & size variants */
|
|
5098
5113
|
var CustomRadioStyles$2 = {
|
|
@@ -5157,9 +5172,9 @@ var ContainerStyles$2 = {
|
|
|
5157
5172
|
},
|
|
5158
5173
|
};
|
|
5159
5174
|
|
|
5160
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5161
|
-
var Container$
|
|
5162
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5175
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5176
|
+
var Container$17 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5177
|
+
var Input$4 = newStyled.input(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
5163
5178
|
var disabled = _a.disabled;
|
|
5164
5179
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5165
5180
|
});
|
|
@@ -5167,14 +5182,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5167
5182
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5168
5183
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5169
5184
|
]; });
|
|
5170
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5185
|
+
var StyledLabel$3 = newStyled(Label$5)(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5171
5186
|
var theme = _a.theme;
|
|
5172
5187
|
return theme.component.radio.textSize;
|
|
5173
5188
|
}, function (_a) {
|
|
5174
5189
|
var theme = _a.theme;
|
|
5175
5190
|
return theme.component.radio.lineHeight;
|
|
5176
5191
|
});
|
|
5177
|
-
var StyledLabelV2 = newStyled(Label$
|
|
5192
|
+
var StyledLabelV2 = newStyled(Label$5)(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5178
5193
|
var theme = _a.theme;
|
|
5179
5194
|
return theme.component.radio.textSize;
|
|
5180
5195
|
}, function (_a) {
|
|
@@ -5188,9 +5203,9 @@ var RadioInput = function (_a) {
|
|
|
5188
5203
|
var value = event.currentTarget.value;
|
|
5189
5204
|
onChange({ value: value, label: label });
|
|
5190
5205
|
};
|
|
5191
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5206
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$17, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5192
5207
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5208
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y, templateObject_4$K;
|
|
5194
5209
|
|
|
5195
5210
|
var useOnClickOutside = function (ref, handler) {
|
|
5196
5211
|
useEffect(function () {
|
|
@@ -5336,7 +5351,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5336
5351
|
}
|
|
5337
5352
|
};
|
|
5338
5353
|
|
|
5339
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5354
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5340
5355
|
var position = _a.position;
|
|
5341
5356
|
return getWrapperFlexDirection(position);
|
|
5342
5357
|
}, function (_a) {
|
|
@@ -5346,7 +5361,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __ma
|
|
|
5346
5361
|
var disableHover = _a.disableHover;
|
|
5347
5362
|
return (disableHover ? 0 : 1);
|
|
5348
5363
|
});
|
|
5349
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5364
|
+
var TooltipContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5350
5365
|
var position = _a.position;
|
|
5351
5366
|
return getContainerFlexDirection(position);
|
|
5352
5367
|
}, function (_a) {
|
|
@@ -5374,14 +5389,14 @@ var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a
|
|
|
5374
5389
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5375
5390
|
return actual === expected ? margin : '0';
|
|
5376
5391
|
};
|
|
5377
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5392
|
+
var ContentWrapper = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5378
5393
|
var borderColor = _a.borderColor;
|
|
5379
5394
|
return borderColor;
|
|
5380
5395
|
}, function (_a) {
|
|
5381
5396
|
var backgroundColor = _a.backgroundColor;
|
|
5382
5397
|
return backgroundColor;
|
|
5383
5398
|
});
|
|
5384
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5399
|
+
var TooltipText = newStyled.div(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: ", ";\n max-width: ", ";\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 text-align: ", ";\n max-width: ", ";\n color: ", ";\n"])), function (_a) {
|
|
5385
5400
|
var theme = _a.theme;
|
|
5386
5401
|
return theme.component.autoship.tooltip.text.alignment;
|
|
5387
5402
|
}, function (_a) {
|
|
@@ -5391,17 +5406,17 @@ var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __ma
|
|
|
5391
5406
|
var color = _a.color;
|
|
5392
5407
|
return color;
|
|
5393
5408
|
});
|
|
5394
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5395
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5409
|
+
var TopSection = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5410
|
+
var Title$7 = newStyled.h1(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5396
5411
|
var color = _a.color;
|
|
5397
5412
|
return color;
|
|
5398
5413
|
});
|
|
5399
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5400
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5414
|
+
var IconContainer$5 = newStyled.div(templateObject_7$j || (templateObject_7$j = __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"])));
|
|
5415
|
+
var CloseToolTip = newStyled.button(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5401
5416
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5402
5417
|
return right;
|
|
5403
5418
|
});
|
|
5404
|
-
var templateObject_1$
|
|
5419
|
+
var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J, templateObject_5$w, templateObject_6$r, templateObject_7$j, templateObject_8$h;
|
|
5405
5420
|
|
|
5406
5421
|
var Tooltip = function (_a) {
|
|
5407
5422
|
var _b;
|
|
@@ -5472,7 +5487,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5472
5487
|
};
|
|
5473
5488
|
}
|
|
5474
5489
|
};
|
|
5475
|
-
var Container$
|
|
5490
|
+
var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5476
5491
|
var backgroundColor = _a.backgroundColor;
|
|
5477
5492
|
return backgroundColor;
|
|
5478
5493
|
}, function (_a) {
|
|
@@ -5494,7 +5509,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
5494
5509
|
var size = _a.size;
|
|
5495
5510
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5496
5511
|
});
|
|
5497
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5512
|
+
var H3$3 = newStyled.h3(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
5498
5513
|
var textColor = _a.textColor;
|
|
5499
5514
|
return textColor;
|
|
5500
5515
|
}, function (_a) {
|
|
@@ -5509,9 +5524,9 @@ var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __makeTemp
|
|
|
5509
5524
|
var ClubOfferTag = function (_a) {
|
|
5510
5525
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _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, style = _a.style;
|
|
5511
5526
|
var theme = useTheme();
|
|
5512
|
-
return (jsx$1(Container$
|
|
5527
|
+
return (jsx$1(Container$16, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5513
5528
|
};
|
|
5514
|
-
var templateObject_1$
|
|
5529
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
5515
5530
|
|
|
5516
5531
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5517
5532
|
var _a, _b, _c;
|
|
@@ -5542,7 +5557,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5542
5557
|
};
|
|
5543
5558
|
}
|
|
5544
5559
|
};
|
|
5545
|
-
var Container$
|
|
5560
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5546
5561
|
var backgroundColor = _a.backgroundColor;
|
|
5547
5562
|
return backgroundColor;
|
|
5548
5563
|
}, function (_a) {
|
|
@@ -5564,7 +5579,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5564
5579
|
var size = _a.size;
|
|
5565
5580
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5566
5581
|
});
|
|
5567
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5582
|
+
var H3$2 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5568
5583
|
var textColor = _a.textColor;
|
|
5569
5584
|
return textColor;
|
|
5570
5585
|
}, function (_a) {
|
|
@@ -5579,9 +5594,9 @@ var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemp
|
|
|
5579
5594
|
var DiscountTag$1 = function (_a) {
|
|
5580
5595
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5581
5596
|
var theme = useTheme();
|
|
5582
|
-
return (jsx$1(Container$
|
|
5597
|
+
return (jsx$1(Container$15, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5583
5598
|
};
|
|
5584
|
-
var templateObject_1$
|
|
5599
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5585
5600
|
|
|
5586
5601
|
var getStylesBySize$b = function (size, theme) {
|
|
5587
5602
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5623,8 +5638,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5623
5638
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5624
5639
|
}
|
|
5625
5640
|
};
|
|
5626
|
-
var Container$
|
|
5627
|
-
var Price = newStyled.p(templateObject_2$
|
|
5641
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5642
|
+
var Price = newStyled.p(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
5628
5643
|
var weight = _a.weight;
|
|
5629
5644
|
return (weight ? weight : '400');
|
|
5630
5645
|
}, function (_a) {
|
|
@@ -5648,7 +5663,7 @@ var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5648
5663
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5649
5664
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5650
5665
|
});
|
|
5651
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5666
|
+
var TagContainer = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5652
5667
|
var _b;
|
|
5653
5668
|
var size = _a.size;
|
|
5654
5669
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5679,11 +5694,11 @@ var PriceLabel = function (_a) {
|
|
|
5679
5694
|
: ComponentSize.XSmall;
|
|
5680
5695
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5681
5696
|
};
|
|
5682
|
-
return (jsxs$1(Container$
|
|
5697
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5683
5698
|
};
|
|
5684
|
-
var templateObject_1$
|
|
5699
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$W;
|
|
5685
5700
|
|
|
5686
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5701
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5687
5702
|
var PriceLabelV2 = function (_a) {
|
|
5688
5703
|
var _b;
|
|
5689
5704
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5736,7 +5751,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5736
5751
|
var savetoString = saveto.toFixed(2);
|
|
5737
5752
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5738
5753
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5739
|
-
return (jsxs$1(Container$
|
|
5754
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5740
5755
|
marginTop: '-5px',
|
|
5741
5756
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5742
5757
|
? finalPriceArray[0]
|
|
@@ -5754,11 +5769,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5754
5769
|
lineHeight: '22px',
|
|
5755
5770
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5756
5771
|
};
|
|
5757
|
-
var templateObject_1$
|
|
5772
|
+
var templateObject_1$1H;
|
|
5758
5773
|
|
|
5759
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5760
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5761
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5774
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5775
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5776
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5762
5777
|
var PriceLabelV3 = function (_a) {
|
|
5763
5778
|
var _b;
|
|
5764
5779
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5813,7 +5828,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5813
5828
|
return null;
|
|
5814
5829
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5815
5830
|
};
|
|
5816
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5831
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$14, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$14, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5817
5832
|
marginTop: '-5px',
|
|
5818
5833
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5819
5834
|
marginTop: '-6px',
|
|
@@ -5829,10 +5844,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5829
5844
|
lineHeight: '22px',
|
|
5830
5845
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5831
5846
|
};
|
|
5832
|
-
var templateObject_1$
|
|
5847
|
+
var templateObject_1$1G, templateObject_2$17, templateObject_3$V;
|
|
5833
5848
|
|
|
5834
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5835
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5849
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5850
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5836
5851
|
var selected = _a.selected, theme = _a.theme;
|
|
5837
5852
|
return selected
|
|
5838
5853
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5846,30 +5861,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5846
5861
|
var theme = _a.theme;
|
|
5847
5862
|
return theme.colors.pallete.primary.color;
|
|
5848
5863
|
});
|
|
5849
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5864
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5850
5865
|
var onClick = _a.onClick;
|
|
5851
5866
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5852
5867
|
});
|
|
5853
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5854
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5868
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5869
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5855
5870
|
var theme = _a.theme;
|
|
5856
5871
|
return theme.colors.shades[200].color;
|
|
5857
5872
|
}, function (_a) {
|
|
5858
5873
|
var theme = _a.theme;
|
|
5859
5874
|
return theme.colors.pallete.primary.color;
|
|
5860
5875
|
});
|
|
5861
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5862
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5863
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5864
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5865
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5866
|
-
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$
|
|
5876
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5877
|
+
var Benefit$1 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5878
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5879
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5880
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5881
|
+
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5867
5882
|
var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5868
5883
|
var selected = _a.selected, theme = _a.theme;
|
|
5869
5884
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5870
5885
|
});
|
|
5871
|
-
var Container$
|
|
5872
|
-
var templateObject_1$
|
|
5886
|
+
var Container$13 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5887
|
+
var templateObject_1$1F, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
|
|
5873
5888
|
|
|
5874
5889
|
var radioIds$1 = {
|
|
5875
5890
|
oneTime: {
|
|
@@ -5919,17 +5934,17 @@ var Autoship = function (_a) {
|
|
|
5919
5934
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5920
5935
|
};
|
|
5921
5936
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5922
|
-
return (jsxs$1(Container$
|
|
5937
|
+
return (jsxs$1(Container$13, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5923
5938
|
? benefitsColor.selected
|
|
5924
5939
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5925
5940
|
};
|
|
5926
5941
|
|
|
5927
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5942
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
5928
5943
|
var theme = _a.theme;
|
|
5929
5944
|
return theme.name === 'TheSpaDr' &&
|
|
5930
5945
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
5931
5946
|
});
|
|
5932
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5947
|
+
var DiscountTag = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
5933
5948
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5934
5949
|
return isSelected
|
|
5935
5950
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5945,7 +5960,7 @@ var getSelectedBorder = function (_a) {
|
|
|
5945
5960
|
}
|
|
5946
5961
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
5947
5962
|
};
|
|
5948
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
5963
|
+
var ContainerBase = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5949
5964
|
var selected = _a.selected, theme = _a.theme;
|
|
5950
5965
|
return selected ? getSelectedBorder(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
5951
5966
|
}, function (_a) {
|
|
@@ -5957,32 +5972,32 @@ var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __
|
|
|
5957
5972
|
var theme = _a.theme;
|
|
5958
5973
|
return theme.colors.pallete.primary.color;
|
|
5959
5974
|
});
|
|
5960
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5975
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
5961
5976
|
var onClick = _a.onClick;
|
|
5962
5977
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5963
5978
|
});
|
|
5964
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5965
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5979
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
5980
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5966
5981
|
var theme = _a.theme;
|
|
5967
5982
|
return theme.colors.shades[200].color;
|
|
5968
5983
|
}, function (_a) {
|
|
5969
5984
|
var theme = _a.theme;
|
|
5970
5985
|
return theme.colors.pallete.primary.color;
|
|
5971
5986
|
});
|
|
5972
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5973
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5974
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5975
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
5976
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$
|
|
5987
|
+
var BenefitsContainer = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5988
|
+
var Benefit = newStyled.div(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
5989
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5990
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5991
|
+
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5977
5992
|
var selected = _a.selected, theme = _a.theme;
|
|
5978
5993
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5979
5994
|
});
|
|
5980
|
-
var Container$
|
|
5995
|
+
var Container$12 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5981
5996
|
var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
|
|
5982
5997
|
var theme = _a.theme;
|
|
5983
5998
|
return theme.component.autoship.tooltip.margin;
|
|
5984
5999
|
});
|
|
5985
|
-
var templateObject_1$
|
|
6000
|
+
var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
|
|
5986
6001
|
|
|
5987
6002
|
var radioIds = {
|
|
5988
6003
|
oneTime: {
|
|
@@ -6042,7 +6057,7 @@ var AutoshipV2 = function (_a) {
|
|
|
6042
6057
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6043
6058
|
};
|
|
6044
6059
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6045
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
6046
6061
|
? benefitsColor.selected
|
|
6047
6062
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6048
6063
|
};
|
|
@@ -6060,13 +6075,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
6060
6075
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
6061
6076
|
_a$2);
|
|
6062
6077
|
|
|
6063
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
6064
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6065
|
-
var Name = newStyled.h4(templateObject_3$
|
|
6066
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
6067
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6068
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6069
|
-
var templateObject_1$
|
|
6078
|
+
var CustomerDetails = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
6079
|
+
var CustomerInfo = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
6080
|
+
var Name = newStyled.h4(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
6081
|
+
var StarIconContainer = newStyled.div(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
6082
|
+
var Description$2 = newStyled.p(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
6083
|
+
var ReviewDays = newStyled.span(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
6084
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o;
|
|
6070
6085
|
|
|
6071
6086
|
var NameWithStars = function (_a) {
|
|
6072
6087
|
var name = _a.name, size = _a.size;
|
|
@@ -6084,10 +6099,10 @@ var ResultFeedback = function (_a) {
|
|
|
6084
6099
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
6085
6100
|
};
|
|
6086
6101
|
|
|
6087
|
-
var Container$
|
|
6088
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6089
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
6090
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
6102
|
+
var Container$11 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
6103
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
6104
|
+
var ImageCard = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
6105
|
+
var UserInfoText = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6091
6106
|
var theme = _a.theme;
|
|
6092
6107
|
return theme.colors.pallete.secondary.color;
|
|
6093
6108
|
}, function (_a) {
|
|
@@ -6097,7 +6112,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
6097
6112
|
var theme = _a.theme, size = _a.size;
|
|
6098
6113
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6099
6114
|
});
|
|
6100
|
-
var templateObject_1$
|
|
6115
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F;
|
|
6101
6116
|
|
|
6102
6117
|
/* base styles & size variants */
|
|
6103
6118
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6172,10 +6187,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6172
6187
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6173
6188
|
var infoText = buildInfoText(name, age, months);
|
|
6174
6189
|
var Component = componentByVariant[variant];
|
|
6175
|
-
return (jsxs$1(Container$
|
|
6190
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6176
6191
|
};
|
|
6177
6192
|
|
|
6178
|
-
var Section = newStyled.div(templateObject_1$
|
|
6193
|
+
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) {
|
|
6179
6194
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6180
6195
|
});
|
|
6181
6196
|
var CardHeader = function (_a) {
|
|
@@ -6186,16 +6201,16 @@ var CardFooter = function (_a) {
|
|
|
6186
6201
|
var children = _a.children;
|
|
6187
6202
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6188
6203
|
};
|
|
6189
|
-
var templateObject_1$
|
|
6204
|
+
var templateObject_1$1B;
|
|
6190
6205
|
|
|
6191
|
-
var Body = newStyled.div(templateObject_1$
|
|
6206
|
+
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"])));
|
|
6192
6207
|
var CardBody = function (_a) {
|
|
6193
6208
|
var children = _a.children;
|
|
6194
6209
|
return jsx$1(Body, { children: children }, void 0);
|
|
6195
6210
|
};
|
|
6196
|
-
var templateObject_1$
|
|
6211
|
+
var templateObject_1$1A;
|
|
6197
6212
|
|
|
6198
|
-
var Container
|
|
6213
|
+
var Container$10 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
6199
6214
|
var flex = _a.flex;
|
|
6200
6215
|
return flex &&
|
|
6201
6216
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6210,23 +6225,23 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
6210
6225
|
var Card$1 = function (_a) {
|
|
6211
6226
|
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;
|
|
6212
6227
|
var theme = useTheme();
|
|
6213
|
-
return (jsx$1(Container
|
|
6228
|
+
return (jsx$1(Container$10, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
6214
6229
|
};
|
|
6215
6230
|
var Card$2 = Object.assign(Card$1, {
|
|
6216
6231
|
Header: CardHeader,
|
|
6217
6232
|
Footer: CardFooter,
|
|
6218
6233
|
Body: CardBody,
|
|
6219
6234
|
});
|
|
6220
|
-
var templateObject_1$
|
|
6235
|
+
var templateObject_1$1z;
|
|
6221
6236
|
|
|
6222
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6223
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6224
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6237
|
+
var StyledWrapper = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
6238
|
+
var StyledContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
6239
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6225
6240
|
var color = _a.color;
|
|
6226
6241
|
return color;
|
|
6227
6242
|
});
|
|
6228
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6229
|
-
var templateObject_1$
|
|
6243
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6244
|
+
var templateObject_1$1y, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
6230
6245
|
|
|
6231
6246
|
var Minimalistic = function (_a) {
|
|
6232
6247
|
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;
|
|
@@ -6234,28 +6249,28 @@ var Minimalistic = function (_a) {
|
|
|
6234
6249
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, 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(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6235
6250
|
};
|
|
6236
6251
|
|
|
6237
|
-
var Container
|
|
6238
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
6239
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6240
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6252
|
+
var Container$$ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6253
|
+
var Title$6 = newStyled.h1(templateObject_2$11 || (templateObject_2$11 = __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; });
|
|
6254
|
+
var Details$1 = newStyled.span(templateObject_3$P || (templateObject_3$P = __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; });
|
|
6255
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
6241
6256
|
var Simple = function (_a) {
|
|
6242
6257
|
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;
|
|
6243
6258
|
var theme = useTheme();
|
|
6244
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container
|
|
6259
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$$, { children: [jsx$1(Title$6, __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$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6245
6260
|
};
|
|
6246
|
-
var templateObject_1$
|
|
6261
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6247
6262
|
|
|
6248
6263
|
var Bundle = {
|
|
6249
6264
|
Minimalistic: Minimalistic,
|
|
6250
6265
|
Simple: Simple,
|
|
6251
6266
|
};
|
|
6252
6267
|
|
|
6253
|
-
var Container$
|
|
6268
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
6254
6269
|
var displayBNPL = _a.displayBNPL;
|
|
6255
6270
|
return (displayBNPL ? 'flex' : 'none');
|
|
6256
6271
|
});
|
|
6257
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6258
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6272
|
+
var TextContainer$1 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6273
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6259
6274
|
var BuyNowPayLater = function (_a) {
|
|
6260
6275
|
var _b;
|
|
6261
6276
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -6265,43 +6280,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6265
6280
|
console.error('Icon', iconName, 'not found');
|
|
6266
6281
|
return null;
|
|
6267
6282
|
}
|
|
6268
|
-
return (jsx$1(Container$
|
|
6283
|
+
return (jsx$1(Container$_, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6269
6284
|
};
|
|
6270
|
-
var templateObject_1$
|
|
6285
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O;
|
|
6271
6286
|
|
|
6272
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6287
|
+
var Text$6 = newStyled.span(templateObject_1$1v || (templateObject_1$1v = __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; });
|
|
6273
6288
|
var Title$5 = function (_a) {
|
|
6274
6289
|
var title = _a.title;
|
|
6275
6290
|
var theme = useTheme();
|
|
6276
6291
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6277
6292
|
};
|
|
6278
|
-
var templateObject_1$
|
|
6293
|
+
var templateObject_1$1v;
|
|
6279
6294
|
|
|
6280
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6295
|
+
var P$3 = newStyled.p(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6281
6296
|
var Promo = function (_a) {
|
|
6282
6297
|
var text = _a.text;
|
|
6283
6298
|
var theme = useTheme();
|
|
6284
6299
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6285
6300
|
};
|
|
6286
|
-
var templateObject_1$
|
|
6301
|
+
var templateObject_1$1u;
|
|
6287
6302
|
|
|
6288
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6303
|
+
var Text$5 = newStyled.span(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6289
6304
|
var Description$1 = function (_a) {
|
|
6290
6305
|
var text = _a.text;
|
|
6291
6306
|
var theme = useTheme();
|
|
6292
6307
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6293
6308
|
};
|
|
6294
|
-
var templateObject_1$
|
|
6309
|
+
var templateObject_1$1t;
|
|
6295
6310
|
|
|
6296
|
-
var Container$
|
|
6311
|
+
var Container$Z = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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"); });
|
|
6297
6312
|
var CloseButton$1 = function (_a) {
|
|
6298
6313
|
var onClick = _a.onClick, size = _a.size;
|
|
6299
6314
|
var theme = useTheme();
|
|
6300
|
-
return (jsx$1(Container$
|
|
6315
|
+
return (jsx$1(Container$Z, __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));
|
|
6301
6316
|
};
|
|
6302
|
-
var templateObject_1$
|
|
6317
|
+
var templateObject_1$1s;
|
|
6303
6318
|
|
|
6304
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6319
|
+
var Text$4 = newStyled.h3(templateObject_1$1r || (templateObject_1$1r = __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: ", ";\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: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
6305
6320
|
var backgroundColor = _a.backgroundColor;
|
|
6306
6321
|
return backgroundColor;
|
|
6307
6322
|
}, function (_a) {
|
|
@@ -6316,7 +6331,7 @@ var OfferBanner = function (_a) {
|
|
|
6316
6331
|
var theme = useTheme();
|
|
6317
6332
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6318
6333
|
};
|
|
6319
|
-
var templateObject_1$
|
|
6334
|
+
var templateObject_1$1r;
|
|
6320
6335
|
|
|
6321
6336
|
var CartProductItem = {
|
|
6322
6337
|
Title: Title$5,
|
|
@@ -6326,20 +6341,20 @@ var CartProductItem = {
|
|
|
6326
6341
|
CloseButton: CloseButton$1,
|
|
6327
6342
|
};
|
|
6328
6343
|
|
|
6329
|
-
var Container$
|
|
6330
|
-
var MobileContainer = newStyled(Container$
|
|
6331
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6332
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6333
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6334
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6335
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6336
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6344
|
+
var Container$Y = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6345
|
+
var MobileContainer = newStyled(Container$Y)(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6346
|
+
var DollarPart = newStyled.span(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6347
|
+
var ClubMembersText = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6348
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6349
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6350
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6351
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6337
6352
|
var ClubPriceLabel = function (_a) {
|
|
6338
6353
|
var clubPrice = _a.clubPrice;
|
|
6339
6354
|
var isMobile = useWindowDimensions().isMobile;
|
|
6340
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6355
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$Y, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6341
6356
|
};
|
|
6342
|
-
var templateObject_1$
|
|
6357
|
+
var templateObject_1$1q, templateObject_2$$, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$e;
|
|
6343
6358
|
|
|
6344
6359
|
var Spacing = function (_a) {
|
|
6345
6360
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6347,10 +6362,10 @@ var Spacing = function (_a) {
|
|
|
6347
6362
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6348
6363
|
};
|
|
6349
6364
|
|
|
6350
|
-
var Container$
|
|
6351
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6352
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6353
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6365
|
+
var Container$X = newStyled('div')(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6366
|
+
var Content$2 = newStyled('div')(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6367
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6368
|
+
var Bar$2 = newStyled('div')(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6354
6369
|
var index = _a.index;
|
|
6355
6370
|
return "".concat(6 + 3 * index, "px");
|
|
6356
6371
|
}, function (_a) {
|
|
@@ -6359,15 +6374,15 @@ var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeT
|
|
|
6359
6374
|
});
|
|
6360
6375
|
var StrengthBars = function (_a) {
|
|
6361
6376
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6362
|
-
return (jsxs$1(Container$
|
|
6377
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6363
6378
|
};
|
|
6364
|
-
var templateObject_1$
|
|
6379
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B;
|
|
6365
6380
|
|
|
6366
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6367
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6368
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6369
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6370
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6381
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6382
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6383
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6384
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6385
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6371
6386
|
var RegularPriceTag = function () {
|
|
6372
6387
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6373
6388
|
};
|
|
@@ -6416,16 +6431,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6416
6431
|
: ComponentSize.XSmall;
|
|
6417
6432
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6418
6433
|
};
|
|
6419
|
-
return (jsxs$1(Container$
|
|
6434
|
+
return (jsxs$1(Container$14, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6420
6435
|
? finalPriceArray[0]
|
|
6421
6436
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6422
6437
|
};
|
|
6423
|
-
var templateObject_1$
|
|
6438
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$r;
|
|
6424
6439
|
|
|
6425
|
-
var Container$
|
|
6426
|
-
var templateObject_1$
|
|
6440
|
+
var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6441
|
+
var templateObject_1$1n;
|
|
6427
6442
|
|
|
6428
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6443
|
+
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6429
6444
|
var marginRight = _a.marginRight;
|
|
6430
6445
|
return marginRight;
|
|
6431
6446
|
});
|
|
@@ -6437,11 +6452,11 @@ var StarList = function (_a) {
|
|
|
6437
6452
|
width: theme.component.stars.element[size].width,
|
|
6438
6453
|
height: theme.component.stars.element[size].height,
|
|
6439
6454
|
};
|
|
6440
|
-
return (jsx$1(Container$
|
|
6455
|
+
return (jsx$1(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6441
6456
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6442
6457
|
}) }, void 0));
|
|
6443
6458
|
};
|
|
6444
|
-
var templateObject_1$
|
|
6459
|
+
var templateObject_1$1m;
|
|
6445
6460
|
|
|
6446
6461
|
/* base styles & size variants */
|
|
6447
6462
|
var LabelStyles = {
|
|
@@ -6482,8 +6497,8 @@ var LabelStyles = {
|
|
|
6482
6497
|
});
|
|
6483
6498
|
},
|
|
6484
6499
|
};
|
|
6485
|
-
var Container$
|
|
6486
|
-
var templateObject_1$
|
|
6500
|
+
var Container$V = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6501
|
+
var templateObject_1$1l;
|
|
6487
6502
|
|
|
6488
6503
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6489
6504
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6503,7 +6518,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6503
6518
|
}),
|
|
6504
6519
|
];
|
|
6505
6520
|
});
|
|
6506
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6521
|
+
var RatingLabel = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6507
6522
|
var starsNumber = 5;
|
|
6508
6523
|
var Rating = function (_a) {
|
|
6509
6524
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6524,9 +6539,9 @@ var Rating = function (_a) {
|
|
|
6524
6539
|
href: reviewsContainerId,
|
|
6525
6540
|
}
|
|
6526
6541
|
: {};
|
|
6527
|
-
return (jsxs$1(Container$
|
|
6542
|
+
return (jsxs$1(Container$V, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), 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 ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6528
6543
|
};
|
|
6529
|
-
var templateObject_1$
|
|
6544
|
+
var templateObject_1$1k;
|
|
6530
6545
|
|
|
6531
6546
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6532
6547
|
var width = _a.width, height = _a.height;
|
|
@@ -6536,10 +6551,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6536
6551
|
height: height,
|
|
6537
6552
|
});
|
|
6538
6553
|
});
|
|
6539
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6540
|
-
var Container$
|
|
6541
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6542
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6554
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6555
|
+
var Container$U = newStyled.a(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6556
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6557
|
+
var Title$4 = newStyled.p(templateObject_4$z || (templateObject_4$z = __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; });
|
|
6543
6558
|
var getStylesBySize$9 = function (size) {
|
|
6544
6559
|
switch (size) {
|
|
6545
6560
|
case ComponentSize.Medium:
|
|
@@ -6565,15 +6580,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6565
6580
|
};
|
|
6566
6581
|
}
|
|
6567
6582
|
};
|
|
6568
|
-
var TopTagContainer$6 = newStyled.div(templateObject_5$
|
|
6583
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6569
6584
|
var style = _a.style;
|
|
6570
6585
|
return style.width;
|
|
6571
6586
|
});
|
|
6572
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
6587
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6573
6588
|
var style = _a.style;
|
|
6574
6589
|
return style.width;
|
|
6575
6590
|
});
|
|
6576
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6591
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6577
6592
|
var ProductItemMobile = function (_a) {
|
|
6578
6593
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, 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, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6579
6594
|
display: false,
|
|
@@ -6630,9 +6645,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6630
6645
|
return jsx(Fragment, {}, void 0);
|
|
6631
6646
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6632
6647
|
};
|
|
6633
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6648
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$U, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __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$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), 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)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$U, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6634
6649
|
};
|
|
6635
|
-
var templateObject_1$
|
|
6650
|
+
var templateObject_1$1j, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q, templateObject_6$m, templateObject_7$f;
|
|
6636
6651
|
|
|
6637
6652
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6638
6653
|
var width = _a.width, height = _a.height;
|
|
@@ -6642,10 +6657,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6642
6657
|
height: height,
|
|
6643
6658
|
});
|
|
6644
6659
|
});
|
|
6645
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6646
|
-
var Container$
|
|
6647
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6648
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6660
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6661
|
+
var Container$T = newStyled.a(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6662
|
+
var ProdCardContainer = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6663
|
+
var Title$3 = newStyled.p(templateObject_4$y || (templateObject_4$y = __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; });
|
|
6649
6664
|
var getStylesBySize$8 = function (size) {
|
|
6650
6665
|
switch (size) {
|
|
6651
6666
|
case ComponentSize.Medium:
|
|
@@ -6671,16 +6686,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6671
6686
|
};
|
|
6672
6687
|
}
|
|
6673
6688
|
};
|
|
6674
|
-
var TopTagContainer$5 = newStyled.div(templateObject_5$
|
|
6689
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6675
6690
|
var style = _a.style;
|
|
6676
6691
|
return style.width;
|
|
6677
6692
|
});
|
|
6678
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6679
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_7$
|
|
6693
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6694
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6680
6695
|
var style = _a.style;
|
|
6681
6696
|
return style.width;
|
|
6682
6697
|
});
|
|
6683
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6698
|
+
var MarginTopContainer = newStyled.div(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6684
6699
|
var ProductItemTK = function (_a) {
|
|
6685
6700
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6686
6701
|
display: false,
|
|
@@ -6724,26 +6739,26 @@ var ProductItemTK = function (_a) {
|
|
|
6724
6739
|
: undefined }, void 0));
|
|
6725
6740
|
};
|
|
6726
6741
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6727
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6742
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$3, __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$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6728
6743
|
// @ts-ignore
|
|
6729
6744
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6730
6745
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6731
6746
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6732
6747
|
} }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6733
6748
|
};
|
|
6734
|
-
var templateObject_1$
|
|
6749
|
+
var templateObject_1$1i, templateObject_2$X, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$d;
|
|
6735
6750
|
|
|
6736
|
-
var Container$
|
|
6751
|
+
var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6737
6752
|
function withProductGrid(ProductItemComponent, data) {
|
|
6738
6753
|
function WithProductGrid(props) {
|
|
6739
|
-
return (jsx$1(Container$
|
|
6754
|
+
return (jsx$1(Container$S, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6740
6755
|
}
|
|
6741
6756
|
/* istanbul ignore next */
|
|
6742
6757
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6743
6758
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6744
6759
|
return WithProductGrid;
|
|
6745
6760
|
}
|
|
6746
|
-
var templateObject_1$
|
|
6761
|
+
var templateObject_1$1h;
|
|
6747
6762
|
|
|
6748
6763
|
var Collection = {
|
|
6749
6764
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6790,12 +6805,12 @@ var OutOfStock = function (_a) {
|
|
|
6790
6805
|
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));
|
|
6791
6806
|
};
|
|
6792
6807
|
|
|
6793
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6794
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6795
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6796
|
-
var Span = newStyled.span(templateObject_4$
|
|
6797
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6798
|
-
var Label$
|
|
6808
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6809
|
+
newStyled(lt.Label)(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6810
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
6811
|
+
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6812
|
+
var OptionsContainer = newStyled.div(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
6813
|
+
var Label$4 = function (_a) {
|
|
6799
6814
|
var label = _a.label, values = _a.values;
|
|
6800
6815
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6801
6816
|
};
|
|
@@ -6808,27 +6823,27 @@ var ColorRadioGroup = function (_a) {
|
|
|
6808
6823
|
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6809
6824
|
};
|
|
6810
6825
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6811
|
-
Label: Label$
|
|
6826
|
+
Label: Label$4,
|
|
6812
6827
|
Option: Option,
|
|
6813
6828
|
OptionsContainer: OptionsContainer,
|
|
6814
6829
|
});
|
|
6815
|
-
var templateObject_1$
|
|
6830
|
+
var templateObject_1$1g, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o;
|
|
6816
6831
|
|
|
6817
|
-
var Container$
|
|
6832
|
+
var Container$R = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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 opacity: ", ";\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 opacity: ", ";\n"])), function (_a) {
|
|
6818
6833
|
var borderColor = _a.borderColor;
|
|
6819
6834
|
return borderColor;
|
|
6820
6835
|
}, function (_a) {
|
|
6821
6836
|
var noStock = _a.noStock;
|
|
6822
6837
|
return (noStock ? '0.4' : '1');
|
|
6823
6838
|
});
|
|
6824
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6839
|
+
var Image$2 = newStyled.img(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6825
6840
|
var PatternSelector = function (_a) {
|
|
6826
6841
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6827
6842
|
var theme = useTheme();
|
|
6828
6843
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6829
|
-
return (jsx$1(Container$
|
|
6844
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6830
6845
|
};
|
|
6831
|
-
var templateObject_1$
|
|
6846
|
+
var templateObject_1$1f, templateObject_2$V;
|
|
6832
6847
|
|
|
6833
6848
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6834
6849
|
if (options == null || options.length === 0) {
|
|
@@ -6887,21 +6902,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6887
6902
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6888
6903
|
};
|
|
6889
6904
|
|
|
6890
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6891
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6892
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6905
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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'); });
|
|
6906
|
+
var Col$1 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6907
|
+
var Row$2 = newStyled.div(templateObject_3$H || (templateObject_3$H = __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) {
|
|
6893
6908
|
return props.rightToLeft &&
|
|
6894
6909
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6895
6910
|
});
|
|
6896
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6897
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6898
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6911
|
+
var H5 = newStyled.h5(templateObject_4$w || (templateObject_4$w = __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; });
|
|
6912
|
+
var H3$1 = newStyled.h3(templateObject_5$n || (templateObject_5$n = __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; });
|
|
6913
|
+
var FreeShipping = newStyled.span(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6899
6914
|
var CrossSellCheckbox = function (_a) {
|
|
6900
6915
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6901
6916
|
var theme = useTheme();
|
|
6902
6917
|
return (jsxs$1(Wrapper$5, __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$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __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));
|
|
6903
6918
|
};
|
|
6904
|
-
var templateObject_1$
|
|
6919
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$k;
|
|
6905
6920
|
|
|
6906
6921
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6907
6922
|
__proto__: null,
|
|
@@ -6929,7 +6944,7 @@ var sizeMapper = (_a = {},
|
|
|
6929
6944
|
_a[ComponentSize.Large] = 'large',
|
|
6930
6945
|
_a[ComponentSize.XSmall] = 'small',
|
|
6931
6946
|
_a);
|
|
6932
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6947
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6933
6948
|
var wide = _a.wide;
|
|
6934
6949
|
return (wide ? '100%' : 'fit-content');
|
|
6935
6950
|
}, function (_a) {
|
|
@@ -6951,11 +6966,11 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObj
|
|
|
6951
6966
|
var theme = _a.theme;
|
|
6952
6967
|
return theme.colors.text.disabled;
|
|
6953
6968
|
});
|
|
6954
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6969
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6955
6970
|
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6956
6971
|
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6957
6972
|
});
|
|
6958
|
-
var templateObject_1$
|
|
6973
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6959
6974
|
|
|
6960
6975
|
var BaseCTA = function (_a) {
|
|
6961
6976
|
var _b, _c, _d;
|
|
@@ -7042,44 +7057,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
7042
7057
|
} }), void 0));
|
|
7043
7058
|
};
|
|
7044
7059
|
|
|
7045
|
-
var Container$
|
|
7046
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7047
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
7048
|
-
var Details = newStyled.span(templateObject_4$
|
|
7060
|
+
var Container$Q = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
7061
|
+
var IconContainer$4 = newStyled.div(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
7062
|
+
var Text$3 = newStyled.p(templateObject_3$G || (templateObject_3$G = __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; });
|
|
7063
|
+
var Details = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7049
7064
|
var Note = function (_a) {
|
|
7050
7065
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7051
7066
|
var theme = useTheme();
|
|
7052
|
-
return (jsxs$1(Container$
|
|
7067
|
+
return (jsxs$1(Container$Q, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
7053
7068
|
};
|
|
7054
|
-
var templateObject_1$
|
|
7069
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v;
|
|
7055
7070
|
|
|
7056
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7071
|
+
var Title$2 = newStyled.h1(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
7057
7072
|
var theme = _a.theme;
|
|
7058
7073
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
7059
7074
|
});
|
|
7060
|
-
var Line = newStyled.div(templateObject_2$
|
|
7061
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7075
|
+
var Line = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
7076
|
+
var Row$1 = newStyled.div(templateObject_3$F || (templateObject_3$F = __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({
|
|
7062
7077
|
flexDirection: ['column', 'row'],
|
|
7063
7078
|
}));
|
|
7064
|
-
var Col = newStyled.div(templateObject_4$
|
|
7079
|
+
var Col = newStyled.div(templateObject_4$u || (templateObject_4$u = __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({
|
|
7065
7080
|
margin: ['0', '0 1.25rem'],
|
|
7066
7081
|
marginBottom: ['1.875rem', '0'],
|
|
7067
7082
|
alignItems: ['center', 'flex-start'],
|
|
7068
7083
|
textAlign: ['center', 'inherit'],
|
|
7069
7084
|
width: ['100%', 'inherit'],
|
|
7070
7085
|
}));
|
|
7071
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
7086
|
+
var IconContainer$3 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7072
7087
|
marginRight: ['0', '0.438rem'],
|
|
7073
7088
|
marginBottom: ['10px', '0'],
|
|
7074
7089
|
width: ['auto', '1.5rem'],
|
|
7075
7090
|
}));
|
|
7076
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7091
|
+
var SectionTitle = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7077
7092
|
display: ['block', 'flex'],
|
|
7078
7093
|
}), function (_a) {
|
|
7079
7094
|
var theme = _a.theme;
|
|
7080
7095
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
7081
7096
|
});
|
|
7082
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7097
|
+
var SectionDetails = newStyled.p(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
7083
7098
|
var theme = _a.theme;
|
|
7084
7099
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
7085
7100
|
}, function (_a) {
|
|
@@ -7090,22 +7105,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
7090
7105
|
})
|
|
7091
7106
|
: '';
|
|
7092
7107
|
});
|
|
7093
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
7108
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7094
7109
|
var DeliveryDetails = function (_a) {
|
|
7095
7110
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7096
7111
|
var theme = useTheme();
|
|
7097
7112
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, 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, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (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));
|
|
7098
7113
|
};
|
|
7099
|
-
var templateObject_1$
|
|
7114
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$m, templateObject_6$j, templateObject_7$d, templateObject_8$c;
|
|
7100
7115
|
|
|
7101
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7116
|
+
var Backdrop = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\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: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
7102
7117
|
var top = _a.top;
|
|
7103
7118
|
return top;
|
|
7104
7119
|
}, function (_a) {
|
|
7105
7120
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
7106
7121
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
7107
7122
|
});
|
|
7108
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7123
|
+
var Sidebar = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
7109
7124
|
var height = _a.height;
|
|
7110
7125
|
return height;
|
|
7111
7126
|
}, function (_a) {
|
|
@@ -7152,20 +7167,20 @@ var Drawer = function (_a) {
|
|
|
7152
7167
|
}, [isOpen, onClose, onOpen]);
|
|
7153
7168
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
7154
7169
|
};
|
|
7155
|
-
var templateObject_1$
|
|
7170
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
7156
7171
|
|
|
7157
7172
|
var TooltipArrow = function (_a) {
|
|
7158
7173
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7159
7174
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
7160
7175
|
};
|
|
7161
7176
|
|
|
7162
|
-
var List = newStyled.ul(templateObject_1$
|
|
7163
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7164
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7165
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7166
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7167
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7168
|
-
var templateObject_1$
|
|
7177
|
+
var List = newStyled.ul(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7178
|
+
var Item$2 = newStyled.li(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
7179
|
+
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"])));
|
|
7180
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
7181
|
+
var StyledDropdown = newStyled.ul(templateObject_5$l || (templateObject_5$l = __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; });
|
|
7182
|
+
var DropdownItem = newStyled.li(templateObject_6$i || (templateObject_6$i = __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; });
|
|
7183
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i;
|
|
7169
7184
|
|
|
7170
7185
|
var DropdownListIcons = function (_a) {
|
|
7171
7186
|
var items = _a.items;
|
|
@@ -7178,13 +7193,13 @@ var Dropdown = function (_a) {
|
|
|
7178
7193
|
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));
|
|
7179
7194
|
};
|
|
7180
7195
|
|
|
7181
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7182
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7183
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7184
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7185
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7186
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7187
|
-
var templateObject_1$
|
|
7196
|
+
var DropdownContainer = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
7197
|
+
var DropdownLabel = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7198
|
+
var SizeLabel = newStyled.span(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7199
|
+
var DetailLabel = newStyled.span(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7200
|
+
var DropdownOptions = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7201
|
+
var DropdownOption = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7202
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7188
7203
|
|
|
7189
7204
|
var SizeDropdown = function (_a) {
|
|
7190
7205
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7207,10 +7222,10 @@ var SizeDropdown = function (_a) {
|
|
|
7207
7222
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7208
7223
|
};
|
|
7209
7224
|
|
|
7210
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7211
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7212
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7213
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7225
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7226
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7227
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7228
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7214
7229
|
var DropdownDialog = function (_a) {
|
|
7215
7230
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7216
7231
|
var theme = useTheme$1();
|
|
@@ -7219,7 +7234,7 @@ var DropdownDialog = function (_a) {
|
|
|
7219
7234
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7220
7235
|
}) }), void 0) }), void 0));
|
|
7221
7236
|
};
|
|
7222
|
-
var templateObject_1$
|
|
7237
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r;
|
|
7223
7238
|
|
|
7224
7239
|
function FilteringDropdown(_a) {
|
|
7225
7240
|
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;
|
|
@@ -7252,29 +7267,29 @@ function FilteringDropdown(_a) {
|
|
|
7252
7267
|
}) }, void 0)] }), void 0));
|
|
7253
7268
|
}
|
|
7254
7269
|
|
|
7255
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7256
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7257
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7258
|
-
var Container$
|
|
7270
|
+
var Title$1 = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
7271
|
+
var H3 = newStyled.h3(templateObject_2$M || (templateObject_2$M = __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; });
|
|
7272
|
+
var ArrowContainer = newStyled.div(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7273
|
+
var Container$P = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7259
7274
|
var Accordion = function (_a) {
|
|
7260
7275
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
7261
7276
|
var theme = useTheme();
|
|
7262
7277
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7263
|
-
return (jsxs$1(Container$
|
|
7278
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __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));
|
|
7264
7279
|
};
|
|
7265
|
-
var templateObject_1$
|
|
7266
|
-
|
|
7267
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7268
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7269
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7270
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7271
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7272
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7273
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7274
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7275
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7276
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
7277
|
-
var templateObject_1$
|
|
7280
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7281
|
+
|
|
7282
|
+
var SectionContent = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
7283
|
+
var Header$1 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
7284
|
+
var MobileHeader = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
7285
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
7286
|
+
var H4 = newStyled.h4(templateObject_5$j || (templateObject_5$j = __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; });
|
|
7287
|
+
var FilterLink = newStyled.a(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
7288
|
+
var OptionContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7289
|
+
var ClearAll = newStyled.span(templateObject_8$b || (templateObject_8$b = __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; });
|
|
7290
|
+
var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$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"])));
|
|
7291
|
+
var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __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"])));
|
|
7292
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$A, templateObject_4$p, templateObject_5$j, templateObject_6$g, templateObject_7$c, templateObject_8$b, templateObject_9$7, templateObject_10$6;
|
|
7278
7293
|
|
|
7279
7294
|
var getStylesBySize$7 = function (size, theme) {
|
|
7280
7295
|
switch (size) {
|
|
@@ -7339,9 +7354,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7339
7354
|
} }), id: id }, void 0));
|
|
7340
7355
|
};
|
|
7341
7356
|
|
|
7342
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7343
|
-
var LI = newStyled.li(templateObject_2$
|
|
7344
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7357
|
+
var UL = newStyled.ul(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
7358
|
+
var LI = newStyled.li(templateObject_2$K || (templateObject_2$K = __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; });
|
|
7359
|
+
var CloseIconContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
7345
7360
|
var Tags = function (_a) {
|
|
7346
7361
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7347
7362
|
var theme = useTheme();
|
|
@@ -7349,7 +7364,7 @@ var Tags = function (_a) {
|
|
|
7349
7364
|
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, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7350
7365
|
}) }), void 0));
|
|
7351
7366
|
};
|
|
7352
|
-
var templateObject_1$
|
|
7367
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z;
|
|
7353
7368
|
|
|
7354
7369
|
var Filters = function (_a) {
|
|
7355
7370
|
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, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7485,8 +7500,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7485
7500
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7486
7501
|
};
|
|
7487
7502
|
|
|
7488
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7489
|
-
var Container$
|
|
7503
|
+
var Wrapper$4 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7504
|
+
var Container$O = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7490
7505
|
var FitGuarantee = function (_a) {
|
|
7491
7506
|
var _b;
|
|
7492
7507
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7497,17 +7512,17 @@ var FitGuarantee = function (_a) {
|
|
|
7497
7512
|
console.error('Icon', iconName, 'not found');
|
|
7498
7513
|
return null;
|
|
7499
7514
|
}
|
|
7500
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7515
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7501
7516
|
margin: '0.1rem 0',
|
|
7502
7517
|
width: '100%',
|
|
7503
7518
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7504
7519
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7505
7520
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7506
7521
|
};
|
|
7507
|
-
var templateObject_1$
|
|
7522
|
+
var templateObject_1$13, templateObject_2$J;
|
|
7508
7523
|
|
|
7509
|
-
var Container$
|
|
7510
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7524
|
+
var Container$N = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7525
|
+
var P$2 = newStyled.p(templateObject_2$I || (templateObject_2$I = __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; });
|
|
7511
7526
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7512
7527
|
border: 'none',
|
|
7513
7528
|
background: 'transparent',
|
|
@@ -7520,9 +7535,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7520
7535
|
var FitPredictor = function (_a) {
|
|
7521
7536
|
var onClick = _a.onClick;
|
|
7522
7537
|
var theme = useTheme();
|
|
7523
|
-
return (jsxs(Container$
|
|
7538
|
+
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { 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$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7524
7539
|
};
|
|
7525
|
-
var templateObject_1$
|
|
7540
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7526
7541
|
|
|
7527
7542
|
var Button$7 = newStyled.button(function () { return ({
|
|
7528
7543
|
background: 'transparent',
|
|
@@ -11766,14 +11781,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11766
11781
|
return Slider;
|
|
11767
11782
|
}(React__default.Component);
|
|
11768
11783
|
|
|
11769
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11784
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
11770
11785
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11771
11786
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11772
11787
|
}, function (_a) {
|
|
11773
11788
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11774
11789
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11775
11790
|
});
|
|
11776
|
-
var templateObject_1$
|
|
11791
|
+
var templateObject_1$11;
|
|
11777
11792
|
|
|
11778
11793
|
var getStylesBySize$6 = function (size) {
|
|
11779
11794
|
// rem units
|
|
@@ -11832,7 +11847,7 @@ var SliderNavigation = function (_a) {
|
|
|
11832
11847
|
} }, { 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));
|
|
11833
11848
|
};
|
|
11834
11849
|
|
|
11835
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11850
|
+
var Image$1 = newStyled.img(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n\n width: 65px;\n height: 86px;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 65px;\n height: 86px;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11836
11851
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11837
11852
|
return borderRadiusVariant &&
|
|
11838
11853
|
"\n border-radius: 20px;\n ";
|
|
@@ -11842,7 +11857,7 @@ var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTe
|
|
|
11842
11857
|
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11843
11858
|
: 'inherit';
|
|
11844
11859
|
});
|
|
11845
|
-
var templateObject_1
|
|
11860
|
+
var templateObject_1$10;
|
|
11846
11861
|
|
|
11847
11862
|
var ImageSmallPreview = function (_a) {
|
|
11848
11863
|
var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
@@ -11850,9 +11865,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
11850
11865
|
return (jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, loading: "eager", width: theme.component.gallery.thumbnail.desktop.width, height: theme.component.gallery.thumbnail.desktop.height }, void 0));
|
|
11851
11866
|
};
|
|
11852
11867
|
|
|
11853
|
-
var horizontalStyles = css(templateObject_1
|
|
11854
|
-
var verticalStyles = css(templateObject_2$
|
|
11855
|
-
var Container$
|
|
11868
|
+
var horizontalStyles = css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11869
|
+
var verticalStyles = css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11870
|
+
var Container$M = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11856
11871
|
var position = _a.position;
|
|
11857
11872
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11858
11873
|
}, function (_a) {
|
|
@@ -11860,12 +11875,12 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11860
11875
|
return hasOverflowArrows &&
|
|
11861
11876
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11862
11877
|
});
|
|
11863
|
-
var Button$6 = newStyled.button(templateObject_4$
|
|
11864
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11865
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11866
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11867
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11868
|
-
var templateObject_1
|
|
11878
|
+
var Button$6 = newStyled.button(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
11879
|
+
var ArrowsContainer = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11880
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11881
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11882
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11883
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$y, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a;
|
|
11869
11884
|
|
|
11870
11885
|
var ImagePreviewList = function (_a) {
|
|
11871
11886
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
@@ -11877,7 +11892,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11877
11892
|
var element = document.querySelector(".imageListContainer");
|
|
11878
11893
|
element.scrollBy(0, 200);
|
|
11879
11894
|
};
|
|
11880
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11895
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$M, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11881
11896
|
arrowWidth: 0.75,
|
|
11882
11897
|
arrowHeight: 1.25,
|
|
11883
11898
|
arrowPadding: 1.625,
|
|
@@ -13475,21 +13490,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13475
13490
|
afterZoomOut: PropTypes.func
|
|
13476
13491
|
} : {};
|
|
13477
13492
|
|
|
13478
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13479
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13480
|
-
var templateObject_1$
|
|
13493
|
+
var ProgressContainer = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13494
|
+
var ProgressFiller = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13495
|
+
var templateObject_1$_, templateObject_2$G;
|
|
13481
13496
|
|
|
13482
13497
|
var ProgressBar$1 = function (_a) {
|
|
13483
13498
|
var progress = _a.progress, hide = _a.hide;
|
|
13484
13499
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13485
13500
|
};
|
|
13486
13501
|
|
|
13487
|
-
var Container$
|
|
13488
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13489
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13490
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13491
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13492
|
-
var templateObject_1$
|
|
13502
|
+
var Container$L = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13503
|
+
var HTMLVideo = newStyled.video(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13504
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13505
|
+
var PlayContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13506
|
+
var PauseContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13507
|
+
var templateObject_1$Z, templateObject_2$F, templateObject_3$x, templateObject_4$n, templateObject_5$h;
|
|
13493
13508
|
|
|
13494
13509
|
var Video$1 = function (_a) {
|
|
13495
13510
|
var _b, _c, _d, _e;
|
|
@@ -13528,41 +13543,41 @@ var Video$1 = function (_a) {
|
|
|
13528
13543
|
setVideoProgress(videoRef.current.currentTime);
|
|
13529
13544
|
}
|
|
13530
13545
|
};
|
|
13531
|
-
return (jsxs$1(Container$
|
|
13546
|
+
return (jsxs$1(Container$L, __assign$1({ className: className }, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13532
13547
|
};
|
|
13533
13548
|
|
|
13534
|
-
var Container$
|
|
13549
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|
|
13535
13550
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13536
13551
|
return borderRadiusVariant && "border-radius: 40px;";
|
|
13537
13552
|
});
|
|
13538
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13553
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (_a) {
|
|
13539
13554
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13540
13555
|
return borderRadiusVariant ? '50px' : theme.component.gallery.tagPosition.left;
|
|
13541
13556
|
}, function (_a) {
|
|
13542
13557
|
var borderRadiusVariant = _a.borderRadiusVariant, theme = _a.theme;
|
|
13543
13558
|
return borderRadiusVariant ? '10px' : theme.component.gallery.tagPosition.top;
|
|
13544
13559
|
});
|
|
13545
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_3$
|
|
13560
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n left: 0;\n"], ["\n position: absolute;\n bottom: ", ";\n left: 0;\n"])), function (_a) {
|
|
13546
13561
|
var isCTAHidden = _a.isCTAHidden;
|
|
13547
13562
|
return (isCTAHidden ? '60px' : '120px');
|
|
13548
13563
|
});
|
|
13549
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13550
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13551
|
-
var templateObject_1$
|
|
13564
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13565
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13566
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13552
13567
|
|
|
13553
13568
|
var ImageProductSlide$1 = function (_a) {
|
|
13554
13569
|
var _b;
|
|
13555
13570
|
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, _c = _a.position, position = _c === void 0 ? 'vertical' : _c, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13556
13571
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13557
13572
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13558
|
-
return (jsxs$1(Container$
|
|
13573
|
+
return (jsxs$1(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13559
13574
|
alt: content.alt,
|
|
13560
13575
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13561
13576
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt, objectFit: "cover", loading: "eager" }, void 0)), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, __assign$1({ isCTAHidden: hideCTA }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13562
13577
|
};
|
|
13563
13578
|
|
|
13564
|
-
var Container$
|
|
13565
|
-
var templateObject_1$
|
|
13579
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: 100%;\n"])));
|
|
13580
|
+
var templateObject_1$X;
|
|
13566
13581
|
|
|
13567
13582
|
var getInitialIndex = function (images, selectedValue) {
|
|
13568
13583
|
if (selectedValue) {
|
|
@@ -13588,7 +13603,7 @@ var ProductGallery = function (_a) {
|
|
|
13588
13603
|
setActiveIndex(index);
|
|
13589
13604
|
};
|
|
13590
13605
|
var selectedImage = images[activeIndex];
|
|
13591
|
-
return (jsxs$1(Container$
|
|
13606
|
+
return (jsxs$1(Container$J, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: onContentChange, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13592
13607
|
};
|
|
13593
13608
|
|
|
13594
13609
|
var getStylesBySize$5 = function (size) {
|
|
@@ -13610,7 +13625,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13610
13625
|
};
|
|
13611
13626
|
}
|
|
13612
13627
|
};
|
|
13613
|
-
var Container$
|
|
13628
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __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 padding: ", ";\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 padding: ", ";\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) {
|
|
13614
13629
|
var backgroundColor = _a.backgroundColor;
|
|
13615
13630
|
return backgroundColor;
|
|
13616
13631
|
}, function (_a) {
|
|
@@ -13638,11 +13653,11 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13638
13653
|
var IconButton = function (_a) {
|
|
13639
13654
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13640
13655
|
var theme = useTheme();
|
|
13641
|
-
return (jsx$1(Container$
|
|
13656
|
+
return (jsx$1(Container$I, __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));
|
|
13642
13657
|
};
|
|
13643
|
-
var templateObject_1$
|
|
13658
|
+
var templateObject_1$W;
|
|
13644
13659
|
|
|
13645
|
-
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$
|
|
13660
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$V || (templateObject_1$V = __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; });
|
|
13646
13661
|
var AmazonButton = function (_a) {
|
|
13647
13662
|
var onClick = _a.onClick;
|
|
13648
13663
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13651,9 +13666,9 @@ var PaypalButton = function (_a) {
|
|
|
13651
13666
|
var onClick = _a.onClick;
|
|
13652
13667
|
return (jsx$1(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13653
13668
|
};
|
|
13654
|
-
var templateObject_1$
|
|
13669
|
+
var templateObject_1$V;
|
|
13655
13670
|
|
|
13656
|
-
var Container$
|
|
13671
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13657
13672
|
height: 'auto',
|
|
13658
13673
|
textAlign: 'center',
|
|
13659
13674
|
justifyContent: 'center',
|
|
@@ -13703,12 +13718,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13703
13718
|
textAlign: 'center',
|
|
13704
13719
|
lineHeight: '18px',
|
|
13705
13720
|
};
|
|
13706
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13721
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$H, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13707
13722
|
};
|
|
13708
13723
|
|
|
13709
|
-
var Container$
|
|
13710
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13711
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13724
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13725
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13726
|
+
var StyledTitle = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13712
13727
|
var titlePosition = _a.titlePosition;
|
|
13713
13728
|
return titlePosition == 'center' &&
|
|
13714
13729
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13716,24 +13731,24 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13716
13731
|
var ImageCardWithDescription = function (_a) {
|
|
13717
13732
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13718
13733
|
var isMobile = useWindowDimensions().isMobile;
|
|
13719
|
-
return (jsxs$1(Container$
|
|
13734
|
+
return (jsxs$1(Container$G, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13720
13735
|
};
|
|
13721
|
-
var templateObject_1$
|
|
13736
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$v;
|
|
13722
13737
|
|
|
13723
|
-
var Label$
|
|
13738
|
+
var Label$3 = newStyled.span(templateObject_1$T || (templateObject_1$T = __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) {
|
|
13724
13739
|
var color = _a.color;
|
|
13725
13740
|
return color;
|
|
13726
13741
|
});
|
|
13727
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13742
|
+
var MandatoryIcon = newStyled.span(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13728
13743
|
var color = _a.color;
|
|
13729
13744
|
return color;
|
|
13730
13745
|
});
|
|
13731
13746
|
var InputLabel = function (_a) {
|
|
13732
13747
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13733
13748
|
var theme = useTheme();
|
|
13734
|
-
return (jsxs$1(Label$
|
|
13749
|
+
return (jsxs$1(Label$3, __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));
|
|
13735
13750
|
};
|
|
13736
|
-
var templateObject_1$
|
|
13751
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13737
13752
|
|
|
13738
13753
|
var containerByStatus = function (theme, status) {
|
|
13739
13754
|
if (status === InputValidationType.Valid)
|
|
@@ -13742,12 +13757,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13742
13757
|
return theme.colors.semantic.urgent.color;
|
|
13743
13758
|
return '';
|
|
13744
13759
|
};
|
|
13745
|
-
var Container$
|
|
13760
|
+
var Container$F = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13746
13761
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13747
13762
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13748
13763
|
});
|
|
13749
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13750
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13764
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13765
|
+
var StyledInput = newStyled.input(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13751
13766
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13752
13767
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13753
13768
|
}, function (_a) {
|
|
@@ -13802,11 +13817,11 @@ var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __
|
|
|
13802
13817
|
return hasValue &&
|
|
13803
13818
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13804
13819
|
});
|
|
13805
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13820
|
+
var InputWrapper = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13806
13821
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13807
13822
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13808
13823
|
});
|
|
13809
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13824
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13810
13825
|
var theme = _a.theme;
|
|
13811
13826
|
return theme.component.input.placeholderColor;
|
|
13812
13827
|
}, function (_a) {
|
|
@@ -13819,8 +13834,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13819
13834
|
var theme = _a.theme;
|
|
13820
13835
|
return theme.component.input.lineHeight;
|
|
13821
13836
|
});
|
|
13822
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13823
|
-
var templateObject_1$
|
|
13837
|
+
var ClearInput = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13838
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u, templateObject_4$l, templateObject_5$f, templateObject_6$e;
|
|
13824
13839
|
|
|
13825
13840
|
var BaseInput = function (_a) {
|
|
13826
13841
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13843,7 +13858,7 @@ var BaseInput = function (_a) {
|
|
|
13843
13858
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13844
13859
|
}, [status]);
|
|
13845
13860
|
var hasValue = Boolean(value);
|
|
13846
|
-
return (jsxs$1(Container$
|
|
13861
|
+
return (jsxs$1(Container$F, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13847
13862
|
onChange(event.target.value, event);
|
|
13848
13863
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13849
13864
|
onChange('', { target: { value: '' } });
|
|
@@ -13864,11 +13879,11 @@ var Button$5 = function (_a) {
|
|
|
13864
13879
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13865
13880
|
};
|
|
13866
13881
|
|
|
13867
|
-
var Container$
|
|
13882
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
13868
13883
|
var theme = _a.theme;
|
|
13869
13884
|
return theme.component.inputCustom.input.borderRadius;
|
|
13870
13885
|
});
|
|
13871
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13886
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13872
13887
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13873
13888
|
return defaultRounded
|
|
13874
13889
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13883,23 +13898,23 @@ var Custom = function (_a) {
|
|
|
13883
13898
|
text: text,
|
|
13884
13899
|
disabled: rest.disabled,
|
|
13885
13900
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13886
|
-
return (jsx$1(Container$
|
|
13901
|
+
return (jsx$1(Container$E, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13887
13902
|
};
|
|
13888
|
-
var templateObject_1$
|
|
13903
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13889
13904
|
|
|
13890
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13905
|
+
var SuccessContainer = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13891
13906
|
var size = _a.size;
|
|
13892
13907
|
return (size === 'small' ? '36px' : '');
|
|
13893
13908
|
});
|
|
13894
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13895
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13909
|
+
var SuccessMessage = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
13910
|
+
var SuccessText = newStyled.span(templateObject_3$t || (templateObject_3$t = __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"])));
|
|
13896
13911
|
var Success = function (_a) {
|
|
13897
13912
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13898
13913
|
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));
|
|
13899
13914
|
};
|
|
13900
|
-
var templateObject_1$
|
|
13915
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t;
|
|
13901
13916
|
|
|
13902
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13917
|
+
var ButtonContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
13903
13918
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13904
13919
|
return status === InputValidationType.Empty &&
|
|
13905
13920
|
type === 'primary' &&
|
|
@@ -13916,16 +13931,16 @@ var BasePlusButton = function (_a) {
|
|
|
13916
13931
|
}
|
|
13917
13932
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13918
13933
|
};
|
|
13919
|
-
var templateObject_1$
|
|
13934
|
+
var templateObject_1$P;
|
|
13920
13935
|
|
|
13921
|
-
var Container$
|
|
13922
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13936
|
+
var Container$D = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13937
|
+
var IconContainer$2 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13923
13938
|
var BasePlusIcon = function (_a) {
|
|
13924
13939
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13925
13940
|
var theme = useTheme();
|
|
13926
|
-
return (jsx$1(Container$
|
|
13941
|
+
return (jsx$1(Container$D, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13927
13942
|
};
|
|
13928
|
-
var templateObject_1$
|
|
13943
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13929
13944
|
|
|
13930
13945
|
var Input$3 = {
|
|
13931
13946
|
Simple: BaseInput,
|
|
@@ -13970,7 +13985,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13970
13985
|
}, [preventTouch, ref, touchStart]);
|
|
13971
13986
|
}
|
|
13972
13987
|
|
|
13973
|
-
var Container$
|
|
13988
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13974
13989
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13975
13990
|
return borderRadiusVariant &&
|
|
13976
13991
|
"\n border-radius: 40px;\n ";
|
|
@@ -13979,11 +13994,11 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13979
13994
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13980
13995
|
});
|
|
13981
13996
|
// max-height: 31.875rem;
|
|
13982
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13983
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13984
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_4$
|
|
13985
|
-
var NavButtonContainer$2 = newStyled.div(templateObject_5$
|
|
13986
|
-
var Button$4 = newStyled.button(templateObject_6$
|
|
13997
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13998
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
13999
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14000
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14001
|
+
var Button$4 = newStyled.button(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13987
14002
|
var settings$1 = {
|
|
13988
14003
|
dots: true,
|
|
13989
14004
|
infinite: false,
|
|
@@ -14028,7 +14043,7 @@ var ImageProductSlide = function (_a) {
|
|
|
14028
14043
|
}
|
|
14029
14044
|
}
|
|
14030
14045
|
}, [contents, selectedValue]);
|
|
14031
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14046
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14032
14047
|
var _a;
|
|
14033
14048
|
var activeSlide = contents[e];
|
|
14034
14049
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14042,16 +14057,16 @@ var ImageProductSlide = function (_a) {
|
|
|
14042
14057
|
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14043
14058
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14044
14059
|
};
|
|
14045
|
-
var templateObject_1$
|
|
14060
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$s, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
14046
14061
|
|
|
14047
|
-
var Container$
|
|
14062
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
14048
14063
|
var ProductGalleryMobile = function (_a) {
|
|
14049
14064
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
|
|
14050
14065
|
var _d = useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
|
|
14051
14066
|
var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
|
|
14052
|
-
return (jsx$1(Container$
|
|
14067
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
|
|
14053
14068
|
};
|
|
14054
|
-
var templateObject_1$
|
|
14069
|
+
var templateObject_1$M;
|
|
14055
14070
|
|
|
14056
14071
|
function _extends() {
|
|
14057
14072
|
_extends = Object.assign || function (target) {
|
|
@@ -14318,27 +14333,27 @@ function useSwipeable(options) {
|
|
|
14318
14333
|
return handlers;
|
|
14319
14334
|
}
|
|
14320
14335
|
|
|
14321
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14336
|
+
var Button$3 = newStyled.button(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
14322
14337
|
var ArrowButton = function (_a) {
|
|
14323
14338
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14324
14339
|
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14325
14340
|
};
|
|
14326
|
-
var templateObject_1$
|
|
14341
|
+
var templateObject_1$L;
|
|
14327
14342
|
|
|
14328
|
-
var Container$
|
|
14343
|
+
var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
14329
14344
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14330
14345
|
var SlideDots = function (_a) {
|
|
14331
14346
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14332
14347
|
var theme = useTheme();
|
|
14333
|
-
return (jsx$1(Container$
|
|
14348
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14334
14349
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14335
14350
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14336
14351
|
};
|
|
14337
|
-
var templateObject_1$
|
|
14352
|
+
var templateObject_1$K;
|
|
14338
14353
|
|
|
14339
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14340
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14341
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14354
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
14355
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14356
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14342
14357
|
var SlideNavigation = function (_a) {
|
|
14343
14358
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14344
14359
|
var theme = useTheme();
|
|
@@ -14350,23 +14365,23 @@ var SlideNavigation = function (_a) {
|
|
|
14350
14365
|
onNavigate(selectedIndex + 1);
|
|
14351
14366
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14352
14367
|
};
|
|
14353
|
-
var templateObject_1$
|
|
14368
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$r;
|
|
14354
14369
|
|
|
14355
|
-
var Container$
|
|
14370
|
+
var Container$z = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14356
14371
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14357
14372
|
return borderRadiusVariant &&
|
|
14358
14373
|
"\n border-radius: 40px;\n ";
|
|
14359
14374
|
});
|
|
14360
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14361
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_3$
|
|
14375
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14376
|
+
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"])));
|
|
14362
14377
|
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14363
14378
|
var _b, _c;
|
|
14364
14379
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14365
|
-
return (jsxs$1(Container$
|
|
14380
|
+
return (jsxs$1(Container$z, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14366
14381
|
});
|
|
14367
|
-
var templateObject_1$
|
|
14382
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14368
14383
|
|
|
14369
|
-
var Container$
|
|
14384
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
14370
14385
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14371
14386
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14372
14387
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14388,11 +14403,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14388
14403
|
useEffect(function () {
|
|
14389
14404
|
setSelectedImage(images[index]);
|
|
14390
14405
|
}, [index, images]);
|
|
14391
|
-
return (jsxs$1(Container$
|
|
14406
|
+
return (jsxs$1(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14392
14407
|
};
|
|
14393
|
-
var templateObject_1$
|
|
14408
|
+
var templateObject_1$H;
|
|
14394
14409
|
|
|
14395
|
-
var Container$
|
|
14410
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14396
14411
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14397
14412
|
return borderRadiusVariant &&
|
|
14398
14413
|
"\n border-radius: 40px;\n ";
|
|
@@ -14401,14 +14416,14 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14401
14416
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14402
14417
|
});
|
|
14403
14418
|
// max-height: 31.875rem;
|
|
14404
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14405
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
14406
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14407
|
-
var Video = newStyled.div(templateObject_5$
|
|
14408
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14409
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14410
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$
|
|
14411
|
-
var Button$2 = newStyled.button(templateObject_9$
|
|
14419
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14420
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14421
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14422
|
+
var Video = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14423
|
+
var VideoTag = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14424
|
+
var Text$2 = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14425
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14426
|
+
var Button$2 = newStyled.button(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14412
14427
|
var settings = {
|
|
14413
14428
|
dots: true,
|
|
14414
14429
|
infinite: false,
|
|
@@ -14453,7 +14468,7 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14453
14468
|
}
|
|
14454
14469
|
}
|
|
14455
14470
|
}, [images, selectedValue]);
|
|
14456
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14471
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$x, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14457
14472
|
var _a;
|
|
14458
14473
|
var activeSlide = images[e];
|
|
14459
14474
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14466,14 +14481,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14466
14481
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14467
14482
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14468
14483
|
};
|
|
14469
|
-
var templateObject_1$
|
|
14484
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$p, templateObject_4$j, templateObject_5$d, templateObject_6$c, templateObject_7$a, templateObject_8$9, templateObject_9$6;
|
|
14470
14485
|
|
|
14471
|
-
var Container$
|
|
14486
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14472
14487
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14473
14488
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14474
|
-
return (jsx$1(Container$
|
|
14489
|
+
return (jsx$1(Container$w, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14475
14490
|
};
|
|
14476
|
-
var templateObject_1$
|
|
14491
|
+
var templateObject_1$F;
|
|
14477
14492
|
|
|
14478
14493
|
var __defProp$1 = Object.defineProperty;
|
|
14479
14494
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14606,17 +14621,17 @@ var Portal = function (_a) {
|
|
|
14606
14621
|
var visibleStyle = function (_a) {
|
|
14607
14622
|
var opened = _a.opened;
|
|
14608
14623
|
return opened
|
|
14609
|
-
? css(templateObject_1$
|
|
14624
|
+
? css(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14610
14625
|
};
|
|
14611
14626
|
var transformStyle = function (_a) {
|
|
14612
14627
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14613
14628
|
return opened
|
|
14614
|
-
? css(templateObject_3$
|
|
14629
|
+
? css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14615
14630
|
};
|
|
14616
|
-
var Container$
|
|
14631
|
+
var Container$v = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\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: ", ";\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.padding ? props.padding : '20px'); }, 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({
|
|
14617
14632
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14618
14633
|
}), visibleStyle, transformStyle);
|
|
14619
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14634
|
+
var Overlay = newStyled.div(templateObject_6$b || (templateObject_6$b = __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);
|
|
14620
14635
|
var Modal = function (_a) {
|
|
14621
14636
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14622
14637
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14626,7 +14641,7 @@ var Modal = function (_a) {
|
|
|
14626
14641
|
}
|
|
14627
14642
|
close();
|
|
14628
14643
|
};
|
|
14629
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14644
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$v, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14630
14645
|
};
|
|
14631
14646
|
var modalEvent = function (id, detail) {
|
|
14632
14647
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14654,9 +14669,9 @@ var useModal = function (id) {
|
|
|
14654
14669
|
close: close,
|
|
14655
14670
|
}); }, [close, open, opened]);
|
|
14656
14671
|
};
|
|
14657
|
-
var templateObject_1$
|
|
14672
|
+
var templateObject_1$E, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
14658
14673
|
|
|
14659
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14674
|
+
var Bar$1 = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\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: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14660
14675
|
var height = _a.height;
|
|
14661
14676
|
return height || '0.5rem';
|
|
14662
14677
|
}, function (_a) {
|
|
@@ -14695,7 +14710,7 @@ var BarContainer = newStyled.div({
|
|
|
14695
14710
|
padding: '0 16px',
|
|
14696
14711
|
position: 'relative',
|
|
14697
14712
|
});
|
|
14698
|
-
var Container$
|
|
14713
|
+
var Container$u = newStyled.div(function (_a) {
|
|
14699
14714
|
var backgroundColor = _a.backgroundColor;
|
|
14700
14715
|
return ({
|
|
14701
14716
|
width: '475px',
|
|
@@ -14726,21 +14741,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14726
14741
|
var theme = useTheme();
|
|
14727
14742
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14728
14743
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14729
|
-
return (jsxs$1(Container$
|
|
14744
|
+
return (jsxs$1(Container$u, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14730
14745
|
};
|
|
14731
|
-
var templateObject_1$
|
|
14746
|
+
var templateObject_1$D;
|
|
14732
14747
|
|
|
14733
|
-
var Container$
|
|
14748
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14734
14749
|
var theme = _a.theme;
|
|
14735
14750
|
return theme.component.orderBar.backgroundColor;
|
|
14736
14751
|
});
|
|
14737
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14752
|
+
var H1 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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; });
|
|
14738
14753
|
var OrderBar = function (_a) {
|
|
14739
14754
|
var message = _a.message, color = _a.color;
|
|
14740
14755
|
var theme = useTheme();
|
|
14741
|
-
return (jsxs$1(Container$
|
|
14756
|
+
return (jsxs$1(Container$t, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14742
14757
|
};
|
|
14743
|
-
var templateObject_1$
|
|
14758
|
+
var templateObject_1$C, templateObject_2$s;
|
|
14744
14759
|
|
|
14745
14760
|
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
14746
14761
|
background: props.bgColor,
|
|
@@ -14764,15 +14779,15 @@ var StyledPanel = newStyled(Ye.Panel)({
|
|
|
14764
14779
|
justifyContent: 'center',
|
|
14765
14780
|
gap: '10px',
|
|
14766
14781
|
});
|
|
14767
|
-
var StyledContent = newStyled.div(templateObject_1$
|
|
14782
|
+
var StyledContent = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
14768
14783
|
var bgColor = _a.bgColor;
|
|
14769
14784
|
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
14770
14785
|
}, function (_a) {
|
|
14771
14786
|
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
14772
14787
|
return width;
|
|
14773
14788
|
});
|
|
14774
|
-
var StyledController = newStyled.div(templateObject_2$
|
|
14775
|
-
var templateObject_1$
|
|
14789
|
+
var StyledController = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
14790
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14776
14791
|
|
|
14777
14792
|
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
14778
14793
|
var background = _a.background, width = _a.width;
|
|
@@ -18592,17 +18607,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18592
18607
|
HTMLReactParser$1.attributesToProps;
|
|
18593
18608
|
HTMLReactParser$1.Element;
|
|
18594
18609
|
|
|
18595
|
-
var Container$
|
|
18596
|
-
var Card = newStyled.div(templateObject_2$
|
|
18597
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18598
|
-
var Label$
|
|
18599
|
-
var Check = newStyled.div(templateObject_5$
|
|
18600
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18601
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18602
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18610
|
+
var Container$s = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
18611
|
+
var Card = newStyled.div(templateObject_2$q || (templateObject_2$q = __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 p {\n color: var(--color);\n }\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 p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18612
|
+
var Tag$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __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"])));
|
|
18613
|
+
var Label$2 = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
18614
|
+
var Check = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
18615
|
+
var IconContainer$1 = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
18616
|
+
var IconPlaceholder = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
18617
|
+
var DiscountContainer = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18603
18618
|
var PackSelector = function (_a) {
|
|
18604
18619
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18605
|
-
return (jsx$1(Container$
|
|
18620
|
+
return (jsx$1(Container$s, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18606
18621
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18607
18622
|
}) }), void 0));
|
|
18608
18623
|
};
|
|
@@ -18616,7 +18631,7 @@ var PackCard = function (_a) {
|
|
|
18616
18631
|
.then(function (icon) { return setIcon(icon); })
|
|
18617
18632
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18618
18633
|
}, [pack.meta.icon]);
|
|
18619
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
18634
|
+
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$2, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18620
18635
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18621
18636
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18622
18637
|
locale: 'en-US',
|
|
@@ -18629,14 +18644,14 @@ var PackCard = function (_a) {
|
|
|
18629
18644
|
currency: currencyCode || 'USD',
|
|
18630
18645
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18631
18646
|
};
|
|
18632
|
-
var templateObject_1$
|
|
18647
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$9, templateObject_8$8;
|
|
18633
18648
|
|
|
18634
|
-
var Container$
|
|
18635
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18636
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18649
|
+
var Container$r = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
18650
|
+
var IconContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
18651
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18637
18652
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18638
18653
|
}));
|
|
18639
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18654
|
+
var PageNumber = newStyled.span(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18640
18655
|
var bold = _a.bold;
|
|
18641
18656
|
return (bold ? '700' : '500');
|
|
18642
18657
|
}, function (_a) {
|
|
@@ -18653,7 +18668,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18653
18668
|
var background = _a.background;
|
|
18654
18669
|
return background || 'unset';
|
|
18655
18670
|
});
|
|
18656
|
-
var templateObject_1$
|
|
18671
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g;
|
|
18657
18672
|
|
|
18658
18673
|
var Pagination = function (_a) {
|
|
18659
18674
|
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, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18699,7 +18714,7 @@ var Pagination = function (_a) {
|
|
|
18699
18714
|
}
|
|
18700
18715
|
return pages;
|
|
18701
18716
|
}, [from, page, showReducedPages, to]);
|
|
18702
|
-
return (jsxs$1(Container$
|
|
18717
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __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), !showReducedPages && (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)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, 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: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer, __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));
|
|
18703
18718
|
};
|
|
18704
18719
|
|
|
18705
18720
|
var PaginatorBlog = function (_a) {
|
|
@@ -18713,12 +18728,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18713
18728
|
setPage(page);
|
|
18714
18729
|
onChange(page);
|
|
18715
18730
|
};
|
|
18716
|
-
return (jsxs$1(Container$
|
|
18731
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", 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); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18717
18732
|
? theme.colors.shades['white'].color
|
|
18718
18733
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18719
18734
|
};
|
|
18720
18735
|
|
|
18721
|
-
var Container$
|
|
18736
|
+
var Container$q = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
18722
18737
|
var width = _a.width;
|
|
18723
18738
|
return width;
|
|
18724
18739
|
}, function (_a) {
|
|
@@ -18734,14 +18749,14 @@ var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __ma
|
|
|
18734
18749
|
var PaymentMethod = function (_a) {
|
|
18735
18750
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18736
18751
|
var theme = useTheme();
|
|
18737
|
-
return (jsx$1(Container$
|
|
18752
|
+
return (jsx$1(Container$q, __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));
|
|
18738
18753
|
};
|
|
18739
|
-
var templateObject_1$
|
|
18754
|
+
var templateObject_1$y;
|
|
18740
18755
|
|
|
18741
|
-
var Container$
|
|
18756
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18742
18757
|
var IMAGE_WIDTH = '63px';
|
|
18743
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18744
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18758
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18759
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18745
18760
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18746
18761
|
}), IMAGE_WIDTH);
|
|
18747
18762
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18764,7 +18779,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18764
18779
|
margin: '0.063rem 0',
|
|
18765
18780
|
});
|
|
18766
18781
|
});
|
|
18767
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18782
|
+
var PriceContainer = newStyled.div(templateObject_4$f || (templateObject_4$f = __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) {
|
|
18768
18783
|
var withTag = _a.withTag; _a.theme;
|
|
18769
18784
|
return withTag
|
|
18770
18785
|
? mediaQueries({
|
|
@@ -18773,14 +18788,14 @@ var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = _
|
|
|
18773
18788
|
})
|
|
18774
18789
|
: 'justify-content: end';
|
|
18775
18790
|
});
|
|
18776
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18777
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18791
|
+
var Quantity = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18792
|
+
var StyledSpan = newStyled.span(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18778
18793
|
var SimpleOrderItem = function (_a) {
|
|
18779
18794
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18780
18795
|
var theme = useTheme();
|
|
18781
|
-
return (jsxs$1(Container$
|
|
18796
|
+
return (jsxs$1(Container$p, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { 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: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { 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: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18782
18797
|
};
|
|
18783
|
-
var templateObject_1$
|
|
18798
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
18784
18799
|
|
|
18785
18800
|
var P$1 = newStyled.p(function (_a) {
|
|
18786
18801
|
var color = _a.color;
|
|
@@ -18794,7 +18809,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18794
18809
|
margin: '0.938rem 4.188rem',
|
|
18795
18810
|
});
|
|
18796
18811
|
});
|
|
18797
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18812
|
+
var Bar = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\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: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18798
18813
|
var height = _a.height;
|
|
18799
18814
|
return height || '0.5rem';
|
|
18800
18815
|
}, function (_a) {
|
|
@@ -18823,7 +18838,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18823
18838
|
position: 'absolute',
|
|
18824
18839
|
});
|
|
18825
18840
|
});
|
|
18826
|
-
var Container$
|
|
18841
|
+
var Container$o = newStyled.div(function (_a) {
|
|
18827
18842
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18828
18843
|
return ({
|
|
18829
18844
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18837,14 +18852,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18837
18852
|
var ProgressBar = function (_a) {
|
|
18838
18853
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18839
18854
|
var theme = useTheme();
|
|
18840
|
-
return (jsxs$1(Container$
|
|
18855
|
+
return (jsxs$1(Container$o, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18841
18856
|
};
|
|
18842
|
-
var templateObject_1$
|
|
18857
|
+
var templateObject_1$w;
|
|
18843
18858
|
|
|
18844
|
-
var Container$
|
|
18845
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18846
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18847
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18859
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\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: ", ";\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.borderRadius; }, function (props) { return props.color; });
|
|
18860
|
+
var Item$1 = newStyled.span(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
18861
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
18862
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18848
18863
|
var QuantityPicker = function (_a) {
|
|
18849
18864
|
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;
|
|
18850
18865
|
var theme = useTheme();
|
|
@@ -18867,9 +18882,9 @@ var QuantityPicker = function (_a) {
|
|
|
18867
18882
|
return clamp(value);
|
|
18868
18883
|
});
|
|
18869
18884
|
}, [value, clamp]);
|
|
18870
|
-
return (jsxs$1(Container$
|
|
18885
|
+
return (jsxs$1(Container$n, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { 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({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18871
18886
|
};
|
|
18872
|
-
var templateObject_1$
|
|
18887
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18873
18888
|
|
|
18874
18889
|
/* base styles & size variants */
|
|
18875
18890
|
var CustomRadioStyles$1 = {
|
|
@@ -18938,9 +18953,9 @@ var ContainerStyles$1 = {
|
|
|
18938
18953
|
},
|
|
18939
18954
|
};
|
|
18940
18955
|
|
|
18941
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18942
|
-
var Container$
|
|
18943
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18956
|
+
var Wrapper$3 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18957
|
+
var Container$m = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18958
|
+
var Input$2 = newStyled.input(templateObject_2$m || (templateObject_2$m = __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) {
|
|
18944
18959
|
var disabled = _a.disabled;
|
|
18945
18960
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18946
18961
|
});
|
|
@@ -18948,7 +18963,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18948
18963
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18949
18964
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18950
18965
|
]; });
|
|
18951
|
-
var StyledLabel$1 = newStyled(Label$
|
|
18966
|
+
var StyledLabel$1 = newStyled(Label$5)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18952
18967
|
var RadioPrimary = function (_a) {
|
|
18953
18968
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
18954
18969
|
var theme = useTheme();
|
|
@@ -18956,9 +18971,9 @@ var RadioPrimary = function (_a) {
|
|
|
18956
18971
|
var value = event.currentTarget.value;
|
|
18957
18972
|
onChange({ value: value, label: label });
|
|
18958
18973
|
};
|
|
18959
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18974
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$m, __assign$1({ theme: theme, size: size, style: style, "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, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18960
18975
|
};
|
|
18961
|
-
var templateObject_1$
|
|
18976
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j;
|
|
18962
18977
|
|
|
18963
18978
|
var RadioGroupInput = function (_a) {
|
|
18964
18979
|
var style = _a.style, 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;
|
|
@@ -19037,9 +19052,9 @@ var ContainerStyles = {
|
|
|
19037
19052
|
},
|
|
19038
19053
|
};
|
|
19039
19054
|
|
|
19040
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
19041
|
-
var Container$
|
|
19042
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
19055
|
+
var Wrapper$2 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
19056
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
19057
|
+
var Input$1 = newStyled.input(templateObject_2$l || (templateObject_2$l = __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) {
|
|
19043
19058
|
var disabled = _a.disabled;
|
|
19044
19059
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
19045
19060
|
});
|
|
@@ -19047,7 +19062,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
19047
19062
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
19048
19063
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
19049
19064
|
]; });
|
|
19050
|
-
var StyledLabel = newStyled(Label$
|
|
19065
|
+
var StyledLabel = newStyled(Label$5)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
19051
19066
|
var theme = _a.theme;
|
|
19052
19067
|
return theme.component.radio.textSize;
|
|
19053
19068
|
}, function (_a) {
|
|
@@ -19061,9 +19076,9 @@ var ClubRadioInput = function (_a) {
|
|
|
19061
19076
|
var value = event.currentTarget.value;
|
|
19062
19077
|
onChange({ value: value, label: label });
|
|
19063
19078
|
};
|
|
19064
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
19079
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
19065
19080
|
};
|
|
19066
|
-
var templateObject_1$
|
|
19081
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
19067
19082
|
|
|
19068
19083
|
var ClubRadioGroupInput = function (_a) {
|
|
19069
19084
|
var style = _a.style, 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;
|
|
@@ -19091,17 +19106,17 @@ function formatDate(date, format) {
|
|
|
19091
19106
|
}
|
|
19092
19107
|
}
|
|
19093
19108
|
|
|
19094
|
-
var Container$
|
|
19095
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
19096
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
19097
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
19098
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19099
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
19100
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
19101
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
19102
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
19103
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
19104
|
-
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$
|
|
19109
|
+
var Container$k = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
19110
|
+
var Content$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
19111
|
+
var StarsContent = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19112
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
19113
|
+
var DateText$1 = newStyled.span(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
19114
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19115
|
+
var VerifiedText = newStyled.h1(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19116
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
19117
|
+
var ReviewDescription = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
19118
|
+
var ImageContainer = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
19119
|
+
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19105
19120
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
19106
19121
|
var ProductContainer = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
19107
19122
|
var ProductTitle = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"], ["\n align-items: center;\n margin-top: 10px;\n margin-bottom: 15px;\n font-size: 12px;\n line-height: 16px;\n text-align: center;\n max-width: 192px;\n"])));
|
|
@@ -19129,24 +19144,24 @@ var Review$1 = function (_a) {
|
|
|
19129
19144
|
}
|
|
19130
19145
|
}
|
|
19131
19146
|
}, [opened]);
|
|
19132
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
19147
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$k, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
19133
19148
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19134
19149
|
};
|
|
19135
|
-
var templateObject_1$
|
|
19150
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$8, templateObject_8$7, templateObject_9$5, templateObject_10$5, templateObject_11$3, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19136
19151
|
|
|
19137
19152
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19138
19153
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
19139
|
-
var Container$
|
|
19140
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19141
|
-
var Content = newStyled.div(templateObject_3$
|
|
19142
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
19143
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19144
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
19145
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
19146
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
19147
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
19148
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
19149
|
-
var ImagesContainer = newStyled.div(templateObject_11$
|
|
19154
|
+
var Container$j = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
19155
|
+
var Heading = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19156
|
+
var Content = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19157
|
+
var ReviewContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19158
|
+
var DateText = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19159
|
+
var VariantText = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19160
|
+
var ReviewerName = newStyled.h2(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19161
|
+
var ReviewTitle = newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19162
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
19163
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
19164
|
+
var ImagesContainer = newStyled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
19150
19165
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
19151
19166
|
var ImageSpace = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
19152
19167
|
var ImageWrapper$1 = newStyled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
@@ -19178,7 +19193,7 @@ var Review = function (_a) {
|
|
|
19178
19193
|
});
|
|
19179
19194
|
};
|
|
19180
19195
|
}, [randomId]);
|
|
19181
|
-
return (jsxs$1(Container$
|
|
19196
|
+
return (jsxs$1(Container$j, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, 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" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
19182
19197
|
__html: showMoreMobile
|
|
19183
19198
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19184
19199
|
: description,
|
|
@@ -19188,15 +19203,15 @@ var Review = function (_a) {
|
|
|
19188
19203
|
: description,
|
|
19189
19204
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19190
19205
|
};
|
|
19191
|
-
var templateObject_1$
|
|
19192
|
-
|
|
19193
|
-
var Container$
|
|
19194
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19195
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
19196
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
19197
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19198
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
19199
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
19206
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$2, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19207
|
+
|
|
19208
|
+
var Container$i = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19209
|
+
var ReviewsContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
19210
|
+
var ReviewsCount = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
19211
|
+
var ReviewsStars = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
19212
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
19213
|
+
var ReviewsImages = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19214
|
+
var SummaryItem = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19200
19215
|
var backgroundUrl = _a.backgroundUrl;
|
|
19201
19216
|
return "url(".concat(backgroundUrl, ")");
|
|
19202
19217
|
});
|
|
@@ -19204,19 +19219,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19204
19219
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
19205
19220
|
var starsNumber = 5;
|
|
19206
19221
|
var theme = useTheme();
|
|
19207
|
-
return (jsxs$1(Container$
|
|
19222
|
+
return (jsxs$1(Container$i, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19208
19223
|
};
|
|
19209
|
-
var templateObject_1$
|
|
19224
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6;
|
|
19210
19225
|
|
|
19211
|
-
var Container$
|
|
19212
|
-
var Text = newStyled.p(templateObject_2$
|
|
19226
|
+
var Container$h = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
19227
|
+
var Text = newStyled.p(templateObject_2$h || (templateObject_2$h = __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; });
|
|
19213
19228
|
var ScrollToTop = function (_a) {
|
|
19214
19229
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19215
19230
|
var theme = useTheme();
|
|
19216
19231
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19217
|
-
return (jsxs$1(Container$
|
|
19232
|
+
return (jsxs$1(Container$h, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19218
19233
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19234
|
+
var templateObject_1$p, templateObject_2$h;
|
|
19220
19235
|
|
|
19221
19236
|
var Input = newStyled.input(function (props) { return ({
|
|
19222
19237
|
padding: props.theme.component.input.padding,
|
|
@@ -19247,7 +19262,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19247
19262
|
},
|
|
19248
19263
|
}); });
|
|
19249
19264
|
|
|
19250
|
-
var Container$
|
|
19265
|
+
var Container$g = newStyled.div(templateObject_1$o || (templateObject_1$o = __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({
|
|
19251
19266
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19252
19267
|
}));
|
|
19253
19268
|
var Description = newStyled.div({
|
|
@@ -19264,25 +19279,25 @@ var Description = newStyled.div({
|
|
|
19264
19279
|
var ProductItem = function (_a) {
|
|
19265
19280
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19266
19281
|
var theme = useTheme();
|
|
19267
|
-
return (jsxs$1(Container$
|
|
19282
|
+
return (jsxs$1(Container$g, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __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));
|
|
19268
19283
|
};
|
|
19269
|
-
var templateObject_1$
|
|
19284
|
+
var templateObject_1$o;
|
|
19270
19285
|
|
|
19271
|
-
var Container$
|
|
19286
|
+
var Container$f = newStyled.div({
|
|
19272
19287
|
display: 'flex',
|
|
19273
19288
|
justifyContent: 'center',
|
|
19274
19289
|
padding: '1rem',
|
|
19275
19290
|
});
|
|
19276
19291
|
var Footer = function (_a) {
|
|
19277
19292
|
var text = _a.text, onClick = _a.onClick;
|
|
19278
|
-
return (jsx$1(Container$
|
|
19293
|
+
return (jsx$1(Container$f, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19279
19294
|
};
|
|
19280
19295
|
|
|
19281
19296
|
var Ul = newStyled.ul({
|
|
19282
19297
|
margin: '0px',
|
|
19283
19298
|
padding: '0px',
|
|
19284
19299
|
});
|
|
19285
|
-
var Li = newStyled.li(templateObject_1$
|
|
19300
|
+
var Li = newStyled.li(templateObject_1$n || (templateObject_1$n = __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({
|
|
19286
19301
|
padding: [0, '0rem 1rem'],
|
|
19287
19302
|
borderRadius: [0, '0.5rem'],
|
|
19288
19303
|
}));
|
|
@@ -19294,22 +19309,22 @@ var Anchor = newStyled.a({
|
|
|
19294
19309
|
padding: 0,
|
|
19295
19310
|
textDecoration: 'none',
|
|
19296
19311
|
});
|
|
19297
|
-
var Container$
|
|
19312
|
+
var Container$e = newStyled.div(templateObject_2$g || (templateObject_2$g = __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({
|
|
19298
19313
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19299
19314
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19300
19315
|
borderRadius: ['0', '0.5rem'],
|
|
19301
19316
|
}));
|
|
19302
|
-
var Header = newStyled.div(templateObject_3$
|
|
19317
|
+
var Header = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19303
19318
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19304
19319
|
}));
|
|
19305
19320
|
var ResultsPanel = function (_a) {
|
|
19306
19321
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19307
19322
|
var theme = useTheme();
|
|
19308
|
-
return (jsxs$1(Container$
|
|
19323
|
+
return (jsxs$1(Container$e, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __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));
|
|
19309
19324
|
};
|
|
19310
|
-
var templateObject_1$
|
|
19325
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$e;
|
|
19311
19326
|
|
|
19312
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19327
|
+
var Button$1 = newStyled.button(templateObject_1$m || (templateObject_1$m = __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({
|
|
19313
19328
|
right: ['1rem', '7.75rem'],
|
|
19314
19329
|
top: ['0.75rem', '0.75rem'],
|
|
19315
19330
|
}));
|
|
@@ -19318,7 +19333,7 @@ var ClearButton = function (_a) {
|
|
|
19318
19333
|
var theme = useTheme();
|
|
19319
19334
|
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));
|
|
19320
19335
|
};
|
|
19321
|
-
var templateObject_1$
|
|
19336
|
+
var templateObject_1$m;
|
|
19322
19337
|
|
|
19323
19338
|
var SearchIconContainer = newStyled.div({
|
|
19324
19339
|
display: 'flex',
|
|
@@ -19328,7 +19343,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19328
19343
|
background: 'white',
|
|
19329
19344
|
alignSelf: 'center',
|
|
19330
19345
|
});
|
|
19331
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19346
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19332
19347
|
var SearchControl = function (_a) {
|
|
19333
19348
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19334
19349
|
var theme = useTheme();
|
|
@@ -19344,7 +19359,7 @@ var SearchControl = function (_a) {
|
|
|
19344
19359
|
}
|
|
19345
19360
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19346
19361
|
};
|
|
19347
|
-
var templateObject_1$
|
|
19362
|
+
var templateObject_1$l;
|
|
19348
19363
|
|
|
19349
19364
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19350
19365
|
var reducer = function (state, action) {
|
|
@@ -19360,7 +19375,7 @@ var reducer = function (state, action) {
|
|
|
19360
19375
|
}
|
|
19361
19376
|
}
|
|
19362
19377
|
};
|
|
19363
|
-
var Container$
|
|
19378
|
+
var Container$d = newStyled.div({
|
|
19364
19379
|
position: 'relative',
|
|
19365
19380
|
display: 'flex',
|
|
19366
19381
|
});
|
|
@@ -19400,7 +19415,7 @@ var SearchBar = function (_a) {
|
|
|
19400
19415
|
if (e.cancelable) {
|
|
19401
19416
|
e.preventDefault();
|
|
19402
19417
|
}
|
|
19403
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19418
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$d, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19404
19419
|
if (e.key === 'Enter') {
|
|
19405
19420
|
if (e.cancelable) {
|
|
19406
19421
|
e.preventDefault();
|
|
@@ -19411,20 +19426,20 @@ var SearchBar = function (_a) {
|
|
|
19411
19426
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19412
19427
|
};
|
|
19413
19428
|
|
|
19414
|
-
var Container$
|
|
19415
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19416
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19417
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19418
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19429
|
+
var Container$c = newStyled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
19430
|
+
var BackArrow = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19431
|
+
var BoldSpan = newStyled.span(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
19432
|
+
var NormalSpan = newStyled.span(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
19433
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
19419
19434
|
var SearchNavigation = function (_a) {
|
|
19420
19435
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19421
|
-
return (jsxs$1(Container$
|
|
19436
|
+
return (jsxs$1(Container$c, { children: [jsxs$1(Text$7, __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) {
|
|
19422
19437
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, step)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19423
19438
|
}) }, void 0)] }, void 0));
|
|
19424
19439
|
};
|
|
19425
|
-
var templateObject_1$
|
|
19440
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$d, templateObject_4$a, templateObject_5$6;
|
|
19426
19441
|
|
|
19427
|
-
var Container$
|
|
19442
|
+
var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19428
19443
|
var alignCenter = _a.alignCenter;
|
|
19429
19444
|
return alignCenter &&
|
|
19430
19445
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19434,29 +19449,29 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19434
19449
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19435
19450
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19436
19451
|
});
|
|
19437
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19438
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19452
|
+
var TitleText = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19453
|
+
var BannerText = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19439
19454
|
var ShortBanner = function (_a) {
|
|
19440
19455
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19441
19456
|
var theme = useTheme();
|
|
19442
|
-
return (jsxs$1(Container$
|
|
19457
|
+
return (jsxs$1(Container$b, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19443
19458
|
};
|
|
19444
|
-
var templateObject_1$
|
|
19445
|
-
|
|
19446
|
-
var TableElement$
|
|
19447
|
-
var TableCell$
|
|
19448
|
-
var TableHead$
|
|
19449
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19450
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19451
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19452
|
-
var Container$
|
|
19453
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19454
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19455
|
-
var TableRow$
|
|
19456
|
-
var templateObject_1$
|
|
19457
|
-
|
|
19458
|
-
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19459
|
-
var getCellColor = function (index, cell) {
|
|
19459
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c;
|
|
19460
|
+
|
|
19461
|
+
var TableElement$2 = newStyled.table(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: relative;\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 position: relative;\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; });
|
|
19462
|
+
var TableCell$2 = newStyled.td(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19463
|
+
var TableHead$2 = newStyled.th(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19464
|
+
var Label$1 = newStyled('div')(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19465
|
+
var TopLabel$1 = newStyled(Label$1)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19466
|
+
var LeftLabel$1 = newStyled(Label$1)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19467
|
+
var Container$a = newStyled('div')(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19468
|
+
var LabelText$1 = newStyled('span')(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19469
|
+
var Column$1 = newStyled('div')(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19470
|
+
var TableRow$2 = newStyled.tr(templateObject_10$3 || (templateObject_10$3 = __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; });
|
|
19471
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$9, templateObject_5$5, templateObject_6$5, templateObject_7$5, templateObject_8$5, templateObject_9$3, templateObject_10$3;
|
|
19472
|
+
|
|
19473
|
+
var getIsOdd$1 = function (number) { return number % 2 !== 0; };
|
|
19474
|
+
var getCellColor$1 = function (index, cell) {
|
|
19460
19475
|
if (index == 0) {
|
|
19461
19476
|
return '#f6f0e7';
|
|
19462
19477
|
}
|
|
@@ -19489,21 +19504,21 @@ var SizeChartTable = function (_a) {
|
|
|
19489
19504
|
var theme = useTheme();
|
|
19490
19505
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19491
19506
|
var isMultilabel = xLabel && yLabel;
|
|
19492
|
-
return (jsxs$1(Container$
|
|
19493
|
-
backgroundColor: getCellColor(index, cell),
|
|
19494
|
-
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$
|
|
19507
|
+
return (jsxs$1(Container$a, { children: [isMultilabel && (jsxs$1(LeftLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column$1, { children: [isMultilabel && (jsxs$1(TopLabel$1, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText$1, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$2, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$2, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ style: {
|
|
19508
|
+
backgroundColor: getCellColor$1(index, cell),
|
|
19509
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$2, __assign$1({ className: getIsOdd$1(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$2, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19495
19510
|
};
|
|
19496
19511
|
|
|
19497
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19498
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19499
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19500
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19512
|
+
var TableElement$1 = newStyled.table(templateObject_1$h || (templateObject_1$h = __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; });
|
|
19513
|
+
var TableCell$1 = newStyled.td(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\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: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\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; });
|
|
19514
|
+
var TableHead$1 = newStyled.th(templateObject_3$a || (templateObject_3$a = __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; });
|
|
19515
|
+
var TableRow$1 = newStyled.tr(templateObject_4$8 || (templateObject_4$8 = __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; });
|
|
19501
19516
|
var SizeTable = function (_a) {
|
|
19502
19517
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19503
19518
|
var theme = useTheme();
|
|
19504
|
-
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { 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));
|
|
19519
|
+
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __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$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19505
19520
|
};
|
|
19506
|
-
var templateObject_1$
|
|
19521
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8;
|
|
19507
19522
|
|
|
19508
19523
|
var getStylesBySize$4 = function (size) {
|
|
19509
19524
|
switch (size) {
|
|
@@ -19530,7 +19545,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19530
19545
|
} });
|
|
19531
19546
|
};
|
|
19532
19547
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19533
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19548
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$g || (templateObject_1$g = __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));
|
|
19534
19549
|
};
|
|
19535
19550
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19536
19551
|
if (disabled)
|
|
@@ -19546,23 +19561,23 @@ var TextButton = function (_a) {
|
|
|
19546
19561
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19547
19562
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19548
19563
|
};
|
|
19549
|
-
var templateObject_1$
|
|
19564
|
+
var templateObject_1$g;
|
|
19550
19565
|
|
|
19551
|
-
var Container$
|
|
19552
|
-
var P = newStyled.p(templateObject_2$
|
|
19553
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19566
|
+
var Container$9 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
19567
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19568
|
+
var PercentageSpan = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
19554
19569
|
var SizeFitGuide = function (_a) {
|
|
19555
19570
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19556
|
-
return (jsxs$1(Container$
|
|
19571
|
+
return (jsxs$1(Container$9, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19557
19572
|
};
|
|
19558
|
-
var templateObject_1$
|
|
19573
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$9;
|
|
19559
19574
|
|
|
19560
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19575
|
+
var ButtonsContainer = newStyled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
19561
19576
|
var inline = _a.inline;
|
|
19562
19577
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19563
19578
|
});
|
|
19564
|
-
var Row = newStyled.div(templateObject_2$
|
|
19565
|
-
var templateObject_1$
|
|
19579
|
+
var Row = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19580
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19566
19581
|
|
|
19567
19582
|
var SizeSelector = function (_a) {
|
|
19568
19583
|
var _b;
|
|
@@ -19584,7 +19599,7 @@ var SizeSelector = function (_a) {
|
|
|
19584
19599
|
}) }), void 0)] }), void 0));
|
|
19585
19600
|
};
|
|
19586
19601
|
|
|
19587
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19602
|
+
var TabContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19588
19603
|
var titleSize = _a.titleSize;
|
|
19589
19604
|
return titleSize;
|
|
19590
19605
|
}, function (_a) {
|
|
@@ -19601,18 +19616,18 @@ var Tab = function (_a) {
|
|
|
19601
19616
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19602
19617
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19603
19618
|
};
|
|
19604
|
-
var templateObject_1$
|
|
19619
|
+
var templateObject_1$d;
|
|
19605
19620
|
|
|
19606
|
-
var Container$
|
|
19607
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19621
|
+
var Container$8 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19622
|
+
var TabList = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19608
19623
|
var backgroundColor = _a.backgroundColor;
|
|
19609
19624
|
return backgroundColor;
|
|
19610
19625
|
}, function (_a) {
|
|
19611
19626
|
var borderColor = _a.borderColor;
|
|
19612
19627
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19613
19628
|
});
|
|
19614
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19615
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19629
|
+
var TabContent = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19630
|
+
var TabSeparator = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
19616
19631
|
var Tabs = function (_a) {
|
|
19617
19632
|
var _b;
|
|
19618
19633
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19621,16 +19636,16 @@ var Tabs = function (_a) {
|
|
|
19621
19636
|
return null;
|
|
19622
19637
|
}
|
|
19623
19638
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19624
|
-
return (jsxs$1(Container$
|
|
19639
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19625
19640
|
};
|
|
19626
|
-
var templateObject_1$
|
|
19641
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$7;
|
|
19627
19642
|
|
|
19628
|
-
var Container$
|
|
19643
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
19629
19644
|
var Tag = function (_a) {
|
|
19630
19645
|
var text = _a.text, className = _a.className;
|
|
19631
|
-
return jsx$1(Container$
|
|
19646
|
+
return jsx$1(Container$7, __assign$1({ className: className }, { children: text }), void 0);
|
|
19632
19647
|
};
|
|
19633
|
-
var templateObject_1$
|
|
19648
|
+
var templateObject_1$b;
|
|
19634
19649
|
|
|
19635
19650
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19636
19651
|
switch (size) {
|
|
@@ -19741,9 +19756,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19741
19756
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19742
19757
|
};
|
|
19743
19758
|
|
|
19744
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19745
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19746
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19759
|
+
var ImageWrapper = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19760
|
+
var VideoOverlay = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19761
|
+
var FullscreenVideo = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19747
19762
|
var ImageVideo = function (_a) {
|
|
19748
19763
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19749
19764
|
var video = useRef(null);
|
|
@@ -19763,12 +19778,12 @@ var ImageVideo = function (_a) {
|
|
|
19763
19778
|
height: '100%',
|
|
19764
19779
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19765
19780
|
};
|
|
19766
|
-
var templateObject_1$
|
|
19781
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19767
19782
|
|
|
19768
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19769
|
-
var ContainerMobile = css(templateObject_2$
|
|
19770
|
-
var Container$
|
|
19771
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19783
|
+
var ContainerDesktop = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19784
|
+
var ContainerMobile = css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19785
|
+
var Container$6 = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19786
|
+
var TextContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19772
19787
|
var TextWithImage = function (_a) {
|
|
19773
19788
|
var _b, _c, _d, _e;
|
|
19774
19789
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19788,7 +19803,7 @@ var TextWithImage = function (_a) {
|
|
|
19788
19803
|
// @ts-ignore
|
|
19789
19804
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19790
19805
|
};
|
|
19791
|
-
return (jsxs(Container$
|
|
19806
|
+
return (jsxs(Container$6, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19792
19807
|
backgroundColor: props.btnBGColor,
|
|
19793
19808
|
color: '#ffffff',
|
|
19794
19809
|
border: props.btnBGColor,
|
|
@@ -19798,9 +19813,9 @@ var TextWithImage = function (_a) {
|
|
|
19798
19813
|
},
|
|
19799
19814
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19800
19815
|
};
|
|
19801
|
-
var templateObject_1$
|
|
19816
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6, templateObject_4$6;
|
|
19802
19817
|
|
|
19803
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19818
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19804
19819
|
var timerColor = _a.timerColor;
|
|
19805
19820
|
return timerColor || '';
|
|
19806
19821
|
});
|
|
@@ -19836,11 +19851,11 @@ var Timer = function (_a) {
|
|
|
19836
19851
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19837
19852
|
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19838
19853
|
};
|
|
19839
|
-
var templateObject_1$
|
|
19854
|
+
var templateObject_1$8;
|
|
19840
19855
|
|
|
19841
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19842
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19843
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19856
|
+
var Wrapper$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
19857
|
+
var GrandTotal = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\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: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19858
|
+
var Currency = newStyled.span(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19844
19859
|
var theme = _a.theme;
|
|
19845
19860
|
return theme.component.total.basicTotal.currency.color;
|
|
19846
19861
|
}, function (_a) {
|
|
@@ -19853,41 +19868,41 @@ var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __make
|
|
|
19853
19868
|
var theme = _a.theme;
|
|
19854
19869
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19855
19870
|
});
|
|
19856
|
-
var Container$
|
|
19871
|
+
var Container$5 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19857
19872
|
var highlightColor = _a.highlightColor;
|
|
19858
19873
|
return highlightColor;
|
|
19859
19874
|
});
|
|
19860
|
-
var TotalContainer = newStyled(Container$
|
|
19875
|
+
var TotalContainer = newStyled(Container$5)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19861
19876
|
var showTotalLabel = _a.showTotalLabel;
|
|
19862
19877
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19863
19878
|
});
|
|
19864
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19865
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19879
|
+
var DiscountText = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19880
|
+
var DiscountAmount = newStyled.h3(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19866
19881
|
var theme = _a.theme;
|
|
19867
19882
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19868
19883
|
});
|
|
19869
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19870
|
-
var templateObject_1$
|
|
19884
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19885
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
|
|
19871
19886
|
|
|
19872
19887
|
var Total = function (_a) {
|
|
19873
19888
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19874
19889
|
var theme = useTheme();
|
|
19875
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19890
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$5, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19876
19891
|
};
|
|
19877
19892
|
|
|
19878
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19893
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19879
19894
|
var color = _a.color;
|
|
19880
19895
|
return color;
|
|
19881
19896
|
});
|
|
19882
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19883
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19897
|
+
var ItemContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
19898
|
+
var Item = newStyled.h4(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19884
19899
|
var theme = _a.theme;
|
|
19885
19900
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19886
19901
|
}, function (_a) {
|
|
19887
19902
|
var theme = _a.theme;
|
|
19888
19903
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19889
19904
|
});
|
|
19890
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19905
|
+
var CouponItem = newStyled(Item)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19891
19906
|
var color = _a.color;
|
|
19892
19907
|
return color;
|
|
19893
19908
|
});
|
|
@@ -19900,32 +19915,32 @@ var Subtotal = function (_a) {
|
|
|
19900
19915
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19901
19916
|
})] }), void 0));
|
|
19902
19917
|
};
|
|
19903
|
-
var templateObject_1$
|
|
19918
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19904
19919
|
|
|
19905
19920
|
var Totals = {
|
|
19906
19921
|
Total: Total,
|
|
19907
19922
|
Subtotal: Subtotal,
|
|
19908
19923
|
};
|
|
19909
19924
|
|
|
19910
|
-
var Container$
|
|
19911
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19912
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19913
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19914
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19915
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19925
|
+
var Container$4 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19926
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19927
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19928
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19929
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
19930
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19916
19931
|
return props.finishedTrack
|
|
19917
19932
|
? props.finishedTrackColor
|
|
19918
19933
|
: props.activeTrack
|
|
19919
19934
|
? props.activeTrackColor
|
|
19920
19935
|
: '';
|
|
19921
19936
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19922
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19923
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19937
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
19938
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19924
19939
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19925
19940
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19926
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$
|
|
19927
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_10$
|
|
19928
|
-
var WarningIconWrapper = newStyled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19941
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19942
|
+
var LastActiveCheckpointDot = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
19943
|
+
var WarningIconWrapper = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19929
19944
|
var TrackingProgressV2 = function (_a) {
|
|
19930
19945
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, _b = _a.resumedStyle, resumedStyle = _b === void 0 ? false : _b, activeCheckpointColor = _a.activeCheckpointColor, warning = _a.warning;
|
|
19931
19946
|
var theme = useTheme();
|
|
@@ -19948,7 +19963,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19948
19963
|
}
|
|
19949
19964
|
return '30px';
|
|
19950
19965
|
};
|
|
19951
|
-
return (jsxs$1(Container$
|
|
19966
|
+
return (jsxs$1(Container$4, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19952
19967
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19953
19968
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19954
19969
|
? activeCheckpointColor
|
|
@@ -19959,18 +19974,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19959
19974
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19960
19975
|
})] }), void 0));
|
|
19961
19976
|
};
|
|
19962
|
-
var templateObject_1$
|
|
19963
|
-
|
|
19964
|
-
var Container$
|
|
19965
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19966
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
19967
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
19968
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
19969
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
19977
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$1;
|
|
19978
|
+
|
|
19979
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19980
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19981
|
+
var CheckpointDate = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19982
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19983
|
+
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
19984
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19970
19985
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19971
19986
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19972
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
19973
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
19987
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19988
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19974
19989
|
var TrackingProgress = function (_a) {
|
|
19975
19990
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19976
19991
|
var theme = useTheme();
|
|
@@ -19990,7 +20005,7 @@ var TrackingProgress = function (_a) {
|
|
|
19990
20005
|
}
|
|
19991
20006
|
return '30px';
|
|
19992
20007
|
};
|
|
19993
|
-
return (jsxs$1(Container$
|
|
20008
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19994
20009
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19995
20010
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19996
20011
|
? theme.colors.semantic.informative.color
|
|
@@ -19999,9 +20014,9 @@ var TrackingProgress = function (_a) {
|
|
|
19999
20014
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20000
20015
|
})] }), void 0));
|
|
20001
20016
|
};
|
|
20002
|
-
var templateObject_1$
|
|
20017
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
20003
20018
|
|
|
20004
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
20019
|
+
var TimerContainer = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
20005
20020
|
var textPosition = _a.textPosition;
|
|
20006
20021
|
return textPosition;
|
|
20007
20022
|
}, function (_a) {
|
|
@@ -20014,7 +20029,7 @@ var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = _
|
|
|
20014
20029
|
var borderRadius = _a.borderRadius;
|
|
20015
20030
|
return borderRadius || '8px';
|
|
20016
20031
|
});
|
|
20017
|
-
var templateObject_1$
|
|
20032
|
+
var templateObject_1$3;
|
|
20018
20033
|
|
|
20019
20034
|
var getDefaultCountdown = function () {
|
|
20020
20035
|
var tomorrowDate = new Date();
|
|
@@ -20030,7 +20045,7 @@ var HurryUp = function (_a) {
|
|
|
20030
20045
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
20031
20046
|
};
|
|
20032
20047
|
|
|
20033
|
-
var Container$
|
|
20048
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
20034
20049
|
var size = _a.size;
|
|
20035
20050
|
return (size ? size : '100%');
|
|
20036
20051
|
}, function (_a) {
|
|
@@ -20044,7 +20059,7 @@ var borderSize = {
|
|
|
20044
20059
|
large: '3px',
|
|
20045
20060
|
};
|
|
20046
20061
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
20047
|
-
var StyledSpinner = newStyled.div(templateObject_2$
|
|
20062
|
+
var StyledSpinner = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
20048
20063
|
var size = _a.size;
|
|
20049
20064
|
return borderSize[size];
|
|
20050
20065
|
}, function (_a) {
|
|
@@ -20057,15 +20072,15 @@ var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __
|
|
|
20057
20072
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
20058
20073
|
return duration;
|
|
20059
20074
|
});
|
|
20060
|
-
var templateObject_1$
|
|
20075
|
+
var templateObject_1$2, templateObject_2$2;
|
|
20061
20076
|
|
|
20062
20077
|
var Spinner = function (_a) {
|
|
20063
20078
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
20064
|
-
return (jsx$1(Container$
|
|
20079
|
+
return (jsx$1(Container$2, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
20065
20080
|
};
|
|
20066
20081
|
|
|
20067
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
20068
|
-
var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
20082
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
20083
|
+
var SliderContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n display: block !important;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 5px;\n }\n\n .slick-next {\n right: 5px;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
20069
20084
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
20070
20085
|
return borderRadiusVariant &&
|
|
20071
20086
|
"\n border-radius: 40px;\n ";
|
|
@@ -20076,30 +20091,30 @@ var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __ma
|
|
|
20076
20091
|
var theme = _a.theme;
|
|
20077
20092
|
return theme.component.gallery.aspectRatio;
|
|
20078
20093
|
});
|
|
20079
|
-
var TopTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
20080
|
-
var BottomTagContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20081
|
-
var NavButtonContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
20094
|
+
var TopTagContainer = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: 21px;\n"], ["\n position: absolute;\n left: 0px;\n top: 21px;\n"])));
|
|
20095
|
+
var BottomTagContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
20096
|
+
var NavButtonContainer = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
20082
20097
|
var theme = _a.theme;
|
|
20083
20098
|
return theme.colors.shades.white.color;
|
|
20084
20099
|
});
|
|
20085
|
-
var Button = newStyled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
20086
|
-
var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"])), function (_a) {
|
|
20100
|
+
var Button = newStyled.button(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
20101
|
+
var SliderThumbnail = newStyled(Slider)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"])), function (_a) {
|
|
20087
20102
|
var theme = _a.theme;
|
|
20088
20103
|
return theme.colors.pallete.primary.color;
|
|
20089
20104
|
});
|
|
20090
|
-
var StyledImage = newStyled(Image$3)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20105
|
+
var StyledImage = newStyled(Image$3)(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20091
20106
|
var theme = _a.theme;
|
|
20092
20107
|
return theme.component.gallery.aspectRatio;
|
|
20093
20108
|
});
|
|
20094
|
-
var SlideItem = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-right: 12px;\n aspect-ratio: ", ";\n"], ["\n padding-right: 12px;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20109
|
+
var SlideItem = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n padding-right: 12px;\n aspect-ratio: ", ";\n"], ["\n padding-right: 12px;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20095
20110
|
var theme = _a.theme;
|
|
20096
20111
|
return theme.component.gallery.aspectRatio;
|
|
20097
20112
|
});
|
|
20098
|
-
var ThumbnailImage = newStyled(Image$3)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20113
|
+
var ThumbnailImage = newStyled(Image$3)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
20099
20114
|
var theme = _a.theme;
|
|
20100
20115
|
return theme.component.gallery.aspectRatio;
|
|
20101
20116
|
});
|
|
20102
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
20117
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
|
|
20103
20118
|
|
|
20104
20119
|
var SETTINGS = {
|
|
20105
20120
|
infinite: false,
|
|
@@ -20161,7 +20176,7 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20161
20176
|
if (thumbnailRef.current)
|
|
20162
20177
|
setNav2(thumbnailRef.current);
|
|
20163
20178
|
}, []);
|
|
20164
|
-
return (jsx$1(Container, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20179
|
+
return (jsx$1(Container$1, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { lazyLoad: "progressive", nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
20165
20180
|
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
20166
20181
|
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover", width: theme.component.gallery.mainImgWidth, height: theme.component.gallery.mainImgHeight }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
20167
20182
|
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { lazyLoad: "progressive" }, { children: images.map(function (_a) {
|
|
@@ -20170,5 +20185,57 @@ var ProductGalleryMobileV4 = function (_a) {
|
|
|
20170
20185
|
}) }), void 0)] }), void 0) }), void 0));
|
|
20171
20186
|
};
|
|
20172
20187
|
|
|
20173
|
-
|
|
20188
|
+
var ScrollContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 287px;\n overflow-x: auto;\n }\n"], ["\n overflow-x: auto;\n width: 100%;\n @media (max-width: 768px) {\n width: 287px;\n overflow-x: auto;\n }\n"])));
|
|
20189
|
+
var TableElement = newStyled.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\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 position: relative;\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; });
|
|
20190
|
+
var TableCell = newStyled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
20191
|
+
var TableHead = newStyled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
20192
|
+
var Label = newStyled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
20193
|
+
var TopLabel = newStyled(Label)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20194
|
+
var LeftLabel = newStyled(Label)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
20195
|
+
var Container = newStyled('div')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
20196
|
+
var LabelText = newStyled('span')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
20197
|
+
var Column = newStyled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
20198
|
+
var TableRow = newStyled.tr(templateObject_11 || (templateObject_11 = __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; });
|
|
20199
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
20200
|
+
|
|
20201
|
+
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
20202
|
+
var getCellColor = function (index, cell) {
|
|
20203
|
+
if (index == 0) {
|
|
20204
|
+
return '#f6f0e7';
|
|
20205
|
+
}
|
|
20206
|
+
switch (cell) {
|
|
20207
|
+
case 'XS':
|
|
20208
|
+
return '#f5bab0';
|
|
20209
|
+
case 'S':
|
|
20210
|
+
return '#f7a08b';
|
|
20211
|
+
case 'M':
|
|
20212
|
+
return '#ffe1b8';
|
|
20213
|
+
case 'L':
|
|
20214
|
+
return '#f5bab0';
|
|
20215
|
+
case 'XL':
|
|
20216
|
+
return '#8bbeea';
|
|
20217
|
+
case '2XL':
|
|
20218
|
+
return '#b1d7c3';
|
|
20219
|
+
case '3XL':
|
|
20220
|
+
return '#e7a4f7';
|
|
20221
|
+
case '4XL':
|
|
20222
|
+
return '#e7c9b2';
|
|
20223
|
+
default:
|
|
20224
|
+
return '';
|
|
20225
|
+
}
|
|
20226
|
+
};
|
|
20227
|
+
|
|
20228
|
+
// TODO: Refactor the table properties
|
|
20229
|
+
var SizeChartTableV2 = function (_a) {
|
|
20230
|
+
var _b, _c;
|
|
20231
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
20232
|
+
var theme = useTheme();
|
|
20233
|
+
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
20234
|
+
var isMultilabel = xLabel && yLabel;
|
|
20235
|
+
return (jsxs$1(Container, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsx$1(ScrollContainer, { children: jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ style: {
|
|
20236
|
+
backgroundColor: getCellColor(index, cell),
|
|
20237
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : 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) }, void 0)] }, void 0)] }, void 0));
|
|
20238
|
+
};
|
|
20239
|
+
|
|
20240
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, CancellationFlowAccordionContentPerPartner, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, CouponCard, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
20174
20241
|
//# sourceMappingURL=index.esm.js.map
|