@trafilea/afrodita-components 6.8.5 → 6.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +2 -2
- package/build/index.d.ts +70 -65
- package/build/index.esm.css +2 -2
- package/build/index.esm.js +488 -432
- package/build/index.esm.js.map +1 -1
- package/build/index.js +488 -432
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$
|
|
3128
|
+
var Container$1a = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,11 +3150,11 @@ var Container$19 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$1a, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1V;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1T || (templateObject_1$1T
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1f || (templateObject_2$1f = __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) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1e || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1U, templateObject_2$1f;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -3909,82 +3909,85 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
3909
3909
|
TheSpaDr: TheSpaDr
|
|
3910
3910
|
});
|
|
3911
3911
|
|
|
3912
|
+
var CircleNumber = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/circle_number" }), void 0); };
|
|
3913
|
+
|
|
3912
3914
|
var Clock = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/clock" }), void 0); };
|
|
3913
3915
|
|
|
3914
|
-
var
|
|
3916
|
+
var Drop = function (props) { return jsx$1(Icon$1, __assign$1({ testId: "drop" }, props, { name: "pdp/drop" }), void 0); };
|
|
3915
3917
|
|
|
3916
|
-
var
|
|
3918
|
+
var DropEmpty = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "drop-empty" }, props, { name: "pdp/drop_empty" }), void 0)); };
|
|
3917
3919
|
|
|
3918
|
-
var
|
|
3920
|
+
var ErrorCross = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/error_cross" }), void 0); };
|
|
3919
3921
|
|
|
3920
|
-
var
|
|
3922
|
+
var FlagUSA = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
|
|
3921
3923
|
|
|
3922
|
-
var
|
|
3924
|
+
var Hours = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/hours" }), void 0); };
|
|
3923
3925
|
|
|
3924
|
-
var
|
|
3926
|
+
var KlarnaLogo = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/klarna_logo" }), void 0); };
|
|
3925
3927
|
|
|
3926
|
-
var
|
|
3928
|
+
var LightBulb = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/light_bulb" }), void 0); };
|
|
3927
3929
|
|
|
3928
|
-
var
|
|
3930
|
+
var Minus = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/minus" }), void 0); };
|
|
3929
3931
|
|
|
3930
|
-
var
|
|
3932
|
+
var Moon = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/moon" }), void 0); };
|
|
3931
3933
|
|
|
3932
|
-
var
|
|
3934
|
+
var NewClock = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/new_clock" }), void 0); };
|
|
3933
3935
|
|
|
3934
|
-
var
|
|
3936
|
+
var PlayMini = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/play_mini" }), void 0); };
|
|
3935
3937
|
|
|
3936
|
-
var
|
|
3938
|
+
var PlayVideo = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/play_video" }), void 0); };
|
|
3937
3939
|
|
|
3938
|
-
var
|
|
3940
|
+
var Plus = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/plus" }), void 0); };
|
|
3939
3941
|
|
|
3940
|
-
var
|
|
3942
|
+
var Rule = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/rule" }), void 0); };
|
|
3941
3943
|
|
|
3942
|
-
var
|
|
3944
|
+
var Shipping = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/shipping" }), void 0); };
|
|
3943
3945
|
|
|
3944
3946
|
var ShippingEmpty = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/shipping_empty" }), void 0)); };
|
|
3945
3947
|
|
|
3946
|
-
var
|
|
3948
|
+
var SizeEmpty = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/size_empty" }), void 0); };
|
|
3947
3949
|
|
|
3948
|
-
var
|
|
3950
|
+
var SizeEmptyV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/size_empty_v2" }), void 0); };
|
|
3949
3951
|
|
|
3950
|
-
var
|
|
3952
|
+
var Star = function (props) { return jsx$1(Icon$1, __assign$1({ testId: "star" }, props, { name: "pdp/star" }), void 0); };
|
|
3951
3953
|
|
|
3952
|
-
var
|
|
3954
|
+
var StarEmpty = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "star-empty" }, props, { name: "pdp/star_empty" }), void 0)); };
|
|
3953
3955
|
|
|
3954
|
-
var
|
|
3956
|
+
var StarHalf = function (props) { return (jsx$1(Icon$1, __assign$1({ testId: "star-half" }, props, { name: "pdp/star_half" }), void 0)); };
|
|
3955
3957
|
|
|
3956
|
-
var
|
|
3958
|
+
var Stars = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/stars" }), void 0); };
|
|
3957
3959
|
|
|
3958
|
-
var
|
|
3960
|
+
var Stopwatch = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/stopwatch" }), void 0); };
|
|
3959
3961
|
|
|
3960
3962
|
var TrustBadge = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/trust_badge" }), void 0); };
|
|
3961
3963
|
|
|
3962
3964
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
3963
3965
|
__proto__: null,
|
|
3966
|
+
CircleNumber: CircleNumber,
|
|
3964
3967
|
Clock: Clock,
|
|
3968
|
+
Drop: Drop,
|
|
3969
|
+
DropEmpty: DropEmpty,
|
|
3970
|
+
ErrorCross: ErrorCross,
|
|
3965
3971
|
FlagUSA: FlagUSA,
|
|
3972
|
+
Hours: Hours,
|
|
3973
|
+
KlarnaLogo: KlarnaLogo,
|
|
3974
|
+
LightBulb: LightBulb,
|
|
3966
3975
|
Minus: Minus,
|
|
3976
|
+
Moon: Moon,
|
|
3977
|
+
NewClock: NewClock,
|
|
3978
|
+
PlayMini: PlayMini,
|
|
3979
|
+
PlayVideo: PlayVideo,
|
|
3967
3980
|
Plus: Plus,
|
|
3968
3981
|
Rule: Rule,
|
|
3969
|
-
Star: Star,
|
|
3970
|
-
StarEmpty: StarEmpty,
|
|
3971
|
-
StarHalf: StarHalf,
|
|
3972
|
-
Stopwatch: Stopwatch,
|
|
3973
3982
|
Shipping: Shipping,
|
|
3974
|
-
|
|
3975
|
-
ErrorCross: ErrorCross,
|
|
3976
|
-
CircleNumber: CircleNumber,
|
|
3983
|
+
ShippingEmpty: ShippingEmpty,
|
|
3977
3984
|
SizeEmpty: SizeEmpty,
|
|
3978
3985
|
SizeEmptyV2: SizeEmptyV2,
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
DropEmpty: DropEmpty,
|
|
3986
|
+
Star: Star,
|
|
3987
|
+
StarEmpty: StarEmpty,
|
|
3988
|
+
StarHalf: StarHalf,
|
|
3983
3989
|
Stars: Stars,
|
|
3984
|
-
|
|
3985
|
-
Hours: Hours,
|
|
3986
|
-
NewClock: NewClock,
|
|
3987
|
-
KlarnaLogo: KlarnaLogo,
|
|
3990
|
+
Stopwatch: Stopwatch,
|
|
3988
3991
|
TrustBadge: TrustBadge
|
|
3989
3992
|
});
|
|
3990
3993
|
|
|
@@ -4083,15 +4086,15 @@ function jsxs(type, props, key) {
|
|
|
4083
4086
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4084
4087
|
// `variants` styles that are consistent through all themes.
|
|
4085
4088
|
var TAGS = {
|
|
4086
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4087
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4088
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4089
|
-
display1: newStyled.h1(templateObject_4$
|
|
4089
|
+
hero1: newStyled.h1(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject([""], [""]))),
|
|
4090
|
+
hero2: newStyled.h2(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject([""], [""]))),
|
|
4091
|
+
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4092
|
+
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4090
4093
|
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4091
|
-
display3: newStyled.h3(templateObject_6$
|
|
4092
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4093
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4094
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4094
|
+
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4095
|
+
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4096
|
+
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4097
|
+
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4095
4098
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4096
4099
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
4097
4100
|
heading6: newStyled.h6(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4107,7 +4110,7 @@ var TAGS = {
|
|
|
4107
4110
|
}),
|
|
4108
4111
|
tag: newStyled.span(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4109
4112
|
};
|
|
4110
|
-
var Text$
|
|
4113
|
+
var Text$7 = function (_a) {
|
|
4111
4114
|
var _b;
|
|
4112
4115
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4113
4116
|
var theme = useTheme();
|
|
@@ -4219,17 +4222,17 @@ var DEFAULTS = {
|
|
|
4219
4222
|
size: 'regular',
|
|
4220
4223
|
},
|
|
4221
4224
|
};
|
|
4222
|
-
var templateObject_1$
|
|
4225
|
+
var templateObject_1$1T, templateObject_2$1e, templateObject_3$Y, templateObject_4$I, templateObject_5$s, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4223
4226
|
|
|
4224
|
-
var Container$
|
|
4225
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4226
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4227
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4227
|
+
var Container$19 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
4228
|
+
var Card$3 = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4229
|
+
var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4230
|
+
var Label$4 = 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"])));
|
|
4228
4231
|
var Check$1 = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
4229
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4232
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
4230
4233
|
var PackSelectorV2 = function (_a) {
|
|
4231
4234
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4232
|
-
return (jsx$1(Container$
|
|
4235
|
+
return (jsx$1(Container$19, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4233
4236
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4234
4237
|
}) }), void 0));
|
|
4235
4238
|
};
|
|
@@ -4243,35 +4246,35 @@ var PackCard$1 = function (_a) {
|
|
|
4243
4246
|
.then(function (icon) { return setIcon(icon); })
|
|
4244
4247
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4245
4248
|
}, [pack.meta.icon]);
|
|
4246
|
-
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$
|
|
4249
|
+
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$4, { 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, {
|
|
4247
4250
|
locale: 'en-US',
|
|
4248
4251
|
currency: currencyCode || 'USD',
|
|
4249
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$
|
|
4252
|
+
}) }), 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, {
|
|
4250
4253
|
locale: 'en-US',
|
|
4251
4254
|
currency: currencyCode || 'USD',
|
|
4252
4255
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4253
4256
|
};
|
|
4254
|
-
var templateObject_1$
|
|
4257
|
+
var templateObject_1$1S, templateObject_2$1d, templateObject_3$X, templateObject_4$H, templateObject_5$r, templateObject_6$o;
|
|
4255
4258
|
|
|
4256
|
-
var Container$
|
|
4257
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4259
|
+
var Container$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4260
|
+
var DropContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4258
4261
|
var DropList = function (_a) {
|
|
4259
4262
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4260
|
-
return (jsx$1(Container$
|
|
4263
|
+
return (jsx$1(Container$18, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4261
4264
|
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));
|
|
4262
4265
|
}) }, void 0));
|
|
4263
4266
|
};
|
|
4264
|
-
var templateObject_1$
|
|
4267
|
+
var templateObject_1$1R, templateObject_2$1c;
|
|
4265
4268
|
|
|
4266
4269
|
var DROPS_TOTAL = 5;
|
|
4267
|
-
var Container$
|
|
4268
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4269
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4270
|
+
var Container$17 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4271
|
+
var Title$8 = newStyled.p(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4272
|
+
var Description$3 = newStyled.p(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
4270
4273
|
var AbsorbencyLevel = function (_a) {
|
|
4271
4274
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4272
|
-
return (jsxs$1(Container$
|
|
4275
|
+
return (jsxs$1(Container$17, { 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));
|
|
4273
4276
|
};
|
|
4274
|
-
var templateObject_1$
|
|
4277
|
+
var templateObject_1$1Q, templateObject_2$1b, templateObject_3$W;
|
|
4275
4278
|
|
|
4276
4279
|
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(`
|
|
4277
4280
|
`),"","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(`
|
|
@@ -4347,7 +4350,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4347
4350
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4348
4351
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4349
4352
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4350
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4353
|
+
var StyledContent = newStyled.button(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
4351
4354
|
var Accordion$1 = function (_a) {
|
|
4352
4355
|
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;
|
|
4353
4356
|
var theme = useTheme();
|
|
@@ -4371,9 +4374,9 @@ var Accordion$1 = function (_a) {
|
|
|
4371
4374
|
} }, { 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, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4372
4375
|
} }), void 0));
|
|
4373
4376
|
};
|
|
4374
|
-
var templateObject_1$
|
|
4377
|
+
var templateObject_1$1P;
|
|
4375
4378
|
|
|
4376
|
-
var Container$
|
|
4379
|
+
var Container$16 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4377
4380
|
var AccordionOptions = function (_a) {
|
|
4378
4381
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4379
4382
|
var _b = useState({
|
|
@@ -4386,7 +4389,7 @@ var AccordionOptions = function (_a) {
|
|
|
4386
4389
|
}
|
|
4387
4390
|
return false;
|
|
4388
4391
|
};
|
|
4389
|
-
return (jsx$1(Container$
|
|
4392
|
+
return (jsx$1(Container$16, { children: accordions.map(function (accordion, index) {
|
|
4390
4393
|
var forceOpenValue = getForceOpen(index);
|
|
4391
4394
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4392
4395
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4397,7 +4400,7 @@ var AccordionOptions = function (_a) {
|
|
|
4397
4400
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4398
4401
|
}) }, void 0));
|
|
4399
4402
|
};
|
|
4400
|
-
var templateObject_1$
|
|
4403
|
+
var templateObject_1$1O;
|
|
4401
4404
|
|
|
4402
4405
|
var CardSectionType;
|
|
4403
4406
|
(function (CardSectionType) {
|
|
@@ -4559,14 +4562,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4559
4562
|
literal: true,
|
|
4560
4563
|
});
|
|
4561
4564
|
|
|
4562
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4563
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4565
|
+
var ErrorText = newStyled.h3(templateObject_1$1N || (templateObject_1$1N = __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; });
|
|
4566
|
+
var ErrorContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4564
4567
|
var Error$1 = function (_a) {
|
|
4565
4568
|
var error = _a.error;
|
|
4566
4569
|
var theme = useTheme();
|
|
4567
4570
|
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));
|
|
4568
4571
|
};
|
|
4569
|
-
var templateObject_1$
|
|
4572
|
+
var templateObject_1$1N, templateObject_2$1a;
|
|
4570
4573
|
|
|
4571
4574
|
var BaseSelectButton = function (_a) {
|
|
4572
4575
|
var children = _a.children, as = _a.as;
|
|
@@ -4583,7 +4586,7 @@ function BaseSelectOption(_a) {
|
|
|
4583
4586
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4584
4587
|
}
|
|
4585
4588
|
|
|
4586
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4589
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4587
4590
|
function BaseSelect(_a) {
|
|
4588
4591
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4589
4592
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4593,7 +4596,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4593
4596
|
Options: BaseSelectOptions,
|
|
4594
4597
|
Option: BaseSelectOption,
|
|
4595
4598
|
});
|
|
4596
|
-
var templateObject_1$
|
|
4599
|
+
var templateObject_1$1M;
|
|
4597
4600
|
|
|
4598
4601
|
var CustomButton = newStyled.button(function (_a) {
|
|
4599
4602
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4632,7 +4635,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4632
4635
|
});
|
|
4633
4636
|
});
|
|
4634
4637
|
//TODO Remove this when we find the real solution
|
|
4635
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4638
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4636
4639
|
var open = _a.open;
|
|
4637
4640
|
return open &&
|
|
4638
4641
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4652,7 +4655,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4652
4655
|
} }), void 0));
|
|
4653
4656
|
};
|
|
4654
4657
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4655
|
-
var templateObject_1$
|
|
4658
|
+
var templateObject_1$1L;
|
|
4656
4659
|
|
|
4657
4660
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4658
4661
|
var theme = _a.theme;
|
|
@@ -4819,7 +4822,7 @@ var CustomCheckboxStyles = {
|
|
|
4819
4822
|
},
|
|
4820
4823
|
};
|
|
4821
4824
|
|
|
4822
|
-
var Container$
|
|
4825
|
+
var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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"])));
|
|
4823
4826
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4824
4827
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4825
4828
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4830,7 +4833,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4830
4833
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4831
4834
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4832
4835
|
]; });
|
|
4833
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4836
|
+
var Input$5 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
4834
4837
|
var disabled = _a.disabled;
|
|
4835
4838
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4836
4839
|
});
|
|
@@ -4844,9 +4847,9 @@ var Checkbox = function (_a) {
|
|
|
4844
4847
|
}
|
|
4845
4848
|
onChange(e.target.checked);
|
|
4846
4849
|
};
|
|
4847
|
-
return (jsxs$1(Container$
|
|
4850
|
+
return (jsxs$1(Container$15, { 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$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4848
4851
|
};
|
|
4849
|
-
var templateObject_1$
|
|
4852
|
+
var templateObject_1$1K, templateObject_2$19;
|
|
4850
4853
|
|
|
4851
4854
|
var CustomOption = newStyled.li(function (_a) {
|
|
4852
4855
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4895,8 +4898,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4895
4898
|
Option: BaseDropdownOption,
|
|
4896
4899
|
});
|
|
4897
4900
|
|
|
4898
|
-
var Container$
|
|
4899
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4901
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject([""], [""])));
|
|
4902
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
4900
4903
|
function SimpleDropdown(_a) {
|
|
4901
4904
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4902
4905
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4925,10 +4928,10 @@ function SimpleDropdown(_a) {
|
|
|
4925
4928
|
}
|
|
4926
4929
|
setSelectedValue(value);
|
|
4927
4930
|
}, [value, options, initialValue]);
|
|
4928
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4931
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$14 : Fragment$1;
|
|
4929
4932
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4930
4933
|
}
|
|
4931
|
-
var templateObject_1$
|
|
4934
|
+
var templateObject_1$1J, templateObject_2$18;
|
|
4932
4935
|
|
|
4933
4936
|
/* base styles & size variants */
|
|
4934
4937
|
var CustomRadioStyles$2 = {
|
|
@@ -4993,9 +4996,9 @@ var ContainerStyles$2 = {
|
|
|
4993
4996
|
},
|
|
4994
4997
|
};
|
|
4995
4998
|
|
|
4996
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4997
|
-
var Container$
|
|
4998
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4999
|
+
var Wrapper$7 = 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"])));
|
|
5000
|
+
var Container$13 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5001
|
+
var Input$4 = newStyled.input(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
4999
5002
|
var disabled = _a.disabled;
|
|
5000
5003
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5001
5004
|
});
|
|
@@ -5003,7 +5006,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5003
5006
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5004
5007
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5005
5008
|
]; });
|
|
5006
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5009
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5007
5010
|
var theme = _a.theme;
|
|
5008
5011
|
return theme.component.radio.textSize;
|
|
5009
5012
|
}, function (_a) {
|
|
@@ -5017,9 +5020,9 @@ var RadioInput = function (_a) {
|
|
|
5017
5020
|
var value = event.currentTarget.value;
|
|
5018
5021
|
onChange({ value: value, label: label });
|
|
5019
5022
|
};
|
|
5020
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5023
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$13, __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), 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));
|
|
5021
5024
|
};
|
|
5022
|
-
var templateObject_1$
|
|
5025
|
+
var templateObject_1$1I, templateObject_2$17, templateObject_3$V;
|
|
5023
5026
|
|
|
5024
5027
|
var getWrapperFlexDirection = function (position) {
|
|
5025
5028
|
switch (position) {
|
|
@@ -5070,7 +5073,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5070
5073
|
}
|
|
5071
5074
|
};
|
|
5072
5075
|
|
|
5073
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5076
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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) {
|
|
5074
5077
|
var position = _a.position;
|
|
5075
5078
|
return getWrapperFlexDirection(position);
|
|
5076
5079
|
}, function (_a) {
|
|
@@ -5080,7 +5083,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __ma
|
|
|
5080
5083
|
var disableHover = _a.disableHover;
|
|
5081
5084
|
return (disableHover ? 0 : 1);
|
|
5082
5085
|
});
|
|
5083
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5086
|
+
var TooltipContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
5084
5087
|
var position = _a.position;
|
|
5085
5088
|
return getContainerFlexDirection(position);
|
|
5086
5089
|
}, function (_a) {
|
|
@@ -5108,25 +5111,25 @@ var TooltipContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5108
5111
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5109
5112
|
return actual === expected ? margin : '0';
|
|
5110
5113
|
};
|
|
5111
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5114
|
+
var ContentWrapper = newStyled.div(templateObject_3$U || (templateObject_3$U = __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) {
|
|
5112
5115
|
var borderColor = _a.borderColor;
|
|
5113
5116
|
return borderColor;
|
|
5114
5117
|
}, function (_a) {
|
|
5115
5118
|
var backgroundColor = _a.backgroundColor;
|
|
5116
5119
|
return backgroundColor;
|
|
5117
5120
|
});
|
|
5118
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5121
|
+
var TooltipText = newStyled.div(templateObject_4$G || (templateObject_4$G = __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: center;\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: center;\n color: ", ";\n"])), function (_a) {
|
|
5119
5122
|
var color = _a.color;
|
|
5120
5123
|
return color;
|
|
5121
5124
|
});
|
|
5122
5125
|
var TopSection = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
5123
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5126
|
+
var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __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) {
|
|
5124
5127
|
var color = _a.color;
|
|
5125
5128
|
return color;
|
|
5126
5129
|
});
|
|
5127
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5128
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5129
|
-
var templateObject_1$
|
|
5130
|
+
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
5131
|
+
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\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: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5132
|
+
var templateObject_1$1H, templateObject_2$16, templateObject_3$U, templateObject_4$G, templateObject_5$q, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5130
5133
|
|
|
5131
5134
|
var useOnClickOutside = function (ref, handler) {
|
|
5132
5135
|
useEffect(function () {
|
|
@@ -5268,7 +5271,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5268
5271
|
};
|
|
5269
5272
|
}
|
|
5270
5273
|
};
|
|
5271
|
-
var Container$
|
|
5274
|
+
var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
5272
5275
|
var backgroundColor = _a.backgroundColor;
|
|
5273
5276
|
return backgroundColor;
|
|
5274
5277
|
}, function (_a) {
|
|
@@ -5290,7 +5293,7 @@ var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
5290
5293
|
var size = _a.size;
|
|
5291
5294
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5292
5295
|
});
|
|
5293
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5296
|
+
var H3$3 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5294
5297
|
var textColor = _a.textColor;
|
|
5295
5298
|
return textColor;
|
|
5296
5299
|
}, function (_a) {
|
|
@@ -5305,9 +5308,9 @@ var H3$3 = newStyled.h3(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5305
5308
|
var ClubOfferTag = function (_a) {
|
|
5306
5309
|
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;
|
|
5307
5310
|
var theme = useTheme();
|
|
5308
|
-
return (jsx$1(Container$
|
|
5311
|
+
return (jsx$1(Container$12, __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));
|
|
5309
5312
|
};
|
|
5310
|
-
var templateObject_1$
|
|
5313
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
5311
5314
|
|
|
5312
5315
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5313
5316
|
var _a, _b, _c;
|
|
@@ -5338,7 +5341,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5338
5341
|
};
|
|
5339
5342
|
}
|
|
5340
5343
|
};
|
|
5341
|
-
var Container$
|
|
5344
|
+
var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
5342
5345
|
var backgroundColor = _a.backgroundColor;
|
|
5343
5346
|
return backgroundColor;
|
|
5344
5347
|
}, function (_a) {
|
|
@@ -5360,7 +5363,7 @@ var Container$10 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
5360
5363
|
var size = _a.size;
|
|
5361
5364
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5362
5365
|
});
|
|
5363
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5366
|
+
var H3$2 = newStyled.h3(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5364
5367
|
var textColor = _a.textColor;
|
|
5365
5368
|
return textColor;
|
|
5366
5369
|
}, function (_a) {
|
|
@@ -5375,9 +5378,9 @@ var H3$2 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __makeTemp
|
|
|
5375
5378
|
var DiscountTag = function (_a) {
|
|
5376
5379
|
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;
|
|
5377
5380
|
var theme = useTheme();
|
|
5378
|
-
return (jsx$1(Container$
|
|
5381
|
+
return (jsx$1(Container$11, __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));
|
|
5379
5382
|
};
|
|
5380
|
-
var templateObject_1$
|
|
5383
|
+
var templateObject_1$1F, templateObject_2$14;
|
|
5381
5384
|
|
|
5382
5385
|
var getStylesBySize$b = function (size, theme) {
|
|
5383
5386
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5419,8 +5422,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5419
5422
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5420
5423
|
}
|
|
5421
5424
|
};
|
|
5422
|
-
var Container
|
|
5423
|
-
var Price = newStyled.p(templateObject_2$
|
|
5425
|
+
var Container$10 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5426
|
+
var Price = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
5424
5427
|
var weight = _a.weight;
|
|
5425
5428
|
return (weight ? weight : '400');
|
|
5426
5429
|
}, function (_a) {
|
|
@@ -5444,7 +5447,7 @@ var Price = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __makeTemp
|
|
|
5444
5447
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5445
5448
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5446
5449
|
});
|
|
5447
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5450
|
+
var TagContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5448
5451
|
var _b;
|
|
5449
5452
|
var size = _a.size;
|
|
5450
5453
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5475,11 +5478,11 @@ var PriceLabel = function (_a) {
|
|
|
5475
5478
|
: ComponentSize.XSmall;
|
|
5476
5479
|
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));
|
|
5477
5480
|
};
|
|
5478
|
-
return (jsxs$1(Container
|
|
5481
|
+
return (jsxs$1(Container$10, __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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5479
5482
|
};
|
|
5480
|
-
var templateObject_1$
|
|
5483
|
+
var templateObject_1$1E, templateObject_2$13, templateObject_3$T;
|
|
5481
5484
|
|
|
5482
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5485
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5483
5486
|
var PriceLabelV2 = function (_a) {
|
|
5484
5487
|
var _b;
|
|
5485
5488
|
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, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5530,7 +5533,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5530
5533
|
var savetoString = saveto.toFixed(2);
|
|
5531
5534
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5532
5535
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5533
|
-
return (jsxs$1(Container
|
|
5536
|
+
return (jsxs$1(Container$10, __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: {
|
|
5534
5537
|
marginTop: '-5px',
|
|
5535
5538
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5536
5539
|
? finalPriceArray[0]
|
|
@@ -5548,11 +5551,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5548
5551
|
lineHeight: '22px',
|
|
5549
5552
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5550
5553
|
};
|
|
5551
|
-
var templateObject_1$
|
|
5554
|
+
var templateObject_1$1D;
|
|
5552
5555
|
|
|
5553
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5554
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5555
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5556
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5557
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5558
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5556
5559
|
var PriceLabelV3 = function (_a) {
|
|
5557
5560
|
var _b;
|
|
5558
5561
|
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"]);
|
|
@@ -5561,7 +5564,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5561
5564
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
5562
5565
|
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
5563
5566
|
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
5564
|
-
var supportedCurrencies = ['
|
|
5567
|
+
var supportedCurrencies = ['A$', 'CA$', '£'];
|
|
5565
5568
|
var currencySymbol = '$';
|
|
5566
5569
|
if (typeof finalPrice === 'string') {
|
|
5567
5570
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -5607,7 +5610,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5607
5610
|
return null;
|
|
5608
5611
|
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));
|
|
5609
5612
|
};
|
|
5610
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container
|
|
5613
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$10, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$10, { 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: {
|
|
5611
5614
|
marginTop: '-5px',
|
|
5612
5615
|
} }, 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: {
|
|
5613
5616
|
marginTop: '-6px',
|
|
@@ -5623,10 +5626,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5623
5626
|
lineHeight: '22px',
|
|
5624
5627
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5625
5628
|
};
|
|
5626
|
-
var templateObject_1$
|
|
5629
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$S;
|
|
5627
5630
|
|
|
5628
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5629
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5631
|
+
var FlexContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5632
|
+
var ContainerBase = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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) {
|
|
5630
5633
|
var selected = _a.selected, theme = _a.theme;
|
|
5631
5634
|
return selected
|
|
5632
5635
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5640,11 +5643,11 @@ var ContainerBase = newStyled.div(templateObject_2$10 || (templateObject_2$10 =
|
|
|
5640
5643
|
var theme = _a.theme;
|
|
5641
5644
|
return theme.colors.pallete.primary.color;
|
|
5642
5645
|
});
|
|
5643
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5646
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$R || (templateObject_3$R = __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) {
|
|
5644
5647
|
var onClick = _a.onClick;
|
|
5645
5648
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5646
5649
|
});
|
|
5647
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5650
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5648
5651
|
var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$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) {
|
|
5649
5652
|
var theme = _a.theme;
|
|
5650
5653
|
return theme.colors.shades[200].color;
|
|
@@ -5652,18 +5655,18 @@ var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p
|
|
|
5652
5655
|
var theme = _a.theme;
|
|
5653
5656
|
return theme.colors.pallete.primary.color;
|
|
5654
5657
|
});
|
|
5655
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5656
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5657
|
-
var BenefitText = newStyled(Text$
|
|
5658
|
-
var SubscriptionDetails = newStyled(Text$
|
|
5658
|
+
var BenefitsContainer = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5659
|
+
var Benefit = newStyled.div(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
5660
|
+
var BenefitText = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5661
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5659
5662
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5660
|
-
var DeliveryFrequencyLabel = newStyled(Text$
|
|
5663
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$3 || (templateObject_11$3 = __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"])));
|
|
5661
5664
|
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5662
5665
|
var selected = _a.selected, theme = _a.theme;
|
|
5663
5666
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5664
5667
|
});
|
|
5665
|
-
var Container
|
|
5666
|
-
var templateObject_1$
|
|
5668
|
+
var Container$$ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5669
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R, templateObject_4$F, templateObject_5$p, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5667
5670
|
|
|
5668
5671
|
var radioIds = {
|
|
5669
5672
|
oneTime: {
|
|
@@ -5713,17 +5716,17 @@ var Autoship = function (_a) {
|
|
|
5713
5716
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5714
5717
|
};
|
|
5715
5718
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5716
|
-
return (jsxs$1(Container
|
|
5719
|
+
return (jsxs$1(Container$$, __assign$1({ className: className }, { children: [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 () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { 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, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.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
|
|
5717
5720
|
? benefitsColor.selected
|
|
5718
5721
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __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, { 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));
|
|
5719
5722
|
};
|
|
5720
5723
|
|
|
5721
|
-
var Img = newStyled.img(templateObject_1$
|
|
5724
|
+
var Img = newStyled.img(templateObject_1$1A || (templateObject_1$1A = __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; });
|
|
5722
5725
|
var Image$3 = function (_a) {
|
|
5723
5726
|
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, className = _a.className;
|
|
5724
5727
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5725
5728
|
};
|
|
5726
|
-
var templateObject_1$
|
|
5729
|
+
var templateObject_1$1A;
|
|
5727
5730
|
|
|
5728
5731
|
var _a$2;
|
|
5729
5732
|
var BeforeAfterVariant;
|
|
@@ -5738,13 +5741,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5738
5741
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5739
5742
|
_a$2);
|
|
5740
5743
|
|
|
5741
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5742
|
-
var CustomerInfo = newStyled.div(templateObject_2
|
|
5743
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5744
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5744
|
+
var CustomerDetails = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject([""], [""])));
|
|
5745
|
+
var CustomerInfo = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5746
|
+
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
5747
|
+
var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
5745
5748
|
var Description$2 = newStyled.p(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
5746
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5747
|
-
var templateObject_1$
|
|
5749
|
+
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
5750
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$Q, templateObject_4$E, templateObject_5$o, templateObject_6$l;
|
|
5748
5751
|
|
|
5749
5752
|
var NameWithStars = function (_a) {
|
|
5750
5753
|
var name = _a.name, size = _a.size;
|
|
@@ -5762,10 +5765,10 @@ var ResultFeedback = function (_a) {
|
|
|
5762
5765
|
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));
|
|
5763
5766
|
};
|
|
5764
5767
|
|
|
5765
|
-
var Container$
|
|
5766
|
-
var ImageContainer$5 = newStyled.div(templateObject_2
|
|
5767
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5768
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5768
|
+
var Container$_ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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; });
|
|
5769
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
5770
|
+
var ImageCard = newStyled.div(templateObject_3$P || (templateObject_3$P = __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; });
|
|
5771
|
+
var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
5769
5772
|
var theme = _a.theme;
|
|
5770
5773
|
return theme.colors.pallete.secondary.color;
|
|
5771
5774
|
}, function (_a) {
|
|
@@ -5775,7 +5778,7 @@ var UserInfoText = newStyled.div(templateObject_4$C || (templateObject_4$C = __m
|
|
|
5775
5778
|
var theme = _a.theme, size = _a.size;
|
|
5776
5779
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5777
5780
|
});
|
|
5778
|
-
var templateObject_1$
|
|
5781
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P, templateObject_4$D;
|
|
5779
5782
|
|
|
5780
5783
|
/* base styles & size variants */
|
|
5781
5784
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5850,10 +5853,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5850
5853
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5851
5854
|
var infoText = buildInfoText(name, age, months);
|
|
5852
5855
|
var Component = componentByVariant[variant];
|
|
5853
|
-
return (jsxs$1(Container$
|
|
5856
|
+
return (jsxs$1(Container$_, __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));
|
|
5854
5857
|
};
|
|
5855
5858
|
|
|
5856
|
-
var Section = newStyled.div(templateObject_1$
|
|
5859
|
+
var Section = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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) {
|
|
5857
5860
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5858
5861
|
});
|
|
5859
5862
|
var CardHeader = function (_a) {
|
|
@@ -5864,16 +5867,16 @@ var CardFooter = function (_a) {
|
|
|
5864
5867
|
var children = _a.children;
|
|
5865
5868
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5866
5869
|
};
|
|
5867
|
-
var templateObject_1$
|
|
5870
|
+
var templateObject_1$1x;
|
|
5868
5871
|
|
|
5869
|
-
var Body = newStyled.div(templateObject_1$
|
|
5872
|
+
var Body = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
5870
5873
|
var CardBody = function (_a) {
|
|
5871
5874
|
var children = _a.children;
|
|
5872
5875
|
return jsx$1(Body, { children: children }, void 0);
|
|
5873
5876
|
};
|
|
5874
|
-
var templateObject_1$
|
|
5877
|
+
var templateObject_1$1w;
|
|
5875
5878
|
|
|
5876
|
-
var Container$
|
|
5879
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
5877
5880
|
var flex = _a.flex;
|
|
5878
5881
|
return flex &&
|
|
5879
5882
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5888,23 +5891,23 @@ var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __
|
|
|
5888
5891
|
var Card$1 = function (_a) {
|
|
5889
5892
|
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;
|
|
5890
5893
|
var theme = useTheme();
|
|
5891
|
-
return (jsx$1(Container$
|
|
5894
|
+
return (jsx$1(Container$Z, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5892
5895
|
};
|
|
5893
5896
|
var Card$2 = Object.assign(Card$1, {
|
|
5894
5897
|
Header: CardHeader,
|
|
5895
5898
|
Footer: CardFooter,
|
|
5896
5899
|
Body: CardBody,
|
|
5897
5900
|
});
|
|
5898
|
-
var templateObject_1$
|
|
5901
|
+
var templateObject_1$1v;
|
|
5899
5902
|
|
|
5900
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5901
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5902
|
-
var TextLabel = newStyled(Text$
|
|
5903
|
+
var StyledWrapper = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
5904
|
+
var StyledContainer = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5905
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$O || (templateObject_3$O = __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) {
|
|
5903
5906
|
var color = _a.color;
|
|
5904
5907
|
return color;
|
|
5905
5908
|
});
|
|
5906
|
-
var YouAreSaving = newStyled(Text$
|
|
5907
|
-
var templateObject_1$
|
|
5909
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
5910
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$O, templateObject_4$C;
|
|
5908
5911
|
|
|
5909
5912
|
var Minimalistic = function (_a) {
|
|
5910
5913
|
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;
|
|
@@ -5912,28 +5915,28 @@ var Minimalistic = function (_a) {
|
|
|
5912
5915
|
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));
|
|
5913
5916
|
};
|
|
5914
5917
|
|
|
5915
|
-
var Container$
|
|
5916
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5917
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5918
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
5918
|
+
var Container$Y = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5919
|
+
var Title$6 = newStyled.h1(templateObject_2$Z || (templateObject_2$Z = __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; });
|
|
5920
|
+
var Details$1 = newStyled.span(templateObject_3$N || (templateObject_3$N = __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; });
|
|
5921
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5919
5922
|
var Simple = function (_a) {
|
|
5920
5923
|
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;
|
|
5921
5924
|
var theme = useTheme();
|
|
5922
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5925
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$Y, { 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));
|
|
5923
5926
|
};
|
|
5924
|
-
var templateObject_1$
|
|
5927
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5925
5928
|
|
|
5926
5929
|
var Bundle = {
|
|
5927
5930
|
Minimalistic: Minimalistic,
|
|
5928
5931
|
Simple: Simple,
|
|
5929
5932
|
};
|
|
5930
5933
|
|
|
5931
|
-
var Container$
|
|
5934
|
+
var Container$X = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
5932
5935
|
var displayBNPL = _a.displayBNPL;
|
|
5933
5936
|
return (displayBNPL ? 'flex' : 'none');
|
|
5934
5937
|
});
|
|
5935
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5936
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5938
|
+
var TextContainer$1 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
5939
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
5937
5940
|
var BuyNowPayLater = function (_a) {
|
|
5938
5941
|
var _b;
|
|
5939
5942
|
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;
|
|
@@ -5943,43 +5946,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5943
5946
|
console.error('Icon', iconName, 'not found');
|
|
5944
5947
|
return null;
|
|
5945
5948
|
}
|
|
5946
|
-
return (jsx$1(Container$
|
|
5949
|
+
return (jsx$1(Container$X, __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));
|
|
5947
5950
|
};
|
|
5948
|
-
var templateObject_1$
|
|
5951
|
+
var templateObject_1$1s, templateObject_2$Y, templateObject_3$M;
|
|
5949
5952
|
|
|
5950
|
-
var Text$
|
|
5953
|
+
var Text$6 = newStyled.span(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
5951
5954
|
var Title$5 = function (_a) {
|
|
5952
5955
|
var title = _a.title;
|
|
5953
5956
|
var theme = useTheme();
|
|
5954
|
-
return jsx$1(Text$
|
|
5957
|
+
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5955
5958
|
};
|
|
5956
|
-
var templateObject_1$
|
|
5959
|
+
var templateObject_1$1r;
|
|
5957
5960
|
|
|
5958
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5961
|
+
var P$3 = newStyled.p(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
5959
5962
|
var Promo = function (_a) {
|
|
5960
5963
|
var text = _a.text;
|
|
5961
5964
|
var theme = useTheme();
|
|
5962
5965
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5963
5966
|
};
|
|
5964
|
-
var templateObject_1$
|
|
5967
|
+
var templateObject_1$1q;
|
|
5965
5968
|
|
|
5966
|
-
var Text$
|
|
5969
|
+
var Text$5 = newStyled.span(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
5967
5970
|
var Description$1 = function (_a) {
|
|
5968
5971
|
var text = _a.text;
|
|
5969
5972
|
var theme = useTheme();
|
|
5970
|
-
return jsx$1(Text$
|
|
5973
|
+
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5971
5974
|
};
|
|
5972
|
-
var templateObject_1$
|
|
5975
|
+
var templateObject_1$1p;
|
|
5973
5976
|
|
|
5974
|
-
var Container$
|
|
5977
|
+
var Container$W = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"); });
|
|
5975
5978
|
var CloseButton$1 = function (_a) {
|
|
5976
5979
|
var onClick = _a.onClick, size = _a.size;
|
|
5977
5980
|
var theme = useTheme();
|
|
5978
|
-
return (jsx$1(Container$
|
|
5981
|
+
return (jsx$1(Container$W, __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));
|
|
5979
5982
|
};
|
|
5980
|
-
var templateObject_1$
|
|
5983
|
+
var templateObject_1$1o;
|
|
5981
5984
|
|
|
5982
|
-
var Text$
|
|
5985
|
+
var Text$4 = newStyled.h3(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
5983
5986
|
var backgroundColor = _a.backgroundColor;
|
|
5984
5987
|
return backgroundColor;
|
|
5985
5988
|
}, function (_a) {
|
|
@@ -5992,9 +5995,9 @@ var Text$6 = newStyled.h3(templateObject_1$1m || (templateObject_1$1m = __makeTe
|
|
|
5992
5995
|
var OfferBanner = function (_a) {
|
|
5993
5996
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
5994
5997
|
var theme = useTheme();
|
|
5995
|
-
return (jsx$1(Text$
|
|
5998
|
+
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));
|
|
5996
5999
|
};
|
|
5997
|
-
var templateObject_1$
|
|
6000
|
+
var templateObject_1$1n;
|
|
5998
6001
|
|
|
5999
6002
|
var CartProductItem = {
|
|
6000
6003
|
Title: Title$5,
|
|
@@ -6004,20 +6007,20 @@ var CartProductItem = {
|
|
|
6004
6007
|
CloseButton: CloseButton$1,
|
|
6005
6008
|
};
|
|
6006
6009
|
|
|
6007
|
-
var Container$
|
|
6008
|
-
var MobileContainer = newStyled(Container$
|
|
6009
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6010
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6010
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
6011
|
+
var MobileContainer = newStyled(Container$V)(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6012
|
+
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6013
|
+
var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
6011
6014
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6012
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6013
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6014
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6015
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6016
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6017
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6015
6018
|
var ClubPriceLabel = function (_a) {
|
|
6016
6019
|
var clubPrice = _a.clubPrice;
|
|
6017
6020
|
var isMobile = useWindowDimensions().isMobile;
|
|
6018
|
-
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$
|
|
6021
|
+
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$V, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6019
6022
|
};
|
|
6020
|
-
var templateObject_1$
|
|
6023
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$L, templateObject_4$A, templateObject_5$n, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
6021
6024
|
|
|
6022
6025
|
var Spacing = function (_a) {
|
|
6023
6026
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6025,10 +6028,10 @@ var Spacing = function (_a) {
|
|
|
6025
6028
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6026
6029
|
};
|
|
6027
6030
|
|
|
6028
|
-
var Container$
|
|
6029
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6030
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6031
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6031
|
+
var Container$U = newStyled('div')(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6032
|
+
var Content$2 = newStyled('div')(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6033
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6034
|
+
var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __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) {
|
|
6032
6035
|
var index = _a.index;
|
|
6033
6036
|
return "".concat(6 + 3 * index, "px");
|
|
6034
6037
|
}, function (_a) {
|
|
@@ -6037,14 +6040,14 @@ var Bar$2 = newStyled('div')(templateObject_4$y || (templateObject_4$y = __makeT
|
|
|
6037
6040
|
});
|
|
6038
6041
|
var StrengthBars = function (_a) {
|
|
6039
6042
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6040
|
-
return (jsxs$1(Container$
|
|
6043
|
+
return (jsxs$1(Container$U, __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));
|
|
6041
6044
|
};
|
|
6042
|
-
var templateObject_1$
|
|
6045
|
+
var templateObject_1$1l, templateObject_2$W, templateObject_3$K, templateObject_4$z;
|
|
6043
6046
|
|
|
6044
|
-
var Container$
|
|
6045
|
-
var templateObject_1$
|
|
6047
|
+
var Container$T = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6048
|
+
var templateObject_1$1k;
|
|
6046
6049
|
|
|
6047
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6050
|
+
var StarContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6048
6051
|
var marginRight = _a.marginRight;
|
|
6049
6052
|
return marginRight;
|
|
6050
6053
|
});
|
|
@@ -6056,11 +6059,11 @@ var StarList = function (_a) {
|
|
|
6056
6059
|
width: theme.component.stars.element[size].width,
|
|
6057
6060
|
height: theme.component.stars.element[size].height,
|
|
6058
6061
|
};
|
|
6059
|
-
return (jsx$1(Container$
|
|
6062
|
+
return (jsx$1(Container$T, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6060
6063
|
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)));
|
|
6061
6064
|
}) }, void 0));
|
|
6062
6065
|
};
|
|
6063
|
-
var templateObject_1$
|
|
6066
|
+
var templateObject_1$1j;
|
|
6064
6067
|
|
|
6065
6068
|
/* base styles & size variants */
|
|
6066
6069
|
var LabelStyles = {
|
|
@@ -6101,8 +6104,8 @@ var LabelStyles = {
|
|
|
6101
6104
|
});
|
|
6102
6105
|
},
|
|
6103
6106
|
};
|
|
6104
|
-
var Container$
|
|
6105
|
-
var templateObject_1$
|
|
6107
|
+
var Container$S = newStyled.a(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6108
|
+
var templateObject_1$1i;
|
|
6106
6109
|
|
|
6107
6110
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6108
6111
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6122,7 +6125,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6122
6125
|
}),
|
|
6123
6126
|
];
|
|
6124
6127
|
});
|
|
6125
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6128
|
+
var RatingLabel = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6126
6129
|
var starsNumber = 5;
|
|
6127
6130
|
var Rating = function (_a) {
|
|
6128
6131
|
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;
|
|
@@ -6143,14 +6146,14 @@ var Rating = function (_a) {
|
|
|
6143
6146
|
href: reviewsContainerId,
|
|
6144
6147
|
}
|
|
6145
6148
|
: {};
|
|
6146
|
-
return (jsxs$1(Container$
|
|
6149
|
+
return (jsxs$1(Container$S, __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));
|
|
6147
6150
|
};
|
|
6148
|
-
var templateObject_1$
|
|
6151
|
+
var templateObject_1$1h;
|
|
6149
6152
|
|
|
6150
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6151
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6152
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6153
|
-
var PriceWithTagContainer = newStyled.span(templateObject_4$
|
|
6153
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6154
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
6155
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6156
|
+
var PriceWithTagContainer = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
|
|
6154
6157
|
var RegularPriceTag = function () {
|
|
6155
6158
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6156
6159
|
};
|
|
@@ -6199,11 +6202,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6199
6202
|
: ComponentSize.XSmall;
|
|
6200
6203
|
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));
|
|
6201
6204
|
};
|
|
6202
|
-
return (jsxs$1(Container
|
|
6205
|
+
return (jsxs$1(Container$10, __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: [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]
|
|
6203
6206
|
? finalPriceArray[0]
|
|
6204
6207
|
: (_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), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6205
6208
|
};
|
|
6206
|
-
var templateObject_1$
|
|
6209
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
6207
6210
|
|
|
6208
6211
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6209
6212
|
var width = _a.width, height = _a.height;
|
|
@@ -6213,10 +6216,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6213
6216
|
height: height,
|
|
6214
6217
|
});
|
|
6215
6218
|
});
|
|
6216
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6217
|
-
var Container$
|
|
6218
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6219
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6219
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
6220
|
+
var Container$R = newStyled.a(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
6221
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
6222
|
+
var Title$4 = newStyled.p(templateObject_4$x || (templateObject_4$x = __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; });
|
|
6220
6223
|
var getStylesBySize$9 = function (size) {
|
|
6221
6224
|
switch (size) {
|
|
6222
6225
|
case ComponentSize.Medium:
|
|
@@ -6246,11 +6249,11 @@ var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m
|
|
|
6246
6249
|
var style = _a.style;
|
|
6247
6250
|
return style.width;
|
|
6248
6251
|
});
|
|
6249
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6252
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$j || (templateObject_6$j = __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) {
|
|
6250
6253
|
var style = _a.style;
|
|
6251
6254
|
return style.width;
|
|
6252
6255
|
});
|
|
6253
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6256
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6254
6257
|
var ProductItemMobile = function (_a) {
|
|
6255
6258
|
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 ? {
|
|
6256
6259
|
display: false,
|
|
@@ -6307,9 +6310,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6307
6310
|
return jsx(Fragment, {}, void 0);
|
|
6308
6311
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6309
6312
|
};
|
|
6310
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6313
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __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$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)] }), 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$R, __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));
|
|
6311
6314
|
};
|
|
6312
|
-
var templateObject_1$
|
|
6315
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$j, templateObject_7$d;
|
|
6313
6316
|
|
|
6314
6317
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6315
6318
|
var width = _a.width, height = _a.height;
|
|
@@ -6319,10 +6322,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6319
6322
|
height: height,
|
|
6320
6323
|
});
|
|
6321
6324
|
});
|
|
6322
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6323
|
-
var Container$
|
|
6324
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6325
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6325
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
6326
|
+
var Container$Q = newStyled.a(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
6327
|
+
var ProdCardContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6328
|
+
var Title$3 = newStyled.p(templateObject_4$w || (templateObject_4$w = __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; });
|
|
6326
6329
|
var getStylesBySize$8 = function (size) {
|
|
6327
6330
|
switch (size) {
|
|
6328
6331
|
case ComponentSize.Medium:
|
|
@@ -6352,11 +6355,11 @@ var TopTagContainer$4 = newStyled.div(templateObject_5$l || (templateObject_5$l
|
|
|
6352
6355
|
var style = _a.style;
|
|
6353
6356
|
return style.width;
|
|
6354
6357
|
});
|
|
6355
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_6$
|
|
6358
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_6$i || (templateObject_6$i = __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) {
|
|
6356
6359
|
var style = _a.style;
|
|
6357
6360
|
return style.width;
|
|
6358
6361
|
});
|
|
6359
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6362
|
+
var MarginTopContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6360
6363
|
var ProductItemTK = function (_a) {
|
|
6361
6364
|
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, 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 ? {
|
|
6362
6365
|
display: false,
|
|
@@ -6400,26 +6403,26 @@ var ProductItemTK = function (_a) {
|
|
|
6400
6403
|
: undefined }, void 0));
|
|
6401
6404
|
};
|
|
6402
6405
|
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)); };
|
|
6403
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6406
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Q, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (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$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __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, 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$Q, __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 ? (
|
|
6404
6407
|
// @ts-ignore
|
|
6405
|
-
jsx(Text$
|
|
6408
|
+
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6406
6409
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6407
6410
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6408
6411
|
} }, { 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));
|
|
6409
6412
|
};
|
|
6410
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1e, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$l, templateObject_6$i, templateObject_7$c;
|
|
6411
6414
|
|
|
6412
|
-
var Container$
|
|
6415
|
+
var Container$P = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
6413
6416
|
function withProductGrid(ProductItemComponent, data) {
|
|
6414
6417
|
function WithProductGrid(props) {
|
|
6415
|
-
return (jsx$1(Container$
|
|
6418
|
+
return (jsx$1(Container$P, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6416
6419
|
}
|
|
6417
6420
|
/* istanbul ignore next */
|
|
6418
6421
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6419
6422
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6420
6423
|
return WithProductGrid;
|
|
6421
6424
|
}
|
|
6422
|
-
var templateObject_1$
|
|
6425
|
+
var templateObject_1$1d;
|
|
6423
6426
|
|
|
6424
6427
|
var Collection = {
|
|
6425
6428
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6466,14 +6469,14 @@ var OutOfStock = function (_a) {
|
|
|
6466
6469
|
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));
|
|
6467
6470
|
};
|
|
6468
6471
|
|
|
6469
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6470
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6471
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6472
|
-
var Span = newStyled.span(templateObject_4$
|
|
6472
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6473
|
+
newStyled(lt.Label)(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6474
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
6475
|
+
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6473
6476
|
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
6474
6477
|
var Label$2 = function (_a) {
|
|
6475
6478
|
var label = _a.label, values = _a.values;
|
|
6476
|
-
return (jsxs$1(Text$
|
|
6479
|
+
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6477
6480
|
};
|
|
6478
6481
|
var Option = function (_a) {
|
|
6479
6482
|
var value = _a.value, children = _a.children;
|
|
@@ -6488,23 +6491,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6488
6491
|
Option: Option,
|
|
6489
6492
|
OptionsContainer: OptionsContainer,
|
|
6490
6493
|
});
|
|
6491
|
-
var templateObject_1$
|
|
6494
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$k;
|
|
6492
6495
|
|
|
6493
|
-
var Container$
|
|
6496
|
+
var Container$O = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
6494
6497
|
var borderColor = _a.borderColor;
|
|
6495
6498
|
return borderColor;
|
|
6496
6499
|
}, function (_a) {
|
|
6497
6500
|
var noStock = _a.noStock;
|
|
6498
6501
|
return (noStock ? '0.4' : '1');
|
|
6499
6502
|
});
|
|
6500
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6503
|
+
var Image$2 = newStyled.img(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6501
6504
|
var PatternSelector = function (_a) {
|
|
6502
6505
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6503
6506
|
var theme = useTheme();
|
|
6504
6507
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6505
|
-
return (jsx$1(Container$
|
|
6508
|
+
return (jsx$1(Container$O, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6506
6509
|
};
|
|
6507
|
-
var templateObject_1$
|
|
6510
|
+
var templateObject_1$1b, templateObject_2$R;
|
|
6508
6511
|
|
|
6509
6512
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6510
6513
|
if (options == null || options.length === 0) {
|
|
@@ -6563,21 +6566,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6563
6566
|
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));
|
|
6564
6567
|
};
|
|
6565
6568
|
|
|
6566
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6567
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6568
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6569
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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'); });
|
|
6570
|
+
var Col$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6571
|
+
var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6569
6572
|
return props.rightToLeft &&
|
|
6570
6573
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6571
6574
|
});
|
|
6572
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6575
|
+
var H5 = newStyled.h5(templateObject_4$u || (templateObject_4$u = __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; });
|
|
6573
6576
|
var H3$1 = newStyled.h3(templateObject_5$j || (templateObject_5$j = __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; });
|
|
6574
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6577
|
+
var FreeShipping = newStyled.span(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6575
6578
|
var CrossSellCheckbox = function (_a) {
|
|
6576
6579
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6577
6580
|
var theme = useTheme();
|
|
6578
6581
|
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));
|
|
6579
6582
|
};
|
|
6580
|
-
var templateObject_1$
|
|
6583
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$h;
|
|
6581
6584
|
|
|
6582
6585
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6583
6586
|
__proto__: null,
|
|
@@ -6605,7 +6608,7 @@ var sizeMapper = (_a = {},
|
|
|
6605
6608
|
_a[ComponentSize.Large] = 'large',
|
|
6606
6609
|
_a[ComponentSize.XSmall] = 'small',
|
|
6607
6610
|
_a);
|
|
6608
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6611
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6609
6612
|
var wide = _a.wide;
|
|
6610
6613
|
return (wide ? '100%' : 'fit-content');
|
|
6611
6614
|
}, function (_a) {
|
|
@@ -6627,8 +6630,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$18 || (templateObj
|
|
|
6627
6630
|
var theme = _a.theme;
|
|
6628
6631
|
return theme.colors.text.disabled;
|
|
6629
6632
|
});
|
|
6630
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6631
|
-
var templateObject_1$
|
|
6633
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6634
|
+
var templateObject_1$19, templateObject_2$P;
|
|
6632
6635
|
|
|
6633
6636
|
var BaseCTA = function (_a) {
|
|
6634
6637
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6695,26 +6698,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6695
6698
|
} }), void 0));
|
|
6696
6699
|
};
|
|
6697
6700
|
|
|
6698
|
-
var Container$
|
|
6699
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6700
|
-
var Text$
|
|
6701
|
-
var Details = newStyled.span(templateObject_4$
|
|
6701
|
+
var Container$N = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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; });
|
|
6702
|
+
var IconContainer$4 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
6703
|
+
var Text$3 = newStyled.p(templateObject_3$E || (templateObject_3$E = __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; });
|
|
6704
|
+
var Details = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6702
6705
|
var Note = function (_a) {
|
|
6703
6706
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6704
6707
|
var theme = useTheme();
|
|
6705
|
-
return (jsxs$1(Container$
|
|
6708
|
+
return (jsxs$1(Container$N, __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));
|
|
6706
6709
|
};
|
|
6707
|
-
var templateObject_1$
|
|
6710
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$E, templateObject_4$t;
|
|
6708
6711
|
|
|
6709
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6712
|
+
var Title$2 = newStyled.h1(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
6710
6713
|
var theme = _a.theme;
|
|
6711
6714
|
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 ");
|
|
6712
6715
|
});
|
|
6713
|
-
var Line = newStyled.div(templateObject_2$
|
|
6714
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6716
|
+
var Line = newStyled.div(templateObject_2$N || (templateObject_2$N = __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; });
|
|
6717
|
+
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __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({
|
|
6715
6718
|
flexDirection: ['column', 'row'],
|
|
6716
6719
|
}));
|
|
6717
|
-
var Col = newStyled.div(templateObject_4$
|
|
6720
|
+
var Col = newStyled.div(templateObject_4$s || (templateObject_4$s = __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({
|
|
6718
6721
|
margin: ['0', '0 1.25rem'],
|
|
6719
6722
|
marginBottom: ['1.875rem', '0'],
|
|
6720
6723
|
alignItems: ['center', 'flex-start'],
|
|
@@ -6726,13 +6729,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$i || (templateObject_5$i =
|
|
|
6726
6729
|
marginBottom: ['10px', '0'],
|
|
6727
6730
|
width: ['auto', '1.5rem'],
|
|
6728
6731
|
}));
|
|
6729
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6732
|
+
var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6730
6733
|
display: ['block', 'flex'],
|
|
6731
6734
|
}), function (_a) {
|
|
6732
6735
|
var theme = _a.theme;
|
|
6733
6736
|
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 ");
|
|
6734
6737
|
});
|
|
6735
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6738
|
+
var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __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) {
|
|
6736
6739
|
var theme = _a.theme;
|
|
6737
6740
|
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 ");
|
|
6738
6741
|
}, function (_a) {
|
|
@@ -6743,22 +6746,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
6743
6746
|
})
|
|
6744
6747
|
: '';
|
|
6745
6748
|
});
|
|
6746
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6749
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __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; });
|
|
6747
6750
|
var DeliveryDetails = function (_a) {
|
|
6748
6751
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6749
6752
|
var theme = useTheme();
|
|
6750
6753
|
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));
|
|
6751
6754
|
};
|
|
6752
|
-
var templateObject_1$
|
|
6755
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$g, templateObject_7$b, templateObject_8$9;
|
|
6753
6756
|
|
|
6754
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6757
|
+
var Backdrop = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
6755
6758
|
var top = _a.top;
|
|
6756
6759
|
return top;
|
|
6757
6760
|
}, function (_a) {
|
|
6758
6761
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6759
6762
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6760
6763
|
});
|
|
6761
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6764
|
+
var Sidebar = newStyled.div(templateObject_2$M || (templateObject_2$M = __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) {
|
|
6762
6765
|
var height = _a.height;
|
|
6763
6766
|
return height;
|
|
6764
6767
|
}, function (_a) {
|
|
@@ -6805,20 +6808,20 @@ var Drawer = function (_a) {
|
|
|
6805
6808
|
}, [isOpen, onClose, onOpen]);
|
|
6806
6809
|
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;
|
|
6807
6810
|
};
|
|
6808
|
-
var templateObject_1$
|
|
6811
|
+
var templateObject_1$16, templateObject_2$M;
|
|
6809
6812
|
|
|
6810
6813
|
var TooltipArrow = function (_a) {
|
|
6811
6814
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6812
6815
|
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));
|
|
6813
6816
|
};
|
|
6814
6817
|
|
|
6815
|
-
var List = newStyled.ul(templateObject_1$
|
|
6816
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6817
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6818
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
6818
|
+
var List = newStyled.ul(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6819
|
+
var Item$2 = newStyled.li(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
6820
|
+
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
6821
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
6819
6822
|
var StyledDropdown = newStyled.ul(templateObject_5$h || (templateObject_5$h = __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; });
|
|
6820
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6821
|
-
var templateObject_1$
|
|
6823
|
+
var DropdownItem = newStyled.li(templateObject_6$f || (templateObject_6$f = __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; });
|
|
6824
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r, templateObject_5$h, templateObject_6$f;
|
|
6822
6825
|
|
|
6823
6826
|
var DropdownListIcons = function (_a) {
|
|
6824
6827
|
var items = _a.items;
|
|
@@ -6831,13 +6834,13 @@ var Dropdown = function (_a) {
|
|
|
6831
6834
|
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));
|
|
6832
6835
|
};
|
|
6833
6836
|
|
|
6834
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6835
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6836
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6837
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
6837
|
+
var DropdownContainer = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
6838
|
+
var DropdownLabel = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
6839
|
+
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6840
|
+
var DetailLabel = newStyled.span(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
6838
6841
|
var DropdownOptions = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
6839
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6840
|
-
var templateObject_1$
|
|
6842
|
+
var DropdownOption = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
6843
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$e;
|
|
6841
6844
|
|
|
6842
6845
|
var SizeDropdown = function (_a) {
|
|
6843
6846
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6860,10 +6863,10 @@ var SizeDropdown = function (_a) {
|
|
|
6860
6863
|
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));
|
|
6861
6864
|
};
|
|
6862
6865
|
|
|
6863
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6864
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6865
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6866
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
6866
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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; });
|
|
6867
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$J || (templateObject_2$J = __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; });
|
|
6868
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
6869
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
6867
6870
|
var DropdownDialog = function (_a) {
|
|
6868
6871
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
6869
6872
|
var theme = useTheme$1();
|
|
@@ -6872,7 +6875,7 @@ var DropdownDialog = function (_a) {
|
|
|
6872
6875
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6873
6876
|
}) }), void 0) }), void 0));
|
|
6874
6877
|
};
|
|
6875
|
-
var templateObject_1$
|
|
6878
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$A, templateObject_4$p;
|
|
6876
6879
|
|
|
6877
6880
|
function FilteringDropdown(_a) {
|
|
6878
6881
|
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;
|
|
@@ -6905,29 +6908,29 @@ function FilteringDropdown(_a) {
|
|
|
6905
6908
|
}) }, void 0)] }), void 0));
|
|
6906
6909
|
}
|
|
6907
6910
|
|
|
6908
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6909
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6910
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6911
|
-
var Container$
|
|
6911
|
+
var Title$1 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
6912
|
+
var H3 = newStyled.h3(templateObject_2$I || (templateObject_2$I = __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; });
|
|
6913
|
+
var ArrowContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6914
|
+
var Container$M = newStyled.div(templateObject_4$o || (templateObject_4$o = __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'); });
|
|
6912
6915
|
var Accordion = function (_a) {
|
|
6913
6916
|
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;
|
|
6914
6917
|
var theme = useTheme();
|
|
6915
6918
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6916
|
-
return (jsxs$1(Container$
|
|
6919
|
+
return (jsxs$1(Container$M, __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));
|
|
6917
6920
|
};
|
|
6918
|
-
var templateObject_1$
|
|
6921
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$z, templateObject_4$o;
|
|
6919
6922
|
|
|
6920
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6921
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6922
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6923
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
6923
|
+
var SectionContent = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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; });
|
|
6924
|
+
var Header$1 = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
6925
|
+
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
6926
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
6924
6927
|
var H4 = newStyled.h4(templateObject_5$f || (templateObject_5$f = __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; });
|
|
6925
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6926
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6927
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6928
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
6928
|
+
var FilterLink = newStyled.a(templateObject_6$d || (templateObject_6$d = __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; });
|
|
6929
|
+
var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a = __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'); });
|
|
6930
|
+
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6931
|
+
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
6929
6932
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __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"])));
|
|
6930
|
-
var templateObject_1$
|
|
6933
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$y, templateObject_4$n, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6931
6934
|
|
|
6932
6935
|
var getStylesBySize$7 = function (size, theme) {
|
|
6933
6936
|
switch (size) {
|
|
@@ -6992,9 +6995,9 @@ var SelectorSecondary = function (_a) {
|
|
|
6992
6995
|
} }), id: id }, void 0));
|
|
6993
6996
|
};
|
|
6994
6997
|
|
|
6995
|
-
var UL = newStyled.ul(templateObject_1
|
|
6996
|
-
var LI = newStyled.li(templateObject_2$
|
|
6997
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
6998
|
+
var UL = newStyled.ul(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
6999
|
+
var LI = newStyled.li(templateObject_2$G || (templateObject_2$G = __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; });
|
|
7000
|
+
var CloseIconContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
6998
7001
|
var Tags = function (_a) {
|
|
6999
7002
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7000
7003
|
var theme = useTheme();
|
|
@@ -7002,7 +7005,7 @@ var Tags = function (_a) {
|
|
|
7002
7005
|
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));
|
|
7003
7006
|
}) }), void 0));
|
|
7004
7007
|
};
|
|
7005
|
-
var templateObject_1
|
|
7008
|
+
var templateObject_1$10, templateObject_2$G, templateObject_3$x;
|
|
7006
7009
|
|
|
7007
7010
|
var Filters = function (_a) {
|
|
7008
7011
|
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;
|
|
@@ -7138,8 +7141,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7138
7141
|
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));
|
|
7139
7142
|
};
|
|
7140
7143
|
|
|
7141
|
-
var Wrapper$4 = newStyled.div(templateObject_1
|
|
7142
|
-
var Container$
|
|
7144
|
+
var Wrapper$4 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
7145
|
+
var Container$L = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
7143
7146
|
var FitGuarantee = function (_a) {
|
|
7144
7147
|
var _b;
|
|
7145
7148
|
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;
|
|
@@ -7150,17 +7153,17 @@ var FitGuarantee = function (_a) {
|
|
|
7150
7153
|
console.error('Icon', iconName, 'not found');
|
|
7151
7154
|
return null;
|
|
7152
7155
|
}
|
|
7153
|
-
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$
|
|
7156
|
+
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$L, __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$L, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7154
7157
|
margin: '0.1rem 0',
|
|
7155
7158
|
width: '100%',
|
|
7156
7159
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7157
7160
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7158
|
-
} }, { children: title }), void 0), jsx$1(Text$
|
|
7161
|
+
} }, { 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));
|
|
7159
7162
|
};
|
|
7160
|
-
var templateObject_1
|
|
7163
|
+
var templateObject_1$$, templateObject_2$F;
|
|
7161
7164
|
|
|
7162
|
-
var Container$
|
|
7163
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7165
|
+
var Container$K = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
7166
|
+
var P$2 = newStyled.p(templateObject_2$E || (templateObject_2$E = __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; });
|
|
7164
7167
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7165
7168
|
border: 'none',
|
|
7166
7169
|
background: 'transparent',
|
|
@@ -7173,26 +7176,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7173
7176
|
var FitPredictor = function (_a) {
|
|
7174
7177
|
var onClick = _a.onClick;
|
|
7175
7178
|
var theme = useTheme();
|
|
7176
|
-
return (jsxs(Container$
|
|
7179
|
+
return (jsxs(Container$K, __assign$1({ theme: theme }, { children: [jsx(Container$K, { 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));
|
|
7177
7180
|
};
|
|
7178
|
-
var templateObject_1$
|
|
7179
|
-
|
|
7180
|
-
var Image$1 = newStyled.img(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
7181
|
-
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7182
|
-
return borderRadiusVariant &&
|
|
7183
|
-
"\nborder-radius: 20px;\n";
|
|
7184
|
-
}, function (_a) {
|
|
7185
|
-
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
7186
|
-
return selected
|
|
7187
|
-
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
7188
|
-
: 'inherit';
|
|
7189
|
-
});
|
|
7190
|
-
var ImageSmallPreview = function (_a) {
|
|
7191
|
-
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;
|
|
7192
|
-
var theme = useTheme();
|
|
7193
|
-
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7194
|
-
};
|
|
7195
|
-
var templateObject_1$Y;
|
|
7181
|
+
var templateObject_1$_, templateObject_2$E;
|
|
7196
7182
|
|
|
7197
7183
|
var Button$6 = newStyled.button(function () { return ({
|
|
7198
7184
|
background: 'transparent',
|
|
@@ -11436,14 +11422,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11436
11422
|
return Slider;
|
|
11437
11423
|
}(React__default.Component);
|
|
11438
11424
|
|
|
11439
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11425
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11440
11426
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11441
11427
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11442
11428
|
}, function (_a) {
|
|
11443
11429
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11444
11430
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11445
11431
|
});
|
|
11446
|
-
var templateObject_1$
|
|
11432
|
+
var templateObject_1$Z;
|
|
11447
11433
|
|
|
11448
11434
|
var getStylesBySize$6 = function (size) {
|
|
11449
11435
|
// rem units
|
|
@@ -11502,9 +11488,26 @@ var SliderNavigation = function (_a) {
|
|
|
11502
11488
|
} }, { 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));
|
|
11503
11489
|
};
|
|
11504
11490
|
|
|
11505
|
-
var
|
|
11506
|
-
var
|
|
11507
|
-
|
|
11491
|
+
var Image$1 = newStyled.img(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11492
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11493
|
+
return borderRadiusVariant &&
|
|
11494
|
+
"\nborder-radius: 20px;\n";
|
|
11495
|
+
}, function (_a) {
|
|
11496
|
+
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11497
|
+
return selected
|
|
11498
|
+
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11499
|
+
: 'inherit';
|
|
11500
|
+
});
|
|
11501
|
+
var ImageSmallPreview = function (_a) {
|
|
11502
|
+
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;
|
|
11503
|
+
var theme = useTheme();
|
|
11504
|
+
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11505
|
+
};
|
|
11506
|
+
var templateObject_1$Y;
|
|
11507
|
+
|
|
11508
|
+
var horizontalStyles = css(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
11509
|
+
var verticalStyles = css(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
11510
|
+
var Container$J = newStyled.div(templateObject_3$w || (templateObject_3$w = __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) {
|
|
11508
11511
|
var position = _a.position;
|
|
11509
11512
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11510
11513
|
}, function (_a) {
|
|
@@ -11512,11 +11515,11 @@ var Container$I = newStyled.div(templateObject_3$v || (templateObject_3$v = __ma
|
|
|
11512
11515
|
return hasOverflowArrows &&
|
|
11513
11516
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11514
11517
|
});
|
|
11515
|
-
var Button$5 = newStyled.button(templateObject_4$
|
|
11518
|
+
var Button$5 = newStyled.button(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
11516
11519
|
var ArrowsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
11517
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11518
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11519
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11520
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$c || (templateObject_6$c = __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"])));
|
|
11521
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
11522
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
11520
11523
|
var ImagePreviewList = function (_a) {
|
|
11521
11524
|
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;
|
|
11522
11525
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11527,13 +11530,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11527
11530
|
var element = document.querySelector(".imageListContainer");
|
|
11528
11531
|
element.scrollBy(0, 200);
|
|
11529
11532
|
};
|
|
11530
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11533
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$J, __assign$1({ "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: {
|
|
11531
11534
|
arrowWidth: 0.75,
|
|
11532
11535
|
arrowHeight: 1.25,
|
|
11533
11536
|
arrowPadding: 1.625,
|
|
11534
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.
|
|
11537
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11535
11538
|
};
|
|
11536
|
-
var templateObject_1$
|
|
11539
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$7;
|
|
11537
11540
|
|
|
11538
11541
|
var propTypes = {exports: {}};
|
|
11539
11542
|
|
|
@@ -13126,7 +13129,65 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13126
13129
|
afterZoomOut: PropTypes.func
|
|
13127
13130
|
} : {};
|
|
13128
13131
|
|
|
13129
|
-
var Container$
|
|
13132
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13133
|
+
var ProgressContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n"])));
|
|
13134
|
+
var ProgressFiller = newStyled.div(templateObject_3$v || (templateObject_3$v = __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; });
|
|
13135
|
+
var HTMLVideo = newStyled.video(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13136
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
13137
|
+
var PlayContainer = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13138
|
+
var PauseContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13139
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$b, templateObject_7$8;
|
|
13140
|
+
|
|
13141
|
+
var ProgressBar$1 = function (_a) {
|
|
13142
|
+
var currentProgress = _a.currentProgress;
|
|
13143
|
+
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar" }, { children: jsx$1(ProgressFiller, { progress: currentProgress }, void 0) }), void 0));
|
|
13144
|
+
};
|
|
13145
|
+
var Video$1 = function (_a) {
|
|
13146
|
+
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13147
|
+
var videoRef = useRef(null);
|
|
13148
|
+
var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
|
|
13149
|
+
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13150
|
+
var _d = useState(0), videoProgress = _d[0], setVideoProgress = _d[1];
|
|
13151
|
+
var _e = useState(false), debouncePlay = _e[0], setDebouncePlay = _e[1];
|
|
13152
|
+
var isStarted = videoProgress > 0;
|
|
13153
|
+
var handlePlayClick = function () {
|
|
13154
|
+
if (videoRef.current && !debouncePlay) {
|
|
13155
|
+
setDebouncePlay(true);
|
|
13156
|
+
videoRef.current
|
|
13157
|
+
.play()
|
|
13158
|
+
.then(function () {
|
|
13159
|
+
setIsPlaying(true);
|
|
13160
|
+
setDebouncePlay(false);
|
|
13161
|
+
})
|
|
13162
|
+
.catch(function (error) {
|
|
13163
|
+
console.error('Error playing video:', error);
|
|
13164
|
+
setDebouncePlay(false);
|
|
13165
|
+
});
|
|
13166
|
+
}
|
|
13167
|
+
};
|
|
13168
|
+
var handlePauseClick = function () {
|
|
13169
|
+
if (videoRef.current && isPlaying) {
|
|
13170
|
+
videoRef.current.pause();
|
|
13171
|
+
setIsPlaying(false);
|
|
13172
|
+
}
|
|
13173
|
+
};
|
|
13174
|
+
// useEffect(() => {
|
|
13175
|
+
// const interval = setInterval(() => {
|
|
13176
|
+
// if (videoRef.current) {
|
|
13177
|
+
// setVideoProgress(videoRef.current.currentTime / videoRef.current.duration);
|
|
13178
|
+
// }
|
|
13179
|
+
// }, 25);
|
|
13180
|
+
// return () => clearInterval(interval);
|
|
13181
|
+
// }, []);
|
|
13182
|
+
var onTimeUpdate = function () {
|
|
13183
|
+
if (videoRef.current) {
|
|
13184
|
+
setVideoProgress(videoRef.current.currentTime / videoRef.current.duration);
|
|
13185
|
+
}
|
|
13186
|
+
};
|
|
13187
|
+
return (jsxs$1(Container$I, { children: [!isLoading && jsx$1(ProgressBar$1, { currentProgress: videoProgress }, 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({ "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); } }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13188
|
+
};
|
|
13189
|
+
|
|
13190
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
13130
13191
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13131
13192
|
return borderRadiusVariant &&
|
|
13132
13193
|
"\n border-radius: 40px;\n ";
|
|
@@ -13134,18 +13195,17 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13134
13195
|
var TopTagContainer$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13135
13196
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13136
13197
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
13137
|
-
var Video$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
13138
|
-
var VideoTag$2 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n gap: 8px;\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 display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13139
|
-
var Text$4 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13140
13198
|
var ImageProductWithTags$1 = function (_a) {
|
|
13141
|
-
var _b
|
|
13142
|
-
var
|
|
13143
|
-
|
|
13144
|
-
|
|
13199
|
+
var _b;
|
|
13200
|
+
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13201
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13202
|
+
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13203
|
+
return (jsxs$1(Container$H, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13204
|
+
alt: content.alt,
|
|
13145
13205
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13146
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)),
|
|
13206
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, 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));
|
|
13147
13207
|
};
|
|
13148
|
-
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k
|
|
13208
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k;
|
|
13149
13209
|
|
|
13150
13210
|
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13151
13211
|
var ProductGallery = function (_a) {
|
|
@@ -13157,7 +13217,7 @@ var ProductGallery = function (_a) {
|
|
|
13157
13217
|
}, [initialValue]);
|
|
13158
13218
|
return (jsxs$1(Container$G, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13159
13219
|
setSelectedImage(value);
|
|
13160
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, {
|
|
13220
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13161
13221
|
};
|
|
13162
13222
|
var templateObject_1$U;
|
|
13163
13223
|
|
|
@@ -13273,7 +13333,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13273
13333
|
textAlign: 'center',
|
|
13274
13334
|
lineHeight: '18px',
|
|
13275
13335
|
};
|
|
13276
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$E, __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$
|
|
13336
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$E, __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));
|
|
13277
13337
|
};
|
|
13278
13338
|
|
|
13279
13339
|
var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __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'); });
|
|
@@ -13286,7 +13346,7 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13286
13346
|
var ImageCardWithDescription = function (_a) {
|
|
13287
13347
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13288
13348
|
var isMobile = useWindowDimensions().isMobile;
|
|
13289
|
-
return (jsxs$1(Container$D, __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$
|
|
13349
|
+
return (jsxs$1(Container$D, __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));
|
|
13290
13350
|
};
|
|
13291
13351
|
var templateObject_1$R, templateObject_2$A, templateObject_3$t;
|
|
13292
13352
|
|
|
@@ -13389,8 +13449,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13389
13449
|
var theme = _a.theme;
|
|
13390
13450
|
return theme.component.input.lineHeight;
|
|
13391
13451
|
});
|
|
13392
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13393
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$
|
|
13452
|
+
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13453
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13394
13454
|
|
|
13395
13455
|
var BaseInput = function (_a) {
|
|
13396
13456
|
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"]);
|
|
@@ -13515,12 +13575,8 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13515
13575
|
// max-height: 31.875rem;
|
|
13516
13576
|
var TopTagContainer$2 = 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'); });
|
|
13517
13577
|
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"])));
|
|
13518
|
-
var
|
|
13519
|
-
var
|
|
13520
|
-
var VideoTag$1 = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
13521
|
-
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13522
|
-
var NavButtonContainer$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13523
|
-
var Button$3 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
13578
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13579
|
+
var Button$3 = newStyled.button(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
13524
13580
|
var settings$1 = {
|
|
13525
13581
|
dots: true,
|
|
13526
13582
|
infinite: false,
|
|
@@ -13530,11 +13586,11 @@ var settings$1 = {
|
|
|
13530
13586
|
initialSlide: 0,
|
|
13531
13587
|
};
|
|
13532
13588
|
var ImageProductWithTags = function (_a) {
|
|
13533
|
-
var
|
|
13589
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13534
13590
|
var slick = useRef(null);
|
|
13535
13591
|
var sliderWrapper = useRef(null);
|
|
13536
|
-
|
|
13537
|
-
var _c = useState(false)
|
|
13592
|
+
useRef(null);
|
|
13593
|
+
var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13538
13594
|
usePreventVerticalScroll$1(sliderWrapper);
|
|
13539
13595
|
var onButtonClick = useCallback(function (i) {
|
|
13540
13596
|
var _a;
|
|
@@ -13559,23 +13615,23 @@ var ImageProductWithTags = function (_a) {
|
|
|
13559
13615
|
useEffect(function () {
|
|
13560
13616
|
var _a;
|
|
13561
13617
|
if (selectedValue) {
|
|
13562
|
-
var matchingIndex =
|
|
13618
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
13563
13619
|
if (matchingIndex !== -1) {
|
|
13564
13620
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
13565
13621
|
}
|
|
13566
13622
|
}
|
|
13567
|
-
}, [
|
|
13568
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children:
|
|
13623
|
+
}, [contents, selectedValue]);
|
|
13624
|
+
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$z, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13569
13625
|
var _a;
|
|
13570
|
-
var activeSlide =
|
|
13626
|
+
var activeSlide = contents[e];
|
|
13571
13627
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13572
|
-
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.
|
|
13628
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13573
13629
|
autoplay ? _playVideo() : _stopVideo();
|
|
13574
|
-
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children:
|
|
13575
|
-
var _a
|
|
13576
|
-
|
|
13577
|
-
|
|
13578
|
-
|
|
13630
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13631
|
+
var _a;
|
|
13632
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13633
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13634
|
+
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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13579
13635
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13580
13636
|
};
|
|
13581
13637
|
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
@@ -13613,12 +13669,12 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13613
13669
|
};
|
|
13614
13670
|
}, [preventTouch, ref, touchStart]);
|
|
13615
13671
|
}
|
|
13616
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b
|
|
13672
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b;
|
|
13617
13673
|
|
|
13618
13674
|
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
13619
13675
|
var ProductGalleryMobile = function (_a) {
|
|
13620
13676
|
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;
|
|
13621
|
-
return (jsx$1(Container$y, { children: jsx$1(ImageProductWithTags, {
|
|
13677
|
+
return (jsx$1(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13622
13678
|
};
|
|
13623
13679
|
var templateObject_1$J;
|
|
13624
13680
|
|
|
@@ -13887,41 +13943,27 @@ function useSwipeable(options) {
|
|
|
13887
13943
|
return handlers;
|
|
13888
13944
|
}
|
|
13889
13945
|
|
|
13890
|
-
var
|
|
13891
|
-
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13892
|
-
return borderRadiusVariant &&
|
|
13893
|
-
"\n border-radius: 40px;\n ";
|
|
13894
|
-
});
|
|
13895
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __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'); });
|
|
13896
|
-
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"])));
|
|
13897
|
-
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13898
|
-
var _b, _c;
|
|
13899
|
-
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13900
|
-
return (jsxs$1(Container$x, __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.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13901
|
-
});
|
|
13902
|
-
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
13903
|
-
|
|
13904
|
-
var Button$2 = newStyled.button(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13946
|
+
var Button$2 = newStyled.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13905
13947
|
var ArrowButton = function (_a) {
|
|
13906
13948
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13907
13949
|
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13908
13950
|
};
|
|
13909
|
-
var templateObject_1$
|
|
13951
|
+
var templateObject_1$I;
|
|
13910
13952
|
|
|
13911
|
-
var Container$
|
|
13953
|
+
var Container$x = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13912
13954
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13913
13955
|
var SlideDots = function (_a) {
|
|
13914
13956
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13915
13957
|
var theme = useTheme();
|
|
13916
|
-
return (jsx$1(Container$
|
|
13958
|
+
return (jsx$1(Container$x, __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
|
|
13917
13959
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13918
13960
|
: 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));
|
|
13919
13961
|
};
|
|
13920
|
-
var templateObject_1$
|
|
13962
|
+
var templateObject_1$H;
|
|
13921
13963
|
|
|
13922
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13923
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13924
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13964
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13965
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13966
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13925
13967
|
var SlideNavigation = function (_a) {
|
|
13926
13968
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13927
13969
|
var theme = useTheme();
|
|
@@ -13933,6 +13975,20 @@ var SlideNavigation = function (_a) {
|
|
|
13933
13975
|
onNavigate(selectedIndex + 1);
|
|
13934
13976
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13935
13977
|
};
|
|
13978
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
13979
|
+
|
|
13980
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
13981
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13982
|
+
return borderRadiusVariant &&
|
|
13983
|
+
"\n border-radius: 40px;\n ";
|
|
13984
|
+
});
|
|
13985
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __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'); });
|
|
13986
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13987
|
+
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13988
|
+
var _b, _c;
|
|
13989
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13990
|
+
return (jsxs$1(Container$w, __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$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { 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));
|
|
13991
|
+
});
|
|
13936
13992
|
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13937
13993
|
|
|
13938
13994
|
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
@@ -13957,7 +14013,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13957
14013
|
useEffect(function () {
|
|
13958
14014
|
setSelectedImage(images[index]);
|
|
13959
14015
|
}, [index, images]);
|
|
13960
|
-
return (jsxs$1(Container$v, { children: [jsx$1(ImageProductWithTagsMobileV2, __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));
|
|
14016
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductWithTagsMobileV2, __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));
|
|
13961
14017
|
};
|
|
13962
14018
|
var templateObject_1$E;
|
|
13963
14019
|
|
|
@@ -14016,7 +14072,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14016
14072
|
useEffect(function () {
|
|
14017
14073
|
var _a;
|
|
14018
14074
|
if (selectedValue) {
|
|
14019
|
-
var matchingIndex = images.findIndex(function (image) { return image.
|
|
14075
|
+
var matchingIndex = images.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14020
14076
|
if (matchingIndex !== -1) {
|
|
14021
14077
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14022
14078
|
}
|
|
@@ -14026,11 +14082,11 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14026
14082
|
var _a;
|
|
14027
14083
|
var activeSlide = images[e];
|
|
14028
14084
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14029
|
-
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.
|
|
14085
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14030
14086
|
autoplay ? _playVideo() : _stopVideo();
|
|
14031
14087
|
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14032
14088
|
var _a, _b;
|
|
14033
|
-
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.
|
|
14089
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.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, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14034
14090
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14035
14091
|
} }, 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));
|
|
14036
14092
|
}) }), void 0) }), void 0)] }, void 0));
|
|
@@ -14075,7 +14131,7 @@ var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4
|
|
|
14075
14131
|
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14076
14132
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14077
14133
|
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;
|
|
14078
|
-
return (jsx$1(Container$t, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14134
|
+
return (jsx$1(Container$t, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14079
14135
|
};
|
|
14080
14136
|
var templateObject_1$C;
|
|
14081
14137
|
|
|
@@ -18149,15 +18205,15 @@ var PackCard = function (_a) {
|
|
|
18149
18205
|
.then(function (icon) { return setIcon(icon); })
|
|
18150
18206
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18151
18207
|
}, [pack.meta.icon]);
|
|
18152
|
-
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$
|
|
18208
|
+
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, { 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: {
|
|
18153
18209
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18154
|
-
} }, { 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$
|
|
18210
|
+
} }, { 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, {
|
|
18155
18211
|
locale: 'en-US',
|
|
18156
18212
|
currency: currencyCode || 'USD',
|
|
18157
|
-
}) }), void 0), jsxs$1(Text$
|
|
18213
|
+
}) }), void 0), jsxs$1(Text$7, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
18158
18214
|
locale: 'en-US',
|
|
18159
18215
|
currency: currencyCode || 'USD',
|
|
18160
|
-
})] }), void 0)] }, void 0), jsxs$1(Text$
|
|
18216
|
+
})] }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
18161
18217
|
locale: 'en-US',
|
|
18162
18218
|
currency: currencyCode || 'USD',
|
|
18163
18219
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -18720,7 +18776,7 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
18720
18776
|
var ReviewsContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
18721
18777
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
18722
18778
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
18723
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18779
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
18724
18780
|
var ReviewsImages = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __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"])));
|
|
18725
18781
|
var SummaryItem = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __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) {
|
|
18726
18782
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18730,7 +18786,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18730
18786
|
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;
|
|
18731
18787
|
var starsNumber = 5;
|
|
18732
18788
|
var theme = useTheme();
|
|
18733
|
-
return (jsxs$1(Container$f, { children: [jsx$1(Text$
|
|
18789
|
+
return (jsxs$1(Container$f, { 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));
|
|
18734
18790
|
};
|
|
18735
18791
|
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18736
18792
|
|
|
@@ -18790,7 +18846,7 @@ var Description = newStyled.div({
|
|
|
18790
18846
|
var ProductItem = function (_a) {
|
|
18791
18847
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18792
18848
|
var theme = useTheme();
|
|
18793
|
-
return (jsxs$1(Container$d, __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$
|
|
18849
|
+
return (jsxs$1(Container$d, __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));
|
|
18794
18850
|
};
|
|
18795
18851
|
var templateObject_1$m;
|
|
18796
18852
|
|
|
@@ -18801,7 +18857,7 @@ var Container$c = newStyled.div({
|
|
|
18801
18857
|
});
|
|
18802
18858
|
var Footer = function (_a) {
|
|
18803
18859
|
var text = _a.text, onClick = _a.onClick;
|
|
18804
|
-
return (jsx$1(Container$c, { children: jsx$1(Text$
|
|
18860
|
+
return (jsx$1(Container$c, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18805
18861
|
};
|
|
18806
18862
|
|
|
18807
18863
|
var Ul = newStyled.ul({
|
|
@@ -18831,7 +18887,7 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18831
18887
|
var ResultsPanel = function (_a) {
|
|
18832
18888
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18833
18889
|
var theme = useTheme();
|
|
18834
|
-
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
18890
|
+
return (jsxs$1(Container$b, __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));
|
|
18835
18891
|
};
|
|
18836
18892
|
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18837
18893
|
|
|
@@ -18944,7 +19000,7 @@ var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
18944
19000
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
18945
19001
|
var SearchNavigation = function (_a) {
|
|
18946
19002
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18947
|
-
return (jsxs$1(Container$9, { children: [jsxs$1(Text$
|
|
19003
|
+
return (jsxs$1(Container$9, { 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) {
|
|
18948
19004
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18949
19005
|
}) }, void 0)] }, void 0));
|
|
18950
19006
|
};
|
|
@@ -19084,7 +19140,7 @@ var SizeSelector = function (_a) {
|
|
|
19084
19140
|
display: 'flex',
|
|
19085
19141
|
flexDirection: inline ? 'row' : 'column',
|
|
19086
19142
|
alignItems: inline ? 'center' : 'start',
|
|
19087
|
-
} }, { children: [jsxs(Text$
|
|
19143
|
+
} }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: (_b = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences[selectedValue.label]) !== null && _b !== void 0 ? _b : 'Refer to our' }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
19088
19144
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
19089
19145
|
return (jsx(SelectorSecondary, { css: {
|
|
19090
19146
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -19261,7 +19317,7 @@ var ImageVideo = function (_a) {
|
|
|
19261
19317
|
var handleOnClick = function () {
|
|
19262
19318
|
setOpened(true);
|
|
19263
19319
|
};
|
|
19264
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$
|
|
19320
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$7, __assign$1({ variant: "link", style: {
|
|
19265
19321
|
position: 'absolute',
|
|
19266
19322
|
top: '10px',
|
|
19267
19323
|
right: '10px',
|
|
@@ -19283,12 +19339,12 @@ var TextWithImage = function (_a) {
|
|
|
19283
19339
|
var _b, _c, _d, _e;
|
|
19284
19340
|
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"]);
|
|
19285
19341
|
var isMobile = useWindowDimensions().isMobile;
|
|
19286
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
19342
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$7, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
19287
19343
|
? titleStyle
|
|
19288
19344
|
: {
|
|
19289
19345
|
color: '#000000',
|
|
19290
19346
|
textAlign: 'center',
|
|
19291
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
19347
|
+
} }, { children: title }), void 0)) : (jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
19292
19348
|
? titleStyle
|
|
19293
19349
|
: {
|
|
19294
19350
|
color: '#000000',
|
|
@@ -19298,7 +19354,7 @@ var TextWithImage = function (_a) {
|
|
|
19298
19354
|
// @ts-ignore
|
|
19299
19355
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19300
19356
|
};
|
|
19301
|
-
return (jsxs(Container$4, __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$
|
|
19357
|
+
return (jsxs(Container$4, __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 ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19302
19358
|
backgroundColor: props.btnBGColor,
|
|
19303
19359
|
color: '#ffffff',
|
|
19304
19360
|
border: props.btnBGColor,
|
|
@@ -19376,7 +19432,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19376
19432
|
var theme = _a.theme;
|
|
19377
19433
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19378
19434
|
});
|
|
19379
|
-
var TotalLabel = newStyled(Text$
|
|
19435
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19380
19436
|
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19381
19437
|
|
|
19382
19438
|
var Total = function (_a) {
|
|
@@ -19537,7 +19593,7 @@ var getDefaultCountdown = function () {
|
|
|
19537
19593
|
var HurryUp = function (_a) {
|
|
19538
19594
|
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
19539
19595
|
var theme = useTheme();
|
|
19540
|
-
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$
|
|
19596
|
+
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));
|
|
19541
19597
|
};
|
|
19542
19598
|
|
|
19543
19599
|
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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) {
|
|
@@ -19574,5 +19630,5 @@ var Spinner = function (_a) {
|
|
|
19574
19630
|
return (jsx$1(Container, __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));
|
|
19575
19631
|
};
|
|
19576
19632
|
|
|
19577
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, 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, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$
|
|
19633
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, 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, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19578
19634
|
//# sourceMappingURL=index.esm.js.map
|