@trafilea/afrodita-components 6.8.6 → 6.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +70 -65
- package/build/index.esm.js +463 -409
- package/build/index.esm.js.map +1 -1
- package/build/index.js +463 -409
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$
|
|
3154
|
+
var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __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) {
|
|
3155
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3176,11 +3176,11 @@ var Container$19 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = _
|
|
|
3176
3176
|
var SkeletonBox = function (_a) {
|
|
3177
3177
|
var width = _a.width, height = _a.height;
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
|
-
return jsxRuntime.jsx(Container$
|
|
3179
|
+
return jsxRuntime.jsx(Container$1a, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1W;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V = __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) {
|
|
3184
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1T || (templateObject_1$1T
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$1g = __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) {
|
|
3200
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1e || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1V, templateObject_2$1g;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -3935,82 +3935,85 @@ var Other = /*#__PURE__*/Object.freeze({
|
|
|
3935
3935
|
TheSpaDr: TheSpaDr
|
|
3936
3936
|
});
|
|
3937
3937
|
|
|
3938
|
+
var CircleNumber = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/circle_number" }), void 0); };
|
|
3939
|
+
|
|
3938
3940
|
var Clock = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/clock" }), void 0); };
|
|
3939
3941
|
|
|
3940
|
-
var
|
|
3942
|
+
var Drop = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({ testId: "drop" }, props, { name: "pdp/drop" }), void 0); };
|
|
3941
3943
|
|
|
3942
|
-
var
|
|
3944
|
+
var DropEmpty = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "drop-empty" }, props, { name: "pdp/drop_empty" }), void 0)); };
|
|
3943
3945
|
|
|
3944
|
-
var
|
|
3946
|
+
var ErrorCross = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/error_cross" }), void 0); };
|
|
3945
3947
|
|
|
3946
|
-
var
|
|
3948
|
+
var FlagUSA = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
|
|
3947
3949
|
|
|
3948
|
-
var
|
|
3950
|
+
var Hours = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/hours" }), void 0); };
|
|
3949
3951
|
|
|
3950
|
-
var
|
|
3952
|
+
var KlarnaLogo = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/klarna_logo" }), void 0); };
|
|
3951
3953
|
|
|
3952
|
-
var
|
|
3954
|
+
var LightBulb = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/light_bulb" }), void 0); };
|
|
3953
3955
|
|
|
3954
|
-
var
|
|
3956
|
+
var Minus = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/minus" }), void 0); };
|
|
3955
3957
|
|
|
3956
|
-
var
|
|
3958
|
+
var Moon = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/moon" }), void 0); };
|
|
3957
3959
|
|
|
3958
|
-
var
|
|
3960
|
+
var NewClock = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/new_clock" }), void 0); };
|
|
3959
3961
|
|
|
3960
|
-
var
|
|
3962
|
+
var PlayMini = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/play_mini" }), void 0); };
|
|
3961
3963
|
|
|
3962
|
-
var
|
|
3964
|
+
var PlayVideo = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/play_video" }), void 0); };
|
|
3963
3965
|
|
|
3964
|
-
var
|
|
3966
|
+
var Plus = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/plus" }), void 0); };
|
|
3965
3967
|
|
|
3966
|
-
var
|
|
3968
|
+
var Rule = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/rule" }), void 0); };
|
|
3967
3969
|
|
|
3968
|
-
var
|
|
3970
|
+
var Shipping = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/shipping" }), void 0); };
|
|
3969
3971
|
|
|
3970
3972
|
var ShippingEmpty = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/shipping_empty" }), void 0)); };
|
|
3971
3973
|
|
|
3972
|
-
var
|
|
3974
|
+
var SizeEmpty = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/size_empty" }), void 0); };
|
|
3973
3975
|
|
|
3974
|
-
var
|
|
3976
|
+
var SizeEmptyV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/size_empty_v2" }), void 0); };
|
|
3975
3977
|
|
|
3976
|
-
var
|
|
3978
|
+
var Star = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({ testId: "star" }, props, { name: "pdp/star" }), void 0); };
|
|
3977
3979
|
|
|
3978
|
-
var
|
|
3980
|
+
var StarEmpty = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "star-empty" }, props, { name: "pdp/star_empty" }), void 0)); };
|
|
3979
3981
|
|
|
3980
|
-
var
|
|
3982
|
+
var StarHalf = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "star-half" }, props, { name: "pdp/star_half" }), void 0)); };
|
|
3981
3983
|
|
|
3982
|
-
var
|
|
3984
|
+
var Stars = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/stars" }), void 0); };
|
|
3983
3985
|
|
|
3984
|
-
var
|
|
3986
|
+
var Stopwatch = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/stopwatch" }), void 0); };
|
|
3985
3987
|
|
|
3986
3988
|
var TrustBadge = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trust_badge" }), void 0); };
|
|
3987
3989
|
|
|
3988
3990
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
3989
3991
|
__proto__: null,
|
|
3992
|
+
CircleNumber: CircleNumber,
|
|
3990
3993
|
Clock: Clock,
|
|
3994
|
+
Drop: Drop,
|
|
3995
|
+
DropEmpty: DropEmpty,
|
|
3996
|
+
ErrorCross: ErrorCross,
|
|
3991
3997
|
FlagUSA: FlagUSA,
|
|
3998
|
+
Hours: Hours,
|
|
3999
|
+
KlarnaLogo: KlarnaLogo,
|
|
4000
|
+
LightBulb: LightBulb,
|
|
3992
4001
|
Minus: Minus,
|
|
4002
|
+
Moon: Moon,
|
|
4003
|
+
NewClock: NewClock,
|
|
4004
|
+
PlayMini: PlayMini,
|
|
4005
|
+
PlayVideo: PlayVideo,
|
|
3993
4006
|
Plus: Plus,
|
|
3994
4007
|
Rule: Rule,
|
|
3995
|
-
Star: Star,
|
|
3996
|
-
StarEmpty: StarEmpty,
|
|
3997
|
-
StarHalf: StarHalf,
|
|
3998
|
-
Stopwatch: Stopwatch,
|
|
3999
4008
|
Shipping: Shipping,
|
|
4000
|
-
|
|
4001
|
-
ErrorCross: ErrorCross,
|
|
4002
|
-
CircleNumber: CircleNumber,
|
|
4009
|
+
ShippingEmpty: ShippingEmpty,
|
|
4003
4010
|
SizeEmpty: SizeEmpty,
|
|
4004
4011
|
SizeEmptyV2: SizeEmptyV2,
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
DropEmpty: DropEmpty,
|
|
4012
|
+
Star: Star,
|
|
4013
|
+
StarEmpty: StarEmpty,
|
|
4014
|
+
StarHalf: StarHalf,
|
|
4009
4015
|
Stars: Stars,
|
|
4010
|
-
|
|
4011
|
-
Hours: Hours,
|
|
4012
|
-
NewClock: NewClock,
|
|
4013
|
-
KlarnaLogo: KlarnaLogo,
|
|
4016
|
+
Stopwatch: Stopwatch,
|
|
4014
4017
|
TrustBadge: TrustBadge
|
|
4015
4018
|
});
|
|
4016
4019
|
|
|
@@ -4109,15 +4112,15 @@ function jsxs(type, props, key) {
|
|
|
4109
4112
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4110
4113
|
// `variants` styles that are consistent through all themes.
|
|
4111
4114
|
var TAGS = {
|
|
4112
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4113
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4114
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4115
|
-
display1: newStyled.h1(templateObject_4$
|
|
4115
|
+
hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4116
|
+
hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
|
|
4117
|
+
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4118
|
+
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4116
4119
|
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4117
|
-
display3: newStyled.h3(templateObject_6$
|
|
4118
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4119
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4120
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4120
|
+
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
4121
|
+
heading1: newStyled.h1(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
|
|
4122
|
+
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4123
|
+
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4121
4124
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4122
4125
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
4123
4126
|
heading6: newStyled.h6(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4133,7 +4136,7 @@ var TAGS = {
|
|
|
4133
4136
|
}),
|
|
4134
4137
|
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' : ''); }),
|
|
4135
4138
|
};
|
|
4136
|
-
var Text$
|
|
4139
|
+
var Text$7 = function (_a) {
|
|
4137
4140
|
var _b;
|
|
4138
4141
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4139
4142
|
var theme = useTheme();
|
|
@@ -4245,17 +4248,17 @@ var DEFAULTS = {
|
|
|
4245
4248
|
size: 'regular',
|
|
4246
4249
|
},
|
|
4247
4250
|
};
|
|
4248
|
-
var templateObject_1$
|
|
4251
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$s, templateObject_6$o, templateObject_7$g, 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;
|
|
4249
4252
|
|
|
4250
|
-
var Container$
|
|
4251
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4252
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4253
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4253
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
4254
|
+
var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
4255
|
+
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"])));
|
|
4256
|
+
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"])));
|
|
4254
4257
|
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"])));
|
|
4255
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4258
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
4256
4259
|
var PackSelectorV2 = function (_a) {
|
|
4257
4260
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4258
|
-
return (jsxRuntime.jsx(Container$
|
|
4261
|
+
return (jsxRuntime.jsx(Container$19, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4259
4262
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4260
4263
|
}) }), void 0));
|
|
4261
4264
|
};
|
|
@@ -4269,35 +4272,35 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4272
|
.then(function (icon) { return setIcon(icon); })
|
|
4270
4273
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4271
4274
|
}, [pack.meta.icon]);
|
|
4272
|
-
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
4275
|
+
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$4, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4273
4276
|
locale: 'en-US',
|
|
4274
4277
|
currency: currencyCode || 'USD',
|
|
4275
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$
|
|
4278
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
4276
4279
|
locale: 'en-US',
|
|
4277
4280
|
currency: currencyCode || 'USD',
|
|
4278
4281
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4279
4282
|
};
|
|
4280
|
-
var templateObject_1$
|
|
4283
|
+
var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$r, templateObject_6$n;
|
|
4281
4284
|
|
|
4282
|
-
var Container$
|
|
4283
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4285
|
+
var Container$18 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4286
|
+
var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4284
4287
|
var DropList = function (_a) {
|
|
4285
4288
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4286
|
-
return (jsxRuntime.jsx(Container$
|
|
4289
|
+
return (jsxRuntime.jsx(Container$18, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4287
4290
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4288
4291
|
}) }, void 0));
|
|
4289
4292
|
};
|
|
4290
|
-
var templateObject_1$
|
|
4293
|
+
var templateObject_1$1S, templateObject_2$1d;
|
|
4291
4294
|
|
|
4292
4295
|
var DROPS_TOTAL = 5;
|
|
4293
|
-
var Container$
|
|
4294
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4295
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4296
|
+
var Container$17 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4297
|
+
var Title$8 = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4298
|
+
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"])));
|
|
4296
4299
|
var AbsorbencyLevel = function (_a) {
|
|
4297
4300
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4298
|
-
return (jsxRuntime.jsxs(Container$
|
|
4301
|
+
return (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4299
4302
|
};
|
|
4300
|
-
var templateObject_1$
|
|
4303
|
+
var templateObject_1$1R, templateObject_2$1c, templateObject_3$W;
|
|
4301
4304
|
|
|
4302
4305
|
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]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.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===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.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(`
|
|
4303
4306
|
`),"","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(`
|
|
@@ -4373,7 +4376,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4373
4376
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4374
4377
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4375
4378
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4376
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4379
|
+
var StyledContent = newStyled.button(templateObject_1$1Q || (templateObject_1$1Q = __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"])));
|
|
4377
4380
|
var Accordion$1 = function (_a) {
|
|
4378
4381
|
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;
|
|
4379
4382
|
var theme = useTheme();
|
|
@@ -4397,9 +4400,9 @@ var Accordion$1 = function (_a) {
|
|
|
4397
4400
|
} }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4398
4401
|
} }), void 0));
|
|
4399
4402
|
};
|
|
4400
|
-
var templateObject_1$
|
|
4403
|
+
var templateObject_1$1Q;
|
|
4401
4404
|
|
|
4402
|
-
var Container$
|
|
4405
|
+
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4403
4406
|
var AccordionOptions = function (_a) {
|
|
4404
4407
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4405
4408
|
var _b = React$2.useState({
|
|
@@ -4412,7 +4415,7 @@ var AccordionOptions = function (_a) {
|
|
|
4412
4415
|
}
|
|
4413
4416
|
return false;
|
|
4414
4417
|
};
|
|
4415
|
-
return (jsxRuntime.jsx(Container$
|
|
4418
|
+
return (jsxRuntime.jsx(Container$16, { children: accordions.map(function (accordion, index) {
|
|
4416
4419
|
var forceOpenValue = getForceOpen(index);
|
|
4417
4420
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4418
4421
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4423,7 +4426,7 @@ var AccordionOptions = function (_a) {
|
|
|
4423
4426
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4424
4427
|
}) }, void 0));
|
|
4425
4428
|
};
|
|
4426
|
-
var templateObject_1$
|
|
4429
|
+
var templateObject_1$1P;
|
|
4427
4430
|
|
|
4428
4431
|
exports.CardSectionType = void 0;
|
|
4429
4432
|
(function (CardSectionType) {
|
|
@@ -4585,14 +4588,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4585
4588
|
literal: true,
|
|
4586
4589
|
});
|
|
4587
4590
|
|
|
4588
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4589
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4591
|
+
var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __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; });
|
|
4592
|
+
var ErrorContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4590
4593
|
var Error$1 = function (_a) {
|
|
4591
4594
|
var error = _a.error;
|
|
4592
4595
|
var theme = useTheme();
|
|
4593
4596
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4594
4597
|
};
|
|
4595
|
-
var templateObject_1$
|
|
4598
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
4596
4599
|
|
|
4597
4600
|
var BaseSelectButton = function (_a) {
|
|
4598
4601
|
var children = _a.children, as = _a.as;
|
|
@@ -4609,7 +4612,7 @@ function BaseSelectOption(_a) {
|
|
|
4609
4612
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4610
4613
|
}
|
|
4611
4614
|
|
|
4612
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4615
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4613
4616
|
function BaseSelect(_a) {
|
|
4614
4617
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4615
4618
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4619,7 +4622,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4619
4622
|
Options: BaseSelectOptions,
|
|
4620
4623
|
Option: BaseSelectOption,
|
|
4621
4624
|
});
|
|
4622
|
-
var templateObject_1$
|
|
4625
|
+
var templateObject_1$1N;
|
|
4623
4626
|
|
|
4624
4627
|
var CustomButton = newStyled.button(function (_a) {
|
|
4625
4628
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4658,7 +4661,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4658
4661
|
});
|
|
4659
4662
|
});
|
|
4660
4663
|
//TODO Remove this when we find the real solution
|
|
4661
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4664
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4662
4665
|
var open = _a.open;
|
|
4663
4666
|
return open &&
|
|
4664
4667
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4678,7 +4681,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4678
4681
|
} }), void 0));
|
|
4679
4682
|
};
|
|
4680
4683
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4681
|
-
var templateObject_1$
|
|
4684
|
+
var templateObject_1$1M;
|
|
4682
4685
|
|
|
4683
4686
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4684
4687
|
var theme = _a.theme;
|
|
@@ -4845,7 +4848,7 @@ var CustomCheckboxStyles = {
|
|
|
4845
4848
|
},
|
|
4846
4849
|
};
|
|
4847
4850
|
|
|
4848
|
-
var Container$
|
|
4851
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
4849
4852
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4850
4853
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4851
4854
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4856,7 +4859,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4856
4859
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4857
4860
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4858
4861
|
]; });
|
|
4859
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4862
|
+
var Input$5 = newStyled.input(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
4860
4863
|
var disabled = _a.disabled;
|
|
4861
4864
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4862
4865
|
});
|
|
@@ -4870,9 +4873,9 @@ var Checkbox = function (_a) {
|
|
|
4870
4873
|
}
|
|
4871
4874
|
onChange(e.target.checked);
|
|
4872
4875
|
};
|
|
4873
|
-
return (jsxRuntime.jsxs(Container$
|
|
4876
|
+
return (jsxRuntime.jsxs(Container$15, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4874
4877
|
};
|
|
4875
|
-
var templateObject_1$
|
|
4878
|
+
var templateObject_1$1L, templateObject_2$1a;
|
|
4876
4879
|
|
|
4877
4880
|
var CustomOption = newStyled.li(function (_a) {
|
|
4878
4881
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4921,8 +4924,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4921
4924
|
Option: BaseDropdownOption,
|
|
4922
4925
|
});
|
|
4923
4926
|
|
|
4924
|
-
var Container$
|
|
4925
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4927
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4928
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
4926
4929
|
function SimpleDropdown(_a) {
|
|
4927
4930
|
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;
|
|
4928
4931
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4951,10 +4954,10 @@ function SimpleDropdown(_a) {
|
|
|
4951
4954
|
}
|
|
4952
4955
|
setSelectedValue(value);
|
|
4953
4956
|
}, [value, options, initialValue]);
|
|
4954
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4957
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$14 : React$2.Fragment;
|
|
4955
4958
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4956
4959
|
}
|
|
4957
|
-
var templateObject_1$
|
|
4960
|
+
var templateObject_1$1K, templateObject_2$19;
|
|
4958
4961
|
|
|
4959
4962
|
/* base styles & size variants */
|
|
4960
4963
|
var CustomRadioStyles$2 = {
|
|
@@ -5019,9 +5022,9 @@ var ContainerStyles$2 = {
|
|
|
5019
5022
|
},
|
|
5020
5023
|
};
|
|
5021
5024
|
|
|
5022
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5023
|
-
var Container$
|
|
5024
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5025
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5026
|
+
var Container$13 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5027
|
+
var Input$4 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5025
5028
|
var disabled = _a.disabled;
|
|
5026
5029
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5027
5030
|
});
|
|
@@ -5029,7 +5032,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5029
5032
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5030
5033
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5031
5034
|
]; });
|
|
5032
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5035
|
+
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) {
|
|
5033
5036
|
var theme = _a.theme;
|
|
5034
5037
|
return theme.component.radio.textSize;
|
|
5035
5038
|
}, function (_a) {
|
|
@@ -5043,9 +5046,9 @@ var RadioInput = function (_a) {
|
|
|
5043
5046
|
var value = event.currentTarget.value;
|
|
5044
5047
|
onChange({ value: value, label: label });
|
|
5045
5048
|
};
|
|
5046
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5049
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$13, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5047
5050
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5051
|
+
var templateObject_1$1J, templateObject_2$18, templateObject_3$V;
|
|
5049
5052
|
|
|
5050
5053
|
var getWrapperFlexDirection = function (position) {
|
|
5051
5054
|
switch (position) {
|
|
@@ -5096,7 +5099,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5096
5099
|
}
|
|
5097
5100
|
};
|
|
5098
5101
|
|
|
5099
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5102
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5100
5103
|
var position = _a.position;
|
|
5101
5104
|
return getWrapperFlexDirection(position);
|
|
5102
5105
|
}, function (_a) {
|
|
@@ -5106,7 +5109,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __ma
|
|
|
5106
5109
|
var disableHover = _a.disableHover;
|
|
5107
5110
|
return (disableHover ? 0 : 1);
|
|
5108
5111
|
});
|
|
5109
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5112
|
+
var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5110
5113
|
var position = _a.position;
|
|
5111
5114
|
return getContainerFlexDirection(position);
|
|
5112
5115
|
}, function (_a) {
|
|
@@ -5134,25 +5137,25 @@ var TooltipContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15
|
|
|
5134
5137
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5135
5138
|
return actual === expected ? margin : '0';
|
|
5136
5139
|
};
|
|
5137
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5140
|
+
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) {
|
|
5138
5141
|
var borderColor = _a.borderColor;
|
|
5139
5142
|
return borderColor;
|
|
5140
5143
|
}, function (_a) {
|
|
5141
5144
|
var backgroundColor = _a.backgroundColor;
|
|
5142
5145
|
return backgroundColor;
|
|
5143
5146
|
});
|
|
5144
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5147
|
+
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) {
|
|
5145
5148
|
var color = _a.color;
|
|
5146
5149
|
return color;
|
|
5147
5150
|
});
|
|
5148
5151
|
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"])));
|
|
5149
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5152
|
+
var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __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) {
|
|
5150
5153
|
var color = _a.color;
|
|
5151
5154
|
return color;
|
|
5152
5155
|
});
|
|
5153
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5154
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5155
|
-
var templateObject_1$
|
|
5156
|
+
var IconContainer$5 = newStyled.div(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
5157
|
+
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"])));
|
|
5158
|
+
var templateObject_1$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$q, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5156
5159
|
|
|
5157
5160
|
var useOnClickOutside = function (ref, handler) {
|
|
5158
5161
|
React$2.useEffect(function () {
|
|
@@ -5294,7 +5297,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5294
5297
|
};
|
|
5295
5298
|
}
|
|
5296
5299
|
};
|
|
5297
|
-
var Container$
|
|
5300
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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) {
|
|
5298
5301
|
var backgroundColor = _a.backgroundColor;
|
|
5299
5302
|
return backgroundColor;
|
|
5300
5303
|
}, function (_a) {
|
|
@@ -5316,7 +5319,7 @@ var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
5316
5319
|
var size = _a.size;
|
|
5317
5320
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5318
5321
|
});
|
|
5319
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5322
|
+
var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
5320
5323
|
var textColor = _a.textColor;
|
|
5321
5324
|
return textColor;
|
|
5322
5325
|
}, function (_a) {
|
|
@@ -5331,9 +5334,9 @@ var H3$3 = newStyled.h3(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5331
5334
|
var ClubOfferTag = function (_a) {
|
|
5332
5335
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5333
5336
|
var theme = useTheme();
|
|
5334
|
-
return (jsxRuntime.jsx(Container$
|
|
5337
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
5335
5338
|
};
|
|
5336
|
-
var templateObject_1$
|
|
5339
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5337
5340
|
|
|
5338
5341
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5339
5342
|
var _a, _b, _c;
|
|
@@ -5364,7 +5367,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5364
5367
|
};
|
|
5365
5368
|
}
|
|
5366
5369
|
};
|
|
5367
|
-
var Container$
|
|
5370
|
+
var Container$11 = 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) {
|
|
5368
5371
|
var backgroundColor = _a.backgroundColor;
|
|
5369
5372
|
return backgroundColor;
|
|
5370
5373
|
}, function (_a) {
|
|
@@ -5386,7 +5389,7 @@ var Container$10 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = _
|
|
|
5386
5389
|
var size = _a.size;
|
|
5387
5390
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5388
5391
|
});
|
|
5389
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5392
|
+
var H3$2 = 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) {
|
|
5390
5393
|
var textColor = _a.textColor;
|
|
5391
5394
|
return textColor;
|
|
5392
5395
|
}, function (_a) {
|
|
@@ -5401,9 +5404,9 @@ var H3$2 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __makeTemp
|
|
|
5401
5404
|
var DiscountTag = function (_a) {
|
|
5402
5405
|
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5403
5406
|
var theme = useTheme();
|
|
5404
|
-
return (jsxRuntime.jsx(Container$
|
|
5407
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
5405
5408
|
};
|
|
5406
|
-
var templateObject_1$
|
|
5409
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
5407
5410
|
|
|
5408
5411
|
var getStylesBySize$b = function (size, theme) {
|
|
5409
5412
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5445,8 +5448,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5445
5448
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5446
5449
|
}
|
|
5447
5450
|
};
|
|
5448
|
-
var Container
|
|
5449
|
-
var Price = newStyled.p(templateObject_2$
|
|
5451
|
+
var Container$10 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5452
|
+
var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5450
5453
|
var weight = _a.weight;
|
|
5451
5454
|
return (weight ? weight : '400');
|
|
5452
5455
|
}, function (_a) {
|
|
@@ -5470,7 +5473,7 @@ var Price = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __makeTemp
|
|
|
5470
5473
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5471
5474
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5472
5475
|
});
|
|
5473
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5476
|
+
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) {
|
|
5474
5477
|
var _b;
|
|
5475
5478
|
var size = _a.size;
|
|
5476
5479
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5501,11 +5504,11 @@ var PriceLabel = function (_a) {
|
|
|
5501
5504
|
: exports.ComponentSize.XSmall;
|
|
5502
5505
|
return (jsxRuntime.jsx(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));
|
|
5503
5506
|
};
|
|
5504
|
-
return (jsxRuntime.jsxs(Container
|
|
5507
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5505
5508
|
};
|
|
5506
|
-
var templateObject_1$
|
|
5509
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5507
5510
|
|
|
5508
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5511
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5509
5512
|
var PriceLabelV2 = function (_a) {
|
|
5510
5513
|
var _b;
|
|
5511
5514
|
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 ? exports.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"]);
|
|
@@ -5556,7 +5559,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5556
5559
|
var savetoString = saveto.toFixed(2);
|
|
5557
5560
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5558
5561
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5559
|
-
return (jsxRuntime.jsxs(Container
|
|
5562
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5560
5563
|
marginTop: '-5px',
|
|
5561
5564
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5562
5565
|
? finalPriceArray[0]
|
|
@@ -5574,11 +5577,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5574
5577
|
lineHeight: '22px',
|
|
5575
5578
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5576
5579
|
};
|
|
5577
|
-
var templateObject_1$
|
|
5580
|
+
var templateObject_1$1E;
|
|
5578
5581
|
|
|
5579
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5580
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5581
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5582
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5583
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5584
|
+
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"])));
|
|
5582
5585
|
var PriceLabelV3 = function (_a) {
|
|
5583
5586
|
var _b;
|
|
5584
5587
|
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 ? exports.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"]);
|
|
@@ -5587,7 +5590,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5587
5590
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
5588
5591
|
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
5589
5592
|
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
5590
|
-
var supportedCurrencies = ['
|
|
5593
|
+
var supportedCurrencies = ['A$', 'CA$', '£'];
|
|
5591
5594
|
var currencySymbol = '$';
|
|
5592
5595
|
if (typeof finalPrice === 'string') {
|
|
5593
5596
|
supportedCurrencies.forEach(function (availableCurrency) {
|
|
@@ -5633,7 +5636,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5633
5636
|
return null;
|
|
5634
5637
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5635
5638
|
};
|
|
5636
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container
|
|
5639
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$10, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5637
5640
|
marginTop: '-5px',
|
|
5638
5641
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5639
5642
|
marginTop: '-6px',
|
|
@@ -5649,10 +5652,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5649
5652
|
lineHeight: '22px',
|
|
5650
5653
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5651
5654
|
};
|
|
5652
|
-
var templateObject_1$
|
|
5655
|
+
var templateObject_1$1D, templateObject_2$13, templateObject_3$S;
|
|
5653
5656
|
|
|
5654
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5655
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5657
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5658
|
+
var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5656
5659
|
var selected = _a.selected, theme = _a.theme;
|
|
5657
5660
|
return selected
|
|
5658
5661
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5666,11 +5669,11 @@ var ContainerBase = newStyled.div(templateObject_2$10 || (templateObject_2$10 =
|
|
|
5666
5669
|
var theme = _a.theme;
|
|
5667
5670
|
return theme.colors.pallete.primary.color;
|
|
5668
5671
|
});
|
|
5669
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5672
|
+
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) {
|
|
5670
5673
|
var onClick = _a.onClick;
|
|
5671
5674
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5672
5675
|
});
|
|
5673
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5676
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5674
5677
|
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) {
|
|
5675
5678
|
var theme = _a.theme;
|
|
5676
5679
|
return theme.colors.shades[200].color;
|
|
@@ -5678,18 +5681,18 @@ var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p
|
|
|
5678
5681
|
var theme = _a.theme;
|
|
5679
5682
|
return theme.colors.pallete.primary.color;
|
|
5680
5683
|
});
|
|
5681
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5682
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5683
|
-
var BenefitText = newStyled(Text$
|
|
5684
|
-
var SubscriptionDetails = newStyled(Text$
|
|
5684
|
+
var BenefitsContainer = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5685
|
+
var Benefit = newStyled.div(templateObject_7$e || (templateObject_7$e = __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"])));
|
|
5686
|
+
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"])));
|
|
5687
|
+
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"])));
|
|
5685
5688
|
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"])));
|
|
5686
|
-
var DeliveryFrequencyLabel = newStyled(Text$
|
|
5689
|
+
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"])));
|
|
5687
5690
|
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) {
|
|
5688
5691
|
var selected = _a.selected, theme = _a.theme;
|
|
5689
5692
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5690
5693
|
});
|
|
5691
|
-
var Container
|
|
5692
|
-
var templateObject_1$
|
|
5694
|
+
var Container$$ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5695
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5693
5696
|
|
|
5694
5697
|
var radioIds = {
|
|
5695
5698
|
oneTime: {
|
|
@@ -5739,17 +5742,17 @@ var Autoship = function (_a) {
|
|
|
5739
5742
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5740
5743
|
};
|
|
5741
5744
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5742
|
-
return (jsxRuntime.jsxs(Container
|
|
5745
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5743
5746
|
? benefitsColor.selected
|
|
5744
5747
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5745
5748
|
};
|
|
5746
5749
|
|
|
5747
|
-
var Img = newStyled.img(templateObject_1$
|
|
5750
|
+
var Img = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
5748
5751
|
var Image$3 = function (_a) {
|
|
5749
5752
|
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;
|
|
5750
5753
|
return (jsxRuntime.jsx(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));
|
|
5751
5754
|
};
|
|
5752
|
-
var templateObject_1$
|
|
5755
|
+
var templateObject_1$1B;
|
|
5753
5756
|
|
|
5754
5757
|
var _a$2;
|
|
5755
5758
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5764,13 +5767,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5764
5767
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5765
5768
|
_a$2);
|
|
5766
5769
|
|
|
5767
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5768
|
-
var CustomerInfo = newStyled.div(templateObject_2
|
|
5769
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5770
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5770
|
+
var CustomerDetails = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
5771
|
+
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5772
|
+
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"])));
|
|
5773
|
+
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"])));
|
|
5771
5774
|
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"])));
|
|
5772
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5773
|
-
var templateObject_1$
|
|
5775
|
+
var ReviewDays = newStyled.span(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
5776
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$o, templateObject_6$k;
|
|
5774
5777
|
|
|
5775
5778
|
var NameWithStars = function (_a) {
|
|
5776
5779
|
var name = _a.name, size = _a.size;
|
|
@@ -5788,10 +5791,10 @@ var ResultFeedback = function (_a) {
|
|
|
5788
5791
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5789
5792
|
};
|
|
5790
5793
|
|
|
5791
|
-
var Container$
|
|
5792
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5793
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5794
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5794
|
+
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
5795
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5796
|
+
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; });
|
|
5797
|
+
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) {
|
|
5795
5798
|
var theme = _a.theme;
|
|
5796
5799
|
return theme.colors.pallete.secondary.color;
|
|
5797
5800
|
}, function (_a) {
|
|
@@ -5801,7 +5804,7 @@ var UserInfoText = newStyled.div(templateObject_4$C || (templateObject_4$C = __m
|
|
|
5801
5804
|
var theme = _a.theme, size = _a.size;
|
|
5802
5805
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5803
5806
|
});
|
|
5804
|
-
var templateObject_1$
|
|
5807
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
5805
5808
|
|
|
5806
5809
|
/* base styles & size variants */
|
|
5807
5810
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5876,10 +5879,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5876
5879
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5877
5880
|
var infoText = buildInfoText(name, age, months);
|
|
5878
5881
|
var Component = componentByVariant[variant];
|
|
5879
|
-
return (jsxRuntime.jsxs(Container$
|
|
5882
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5880
5883
|
};
|
|
5881
5884
|
|
|
5882
|
-
var Section = newStyled.div(templateObject_1$
|
|
5885
|
+
var Section = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5883
5886
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5884
5887
|
});
|
|
5885
5888
|
var CardHeader = function (_a) {
|
|
@@ -5890,16 +5893,16 @@ var CardFooter = function (_a) {
|
|
|
5890
5893
|
var children = _a.children;
|
|
5891
5894
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5892
5895
|
};
|
|
5893
|
-
var templateObject_1$
|
|
5896
|
+
var templateObject_1$1y;
|
|
5894
5897
|
|
|
5895
|
-
var Body = newStyled.div(templateObject_1$
|
|
5898
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5896
5899
|
var CardBody = function (_a) {
|
|
5897
5900
|
var children = _a.children;
|
|
5898
5901
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5899
5902
|
};
|
|
5900
|
-
var templateObject_1$
|
|
5903
|
+
var templateObject_1$1x;
|
|
5901
5904
|
|
|
5902
|
-
var Container$
|
|
5905
|
+
var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
5903
5906
|
var flex = _a.flex;
|
|
5904
5907
|
return flex &&
|
|
5905
5908
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5914,23 +5917,23 @@ var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __
|
|
|
5914
5917
|
var Card$1 = function (_a) {
|
|
5915
5918
|
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;
|
|
5916
5919
|
var theme = useTheme();
|
|
5917
|
-
return (jsxRuntime.jsx(Container$
|
|
5920
|
+
return (jsxRuntime.jsx(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));
|
|
5918
5921
|
};
|
|
5919
5922
|
var Card$2 = Object.assign(Card$1, {
|
|
5920
5923
|
Header: CardHeader,
|
|
5921
5924
|
Footer: CardFooter,
|
|
5922
5925
|
Body: CardBody,
|
|
5923
5926
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5927
|
+
var templateObject_1$1w;
|
|
5925
5928
|
|
|
5926
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5927
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5928
|
-
var TextLabel = newStyled(Text$
|
|
5929
|
+
var StyledWrapper = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
5930
|
+
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"])));
|
|
5931
|
+
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) {
|
|
5929
5932
|
var color = _a.color;
|
|
5930
5933
|
return color;
|
|
5931
5934
|
});
|
|
5932
|
-
var YouAreSaving = newStyled(Text$
|
|
5933
|
-
var templateObject_1$
|
|
5935
|
+
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"])));
|
|
5936
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
5934
5937
|
|
|
5935
5938
|
var Minimalistic = function (_a) {
|
|
5936
5939
|
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;
|
|
@@ -5938,28 +5941,28 @@ var Minimalistic = function (_a) {
|
|
|
5938
5941
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5939
5942
|
};
|
|
5940
5943
|
|
|
5941
|
-
var Container$
|
|
5942
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5943
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5944
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
5944
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5945
|
+
var Title$6 = newStyled.h1(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
5946
|
+
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; });
|
|
5947
|
+
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"])));
|
|
5945
5948
|
var Simple = function (_a) {
|
|
5946
5949
|
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;
|
|
5947
5950
|
var theme = useTheme();
|
|
5948
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
5951
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5949
5952
|
};
|
|
5950
|
-
var templateObject_1$
|
|
5953
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
5951
5954
|
|
|
5952
5955
|
var Bundle = {
|
|
5953
5956
|
Minimalistic: Minimalistic,
|
|
5954
5957
|
Simple: Simple,
|
|
5955
5958
|
};
|
|
5956
5959
|
|
|
5957
|
-
var Container$
|
|
5960
|
+
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
5958
5961
|
var displayBNPL = _a.displayBNPL;
|
|
5959
5962
|
return (displayBNPL ? 'flex' : 'none');
|
|
5960
5963
|
});
|
|
5961
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5962
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5964
|
+
var TextContainer$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
5965
|
+
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"])));
|
|
5963
5966
|
var BuyNowPayLater = function (_a) {
|
|
5964
5967
|
var _b;
|
|
5965
5968
|
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;
|
|
@@ -5969,43 +5972,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5969
5972
|
console.error('Icon', iconName, 'not found');
|
|
5970
5973
|
return null;
|
|
5971
5974
|
}
|
|
5972
|
-
return (jsxRuntime.jsx(Container$
|
|
5975
|
+
return (jsxRuntime.jsx(Container$X, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5973
5976
|
};
|
|
5974
|
-
var templateObject_1$
|
|
5977
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$M;
|
|
5975
5978
|
|
|
5976
|
-
var Text$
|
|
5979
|
+
var Text$6 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5977
5980
|
var Title$5 = function (_a) {
|
|
5978
5981
|
var title = _a.title;
|
|
5979
5982
|
var theme = useTheme();
|
|
5980
|
-
return jsxRuntime.jsx(Text$
|
|
5983
|
+
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5981
5984
|
};
|
|
5982
|
-
var templateObject_1$
|
|
5985
|
+
var templateObject_1$1s;
|
|
5983
5986
|
|
|
5984
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5987
|
+
var P$3 = newStyled.p(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
5985
5988
|
var Promo = function (_a) {
|
|
5986
5989
|
var text = _a.text;
|
|
5987
5990
|
var theme = useTheme();
|
|
5988
5991
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5989
5992
|
};
|
|
5990
|
-
var templateObject_1$
|
|
5993
|
+
var templateObject_1$1r;
|
|
5991
5994
|
|
|
5992
|
-
var Text$
|
|
5995
|
+
var Text$5 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
5993
5996
|
var Description$1 = function (_a) {
|
|
5994
5997
|
var text = _a.text;
|
|
5995
5998
|
var theme = useTheme();
|
|
5996
|
-
return jsxRuntime.jsx(Text$
|
|
5999
|
+
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5997
6000
|
};
|
|
5998
|
-
var templateObject_1$
|
|
6001
|
+
var templateObject_1$1q;
|
|
5999
6002
|
|
|
6000
|
-
var Container$
|
|
6003
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"); });
|
|
6001
6004
|
var CloseButton$1 = function (_a) {
|
|
6002
6005
|
var onClick = _a.onClick, size = _a.size;
|
|
6003
6006
|
var theme = useTheme();
|
|
6004
|
-
return (jsxRuntime.jsx(Container$
|
|
6007
|
+
return (jsxRuntime.jsx(Container$W, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6005
6008
|
};
|
|
6006
|
-
var templateObject_1$
|
|
6009
|
+
var templateObject_1$1p;
|
|
6007
6010
|
|
|
6008
|
-
var Text$
|
|
6011
|
+
var Text$4 = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
6009
6012
|
var backgroundColor = _a.backgroundColor;
|
|
6010
6013
|
return backgroundColor;
|
|
6011
6014
|
}, function (_a) {
|
|
@@ -6018,9 +6021,9 @@ var Text$6 = newStyled.h3(templateObject_1$1m || (templateObject_1$1m = __makeTe
|
|
|
6018
6021
|
var OfferBanner = function (_a) {
|
|
6019
6022
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6020
6023
|
var theme = useTheme();
|
|
6021
|
-
return (jsxRuntime.jsx(Text$
|
|
6024
|
+
return (jsxRuntime.jsx(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));
|
|
6022
6025
|
};
|
|
6023
|
-
var templateObject_1$
|
|
6026
|
+
var templateObject_1$1o;
|
|
6024
6027
|
|
|
6025
6028
|
var CartProductItem = {
|
|
6026
6029
|
Title: Title$5,
|
|
@@ -6030,20 +6033,20 @@ var CartProductItem = {
|
|
|
6030
6033
|
CloseButton: CloseButton$1,
|
|
6031
6034
|
};
|
|
6032
6035
|
|
|
6033
|
-
var Container$
|
|
6034
|
-
var MobileContainer = newStyled(Container$
|
|
6035
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6036
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6036
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6037
|
+
var MobileContainer = newStyled(Container$V)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6038
|
+
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"])));
|
|
6039
|
+
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"])));
|
|
6037
6040
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6038
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6039
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6040
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6041
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6042
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6043
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6041
6044
|
var ClubPriceLabel = function (_a) {
|
|
6042
6045
|
var clubPrice = _a.clubPrice;
|
|
6043
6046
|
var isMobile = useWindowDimensions().isMobile;
|
|
6044
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6047
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6045
6048
|
};
|
|
6046
|
-
var templateObject_1$
|
|
6049
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$n, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6047
6050
|
|
|
6048
6051
|
var Spacing = function (_a) {
|
|
6049
6052
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6051,10 +6054,10 @@ var Spacing = function (_a) {
|
|
|
6051
6054
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6052
6055
|
};
|
|
6053
6056
|
|
|
6054
|
-
var Container$
|
|
6055
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6056
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6057
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6057
|
+
var Container$U = newStyled('div')(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
6058
|
+
var Content$2 = newStyled('div')(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6059
|
+
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"])));
|
|
6060
|
+
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) {
|
|
6058
6061
|
var index = _a.index;
|
|
6059
6062
|
return "".concat(6 + 3 * index, "px");
|
|
6060
6063
|
}, function (_a) {
|
|
@@ -6063,14 +6066,14 @@ var Bar$2 = newStyled('div')(templateObject_4$y || (templateObject_4$y = __makeT
|
|
|
6063
6066
|
});
|
|
6064
6067
|
var StrengthBars = function (_a) {
|
|
6065
6068
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6066
|
-
return (jsxRuntime.jsxs(Container$
|
|
6069
|
+
return (jsxRuntime.jsxs(Container$U, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6067
6070
|
};
|
|
6068
|
-
var templateObject_1$
|
|
6071
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6069
6072
|
|
|
6070
|
-
var Container$
|
|
6071
|
-
var templateObject_1$
|
|
6073
|
+
var Container$T = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6074
|
+
var templateObject_1$1l;
|
|
6072
6075
|
|
|
6073
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6076
|
+
var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6074
6077
|
var marginRight = _a.marginRight;
|
|
6075
6078
|
return marginRight;
|
|
6076
6079
|
});
|
|
@@ -6082,11 +6085,11 @@ var StarList = function (_a) {
|
|
|
6082
6085
|
width: theme.component.stars.element[size].width,
|
|
6083
6086
|
height: theme.component.stars.element[size].height,
|
|
6084
6087
|
};
|
|
6085
|
-
return (jsxRuntime.jsx(Container$
|
|
6088
|
+
return (jsxRuntime.jsx(Container$T, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6086
6089
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6087
6090
|
}) }, void 0));
|
|
6088
6091
|
};
|
|
6089
|
-
var templateObject_1$
|
|
6092
|
+
var templateObject_1$1k;
|
|
6090
6093
|
|
|
6091
6094
|
/* base styles & size variants */
|
|
6092
6095
|
var LabelStyles = {
|
|
@@ -6127,8 +6130,8 @@ var LabelStyles = {
|
|
|
6127
6130
|
});
|
|
6128
6131
|
},
|
|
6129
6132
|
};
|
|
6130
|
-
var Container$
|
|
6131
|
-
var templateObject_1$
|
|
6133
|
+
var Container$S = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
6134
|
+
var templateObject_1$1j;
|
|
6132
6135
|
|
|
6133
6136
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6134
6137
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6148,7 +6151,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6148
6151
|
}),
|
|
6149
6152
|
];
|
|
6150
6153
|
});
|
|
6151
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6154
|
+
var RatingLabel = newStyled.span(templateObject_1$1i || (templateObject_1$1i = __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; });
|
|
6152
6155
|
var starsNumber = 5;
|
|
6153
6156
|
var Rating = function (_a) {
|
|
6154
6157
|
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
@@ -6169,14 +6172,14 @@ var Rating = function (_a) {
|
|
|
6169
6172
|
href: reviewsContainerId,
|
|
6170
6173
|
}
|
|
6171
6174
|
: {};
|
|
6172
|
-
return (jsxRuntime.jsxs(Container$
|
|
6175
|
+
return (jsxRuntime.jsxs(Container$S, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6173
6176
|
};
|
|
6174
|
-
var templateObject_1$
|
|
6177
|
+
var templateObject_1$1i;
|
|
6175
6178
|
|
|
6176
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6177
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6178
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6179
|
-
var PriceWithTagContainer = newStyled.span(templateObject_4$
|
|
6179
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6180
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6181
|
+
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"])));
|
|
6182
|
+
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"])));
|
|
6180
6183
|
var RegularPriceTag = function () {
|
|
6181
6184
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6182
6185
|
};
|
|
@@ -6225,11 +6228,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6225
6228
|
: exports.ComponentSize.XSmall;
|
|
6226
6229
|
return (jsxRuntime.jsx(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));
|
|
6227
6230
|
};
|
|
6228
|
-
return (jsxRuntime.jsxs(Container
|
|
6231
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6229
6232
|
? finalPriceArray[0]
|
|
6230
6233
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6231
6234
|
};
|
|
6232
|
-
var templateObject_1$
|
|
6235
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y;
|
|
6233
6236
|
|
|
6234
6237
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6235
6238
|
var width = _a.width, height = _a.height;
|
|
@@ -6239,10 +6242,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6239
6242
|
height: height,
|
|
6240
6243
|
});
|
|
6241
6244
|
});
|
|
6242
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6243
|
-
var Container$
|
|
6244
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6245
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6245
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6246
|
+
var Container$R = newStyled.a(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
6247
|
+
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"])));
|
|
6248
|
+
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; });
|
|
6246
6249
|
var getStylesBySize$9 = function (size) {
|
|
6247
6250
|
switch (size) {
|
|
6248
6251
|
case exports.ComponentSize.Medium:
|
|
@@ -6272,11 +6275,11 @@ var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m
|
|
|
6272
6275
|
var style = _a.style;
|
|
6273
6276
|
return style.width;
|
|
6274
6277
|
});
|
|
6275
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6278
|
+
var BottomTagContainer$5 = 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) {
|
|
6276
6279
|
var style = _a.style;
|
|
6277
6280
|
return style.width;
|
|
6278
6281
|
});
|
|
6279
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6282
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6280
6283
|
var ProductItemMobile = function (_a) {
|
|
6281
6284
|
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 ? {
|
|
6282
6285
|
display: false,
|
|
@@ -6333,9 +6336,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6333
6336
|
return jsx(Fragment, {}, void 0);
|
|
6334
6337
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6335
6338
|
};
|
|
6336
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6339
|
+
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));
|
|
6337
6340
|
};
|
|
6338
|
-
var templateObject_1$
|
|
6341
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6339
6342
|
|
|
6340
6343
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6341
6344
|
var width = _a.width, height = _a.height;
|
|
@@ -6345,10 +6348,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6345
6348
|
height: height,
|
|
6346
6349
|
});
|
|
6347
6350
|
});
|
|
6348
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6349
|
-
var Container$
|
|
6350
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6351
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6351
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __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; });
|
|
6352
|
+
var Container$Q = 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"])));
|
|
6353
|
+
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"])));
|
|
6354
|
+
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; });
|
|
6352
6355
|
var getStylesBySize$8 = function (size) {
|
|
6353
6356
|
switch (size) {
|
|
6354
6357
|
case exports.ComponentSize.Medium:
|
|
@@ -6378,11 +6381,11 @@ var TopTagContainer$4 = newStyled.div(templateObject_5$l || (templateObject_5$l
|
|
|
6378
6381
|
var style = _a.style;
|
|
6379
6382
|
return style.width;
|
|
6380
6383
|
});
|
|
6381
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_6$
|
|
6384
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_6$h || (templateObject_6$h = __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) {
|
|
6382
6385
|
var style = _a.style;
|
|
6383
6386
|
return style.width;
|
|
6384
6387
|
});
|
|
6385
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6388
|
+
var MarginTopContainer = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6386
6389
|
var ProductItemTK = function (_a) {
|
|
6387
6390
|
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 ? {
|
|
6388
6391
|
display: false,
|
|
@@ -6426,26 +6429,26 @@ var ProductItemTK = function (_a) {
|
|
|
6426
6429
|
: undefined }, void 0));
|
|
6427
6430
|
};
|
|
6428
6431
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6429
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6432
|
+
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 ? (
|
|
6430
6433
|
// @ts-ignore
|
|
6431
|
-
jsx(Text$
|
|
6434
|
+
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6432
6435
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6433
6436
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6434
6437
|
} }, { 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));
|
|
6435
6438
|
};
|
|
6436
|
-
var templateObject_1$
|
|
6439
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6437
6440
|
|
|
6438
|
-
var Container$
|
|
6441
|
+
var Container$P = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
6439
6442
|
function withProductGrid(ProductItemComponent, data) {
|
|
6440
6443
|
function WithProductGrid(props) {
|
|
6441
|
-
return (jsxRuntime.jsx(Container$
|
|
6444
|
+
return (jsxRuntime.jsx(Container$P, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6442
6445
|
}
|
|
6443
6446
|
/* istanbul ignore next */
|
|
6444
6447
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6445
6448
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6446
6449
|
return WithProductGrid;
|
|
6447
6450
|
}
|
|
6448
|
-
var templateObject_1$
|
|
6451
|
+
var templateObject_1$1e;
|
|
6449
6452
|
|
|
6450
6453
|
var Collection = {
|
|
6451
6454
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6492,14 +6495,14 @@ var OutOfStock = function (_a) {
|
|
|
6492
6495
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6493
6496
|
};
|
|
6494
6497
|
|
|
6495
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6496
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6497
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6498
|
-
var Span = newStyled.span(templateObject_4$
|
|
6498
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6499
|
+
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6500
|
+
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"])));
|
|
6501
|
+
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6499
6502
|
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"])));
|
|
6500
6503
|
var Label$2 = function (_a) {
|
|
6501
6504
|
var label = _a.label, values = _a.values;
|
|
6502
|
-
return (jsxRuntime.jsxs(Text$
|
|
6505
|
+
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6503
6506
|
};
|
|
6504
6507
|
var Option = function (_a) {
|
|
6505
6508
|
var value = _a.value, children = _a.children;
|
|
@@ -6514,23 +6517,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6514
6517
|
Option: Option,
|
|
6515
6518
|
OptionsContainer: OptionsContainer,
|
|
6516
6519
|
});
|
|
6517
|
-
var templateObject_1$
|
|
6520
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$k;
|
|
6518
6521
|
|
|
6519
|
-
var Container$
|
|
6522
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6520
6523
|
var borderColor = _a.borderColor;
|
|
6521
6524
|
return borderColor;
|
|
6522
6525
|
}, function (_a) {
|
|
6523
6526
|
var noStock = _a.noStock;
|
|
6524
6527
|
return (noStock ? '0.4' : '1');
|
|
6525
6528
|
});
|
|
6526
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6529
|
+
var Image$2 = newStyled.img(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6527
6530
|
var PatternSelector = function (_a) {
|
|
6528
6531
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6529
6532
|
var theme = useTheme();
|
|
6530
6533
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6531
|
-
return (jsxRuntime.jsx(Container$
|
|
6534
|
+
return (jsxRuntime.jsx(Container$O, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6532
6535
|
};
|
|
6533
|
-
var templateObject_1$
|
|
6536
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6534
6537
|
|
|
6535
6538
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6536
6539
|
if (options == null || options.length === 0) {
|
|
@@ -6589,21 +6592,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6589
6592
|
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));
|
|
6590
6593
|
};
|
|
6591
6594
|
|
|
6592
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6593
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6594
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6595
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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'); });
|
|
6596
|
+
var Col$1 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6597
|
+
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) {
|
|
6595
6598
|
return props.rightToLeft &&
|
|
6596
6599
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6597
6600
|
});
|
|
6598
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6601
|
+
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; });
|
|
6599
6602
|
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; });
|
|
6600
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6603
|
+
var FreeShipping = newStyled.span(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6601
6604
|
var CrossSellCheckbox = function (_a) {
|
|
6602
6605
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6603
6606
|
var theme = useTheme();
|
|
6604
6607
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6605
6608
|
};
|
|
6606
|
-
var templateObject_1$
|
|
6609
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6607
6610
|
|
|
6608
6611
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6609
6612
|
__proto__: null,
|
|
@@ -6631,7 +6634,7 @@ var sizeMapper = (_a = {},
|
|
|
6631
6634
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6632
6635
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6633
6636
|
_a);
|
|
6634
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6637
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6635
6638
|
var wide = _a.wide;
|
|
6636
6639
|
return (wide ? '100%' : 'fit-content');
|
|
6637
6640
|
}, function (_a) {
|
|
@@ -6653,8 +6656,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$18 || (templateObj
|
|
|
6653
6656
|
var theme = _a.theme;
|
|
6654
6657
|
return theme.colors.text.disabled;
|
|
6655
6658
|
});
|
|
6656
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6657
|
-
var templateObject_1$
|
|
6659
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6660
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
6658
6661
|
|
|
6659
6662
|
var BaseCTA = function (_a) {
|
|
6660
6663
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6721,26 +6724,26 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6721
6724
|
} }), void 0));
|
|
6722
6725
|
};
|
|
6723
6726
|
|
|
6724
|
-
var Container$
|
|
6725
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6726
|
-
var Text$
|
|
6727
|
-
var Details = newStyled.span(templateObject_4$
|
|
6727
|
+
var Container$N = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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; });
|
|
6728
|
+
var IconContainer$4 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6729
|
+
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; });
|
|
6730
|
+
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; });
|
|
6728
6731
|
var Note = function (_a) {
|
|
6729
6732
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6730
6733
|
var theme = useTheme();
|
|
6731
|
-
return (jsxRuntime.jsxs(Container$
|
|
6734
|
+
return (jsxRuntime.jsxs(Container$N, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6732
6735
|
};
|
|
6733
|
-
var templateObject_1$
|
|
6736
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t;
|
|
6734
6737
|
|
|
6735
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6738
|
+
var Title$2 = newStyled.h1(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
6736
6739
|
var theme = _a.theme;
|
|
6737
6740
|
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 ");
|
|
6738
6741
|
});
|
|
6739
|
-
var Line = newStyled.div(templateObject_2$
|
|
6740
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6742
|
+
var Line = newStyled.div(templateObject_2$O || (templateObject_2$O = __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; });
|
|
6743
|
+
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({
|
|
6741
6744
|
flexDirection: ['column', 'row'],
|
|
6742
6745
|
}));
|
|
6743
|
-
var Col = newStyled.div(templateObject_4$
|
|
6746
|
+
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({
|
|
6744
6747
|
margin: ['0', '0 1.25rem'],
|
|
6745
6748
|
marginBottom: ['1.875rem', '0'],
|
|
6746
6749
|
alignItems: ['center', 'flex-start'],
|
|
@@ -6752,13 +6755,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$i || (templateObject_5$i =
|
|
|
6752
6755
|
marginBottom: ['10px', '0'],
|
|
6753
6756
|
width: ['auto', '1.5rem'],
|
|
6754
6757
|
}));
|
|
6755
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6758
|
+
var SectionTitle = newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6756
6759
|
display: ['block', 'flex'],
|
|
6757
6760
|
}), function (_a) {
|
|
6758
6761
|
var theme = _a.theme;
|
|
6759
6762
|
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 ");
|
|
6760
6763
|
});
|
|
6761
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6764
|
+
var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __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) {
|
|
6762
6765
|
var theme = _a.theme;
|
|
6763
6766
|
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 ");
|
|
6764
6767
|
}, function (_a) {
|
|
@@ -6769,22 +6772,22 @@ var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __m
|
|
|
6769
6772
|
})
|
|
6770
6773
|
: '';
|
|
6771
6774
|
});
|
|
6772
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6775
|
+
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; });
|
|
6773
6776
|
var DeliveryDetails = function (_a) {
|
|
6774
6777
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6775
6778
|
var theme = useTheme();
|
|
6776
6779
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6777
6780
|
};
|
|
6778
|
-
var templateObject_1$
|
|
6781
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6779
6782
|
|
|
6780
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6783
|
+
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
6781
6784
|
var top = _a.top;
|
|
6782
6785
|
return top;
|
|
6783
6786
|
}, function (_a) {
|
|
6784
6787
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6785
6788
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6786
6789
|
});
|
|
6787
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6790
|
+
var Sidebar = newStyled.div(templateObject_2$N || (templateObject_2$N = __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) {
|
|
6788
6791
|
var height = _a.height;
|
|
6789
6792
|
return height;
|
|
6790
6793
|
}, function (_a) {
|
|
@@ -6831,20 +6834,20 @@ var Drawer = function (_a) {
|
|
|
6831
6834
|
}, [isOpen, onClose, onOpen]);
|
|
6832
6835
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(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;
|
|
6833
6836
|
};
|
|
6834
|
-
var templateObject_1$
|
|
6837
|
+
var templateObject_1$17, templateObject_2$N;
|
|
6835
6838
|
|
|
6836
6839
|
var TooltipArrow = function (_a) {
|
|
6837
6840
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6838
6841
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
6839
6842
|
};
|
|
6840
6843
|
|
|
6841
|
-
var List = newStyled.ul(templateObject_1$
|
|
6842
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6843
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6844
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
6844
|
+
var List = newStyled.ul(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6845
|
+
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
6846
|
+
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"])));
|
|
6847
|
+
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"])));
|
|
6845
6848
|
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; });
|
|
6846
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6847
|
-
var templateObject_1$
|
|
6849
|
+
var DropdownItem = newStyled.li(templateObject_6$e || (templateObject_6$e = __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; });
|
|
6850
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6848
6851
|
|
|
6849
6852
|
var DropdownListIcons = function (_a) {
|
|
6850
6853
|
var items = _a.items;
|
|
@@ -6857,13 +6860,13 @@ var Dropdown = function (_a) {
|
|
|
6857
6860
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6858
6861
|
};
|
|
6859
6862
|
|
|
6860
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6861
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6862
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6863
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
6863
|
+
var DropdownContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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"])));
|
|
6864
|
+
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
6865
|
+
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6866
|
+
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"])));
|
|
6864
6867
|
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"])));
|
|
6865
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6866
|
-
var templateObject_1$
|
|
6868
|
+
var DropdownOption = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
6869
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6867
6870
|
|
|
6868
6871
|
var SizeDropdown = function (_a) {
|
|
6869
6872
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6886,10 +6889,10 @@ var SizeDropdown = function (_a) {
|
|
|
6886
6889
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(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: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6887
6890
|
};
|
|
6888
6891
|
|
|
6889
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6890
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6891
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6892
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
6892
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
6893
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$K || (templateObject_2$K = __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; });
|
|
6894
|
+
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"])));
|
|
6895
|
+
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"])));
|
|
6893
6896
|
var DropdownDialog = function (_a) {
|
|
6894
6897
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
6895
6898
|
var theme = useTheme$1();
|
|
@@ -6898,7 +6901,7 @@ var DropdownDialog = function (_a) {
|
|
|
6898
6901
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6899
6902
|
}) }), void 0) }), void 0));
|
|
6900
6903
|
};
|
|
6901
|
-
var templateObject_1$
|
|
6904
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
6902
6905
|
|
|
6903
6906
|
function FilteringDropdown(_a) {
|
|
6904
6907
|
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;
|
|
@@ -6931,29 +6934,29 @@ function FilteringDropdown(_a) {
|
|
|
6931
6934
|
}) }, void 0)] }), void 0));
|
|
6932
6935
|
}
|
|
6933
6936
|
|
|
6934
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6935
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6936
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6937
|
-
var Container$
|
|
6937
|
+
var Title$1 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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; });
|
|
6938
|
+
var H3 = newStyled.h3(templateObject_2$J || (templateObject_2$J = __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; });
|
|
6939
|
+
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"])));
|
|
6940
|
+
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'); });
|
|
6938
6941
|
var Accordion = function (_a) {
|
|
6939
6942
|
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;
|
|
6940
6943
|
var theme = useTheme();
|
|
6941
6944
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6942
|
-
return (jsxRuntime.jsxs(Container$
|
|
6945
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6943
6946
|
};
|
|
6944
|
-
var templateObject_1$
|
|
6947
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z, templateObject_4$o;
|
|
6945
6948
|
|
|
6946
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6947
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6948
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6949
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
6949
|
+
var SectionContent = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
6950
|
+
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
6951
|
+
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"])));
|
|
6952
|
+
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"])));
|
|
6950
6953
|
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; });
|
|
6951
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6952
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6953
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6954
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
6954
|
+
var FilterLink = newStyled.a(templateObject_6$c || (templateObject_6$c = __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; });
|
|
6955
|
+
var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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'); });
|
|
6956
|
+
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; });
|
|
6957
|
+
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"])));
|
|
6955
6958
|
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"])));
|
|
6956
|
-
var templateObject_1$
|
|
6959
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6957
6960
|
|
|
6958
6961
|
var getStylesBySize$7 = function (size, theme) {
|
|
6959
6962
|
switch (size) {
|
|
@@ -7018,9 +7021,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7018
7021
|
} }), id: id }, void 0));
|
|
7019
7022
|
};
|
|
7020
7023
|
|
|
7021
|
-
var UL = newStyled.ul(templateObject_1
|
|
7022
|
-
var LI = newStyled.li(templateObject_2$
|
|
7023
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7024
|
+
var UL = newStyled.ul(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7025
|
+
var LI = newStyled.li(templateObject_2$H || (templateObject_2$H = __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; });
|
|
7026
|
+
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"])));
|
|
7024
7027
|
var Tags = function (_a) {
|
|
7025
7028
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7026
7029
|
var theme = useTheme();
|
|
@@ -7028,7 +7031,7 @@ var Tags = function (_a) {
|
|
|
7028
7031
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7029
7032
|
}) }), void 0));
|
|
7030
7033
|
};
|
|
7031
|
-
var templateObject_1
|
|
7034
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$x;
|
|
7032
7035
|
|
|
7033
7036
|
var Filters = function (_a) {
|
|
7034
7037
|
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;
|
|
@@ -7164,8 +7167,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7164
7167
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7165
7168
|
};
|
|
7166
7169
|
|
|
7167
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7168
|
-
var Container$
|
|
7170
|
+
var Wrapper$4 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
7171
|
+
var Container$L = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
7169
7172
|
var FitGuarantee = function (_a) {
|
|
7170
7173
|
var _b;
|
|
7171
7174
|
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;
|
|
@@ -7176,17 +7179,17 @@ var FitGuarantee = function (_a) {
|
|
|
7176
7179
|
console.error('Icon', iconName, 'not found');
|
|
7177
7180
|
return null;
|
|
7178
7181
|
}
|
|
7179
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7182
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$L, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7180
7183
|
margin: '0.1rem 0',
|
|
7181
7184
|
width: '100%',
|
|
7182
7185
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7183
7186
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7184
|
-
} }, { children: title }), void 0), jsxRuntime.jsx(Text$
|
|
7187
|
+
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7185
7188
|
};
|
|
7186
|
-
var templateObject_1$
|
|
7189
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7187
7190
|
|
|
7188
|
-
var Container$
|
|
7189
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7191
|
+
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"])));
|
|
7192
|
+
var P$2 = newStyled.p(templateObject_2$F || (templateObject_2$F = __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; });
|
|
7190
7193
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7191
7194
|
border: 'none',
|
|
7192
7195
|
background: 'transparent',
|
|
@@ -7199,26 +7202,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7199
7202
|
var FitPredictor = function (_a) {
|
|
7200
7203
|
var onClick = _a.onClick;
|
|
7201
7204
|
var theme = useTheme();
|
|
7202
|
-
return (jsxs(Container$
|
|
7205
|
+
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));
|
|
7203
7206
|
};
|
|
7204
|
-
var templateObject_1
|
|
7205
|
-
|
|
7206
|
-
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) {
|
|
7207
|
-
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7208
|
-
return borderRadiusVariant &&
|
|
7209
|
-
"\nborder-radius: 20px;\n";
|
|
7210
|
-
}, function (_a) {
|
|
7211
|
-
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
7212
|
-
return selected
|
|
7213
|
-
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
7214
|
-
: 'inherit';
|
|
7215
|
-
});
|
|
7216
|
-
var ImageSmallPreview = function (_a) {
|
|
7217
|
-
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;
|
|
7218
|
-
var theme = useTheme();
|
|
7219
|
-
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7220
|
-
};
|
|
7221
|
-
var templateObject_1$Y;
|
|
7207
|
+
var templateObject_1$$, templateObject_2$F;
|
|
7222
7208
|
|
|
7223
7209
|
var Button$6 = newStyled.button(function () { return ({
|
|
7224
7210
|
background: 'transparent',
|
|
@@ -11462,14 +11448,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11462
11448
|
return Slider;
|
|
11463
11449
|
}(React__default["default"].Component);
|
|
11464
11450
|
|
|
11465
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11451
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
11466
11452
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11467
11453
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11468
11454
|
}, function (_a) {
|
|
11469
11455
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11470
11456
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11471
11457
|
});
|
|
11472
|
-
var templateObject_1$
|
|
11458
|
+
var templateObject_1$_;
|
|
11473
11459
|
|
|
11474
11460
|
var getStylesBySize$6 = function (size) {
|
|
11475
11461
|
// rem units
|
|
@@ -11528,9 +11514,26 @@ var SliderNavigation = function (_a) {
|
|
|
11528
11514
|
} }, { 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));
|
|
11529
11515
|
};
|
|
11530
11516
|
|
|
11531
|
-
var
|
|
11532
|
-
var
|
|
11533
|
-
|
|
11517
|
+
var Image$1 = newStyled.img(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
11518
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11519
|
+
return borderRadiusVariant &&
|
|
11520
|
+
"\nborder-radius: 20px;\n";
|
|
11521
|
+
}, function (_a) {
|
|
11522
|
+
var selected = _a.selected, theme = _a.theme, previewImgBorderColor = _a.previewImgBorderColor;
|
|
11523
|
+
return selected
|
|
11524
|
+
? "0.1rem solid ".concat(previewImgBorderColor ? previewImgBorderColor : theme.colors.shades['700'].color)
|
|
11525
|
+
: 'inherit';
|
|
11526
|
+
});
|
|
11527
|
+
var ImageSmallPreview = function (_a) {
|
|
11528
|
+
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;
|
|
11529
|
+
var theme = useTheme();
|
|
11530
|
+
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11531
|
+
};
|
|
11532
|
+
var templateObject_1$Z;
|
|
11533
|
+
|
|
11534
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11535
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11536
|
+
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) {
|
|
11534
11537
|
var position = _a.position;
|
|
11535
11538
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11536
11539
|
}, function (_a) {
|
|
@@ -11538,11 +11541,11 @@ var Container$I = newStyled.div(templateObject_3$v || (templateObject_3$v = __ma
|
|
|
11538
11541
|
return hasOverflowArrows &&
|
|
11539
11542
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11540
11543
|
});
|
|
11541
|
-
var Button$5 = newStyled.button(templateObject_4$
|
|
11544
|
+
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"])));
|
|
11542
11545
|
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"])));
|
|
11543
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11544
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11545
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11546
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
11547
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
11548
|
+
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"])));
|
|
11546
11549
|
var ImagePreviewList = function (_a) {
|
|
11547
11550
|
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;
|
|
11548
11551
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11553,13 +11556,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11553
11556
|
var element = document.querySelector(".imageListContainer");
|
|
11554
11557
|
element.scrollBy(0, 200);
|
|
11555
11558
|
};
|
|
11556
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11559
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$J, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11557
11560
|
arrowWidth: 0.75,
|
|
11558
11561
|
arrowHeight: 1.25,
|
|
11559
11562
|
arrowPadding: 1.625,
|
|
11560
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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.
|
|
11563
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11561
11564
|
};
|
|
11562
|
-
var templateObject_1$
|
|
11565
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11563
11566
|
|
|
11564
11567
|
var propTypes = {exports: {}};
|
|
11565
11568
|
|
|
@@ -13152,7 +13155,63 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13152
13155
|
afterZoomOut: PropTypes.func
|
|
13153
13156
|
} : {};
|
|
13154
13157
|
|
|
13155
|
-
var
|
|
13158
|
+
var ProgressContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __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 transition: opacity 0.3s ease-in-out;\n opacity: ", ";\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 transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13159
|
+
var ProgressFiller = newStyled.div(templateObject_2$D || (templateObject_2$D = __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; });
|
|
13160
|
+
var templateObject_1$X, templateObject_2$D;
|
|
13161
|
+
|
|
13162
|
+
var ProgressBar$1 = function (_a) {
|
|
13163
|
+
var progress = _a.progress, hide = _a.hide;
|
|
13164
|
+
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13165
|
+
};
|
|
13166
|
+
|
|
13167
|
+
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"])));
|
|
13168
|
+
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13169
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
13170
|
+
var PlayContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
13171
|
+
var PauseContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __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"])));
|
|
13172
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d;
|
|
13173
|
+
|
|
13174
|
+
var Video$1 = function (_a) {
|
|
13175
|
+
var _b, _c, _d, _e;
|
|
13176
|
+
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13177
|
+
var videoRef = React$2.useRef(null);
|
|
13178
|
+
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13179
|
+
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
13180
|
+
var _h = React$2.useState(0), videoProgress = _h[0], setVideoProgress = _h[1];
|
|
13181
|
+
var _j = React$2.useState(false), debouncePlay = _j[0], setDebouncePlay = _j[1];
|
|
13182
|
+
var isStarted = videoProgress > 0;
|
|
13183
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13184
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13185
|
+
var handlePlayClick = function () {
|
|
13186
|
+
if (videoRef.current && !debouncePlay) {
|
|
13187
|
+
setDebouncePlay(true);
|
|
13188
|
+
videoRef.current
|
|
13189
|
+
.play()
|
|
13190
|
+
.then(function () {
|
|
13191
|
+
setIsPlaying(true);
|
|
13192
|
+
setDebouncePlay(false);
|
|
13193
|
+
})
|
|
13194
|
+
.catch(function (error) {
|
|
13195
|
+
console.error('Error playing video:', error);
|
|
13196
|
+
setDebouncePlay(false);
|
|
13197
|
+
});
|
|
13198
|
+
}
|
|
13199
|
+
};
|
|
13200
|
+
var handlePauseClick = function () {
|
|
13201
|
+
if (videoRef.current && isPlaying) {
|
|
13202
|
+
videoRef.current.pause();
|
|
13203
|
+
setIsPlaying(false);
|
|
13204
|
+
}
|
|
13205
|
+
};
|
|
13206
|
+
var onTimeUpdate = function () {
|
|
13207
|
+
if (videoRef.current) {
|
|
13208
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
13209
|
+
}
|
|
13210
|
+
};
|
|
13211
|
+
return (jsxRuntime.jsxs(Container$I, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(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: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13212
|
+
};
|
|
13213
|
+
|
|
13214
|
+
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) {
|
|
13156
13215
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13157
13216
|
return borderRadiusVariant &&
|
|
13158
13217
|
"\n border-radius: 40px;\n ";
|
|
@@ -13160,18 +13219,17 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13160
13219
|
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'); });
|
|
13161
13220
|
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"])));
|
|
13162
13221
|
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"])));
|
|
13163
|
-
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"])));
|
|
13164
|
-
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"])));
|
|
13165
|
-
var Text$4 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13166
13222
|
var ImageProductWithTags$1 = function (_a) {
|
|
13167
|
-
var _b
|
|
13168
|
-
var
|
|
13169
|
-
|
|
13170
|
-
|
|
13223
|
+
var _b;
|
|
13224
|
+
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;
|
|
13225
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13226
|
+
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13227
|
+
return (jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13228
|
+
alt: content.alt,
|
|
13171
13229
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13172
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)),
|
|
13230
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13173
13231
|
};
|
|
13174
|
-
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k
|
|
13232
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k;
|
|
13175
13233
|
|
|
13176
13234
|
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"])));
|
|
13177
13235
|
var ProductGallery = function (_a) {
|
|
@@ -13183,7 +13241,7 @@ var ProductGallery = function (_a) {
|
|
|
13183
13241
|
}, [initialValue]);
|
|
13184
13242
|
return (jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13185
13243
|
setSelectedImage(value);
|
|
13186
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, {
|
|
13244
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13187
13245
|
};
|
|
13188
13246
|
var templateObject_1$U;
|
|
13189
13247
|
|
|
@@ -13299,7 +13357,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13299
13357
|
textAlign: 'center',
|
|
13300
13358
|
lineHeight: '18px',
|
|
13301
13359
|
};
|
|
13302
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$E, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$
|
|
13360
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$E, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(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));
|
|
13303
13361
|
};
|
|
13304
13362
|
|
|
13305
13363
|
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'); });
|
|
@@ -13312,7 +13370,7 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13312
13370
|
var ImageCardWithDescription = function (_a) {
|
|
13313
13371
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13314
13372
|
var isMobile = useWindowDimensions().isMobile;
|
|
13315
|
-
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$
|
|
13373
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13316
13374
|
};
|
|
13317
13375
|
var templateObject_1$R, templateObject_2$A, templateObject_3$t;
|
|
13318
13376
|
|
|
@@ -13415,8 +13473,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13415
13473
|
var theme = _a.theme;
|
|
13416
13474
|
return theme.component.input.lineHeight;
|
|
13417
13475
|
});
|
|
13418
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13419
|
-
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$
|
|
13476
|
+
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"])));
|
|
13477
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13420
13478
|
|
|
13421
13479
|
var BaseInput = function (_a) {
|
|
13422
13480
|
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"]);
|
|
@@ -13541,12 +13599,8 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13541
13599
|
// max-height: 31.875rem;
|
|
13542
13600
|
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'); });
|
|
13543
13601
|
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"])));
|
|
13544
|
-
var
|
|
13545
|
-
var
|
|
13546
|
-
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"])));
|
|
13547
|
-
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13548
|
-
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"])));
|
|
13549
|
-
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"])));
|
|
13602
|
+
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"])));
|
|
13603
|
+
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"])));
|
|
13550
13604
|
var settings$1 = {
|
|
13551
13605
|
dots: true,
|
|
13552
13606
|
infinite: false,
|
|
@@ -13556,11 +13610,11 @@ var settings$1 = {
|
|
|
13556
13610
|
initialSlide: 0,
|
|
13557
13611
|
};
|
|
13558
13612
|
var ImageProductWithTags = function (_a) {
|
|
13559
|
-
var
|
|
13613
|
+
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;
|
|
13560
13614
|
var slick = React$2.useRef(null);
|
|
13561
13615
|
var sliderWrapper = React$2.useRef(null);
|
|
13562
|
-
|
|
13563
|
-
var _c = React$2.useState(false)
|
|
13616
|
+
React$2.useRef(null);
|
|
13617
|
+
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13564
13618
|
usePreventVerticalScroll$1(sliderWrapper);
|
|
13565
13619
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13566
13620
|
var _a;
|
|
@@ -13585,23 +13639,23 @@ var ImageProductWithTags = function (_a) {
|
|
|
13585
13639
|
React$2.useEffect(function () {
|
|
13586
13640
|
var _a;
|
|
13587
13641
|
if (selectedValue) {
|
|
13588
|
-
var matchingIndex =
|
|
13642
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
13589
13643
|
if (matchingIndex !== -1) {
|
|
13590
13644
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
13591
13645
|
}
|
|
13592
13646
|
}
|
|
13593
|
-
}, [
|
|
13594
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children:
|
|
13647
|
+
}, [contents, selectedValue]);
|
|
13648
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13595
13649
|
var _a;
|
|
13596
|
-
var activeSlide =
|
|
13650
|
+
var activeSlide = contents[e];
|
|
13597
13651
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13598
|
-
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.
|
|
13652
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13599
13653
|
autoplay ? _playVideo() : _stopVideo();
|
|
13600
|
-
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children:
|
|
13601
|
-
var _a
|
|
13602
|
-
|
|
13603
|
-
|
|
13604
|
-
|
|
13654
|
+
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13655
|
+
var _a;
|
|
13656
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13657
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13658
|
+
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13605
13659
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13606
13660
|
};
|
|
13607
13661
|
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
@@ -13639,12 +13693,12 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13639
13693
|
};
|
|
13640
13694
|
}, [preventTouch, ref, touchStart]);
|
|
13641
13695
|
}
|
|
13642
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b
|
|
13696
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b;
|
|
13643
13697
|
|
|
13644
13698
|
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"])));
|
|
13645
13699
|
var ProductGalleryMobile = function (_a) {
|
|
13646
13700
|
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;
|
|
13647
|
-
return (jsxRuntime.jsx(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductWithTags, {
|
|
13701
|
+
return (jsxRuntime.jsx(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13648
13702
|
};
|
|
13649
13703
|
var templateObject_1$J;
|
|
13650
13704
|
|
|
@@ -13957,7 +14011,7 @@ var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3
|
|
|
13957
14011
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13958
14012
|
var _b, _c;
|
|
13959
14013
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13960
|
-
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.
|
|
14014
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
13961
14015
|
});
|
|
13962
14016
|
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13963
14017
|
|
|
@@ -14042,7 +14096,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14042
14096
|
React$2.useEffect(function () {
|
|
14043
14097
|
var _a;
|
|
14044
14098
|
if (selectedValue) {
|
|
14045
|
-
var matchingIndex = images.findIndex(function (image) { return image.
|
|
14099
|
+
var matchingIndex = images.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14046
14100
|
if (matchingIndex !== -1) {
|
|
14047
14101
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14048
14102
|
}
|
|
@@ -14052,11 +14106,11 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14052
14106
|
var _a;
|
|
14053
14107
|
var activeSlide = images[e];
|
|
14054
14108
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14055
|
-
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.
|
|
14109
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14056
14110
|
autoplay ? _playVideo() : _stopVideo();
|
|
14057
14111
|
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14058
14112
|
var _a, _b;
|
|
14059
|
-
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.
|
|
14113
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14060
14114
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14061
14115
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14062
14116
|
}) }), void 0) }), void 0)] }, void 0));
|
|
@@ -18175,15 +18229,15 @@ var PackCard = function (_a) {
|
|
|
18175
18229
|
.then(function (icon) { return setIcon(icon); })
|
|
18176
18230
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18177
18231
|
}, [pack.meta.icon]);
|
|
18178
|
-
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
18232
|
+
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18179
18233
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18180
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$
|
|
18234
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18181
18235
|
locale: 'en-US',
|
|
18182
18236
|
currency: currencyCode || 'USD',
|
|
18183
|
-
}) }), void 0), jsxRuntime.jsxs(Text$
|
|
18237
|
+
}) }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
18184
18238
|
locale: 'en-US',
|
|
18185
18239
|
currency: currencyCode || 'USD',
|
|
18186
|
-
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$
|
|
18240
|
+
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
18187
18241
|
locale: 'en-US',
|
|
18188
18242
|
currency: currencyCode || 'USD',
|
|
18189
18243
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -18746,7 +18800,7 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
18746
18800
|
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"])));
|
|
18747
18801
|
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"])));
|
|
18748
18802
|
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"])));
|
|
18749
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18803
|
+
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"])));
|
|
18750
18804
|
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"])));
|
|
18751
18805
|
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) {
|
|
18752
18806
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18756,7 +18810,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18756
18810
|
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;
|
|
18757
18811
|
var starsNumber = 5;
|
|
18758
18812
|
var theme = useTheme();
|
|
18759
|
-
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$
|
|
18813
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18760
18814
|
};
|
|
18761
18815
|
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18762
18816
|
|
|
@@ -18816,7 +18870,7 @@ var Description = newStyled.div({
|
|
|
18816
18870
|
var ProductItem = function (_a) {
|
|
18817
18871
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18818
18872
|
var theme = useTheme();
|
|
18819
|
-
return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$
|
|
18873
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18820
18874
|
};
|
|
18821
18875
|
var templateObject_1$m;
|
|
18822
18876
|
|
|
@@ -18827,7 +18881,7 @@ var Container$c = newStyled.div({
|
|
|
18827
18881
|
});
|
|
18828
18882
|
var Footer = function (_a) {
|
|
18829
18883
|
var text = _a.text, onClick = _a.onClick;
|
|
18830
|
-
return (jsxRuntime.jsx(Container$c, { children: jsxRuntime.jsx(Text$
|
|
18884
|
+
return (jsxRuntime.jsx(Container$c, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18831
18885
|
};
|
|
18832
18886
|
|
|
18833
18887
|
var Ul = newStyled.ul({
|
|
@@ -18857,7 +18911,7 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18857
18911
|
var ResultsPanel = function (_a) {
|
|
18858
18912
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18859
18913
|
var theme = useTheme();
|
|
18860
|
-
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$
|
|
18914
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18861
18915
|
};
|
|
18862
18916
|
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18863
18917
|
|
|
@@ -18970,7 +19024,7 @@ var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
18970
19024
|
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"])));
|
|
18971
19025
|
var SearchNavigation = function (_a) {
|
|
18972
19026
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18973
|
-
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsxs(Text$
|
|
19027
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
18974
19028
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18975
19029
|
}) }, void 0)] }, void 0));
|
|
18976
19030
|
};
|
|
@@ -19110,7 +19164,7 @@ var SizeSelector = function (_a) {
|
|
|
19110
19164
|
display: 'flex',
|
|
19111
19165
|
flexDirection: inline ? 'row' : 'column',
|
|
19112
19166
|
alignItems: inline ? 'center' : 'start',
|
|
19113
|
-
} }, { children: [jsxs(Text$
|
|
19167
|
+
} }, { 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) {
|
|
19114
19168
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
19115
19169
|
return (jsx(SelectorSecondary, { css: {
|
|
19116
19170
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -19287,7 +19341,7 @@ var ImageVideo = function (_a) {
|
|
|
19287
19341
|
var handleOnClick = function () {
|
|
19288
19342
|
setOpened(true);
|
|
19289
19343
|
};
|
|
19290
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$
|
|
19344
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", style: {
|
|
19291
19345
|
position: 'absolute',
|
|
19292
19346
|
top: '10px',
|
|
19293
19347
|
right: '10px',
|
|
@@ -19309,12 +19363,12 @@ var TextWithImage = function (_a) {
|
|
|
19309
19363
|
var _b, _c, _d, _e;
|
|
19310
19364
|
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"]);
|
|
19311
19365
|
var isMobile = useWindowDimensions().isMobile;
|
|
19312
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
19366
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$7, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
19313
19367
|
? titleStyle
|
|
19314
19368
|
: {
|
|
19315
19369
|
color: '#000000',
|
|
19316
19370
|
textAlign: 'center',
|
|
19317
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
19371
|
+
} }, { children: title }), void 0)) : (jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
19318
19372
|
? titleStyle
|
|
19319
19373
|
: {
|
|
19320
19374
|
color: '#000000',
|
|
@@ -19324,7 +19378,7 @@ var TextWithImage = function (_a) {
|
|
|
19324
19378
|
// @ts-ignore
|
|
19325
19379
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19326
19380
|
};
|
|
19327
|
-
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$
|
|
19381
|
+
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19328
19382
|
backgroundColor: props.btnBGColor,
|
|
19329
19383
|
color: '#ffffff',
|
|
19330
19384
|
border: props.btnBGColor,
|
|
@@ -19402,7 +19456,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19402
19456
|
var theme = _a.theme;
|
|
19403
19457
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19404
19458
|
});
|
|
19405
|
-
var TotalLabel = newStyled(Text$
|
|
19459
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19406
19460
|
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;
|
|
19407
19461
|
|
|
19408
19462
|
var Total = function (_a) {
|
|
@@ -19563,7 +19617,7 @@ var getDefaultCountdown = function () {
|
|
|
19563
19617
|
var HurryUp = function (_a) {
|
|
19564
19618
|
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"]);
|
|
19565
19619
|
var theme = useTheme();
|
|
19566
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$
|
|
19620
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19567
19621
|
};
|
|
19568
19622
|
|
|
19569
19623
|
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) {
|
|
@@ -19690,7 +19744,7 @@ exports.StarList = StarList;
|
|
|
19690
19744
|
exports.StrengthBars = StrengthBars;
|
|
19691
19745
|
exports.Tab = Tab;
|
|
19692
19746
|
exports.Tabs = Tabs;
|
|
19693
|
-
exports.Text = Text$
|
|
19747
|
+
exports.Text = Text$7;
|
|
19694
19748
|
exports.TextButton = TextButton;
|
|
19695
19749
|
exports.TextWithImage = TextWithImage;
|
|
19696
19750
|
exports.ThemeProvider = ThemeProvider;
|