@trafilea/afrodita-components 6.8.12 → 6.8.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +2 -1
- package/build/index.d.ts +182 -151
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +770 -645
- package/build/index.esm.js.map +1 -1
- package/build/index.js +770 -644
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thebodcon.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$
|
|
3154
|
+
var Container$1c = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
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$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1Y;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X = __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$1V || (templateObject_1$1V
|
|
|
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$1h || (templateObject_2$1h = __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$1g || (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$1X, templateObject_2$1h;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -3418,6 +3418,8 @@ var Share = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, prop
|
|
|
3418
3418
|
|
|
3419
3419
|
var SignOut = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/signout" }), void 0); };
|
|
3420
3420
|
|
|
3421
|
+
var SignOutLight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/signout_light" }), void 0)); };
|
|
3422
|
+
|
|
3421
3423
|
var Trash = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/trash" }), void 0); };
|
|
3422
3424
|
|
|
3423
3425
|
var Warning = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/warning" }), void 0); };
|
|
@@ -3461,6 +3463,7 @@ var Actions = /*#__PURE__*/Object.freeze({
|
|
|
3461
3463
|
SettingsSolid: SettingsSolid,
|
|
3462
3464
|
Share: Share,
|
|
3463
3465
|
SignOut: SignOut,
|
|
3466
|
+
SignOutLight: SignOutLight,
|
|
3464
3467
|
Trash: Trash,
|
|
3465
3468
|
Warning: Warning
|
|
3466
3469
|
});
|
|
@@ -3630,81 +3633,87 @@ var Download = /*#__PURE__*/Object.freeze({
|
|
|
3630
3633
|
GooglePlay: GooglePlay
|
|
3631
3634
|
});
|
|
3632
3635
|
|
|
3633
|
-
var
|
|
3636
|
+
var BlowingKiss = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/blowing_kiss" }), void 0); };
|
|
3634
3637
|
|
|
3635
|
-
var
|
|
3638
|
+
var Frowning = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/frowning" }), void 0); };
|
|
3636
3639
|
|
|
3637
3640
|
var Grinning = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/grinning" }), void 0); };
|
|
3638
3641
|
|
|
3639
3642
|
var GrinningWithSweat = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/grinning_with_sweat" }), void 0)); };
|
|
3640
3643
|
|
|
3641
|
-
var
|
|
3644
|
+
var Relieved = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/relieved" }), void 0); };
|
|
3642
3645
|
|
|
3643
|
-
var
|
|
3646
|
+
var SmilingV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v2" }), void 0); };
|
|
3644
3647
|
|
|
3645
|
-
var
|
|
3648
|
+
var SmilingV3 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v3" }), void 0); };
|
|
3649
|
+
|
|
3650
|
+
var Thinking = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "emoji/thinking" }), void 0); };
|
|
3646
3651
|
|
|
3647
3652
|
var Emoji = /*#__PURE__*/Object.freeze({
|
|
3648
3653
|
__proto__: null,
|
|
3649
|
-
Thinking: Thinking,
|
|
3650
|
-
SmilingV2: SmilingV2,
|
|
3651
|
-
Grinning: Grinning,
|
|
3652
|
-
GrinningWithSweat: GrinningWithSweat,
|
|
3653
3654
|
BlowingKiss: BlowingKiss,
|
|
3654
3655
|
Frowning: Frowning,
|
|
3655
|
-
|
|
3656
|
+
Grinning: Grinning,
|
|
3657
|
+
GrinningWithSweat: GrinningWithSweat,
|
|
3658
|
+
Relieved: Relieved,
|
|
3659
|
+
SmilingV2: SmilingV2,
|
|
3660
|
+
SmilingV3: SmilingV3,
|
|
3661
|
+
Thinking: Thinking
|
|
3656
3662
|
});
|
|
3657
3663
|
|
|
3658
3664
|
var AdaChat = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/ada_chat" }), void 0); };
|
|
3659
3665
|
|
|
3660
|
-
var
|
|
3666
|
+
var Comment$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/comment" }), void 0); };
|
|
3661
3667
|
|
|
3662
|
-
var
|
|
3668
|
+
var CommentDots = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/comment_dots" }), void 0)); };
|
|
3663
3669
|
|
|
3664
|
-
var
|
|
3670
|
+
var CommentLight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/comment_light" }), void 0)); };
|
|
3665
3671
|
|
|
3666
|
-
var
|
|
3672
|
+
var CommentMoney = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/comment_money" }), void 0)); };
|
|
3667
3673
|
|
|
3668
3674
|
var Community$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/community" }), void 0); };
|
|
3669
3675
|
|
|
3670
|
-
var
|
|
3676
|
+
var Light = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/light" }), void 0); };
|
|
3671
3677
|
|
|
3672
|
-
var
|
|
3678
|
+
var LightBulb$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb" }), void 0); };
|
|
3673
3679
|
|
|
3674
|
-
var
|
|
3680
|
+
var LightBulbSolid = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb_solid" }), void 0)); };
|
|
3675
3681
|
|
|
3676
|
-
var
|
|
3682
|
+
var Mail = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/mail" }), void 0); };
|
|
3677
3683
|
|
|
3678
|
-
var
|
|
3684
|
+
var Messenger = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/messenger" }), void 0); };
|
|
3679
3685
|
|
|
3680
|
-
var
|
|
3686
|
+
var QuestionCircle = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/question_circle" }), void 0)); };
|
|
3681
3687
|
|
|
3682
|
-
var
|
|
3688
|
+
var QuestionCircleLight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/question_circle_light" }), void 0)); };
|
|
3683
3689
|
|
|
3684
|
-
var
|
|
3690
|
+
var QuoteLeft = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/quote_left" }), void 0); };
|
|
3685
3691
|
|
|
3686
|
-
var
|
|
3692
|
+
var QuoteRight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/quote_right" }), void 0)); };
|
|
3687
3693
|
|
|
3688
|
-
var
|
|
3694
|
+
var QuoteSolidLeft = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_left" }), void 0)); };
|
|
3695
|
+
|
|
3696
|
+
var QuoteSolidRight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_right" }), void 0)); };
|
|
3689
3697
|
|
|
3690
3698
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
3691
3699
|
__proto__: null,
|
|
3692
3700
|
AdaChat: AdaChat,
|
|
3693
|
-
QuestionCircle: QuestionCircle,
|
|
3694
|
-
Messenger: Messenger,
|
|
3695
3701
|
Comment: Comment$1,
|
|
3696
|
-
|
|
3702
|
+
CommentDots: CommentDots,
|
|
3703
|
+
CommentLight: CommentLight,
|
|
3704
|
+
CommentMoney: CommentMoney,
|
|
3697
3705
|
Community: Community$1,
|
|
3698
|
-
QuoteLeft: QuoteLeft,
|
|
3699
|
-
QuoteRight: QuoteRight,
|
|
3700
|
-
QuoteSolidLeft: QuoteSolidLeft,
|
|
3701
|
-
QuoteSolidRight: QuoteSolidRight,
|
|
3702
3706
|
Light: Light,
|
|
3703
3707
|
LightBulb: LightBulb$1,
|
|
3704
3708
|
LightBulbSolid: LightBulbSolid,
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3709
|
+
Mail: Mail,
|
|
3710
|
+
Messenger: Messenger,
|
|
3711
|
+
QuestionCircle: QuestionCircle,
|
|
3712
|
+
QuestionCircleLight: QuestionCircleLight,
|
|
3713
|
+
QuoteLeft: QuoteLeft,
|
|
3714
|
+
QuoteRight: QuoteRight,
|
|
3715
|
+
QuoteSolidLeft: QuoteSolidLeft,
|
|
3716
|
+
QuoteSolidRight: QuoteSolidRight
|
|
3708
3717
|
});
|
|
3709
3718
|
|
|
3710
3719
|
var BirthdayGifts = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "myaccount/birthday_gifts" }), void 0)); };
|
|
@@ -3759,89 +3768,89 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
3759
3768
|
VIP: VIP
|
|
3760
3769
|
});
|
|
3761
3770
|
|
|
3762
|
-
var
|
|
3763
|
-
|
|
3764
|
-
var User = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
|
|
3765
|
-
|
|
3766
|
-
var ShoppingBag = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
|
|
3771
|
+
var AddressInformation = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
3767
3772
|
|
|
3768
|
-
var
|
|
3773
|
+
var Benefits = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
3769
3774
|
|
|
3770
|
-
var
|
|
3775
|
+
var ClubMembership = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
3771
3776
|
|
|
3772
|
-
var
|
|
3777
|
+
var Ellipsis = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis" }), void 0); };
|
|
3773
3778
|
|
|
3774
|
-
var
|
|
3779
|
+
var EllipsisHorizontal = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis_horizontal" }), void 0)); };
|
|
3775
3780
|
|
|
3776
|
-
var
|
|
3781
|
+
var Filters$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
|
|
3777
3782
|
|
|
3778
|
-
var
|
|
3783
|
+
var Hamburger = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
|
|
3779
3784
|
|
|
3780
3785
|
var Home = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/home" }), void 0); };
|
|
3781
3786
|
|
|
3782
3787
|
var HomeSolid = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/home_solid" }), void 0); };
|
|
3783
3788
|
|
|
3784
|
-
var
|
|
3785
|
-
|
|
3786
|
-
var UserSolid = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
|
|
3789
|
+
var Loading$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/loading" }), void 0); };
|
|
3787
3790
|
|
|
3788
|
-
var
|
|
3791
|
+
var Lock = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/lock" }), void 0); };
|
|
3789
3792
|
|
|
3790
|
-
var
|
|
3793
|
+
var LockSolid = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/lock_solid" }), void 0); };
|
|
3791
3794
|
|
|
3792
|
-
var
|
|
3795
|
+
var MapMarker = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/map_marker" }), void 0); };
|
|
3793
3796
|
|
|
3794
|
-
var
|
|
3797
|
+
var MapSolid = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/map_solid" }), void 0); };
|
|
3795
3798
|
|
|
3796
|
-
var
|
|
3799
|
+
var MenuLines = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/menu_lines" }), void 0); };
|
|
3797
3800
|
|
|
3798
|
-
var
|
|
3801
|
+
var Search = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/search" }), void 0); };
|
|
3799
3802
|
|
|
3800
|
-
var
|
|
3803
|
+
var Shaperbox = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shaperbox" }), void 0); };
|
|
3801
3804
|
|
|
3802
|
-
var
|
|
3805
|
+
var ShoppingBag = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
|
|
3803
3806
|
|
|
3804
|
-
var
|
|
3807
|
+
var ShoppingBagV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v2" }), void 0)); };
|
|
3805
3808
|
|
|
3806
|
-
var
|
|
3809
|
+
var ShoppingBagV3 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v3" }), void 0)); };
|
|
3807
3810
|
|
|
3808
|
-
var
|
|
3811
|
+
var ShoppingCart = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart" }), void 0)); };
|
|
3809
3812
|
|
|
3810
3813
|
var ShoppingCartV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart_v2" }), void 0)); };
|
|
3811
3814
|
|
|
3812
|
-
var
|
|
3815
|
+
var SlideDot$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot" }), void 0); };
|
|
3813
3816
|
|
|
3814
|
-
var
|
|
3817
|
+
var SlideDotSolid = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot_solid" }), void 0)); };
|
|
3818
|
+
|
|
3819
|
+
var User = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
|
|
3820
|
+
|
|
3821
|
+
var UserSolid = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
|
|
3822
|
+
|
|
3823
|
+
var UserV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/user_v2" }), void 0); };
|
|
3815
3824
|
|
|
3816
3825
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
3817
3826
|
__proto__: null,
|
|
3818
|
-
Search: Search,
|
|
3819
|
-
User: User,
|
|
3820
|
-
ShoppingBag: ShoppingBag,
|
|
3821
|
-
ShoppingCart: ShoppingCart,
|
|
3822
|
-
MapMarker: MapMarker,
|
|
3823
|
-
Hamburger: Hamburger,
|
|
3824
3827
|
AddressInformation: AddressInformation,
|
|
3825
|
-
ClubMembership: ClubMembership,
|
|
3826
3828
|
Benefits: Benefits,
|
|
3827
|
-
|
|
3828
|
-
HomeSolid: HomeSolid,
|
|
3829
|
-
ShoppingBagV2: ShoppingBagV2,
|
|
3830
|
-
UserSolid: UserSolid,
|
|
3831
|
-
SlideDot: SlideDot$1,
|
|
3832
|
-
SlideDotSolid: SlideDotSolid,
|
|
3829
|
+
ClubMembership: ClubMembership,
|
|
3833
3830
|
Ellipsis: Ellipsis,
|
|
3834
3831
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
3835
3832
|
Filters: Filters$1,
|
|
3833
|
+
Hamburger: Hamburger,
|
|
3834
|
+
Home: Home,
|
|
3835
|
+
HomeSolid: HomeSolid,
|
|
3836
|
+
Loading: Loading$1,
|
|
3836
3837
|
Lock: Lock,
|
|
3837
3838
|
LockSolid: LockSolid,
|
|
3838
|
-
|
|
3839
|
+
MapMarker: MapMarker,
|
|
3839
3840
|
MapSolid: MapSolid,
|
|
3840
3841
|
MenuLines: MenuLines,
|
|
3841
|
-
|
|
3842
|
-
|
|
3842
|
+
Search: Search,
|
|
3843
|
+
Shaperbox: Shaperbox,
|
|
3844
|
+
ShoppingBag: ShoppingBag,
|
|
3845
|
+
ShoppingBagV2: ShoppingBagV2,
|
|
3843
3846
|
ShoppingBagV3: ShoppingBagV3,
|
|
3844
|
-
|
|
3847
|
+
ShoppingCart: ShoppingCart,
|
|
3848
|
+
ShoppingCartV2: ShoppingCartV2,
|
|
3849
|
+
SlideDot: SlideDot$1,
|
|
3850
|
+
SlideDotSolid: SlideDotSolid,
|
|
3851
|
+
User: User,
|
|
3852
|
+
UserSolid: UserSolid,
|
|
3853
|
+
UserV2: UserV2
|
|
3845
3854
|
});
|
|
3846
3855
|
|
|
3847
3856
|
var BodConLabel = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/bod_con_label" }), void 0); };
|
|
@@ -3947,6 +3956,10 @@ var ErrorCross = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({},
|
|
|
3947
3956
|
|
|
3948
3957
|
var FlagUSA = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
|
|
3949
3958
|
|
|
3959
|
+
var FreeReturnsV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/free_returns_v2" }), void 0)); };
|
|
3960
|
+
|
|
3961
|
+
var FreeShippingV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/free_shipping_v2" }), void 0)); };
|
|
3962
|
+
|
|
3950
3963
|
var Hours = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/hours" }), void 0); };
|
|
3951
3964
|
|
|
3952
3965
|
var KlarnaLogo = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/klarna_logo" }), void 0); };
|
|
@@ -3995,6 +4008,8 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
3995
4008
|
DropEmpty: DropEmpty,
|
|
3996
4009
|
ErrorCross: ErrorCross,
|
|
3997
4010
|
FlagUSA: FlagUSA,
|
|
4011
|
+
FreeReturnsV2: FreeReturnsV2,
|
|
4012
|
+
FreeShippingV2: FreeShippingV2,
|
|
3998
4013
|
Hours: Hours,
|
|
3999
4014
|
KlarnaLogo: KlarnaLogo,
|
|
4000
4015
|
LightBulb: LightBulb,
|
|
@@ -4112,9 +4127,9 @@ function jsxs(type, props, key) {
|
|
|
4112
4127
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4113
4128
|
// `variants` styles that are consistent through all themes.
|
|
4114
4129
|
var TAGS = {
|
|
4115
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4116
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4117
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4130
|
+
hero1: newStyled.h1(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""]))),
|
|
4131
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4132
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4118
4133
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4119
4134
|
display2: newStyled.h2(templateObject_5$t || (templateObject_5$t = __makeTemplateObject([""], [""]))),
|
|
4120
4135
|
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4248,17 +4263,17 @@ var DEFAULTS = {
|
|
|
4248
4263
|
size: 'regular',
|
|
4249
4264
|
},
|
|
4250
4265
|
};
|
|
4251
|
-
var templateObject_1$
|
|
4266
|
+
var templateObject_1$1W, templateObject_2$1g, templateObject_3$Z, templateObject_4$I, templateObject_5$t, 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;
|
|
4252
4267
|
|
|
4253
|
-
var Container$
|
|
4254
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4255
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4268
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
4269
|
+
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4270
|
+
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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
4271
|
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"])));
|
|
4257
4272
|
var Check$1 = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
4258
4273
|
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"])));
|
|
4259
4274
|
var PackSelectorV2 = function (_a) {
|
|
4260
4275
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4261
|
-
return (jsxRuntime.jsx(Container$
|
|
4276
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4262
4277
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4263
4278
|
}) }), void 0));
|
|
4264
4279
|
};
|
|
@@ -4280,27 +4295,27 @@ var PackCard$1 = function (_a) {
|
|
|
4280
4295
|
currency: currencyCode || 'USD',
|
|
4281
4296
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4282
4297
|
};
|
|
4283
|
-
var templateObject_1$
|
|
4298
|
+
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$s, templateObject_6$n;
|
|
4284
4299
|
|
|
4285
|
-
var Container$
|
|
4286
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4300
|
+
var Container$1a = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4301
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4287
4302
|
var DropList = function (_a) {
|
|
4288
4303
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4289
|
-
return (jsxRuntime.jsx(Container$
|
|
4304
|
+
return (jsxRuntime.jsx(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4290
4305
|
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));
|
|
4291
4306
|
}) }, void 0));
|
|
4292
4307
|
};
|
|
4293
|
-
var templateObject_1$
|
|
4308
|
+
var templateObject_1$1U, templateObject_2$1e;
|
|
4294
4309
|
|
|
4295
4310
|
var DROPS_TOTAL = 5;
|
|
4296
|
-
var Container$
|
|
4297
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4298
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4311
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4312
|
+
var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4313
|
+
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4299
4314
|
var AbsorbencyLevel = function (_a) {
|
|
4300
4315
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4301
|
-
return (jsxRuntime.jsxs(Container$
|
|
4316
|
+
return (jsxRuntime.jsxs(Container$19, { 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));
|
|
4302
4317
|
};
|
|
4303
|
-
var templateObject_1$
|
|
4318
|
+
var templateObject_1$1T, templateObject_2$1d, templateObject_3$X;
|
|
4304
4319
|
|
|
4305
4320
|
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(`
|
|
4306
4321
|
`),"","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(`
|
|
@@ -4376,7 +4391,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4376
4391
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4377
4392
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4378
4393
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4379
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4394
|
+
var StyledContent = newStyled.button(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
4380
4395
|
var Accordion$1 = function (_a) {
|
|
4381
4396
|
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;
|
|
4382
4397
|
var theme = useTheme();
|
|
@@ -4400,9 +4415,9 @@ var Accordion$1 = function (_a) {
|
|
|
4400
4415
|
} }, { 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));
|
|
4401
4416
|
} }), void 0));
|
|
4402
4417
|
};
|
|
4403
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1S;
|
|
4404
4419
|
|
|
4405
|
-
var Container$
|
|
4420
|
+
var Container$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4406
4421
|
var AccordionOptions = function (_a) {
|
|
4407
4422
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4408
4423
|
var _b = React$2.useState({
|
|
@@ -4415,7 +4430,7 @@ var AccordionOptions = function (_a) {
|
|
|
4415
4430
|
}
|
|
4416
4431
|
return false;
|
|
4417
4432
|
};
|
|
4418
|
-
return (jsxRuntime.jsx(Container$
|
|
4433
|
+
return (jsxRuntime.jsx(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4419
4434
|
var forceOpenValue = getForceOpen(index);
|
|
4420
4435
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4421
4436
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4426,7 +4441,7 @@ var AccordionOptions = function (_a) {
|
|
|
4426
4441
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4427
4442
|
}) }, void 0));
|
|
4428
4443
|
};
|
|
4429
|
-
var templateObject_1$
|
|
4444
|
+
var templateObject_1$1R;
|
|
4430
4445
|
|
|
4431
4446
|
exports.CardSectionType = void 0;
|
|
4432
4447
|
(function (CardSectionType) {
|
|
@@ -4588,14 +4603,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4588
4603
|
literal: true,
|
|
4589
4604
|
});
|
|
4590
4605
|
|
|
4591
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4592
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4606
|
+
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
4607
|
+
var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4593
4608
|
var Error$1 = function (_a) {
|
|
4594
4609
|
var error = _a.error;
|
|
4595
4610
|
var theme = useTheme();
|
|
4596
4611
|
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));
|
|
4597
4612
|
};
|
|
4598
|
-
var templateObject_1$
|
|
4613
|
+
var templateObject_1$1Q, templateObject_2$1c;
|
|
4599
4614
|
|
|
4600
4615
|
var BaseSelectButton = function (_a) {
|
|
4601
4616
|
var children = _a.children, as = _a.as;
|
|
@@ -4612,7 +4627,7 @@ function BaseSelectOption(_a) {
|
|
|
4612
4627
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4613
4628
|
}
|
|
4614
4629
|
|
|
4615
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4630
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4616
4631
|
function BaseSelect(_a) {
|
|
4617
4632
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4618
4633
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4622,7 +4637,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4622
4637
|
Options: BaseSelectOptions,
|
|
4623
4638
|
Option: BaseSelectOption,
|
|
4624
4639
|
});
|
|
4625
|
-
var templateObject_1$
|
|
4640
|
+
var templateObject_1$1P;
|
|
4626
4641
|
|
|
4627
4642
|
var CustomButton = newStyled.button(function (_a) {
|
|
4628
4643
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4661,7 +4676,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4661
4676
|
});
|
|
4662
4677
|
});
|
|
4663
4678
|
//TODO Remove this when we find the real solution
|
|
4664
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4679
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4665
4680
|
var open = _a.open;
|
|
4666
4681
|
return open &&
|
|
4667
4682
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4681,7 +4696,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4681
4696
|
} }), void 0));
|
|
4682
4697
|
};
|
|
4683
4698
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4684
|
-
var templateObject_1$
|
|
4699
|
+
var templateObject_1$1O;
|
|
4685
4700
|
|
|
4686
4701
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4687
4702
|
var theme = _a.theme;
|
|
@@ -4848,7 +4863,7 @@ var CustomCheckboxStyles = {
|
|
|
4848
4863
|
},
|
|
4849
4864
|
};
|
|
4850
4865
|
|
|
4851
|
-
var Container$
|
|
4866
|
+
var Container$17 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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"])));
|
|
4852
4867
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4853
4868
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4854
4869
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4859,7 +4874,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4859
4874
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4860
4875
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4861
4876
|
]; });
|
|
4862
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4877
|
+
var Input$5 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
4863
4878
|
var disabled = _a.disabled;
|
|
4864
4879
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4865
4880
|
});
|
|
@@ -4873,9 +4888,9 @@ var Checkbox = function (_a) {
|
|
|
4873
4888
|
}
|
|
4874
4889
|
onChange(e.target.checked);
|
|
4875
4890
|
};
|
|
4876
|
-
return (jsxRuntime.jsxs(Container$
|
|
4891
|
+
return (jsxRuntime.jsxs(Container$17, { 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));
|
|
4877
4892
|
};
|
|
4878
|
-
var templateObject_1$
|
|
4893
|
+
var templateObject_1$1N, templateObject_2$1b;
|
|
4879
4894
|
|
|
4880
4895
|
var CustomOption = newStyled.li(function (_a) {
|
|
4881
4896
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4924,8 +4939,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4924
4939
|
Option: BaseDropdownOption,
|
|
4925
4940
|
});
|
|
4926
4941
|
|
|
4927
|
-
var Container$
|
|
4928
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4942
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
4943
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4929
4944
|
function SimpleDropdown(_a) {
|
|
4930
4945
|
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;
|
|
4931
4946
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4954,10 +4969,10 @@ function SimpleDropdown(_a) {
|
|
|
4954
4969
|
}
|
|
4955
4970
|
setSelectedValue(value);
|
|
4956
4971
|
}, [value, options, initialValue]);
|
|
4957
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4972
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
|
|
4958
4973
|
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));
|
|
4959
4974
|
}
|
|
4960
|
-
var templateObject_1$
|
|
4975
|
+
var templateObject_1$1M, templateObject_2$1a;
|
|
4961
4976
|
|
|
4962
4977
|
/* base styles & size variants */
|
|
4963
4978
|
var CustomRadioStyles$2 = {
|
|
@@ -5022,9 +5037,9 @@ var ContainerStyles$2 = {
|
|
|
5022
5037
|
},
|
|
5023
5038
|
};
|
|
5024
5039
|
|
|
5025
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5026
|
-
var Container$
|
|
5027
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5040
|
+
var Wrapper$7 = 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"])));
|
|
5041
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5042
|
+
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5028
5043
|
var disabled = _a.disabled;
|
|
5029
5044
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5030
5045
|
});
|
|
@@ -5032,7 +5047,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5032
5047
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5033
5048
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5034
5049
|
]; });
|
|
5035
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5050
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5036
5051
|
var theme = _a.theme;
|
|
5037
5052
|
return theme.component.radio.textSize;
|
|
5038
5053
|
}, function (_a) {
|
|
@@ -5046,9 +5061,9 @@ var RadioInput = function (_a) {
|
|
|
5046
5061
|
var value = event.currentTarget.value;
|
|
5047
5062
|
onChange({ value: value, label: label });
|
|
5048
5063
|
};
|
|
5049
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5064
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$15, __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));
|
|
5050
5065
|
};
|
|
5051
|
-
var templateObject_1$
|
|
5066
|
+
var templateObject_1$1L, templateObject_2$19, templateObject_3$W;
|
|
5052
5067
|
|
|
5053
5068
|
var getWrapperFlexDirection = function (position) {
|
|
5054
5069
|
switch (position) {
|
|
@@ -5099,7 +5114,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5099
5114
|
}
|
|
5100
5115
|
};
|
|
5101
5116
|
|
|
5102
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5117
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5103
5118
|
var position = _a.position;
|
|
5104
5119
|
return getWrapperFlexDirection(position);
|
|
5105
5120
|
}, function (_a) {
|
|
@@ -5109,7 +5124,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5109
5124
|
var disableHover = _a.disableHover;
|
|
5110
5125
|
return (disableHover ? 0 : 1);
|
|
5111
5126
|
});
|
|
5112
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5127
|
+
var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5113
5128
|
var position = _a.position;
|
|
5114
5129
|
return getContainerFlexDirection(position);
|
|
5115
5130
|
}, function (_a) {
|
|
@@ -5137,7 +5152,7 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5137
5152
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5138
5153
|
return actual === expected ? margin : '0';
|
|
5139
5154
|
};
|
|
5140
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5155
|
+
var ContentWrapper = newStyled.div(templateObject_3$V || (templateObject_3$V = __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) {
|
|
5141
5156
|
var borderColor = _a.borderColor;
|
|
5142
5157
|
return borderColor;
|
|
5143
5158
|
}, function (_a) {
|
|
@@ -5155,7 +5170,7 @@ var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTem
|
|
|
5155
5170
|
});
|
|
5156
5171
|
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
5172
|
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$
|
|
5173
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$V, templateObject_4$G, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5159
5174
|
|
|
5160
5175
|
var useOnClickOutside = function (ref, handler) {
|
|
5161
5176
|
React$2.useEffect(function () {
|
|
@@ -5297,7 +5312,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5297
5312
|
};
|
|
5298
5313
|
}
|
|
5299
5314
|
};
|
|
5300
|
-
var Container$
|
|
5315
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5301
5316
|
var backgroundColor = _a.backgroundColor;
|
|
5302
5317
|
return backgroundColor;
|
|
5303
5318
|
}, function (_a) {
|
|
@@ -5319,7 +5334,7 @@ var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5319
5334
|
var size = _a.size;
|
|
5320
5335
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5321
5336
|
});
|
|
5322
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5337
|
+
var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5323
5338
|
var textColor = _a.textColor;
|
|
5324
5339
|
return textColor;
|
|
5325
5340
|
}, function (_a) {
|
|
@@ -5334,9 +5349,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5334
5349
|
var ClubOfferTag = function (_a) {
|
|
5335
5350
|
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;
|
|
5336
5351
|
var theme = useTheme();
|
|
5337
|
-
return (jsxRuntime.jsx(Container$
|
|
5352
|
+
return (jsxRuntime.jsx(Container$14, __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));
|
|
5338
5353
|
};
|
|
5339
|
-
var templateObject_1$
|
|
5354
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
5340
5355
|
|
|
5341
5356
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5342
5357
|
var _a, _b, _c;
|
|
@@ -5367,7 +5382,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5367
5382
|
};
|
|
5368
5383
|
}
|
|
5369
5384
|
};
|
|
5370
|
-
var Container$
|
|
5385
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5371
5386
|
var backgroundColor = _a.backgroundColor;
|
|
5372
5387
|
return backgroundColor;
|
|
5373
5388
|
}, function (_a) {
|
|
@@ -5389,7 +5404,7 @@ var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5389
5404
|
var size = _a.size;
|
|
5390
5405
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5391
5406
|
});
|
|
5392
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5407
|
+
var H3$2 = 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) {
|
|
5393
5408
|
var textColor = _a.textColor;
|
|
5394
5409
|
return textColor;
|
|
5395
5410
|
}, function (_a) {
|
|
@@ -5404,9 +5419,9 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5404
5419
|
var DiscountTag = function (_a) {
|
|
5405
5420
|
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;
|
|
5406
5421
|
var theme = useTheme();
|
|
5407
|
-
return (jsxRuntime.jsx(Container$
|
|
5422
|
+
return (jsxRuntime.jsx(Container$13, __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));
|
|
5408
5423
|
};
|
|
5409
|
-
var templateObject_1$
|
|
5424
|
+
var templateObject_1$1I, templateObject_2$16;
|
|
5410
5425
|
|
|
5411
5426
|
var getStylesBySize$b = function (size, theme) {
|
|
5412
5427
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5448,8 +5463,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5448
5463
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5449
5464
|
}
|
|
5450
5465
|
};
|
|
5451
|
-
var Container$
|
|
5452
|
-
var Price = newStyled.p(templateObject_2$
|
|
5466
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5467
|
+
var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5453
5468
|
var weight = _a.weight;
|
|
5454
5469
|
return (weight ? weight : '400');
|
|
5455
5470
|
}, function (_a) {
|
|
@@ -5473,7 +5488,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5473
5488
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5474
5489
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5475
5490
|
});
|
|
5476
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5491
|
+
var TagContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5477
5492
|
var _b;
|
|
5478
5493
|
var size = _a.size;
|
|
5479
5494
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5504,11 +5519,11 @@ var PriceLabel = function (_a) {
|
|
|
5504
5519
|
: exports.ComponentSize.XSmall;
|
|
5505
5520
|
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));
|
|
5506
5521
|
};
|
|
5507
|
-
return (jsxRuntime.jsxs(Container$
|
|
5522
|
+
return (jsxRuntime.jsxs(Container$12, __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));
|
|
5508
5523
|
};
|
|
5509
|
-
var templateObject_1$
|
|
5524
|
+
var templateObject_1$1H, templateObject_2$15, templateObject_3$U;
|
|
5510
5525
|
|
|
5511
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5526
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5512
5527
|
var PriceLabelV2 = function (_a) {
|
|
5513
5528
|
var _b;
|
|
5514
5529
|
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, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5561,7 +5576,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5561
5576
|
var savetoString = saveto.toFixed(2);
|
|
5562
5577
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5563
5578
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5564
|
-
return (jsxRuntime.jsxs(Container$
|
|
5579
|
+
return (jsxRuntime.jsxs(Container$12, __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: {
|
|
5565
5580
|
marginTop: '-5px',
|
|
5566
5581
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5567
5582
|
? finalPriceArray[0]
|
|
@@ -5579,11 +5594,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5579
5594
|
lineHeight: '22px',
|
|
5580
5595
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5581
5596
|
};
|
|
5582
|
-
var templateObject_1$
|
|
5597
|
+
var templateObject_1$1G;
|
|
5583
5598
|
|
|
5584
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5585
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5586
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5599
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5600
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5601
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5587
5602
|
var PriceLabelV3 = function (_a) {
|
|
5588
5603
|
var _b;
|
|
5589
5604
|
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"]);
|
|
@@ -5638,7 +5653,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5638
5653
|
return null;
|
|
5639
5654
|
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));
|
|
5640
5655
|
};
|
|
5641
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5656
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$12, { 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: {
|
|
5642
5657
|
marginTop: '-5px',
|
|
5643
5658
|
} }, 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: {
|
|
5644
5659
|
marginTop: '-6px',
|
|
@@ -5654,10 +5669,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5654
5669
|
lineHeight: '22px',
|
|
5655
5670
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5656
5671
|
};
|
|
5657
|
-
var templateObject_1$
|
|
5672
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5658
5673
|
|
|
5659
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5660
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5674
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5675
|
+
var ContainerBase = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
5661
5676
|
var selected = _a.selected, theme = _a.theme;
|
|
5662
5677
|
return selected
|
|
5663
5678
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5671,7 +5686,7 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5671
5686
|
var theme = _a.theme;
|
|
5672
5687
|
return theme.colors.pallete.primary.color;
|
|
5673
5688
|
});
|
|
5674
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5689
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$S || (templateObject_3$S = __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) {
|
|
5675
5690
|
var onClick = _a.onClick;
|
|
5676
5691
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5677
5692
|
});
|
|
@@ -5693,8 +5708,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5693
5708
|
var selected = _a.selected, theme = _a.theme;
|
|
5694
5709
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5695
5710
|
});
|
|
5696
|
-
var Container
|
|
5697
|
-
var templateObject_1$
|
|
5711
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5712
|
+
var templateObject_1$1E, templateObject_2$13, templateObject_3$S, templateObject_4$F, templateObject_5$q, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5698
5713
|
|
|
5699
5714
|
var radioIds = {
|
|
5700
5715
|
oneTime: {
|
|
@@ -5744,17 +5759,17 @@ var Autoship = function (_a) {
|
|
|
5744
5759
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5745
5760
|
};
|
|
5746
5761
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5747
|
-
return (jsxRuntime.jsxs(Container
|
|
5762
|
+
return (jsxRuntime.jsxs(Container$11, __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
|
|
5748
5763
|
? benefitsColor.selected
|
|
5749
5764
|
: 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));
|
|
5750
5765
|
};
|
|
5751
5766
|
|
|
5752
|
-
var Img = newStyled.img(templateObject_1$
|
|
5767
|
+
var Img = newStyled.img(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
5753
5768
|
var Image$3 = function (_a) {
|
|
5754
5769
|
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;
|
|
5755
5770
|
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));
|
|
5756
5771
|
};
|
|
5757
|
-
var templateObject_1$
|
|
5772
|
+
var templateObject_1$1D;
|
|
5758
5773
|
|
|
5759
5774
|
var _a$2;
|
|
5760
5775
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5769,13 +5784,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5769
5784
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5770
5785
|
_a$2);
|
|
5771
5786
|
|
|
5772
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5773
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5774
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5787
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
5788
|
+
var CustomerInfo = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5789
|
+
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
5775
5790
|
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"])));
|
|
5776
5791
|
var Description$2 = newStyled.p(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
5777
5792
|
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"])));
|
|
5778
|
-
var templateObject_1$
|
|
5793
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$p, templateObject_6$k;
|
|
5779
5794
|
|
|
5780
5795
|
var NameWithStars = function (_a) {
|
|
5781
5796
|
var name = _a.name, size = _a.size;
|
|
@@ -5793,9 +5808,9 @@ var ResultFeedback = function (_a) {
|
|
|
5793
5808
|
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));
|
|
5794
5809
|
};
|
|
5795
5810
|
|
|
5796
|
-
var Container$
|
|
5797
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5798
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5811
|
+
var Container$10 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
5812
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5813
|
+
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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; });
|
|
5799
5814
|
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) {
|
|
5800
5815
|
var theme = _a.theme;
|
|
5801
5816
|
return theme.colors.pallete.secondary.color;
|
|
@@ -5806,7 +5821,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5806
5821
|
var theme = _a.theme, size = _a.size;
|
|
5807
5822
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5808
5823
|
});
|
|
5809
|
-
var templateObject_1$
|
|
5824
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D;
|
|
5810
5825
|
|
|
5811
5826
|
/* base styles & size variants */
|
|
5812
5827
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5881,10 +5896,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5881
5896
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5882
5897
|
var infoText = buildInfoText(name, age, months);
|
|
5883
5898
|
var Component = componentByVariant[variant];
|
|
5884
|
-
return (jsxRuntime.jsxs(Container$
|
|
5899
|
+
return (jsxRuntime.jsxs(Container$10, __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));
|
|
5885
5900
|
};
|
|
5886
5901
|
|
|
5887
|
-
var Section = newStyled.div(templateObject_1$
|
|
5902
|
+
var Section = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
5888
5903
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5889
5904
|
});
|
|
5890
5905
|
var CardHeader = function (_a) {
|
|
@@ -5895,16 +5910,16 @@ var CardFooter = function (_a) {
|
|
|
5895
5910
|
var children = _a.children;
|
|
5896
5911
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5897
5912
|
};
|
|
5898
|
-
var templateObject_1$
|
|
5913
|
+
var templateObject_1$1A;
|
|
5899
5914
|
|
|
5900
|
-
var Body = newStyled.div(templateObject_1$
|
|
5915
|
+
var Body = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
5901
5916
|
var CardBody = function (_a) {
|
|
5902
5917
|
var children = _a.children;
|
|
5903
5918
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5904
5919
|
};
|
|
5905
|
-
var templateObject_1$
|
|
5920
|
+
var templateObject_1$1z;
|
|
5906
5921
|
|
|
5907
|
-
var Container
|
|
5922
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5908
5923
|
var flex = _a.flex;
|
|
5909
5924
|
return flex &&
|
|
5910
5925
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5919,23 +5934,23 @@ var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5919
5934
|
var Card$1 = function (_a) {
|
|
5920
5935
|
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;
|
|
5921
5936
|
var theme = useTheme();
|
|
5922
|
-
return (jsxRuntime.jsx(Container
|
|
5937
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5923
5938
|
};
|
|
5924
5939
|
var Card$2 = Object.assign(Card$1, {
|
|
5925
5940
|
Header: CardHeader,
|
|
5926
5941
|
Footer: CardFooter,
|
|
5927
5942
|
Body: CardBody,
|
|
5928
5943
|
});
|
|
5929
|
-
var templateObject_1$
|
|
5944
|
+
var templateObject_1$1y;
|
|
5930
5945
|
|
|
5931
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5932
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5933
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
5946
|
+
var StyledWrapper = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5947
|
+
var StyledContainer = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5948
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __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) {
|
|
5934
5949
|
var color = _a.color;
|
|
5935
5950
|
return color;
|
|
5936
5951
|
});
|
|
5937
5952
|
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"])));
|
|
5938
|
-
var templateObject_1$
|
|
5953
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$P, templateObject_4$C;
|
|
5939
5954
|
|
|
5940
5955
|
var Minimalistic = function (_a) {
|
|
5941
5956
|
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;
|
|
@@ -5943,28 +5958,28 @@ var Minimalistic = function (_a) {
|
|
|
5943
5958
|
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));
|
|
5944
5959
|
};
|
|
5945
5960
|
|
|
5946
|
-
var Container$
|
|
5947
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
5948
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5961
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5962
|
+
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; });
|
|
5963
|
+
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5949
5964
|
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"])));
|
|
5950
5965
|
var Simple = function (_a) {
|
|
5951
5966
|
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;
|
|
5952
5967
|
var theme = useTheme();
|
|
5953
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
5968
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$_, { 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));
|
|
5954
5969
|
};
|
|
5955
|
-
var templateObject_1$
|
|
5970
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$B;
|
|
5956
5971
|
|
|
5957
5972
|
var Bundle = {
|
|
5958
5973
|
Minimalistic: Minimalistic,
|
|
5959
5974
|
Simple: Simple,
|
|
5960
5975
|
};
|
|
5961
5976
|
|
|
5962
|
-
var Container$
|
|
5977
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
5963
5978
|
var displayBNPL = _a.displayBNPL;
|
|
5964
5979
|
return (displayBNPL ? 'flex' : 'none');
|
|
5965
5980
|
});
|
|
5966
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5967
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5981
|
+
var TextContainer$1 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5982
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
5968
5983
|
var BuyNowPayLater = function (_a) {
|
|
5969
5984
|
var _b;
|
|
5970
5985
|
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;
|
|
@@ -5974,43 +5989,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5974
5989
|
console.error('Icon', iconName, 'not found');
|
|
5975
5990
|
return null;
|
|
5976
5991
|
}
|
|
5977
|
-
return (jsxRuntime.jsx(Container$
|
|
5992
|
+
return (jsxRuntime.jsx(Container$Z, __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));
|
|
5978
5993
|
};
|
|
5979
|
-
var templateObject_1$
|
|
5994
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N;
|
|
5980
5995
|
|
|
5981
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5996
|
+
var Text$6 = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
5982
5997
|
var Title$5 = function (_a) {
|
|
5983
5998
|
var title = _a.title;
|
|
5984
5999
|
var theme = useTheme();
|
|
5985
6000
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5986
6001
|
};
|
|
5987
|
-
var templateObject_1$
|
|
6002
|
+
var templateObject_1$1u;
|
|
5988
6003
|
|
|
5989
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6004
|
+
var P$3 = newStyled.p(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
5990
6005
|
var Promo = function (_a) {
|
|
5991
6006
|
var text = _a.text;
|
|
5992
6007
|
var theme = useTheme();
|
|
5993
6008
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5994
6009
|
};
|
|
5995
|
-
var templateObject_1$
|
|
6010
|
+
var templateObject_1$1t;
|
|
5996
6011
|
|
|
5997
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6012
|
+
var Text$5 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5998
6013
|
var Description$1 = function (_a) {
|
|
5999
6014
|
var text = _a.text;
|
|
6000
6015
|
var theme = useTheme();
|
|
6001
6016
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6002
6017
|
};
|
|
6003
|
-
var templateObject_1$
|
|
6018
|
+
var templateObject_1$1s;
|
|
6004
6019
|
|
|
6005
|
-
var Container$
|
|
6020
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"); });
|
|
6006
6021
|
var CloseButton$1 = function (_a) {
|
|
6007
6022
|
var onClick = _a.onClick, size = _a.size;
|
|
6008
6023
|
var theme = useTheme();
|
|
6009
|
-
return (jsxRuntime.jsx(Container$
|
|
6024
|
+
return (jsxRuntime.jsx(Container$Y, __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));
|
|
6010
6025
|
};
|
|
6011
|
-
var templateObject_1$
|
|
6026
|
+
var templateObject_1$1r;
|
|
6012
6027
|
|
|
6013
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6028
|
+
var Text$4 = newStyled.h3(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
6014
6029
|
var backgroundColor = _a.backgroundColor;
|
|
6015
6030
|
return backgroundColor;
|
|
6016
6031
|
}, function (_a) {
|
|
@@ -6025,7 +6040,7 @@ var OfferBanner = function (_a) {
|
|
|
6025
6040
|
var theme = useTheme();
|
|
6026
6041
|
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));
|
|
6027
6042
|
};
|
|
6028
|
-
var templateObject_1$
|
|
6043
|
+
var templateObject_1$1q;
|
|
6029
6044
|
|
|
6030
6045
|
var CartProductItem = {
|
|
6031
6046
|
Title: Title$5,
|
|
@@ -6035,9 +6050,9 @@ var CartProductItem = {
|
|
|
6035
6050
|
CloseButton: CloseButton$1,
|
|
6036
6051
|
};
|
|
6037
6052
|
|
|
6038
|
-
var Container$
|
|
6039
|
-
var MobileContainer = newStyled(Container$
|
|
6040
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6053
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6054
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6055
|
+
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6041
6056
|
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"])));
|
|
6042
6057
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6043
6058
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6046,9 +6061,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (t
|
|
|
6046
6061
|
var ClubPriceLabel = function (_a) {
|
|
6047
6062
|
var clubPrice = _a.clubPrice;
|
|
6048
6063
|
var isMobile = useWindowDimensions().isMobile;
|
|
6049
|
-
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$
|
|
6064
|
+
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$X, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6050
6065
|
};
|
|
6051
|
-
var templateObject_1$
|
|
6066
|
+
var templateObject_1$1p, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$o, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6052
6067
|
|
|
6053
6068
|
var Spacing = function (_a) {
|
|
6054
6069
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6056,9 +6071,9 @@ var Spacing = function (_a) {
|
|
|
6056
6071
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6057
6072
|
};
|
|
6058
6073
|
|
|
6059
|
-
var Container$
|
|
6060
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6061
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6074
|
+
var Container$W = newStyled('div')(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6075
|
+
var Content$2 = newStyled('div')(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6076
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6062
6077
|
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) {
|
|
6063
6078
|
var index = _a.index;
|
|
6064
6079
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6068,14 +6083,14 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6068
6083
|
});
|
|
6069
6084
|
var StrengthBars = function (_a) {
|
|
6070
6085
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6071
|
-
return (jsxRuntime.jsxs(Container$
|
|
6086
|
+
return (jsxRuntime.jsxs(Container$W, __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));
|
|
6072
6087
|
};
|
|
6073
|
-
var templateObject_1$
|
|
6088
|
+
var templateObject_1$1o, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
6074
6089
|
|
|
6075
|
-
var Container$
|
|
6076
|
-
var templateObject_1$
|
|
6090
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6091
|
+
var templateObject_1$1n;
|
|
6077
6092
|
|
|
6078
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6093
|
+
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6079
6094
|
var marginRight = _a.marginRight;
|
|
6080
6095
|
return marginRight;
|
|
6081
6096
|
});
|
|
@@ -6087,11 +6102,11 @@ var StarList = function (_a) {
|
|
|
6087
6102
|
width: theme.component.stars.element[size].width,
|
|
6088
6103
|
height: theme.component.stars.element[size].height,
|
|
6089
6104
|
};
|
|
6090
|
-
return (jsxRuntime.jsx(Container$
|
|
6105
|
+
return (jsxRuntime.jsx(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6091
6106
|
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)));
|
|
6092
6107
|
}) }, void 0));
|
|
6093
6108
|
};
|
|
6094
|
-
var templateObject_1$
|
|
6109
|
+
var templateObject_1$1m;
|
|
6095
6110
|
|
|
6096
6111
|
/* base styles & size variants */
|
|
6097
6112
|
var LabelStyles = {
|
|
@@ -6132,8 +6147,8 @@ var LabelStyles = {
|
|
|
6132
6147
|
});
|
|
6133
6148
|
},
|
|
6134
6149
|
};
|
|
6135
|
-
var Container$
|
|
6136
|
-
var templateObject_1$
|
|
6150
|
+
var Container$U = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6151
|
+
var templateObject_1$1l;
|
|
6137
6152
|
|
|
6138
6153
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6139
6154
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6153,7 +6168,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6153
6168
|
}),
|
|
6154
6169
|
];
|
|
6155
6170
|
});
|
|
6156
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6171
|
+
var RatingLabel = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6157
6172
|
var starsNumber = 5;
|
|
6158
6173
|
var Rating = function (_a) {
|
|
6159
6174
|
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;
|
|
@@ -6174,13 +6189,13 @@ var Rating = function (_a) {
|
|
|
6174
6189
|
href: reviewsContainerId,
|
|
6175
6190
|
}
|
|
6176
6191
|
: {};
|
|
6177
|
-
return (jsxRuntime.jsxs(Container$
|
|
6192
|
+
return (jsxRuntime.jsxs(Container$U, __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));
|
|
6178
6193
|
};
|
|
6179
|
-
var templateObject_1$
|
|
6194
|
+
var templateObject_1$1k;
|
|
6180
6195
|
|
|
6181
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6182
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6183
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6196
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
6197
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6198
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6184
6199
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6185
6200
|
var PriceWithTagContainer = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6186
6201
|
var RegularPriceTag = function () {
|
|
@@ -6231,11 +6246,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6231
6246
|
: exports.ComponentSize.XSmall;
|
|
6232
6247
|
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));
|
|
6233
6248
|
};
|
|
6234
|
-
return (jsxRuntime.jsxs(Container$
|
|
6249
|
+
return (jsxRuntime.jsxs(Container$12, __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.jsxs(PriceContainerV2, { 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]
|
|
6235
6250
|
? finalPriceArray[0]
|
|
6236
6251
|
: (_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)] }, 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));
|
|
6237
6252
|
};
|
|
6238
|
-
var templateObject_1$
|
|
6253
|
+
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$n;
|
|
6239
6254
|
|
|
6240
6255
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6241
6256
|
var width = _a.width, height = _a.height;
|
|
@@ -6245,9 +6260,9 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6245
6260
|
height: height,
|
|
6246
6261
|
});
|
|
6247
6262
|
});
|
|
6248
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6249
|
-
var Container$
|
|
6250
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6263
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6264
|
+
var Container$T = newStyled.a(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6265
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6251
6266
|
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; });
|
|
6252
6267
|
var getStylesBySize$9 = function (size) {
|
|
6253
6268
|
switch (size) {
|
|
@@ -6274,11 +6289,11 @@ var getStylesBySize$9 = function (size) {
|
|
|
6274
6289
|
};
|
|
6275
6290
|
}
|
|
6276
6291
|
};
|
|
6277
|
-
var TopTagContainer$
|
|
6292
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6278
6293
|
var style = _a.style;
|
|
6279
6294
|
return style.width;
|
|
6280
6295
|
});
|
|
6281
|
-
var BottomTagContainer$
|
|
6296
|
+
var BottomTagContainer$6 = 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) {
|
|
6282
6297
|
var style = _a.style;
|
|
6283
6298
|
return style.width;
|
|
6284
6299
|
});
|
|
@@ -6339,9 +6354,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6339
6354
|
return jsx(Fragment, {}, void 0);
|
|
6340
6355
|
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));
|
|
6341
6356
|
};
|
|
6342
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6357
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __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));
|
|
6343
6358
|
};
|
|
6344
|
-
var templateObject_1$
|
|
6359
|
+
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6345
6360
|
|
|
6346
6361
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6347
6362
|
var width = _a.width, height = _a.height;
|
|
@@ -6351,9 +6366,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6351
6366
|
height: height,
|
|
6352
6367
|
});
|
|
6353
6368
|
});
|
|
6354
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6355
|
-
var Container$
|
|
6356
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6369
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6370
|
+
var Container$S = 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"])));
|
|
6371
|
+
var ProdCardContainer = 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"])));
|
|
6357
6372
|
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; });
|
|
6358
6373
|
var getStylesBySize$8 = function (size) {
|
|
6359
6374
|
switch (size) {
|
|
@@ -6380,11 +6395,11 @@ var getStylesBySize$8 = function (size) {
|
|
|
6380
6395
|
};
|
|
6381
6396
|
}
|
|
6382
6397
|
};
|
|
6383
|
-
var TopTagContainer$
|
|
6398
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6384
6399
|
var style = _a.style;
|
|
6385
6400
|
return style.width;
|
|
6386
6401
|
});
|
|
6387
|
-
var BottomTagContainer$
|
|
6402
|
+
var BottomTagContainer$5 = 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) {
|
|
6388
6403
|
var style = _a.style;
|
|
6389
6404
|
return style.width;
|
|
6390
6405
|
});
|
|
@@ -6432,26 +6447,26 @@ var ProductItemTK = function (_a) {
|
|
|
6432
6447
|
: undefined }, void 0));
|
|
6433
6448
|
};
|
|
6434
6449
|
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)); };
|
|
6435
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6450
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$S, __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$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, 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$S, __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 ? (
|
|
6436
6451
|
// @ts-ignore
|
|
6437
6452
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6438
6453
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6439
6454
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6440
6455
|
} }, { 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));
|
|
6441
6456
|
};
|
|
6442
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6443
6458
|
|
|
6444
|
-
var Container$
|
|
6459
|
+
var Container$R = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6445
6460
|
function withProductGrid(ProductItemComponent, data) {
|
|
6446
6461
|
function WithProductGrid(props) {
|
|
6447
|
-
return (jsxRuntime.jsx(Container$
|
|
6462
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6448
6463
|
}
|
|
6449
6464
|
/* istanbul ignore next */
|
|
6450
6465
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6451
6466
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6452
6467
|
return WithProductGrid;
|
|
6453
6468
|
}
|
|
6454
|
-
var templateObject_1$
|
|
6469
|
+
var templateObject_1$1g;
|
|
6455
6470
|
|
|
6456
6471
|
var Collection = {
|
|
6457
6472
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6498,9 +6513,9 @@ var OutOfStock = function (_a) {
|
|
|
6498
6513
|
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));
|
|
6499
6514
|
};
|
|
6500
6515
|
|
|
6501
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6502
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6503
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6516
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6517
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6518
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6504
6519
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6505
6520
|
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"])));
|
|
6506
6521
|
var Label$2 = function (_a) {
|
|
@@ -6520,23 +6535,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6520
6535
|
Option: Option,
|
|
6521
6536
|
OptionsContainer: OptionsContainer,
|
|
6522
6537
|
});
|
|
6523
|
-
var templateObject_1$
|
|
6538
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$k;
|
|
6524
6539
|
|
|
6525
|
-
var Container$
|
|
6540
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
6526
6541
|
var borderColor = _a.borderColor;
|
|
6527
6542
|
return borderColor;
|
|
6528
6543
|
}, function (_a) {
|
|
6529
6544
|
var noStock = _a.noStock;
|
|
6530
6545
|
return (noStock ? '0.4' : '1');
|
|
6531
6546
|
});
|
|
6532
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6547
|
+
var Image$2 = newStyled.img(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6533
6548
|
var PatternSelector = function (_a) {
|
|
6534
6549
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6535
6550
|
var theme = useTheme();
|
|
6536
6551
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6537
|
-
return (jsxRuntime.jsx(Container$
|
|
6552
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6538
6553
|
};
|
|
6539
|
-
var templateObject_1$
|
|
6554
|
+
var templateObject_1$1e, templateObject_2$T;
|
|
6540
6555
|
|
|
6541
6556
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6542
6557
|
if (options == null || options.length === 0) {
|
|
@@ -6595,9 +6610,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6595
6610
|
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));
|
|
6596
6611
|
};
|
|
6597
6612
|
|
|
6598
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6599
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6600
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6613
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
6614
|
+
var Col$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6615
|
+
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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) {
|
|
6601
6616
|
return props.rightToLeft &&
|
|
6602
6617
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6603
6618
|
});
|
|
@@ -6609,7 +6624,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6609
6624
|
var theme = useTheme();
|
|
6610
6625
|
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));
|
|
6611
6626
|
};
|
|
6612
|
-
var templateObject_1$
|
|
6627
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6613
6628
|
|
|
6614
6629
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6615
6630
|
__proto__: null,
|
|
@@ -6637,7 +6652,7 @@ var sizeMapper = (_a = {},
|
|
|
6637
6652
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6638
6653
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6639
6654
|
_a);
|
|
6640
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6655
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6641
6656
|
var wide = _a.wide;
|
|
6642
6657
|
return (wide ? '100%' : 'fit-content');
|
|
6643
6658
|
}, function (_a) {
|
|
@@ -6659,8 +6674,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6659
6674
|
var theme = _a.theme;
|
|
6660
6675
|
return theme.colors.text.disabled;
|
|
6661
6676
|
});
|
|
6662
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6663
|
-
var templateObject_1$
|
|
6677
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6678
|
+
var templateObject_1$1c, templateObject_2$R;
|
|
6664
6679
|
|
|
6665
6680
|
var BaseCTA = function (_a) {
|
|
6666
6681
|
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"]);
|
|
@@ -6727,23 +6742,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6727
6742
|
} }), void 0));
|
|
6728
6743
|
};
|
|
6729
6744
|
|
|
6730
|
-
var Container$
|
|
6731
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6732
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6745
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
6746
|
+
var IconContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
6747
|
+
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __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; });
|
|
6733
6748
|
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; });
|
|
6734
6749
|
var Note = function (_a) {
|
|
6735
6750
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6736
6751
|
var theme = useTheme();
|
|
6737
|
-
return (jsxRuntime.jsxs(Container$
|
|
6752
|
+
return (jsxRuntime.jsxs(Container$P, __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));
|
|
6738
6753
|
};
|
|
6739
|
-
var templateObject_1$
|
|
6754
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$t;
|
|
6740
6755
|
|
|
6741
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6756
|
+
var Title$2 = newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6742
6757
|
var theme = _a.theme;
|
|
6743
6758
|
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 ");
|
|
6744
6759
|
});
|
|
6745
|
-
var Line = newStyled.div(templateObject_2$
|
|
6746
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6760
|
+
var Line = newStyled.div(templateObject_2$P || (templateObject_2$P = __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; });
|
|
6761
|
+
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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({
|
|
6747
6762
|
flexDirection: ['column', 'row'],
|
|
6748
6763
|
}));
|
|
6749
6764
|
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({
|
|
@@ -6781,16 +6796,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6781
6796
|
var theme = useTheme();
|
|
6782
6797
|
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));
|
|
6783
6798
|
};
|
|
6784
|
-
var templateObject_1$
|
|
6799
|
+
var templateObject_1$1a, templateObject_2$P, templateObject_3$E, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6785
6800
|
|
|
6786
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6801
|
+
var Backdrop = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6787
6802
|
var top = _a.top;
|
|
6788
6803
|
return top;
|
|
6789
6804
|
}, function (_a) {
|
|
6790
6805
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6791
6806
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6792
6807
|
});
|
|
6793
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6808
|
+
var Sidebar = newStyled.div(templateObject_2$O || (templateObject_2$O = __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) {
|
|
6794
6809
|
var height = _a.height;
|
|
6795
6810
|
return height;
|
|
6796
6811
|
}, function (_a) {
|
|
@@ -6837,20 +6852,20 @@ var Drawer = function (_a) {
|
|
|
6837
6852
|
}, [isOpen, onClose, onOpen]);
|
|
6838
6853
|
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;
|
|
6839
6854
|
};
|
|
6840
|
-
var templateObject_1$
|
|
6855
|
+
var templateObject_1$19, templateObject_2$O;
|
|
6841
6856
|
|
|
6842
6857
|
var TooltipArrow = function (_a) {
|
|
6843
6858
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6844
6859
|
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));
|
|
6845
6860
|
};
|
|
6846
6861
|
|
|
6847
|
-
var List = newStyled.ul(templateObject_1$
|
|
6848
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6849
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6862
|
+
var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6863
|
+
var Item$2 = newStyled.li(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
6864
|
+
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
6850
6865
|
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"])));
|
|
6851
6866
|
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; });
|
|
6852
6867
|
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; });
|
|
6853
|
-
var templateObject_1$
|
|
6868
|
+
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6854
6869
|
|
|
6855
6870
|
var DropdownListIcons = function (_a) {
|
|
6856
6871
|
var items = _a.items;
|
|
@@ -6863,13 +6878,13 @@ var Dropdown = function (_a) {
|
|
|
6863
6878
|
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));
|
|
6864
6879
|
};
|
|
6865
6880
|
|
|
6866
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6867
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6868
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6881
|
+
var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
6882
|
+
var DropdownLabel = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
6883
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6869
6884
|
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"])));
|
|
6870
6885
|
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"])));
|
|
6871
6886
|
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"])));
|
|
6872
|
-
var templateObject_1$
|
|
6887
|
+
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6873
6888
|
|
|
6874
6889
|
var SizeDropdown = function (_a) {
|
|
6875
6890
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6892,9 +6907,9 @@ var SizeDropdown = function (_a) {
|
|
|
6892
6907
|
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));
|
|
6893
6908
|
};
|
|
6894
6909
|
|
|
6895
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6896
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6897
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6910
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
6911
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$L || (templateObject_2$L = __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; });
|
|
6912
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
6898
6913
|
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"])));
|
|
6899
6914
|
var DropdownDialog = function (_a) {
|
|
6900
6915
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -6904,7 +6919,7 @@ var DropdownDialog = function (_a) {
|
|
|
6904
6919
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6905
6920
|
}) }), void 0) }), void 0));
|
|
6906
6921
|
};
|
|
6907
|
-
var templateObject_1$
|
|
6922
|
+
var templateObject_1$16, templateObject_2$L, templateObject_3$B, templateObject_4$p;
|
|
6908
6923
|
|
|
6909
6924
|
function FilteringDropdown(_a) {
|
|
6910
6925
|
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;
|
|
@@ -6937,21 +6952,21 @@ function FilteringDropdown(_a) {
|
|
|
6937
6952
|
}) }, void 0)] }), void 0));
|
|
6938
6953
|
}
|
|
6939
6954
|
|
|
6940
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6941
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6942
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6943
|
-
var Container$
|
|
6955
|
+
var Title$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
6956
|
+
var H3 = newStyled.h3(templateObject_2$K || (templateObject_2$K = __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; });
|
|
6957
|
+
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6958
|
+
var Container$O = 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'); });
|
|
6944
6959
|
var Accordion = function (_a) {
|
|
6945
6960
|
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;
|
|
6946
6961
|
var theme = useTheme();
|
|
6947
6962
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6948
|
-
return (jsxRuntime.jsxs(Container$
|
|
6963
|
+
return (jsxRuntime.jsxs(Container$O, __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));
|
|
6949
6964
|
};
|
|
6950
|
-
var templateObject_1$
|
|
6965
|
+
var templateObject_1$15, templateObject_2$K, templateObject_3$A, templateObject_4$o;
|
|
6951
6966
|
|
|
6952
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6953
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6954
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6967
|
+
var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
6968
|
+
var Header$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
6969
|
+
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
6955
6970
|
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"])));
|
|
6956
6971
|
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; });
|
|
6957
6972
|
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; });
|
|
@@ -6959,7 +6974,7 @@ var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 =
|
|
|
6959
6974
|
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; });
|
|
6960
6975
|
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"])));
|
|
6961
6976
|
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"])));
|
|
6962
|
-
var templateObject_1$
|
|
6977
|
+
var templateObject_1$14, templateObject_2$J, templateObject_3$z, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6963
6978
|
|
|
6964
6979
|
var getStylesBySize$7 = function (size, theme) {
|
|
6965
6980
|
switch (size) {
|
|
@@ -7024,9 +7039,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7024
7039
|
} }), id: id }, void 0));
|
|
7025
7040
|
};
|
|
7026
7041
|
|
|
7027
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7028
|
-
var LI = newStyled.li(templateObject_2$
|
|
7029
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7042
|
+
var UL = newStyled.ul(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7043
|
+
var LI = newStyled.li(templateObject_2$I || (templateObject_2$I = __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; });
|
|
7044
|
+
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
7030
7045
|
var Tags = function (_a) {
|
|
7031
7046
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7032
7047
|
var theme = useTheme();
|
|
@@ -7034,7 +7049,7 @@ var Tags = function (_a) {
|
|
|
7034
7049
|
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));
|
|
7035
7050
|
}) }), void 0));
|
|
7036
7051
|
};
|
|
7037
|
-
var templateObject_1$
|
|
7052
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y;
|
|
7038
7053
|
|
|
7039
7054
|
var Filters = function (_a) {
|
|
7040
7055
|
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;
|
|
@@ -7170,8 +7185,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7170
7185
|
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));
|
|
7171
7186
|
};
|
|
7172
7187
|
|
|
7173
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7174
|
-
var Container$
|
|
7188
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7189
|
+
var Container$N = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
7175
7190
|
var FitGuarantee = function (_a) {
|
|
7176
7191
|
var _b;
|
|
7177
7192
|
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;
|
|
@@ -7182,17 +7197,17 @@ var FitGuarantee = function (_a) {
|
|
|
7182
7197
|
console.error('Icon', iconName, 'not found');
|
|
7183
7198
|
return null;
|
|
7184
7199
|
}
|
|
7185
|
-
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$
|
|
7200
|
+
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$N, __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$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7186
7201
|
margin: '0.1rem 0',
|
|
7187
7202
|
width: '100%',
|
|
7188
7203
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7189
7204
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7190
7205
|
} }, { 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));
|
|
7191
7206
|
};
|
|
7192
|
-
var templateObject_1$
|
|
7207
|
+
var templateObject_1$12, templateObject_2$H;
|
|
7193
7208
|
|
|
7194
|
-
var Container$
|
|
7195
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7209
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7210
|
+
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __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; });
|
|
7196
7211
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7197
7212
|
border: 'none',
|
|
7198
7213
|
background: 'transparent',
|
|
@@ -7205,9 +7220,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7205
7220
|
var FitPredictor = function (_a) {
|
|
7206
7221
|
var onClick = _a.onClick;
|
|
7207
7222
|
var theme = useTheme();
|
|
7208
|
-
return (jsxs(Container$
|
|
7223
|
+
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { 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));
|
|
7209
7224
|
};
|
|
7210
|
-
var templateObject_1
|
|
7225
|
+
var templateObject_1$11, templateObject_2$G;
|
|
7211
7226
|
|
|
7212
7227
|
var Button$6 = newStyled.button(function () { return ({
|
|
7213
7228
|
background: 'transparent',
|
|
@@ -11451,14 +11466,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11451
11466
|
return Slider;
|
|
11452
11467
|
}(React__default["default"].Component);
|
|
11453
11468
|
|
|
11454
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11469
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
11455
11470
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11456
11471
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11457
11472
|
}, function (_a) {
|
|
11458
11473
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11459
11474
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11460
11475
|
});
|
|
11461
|
-
var templateObject_1$
|
|
11476
|
+
var templateObject_1$10;
|
|
11462
11477
|
|
|
11463
11478
|
var getStylesBySize$6 = function (size) {
|
|
11464
11479
|
// rem units
|
|
@@ -11517,7 +11532,7 @@ var SliderNavigation = function (_a) {
|
|
|
11517
11532
|
} }, { 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));
|
|
11518
11533
|
};
|
|
11519
11534
|
|
|
11520
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11535
|
+
var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
11521
11536
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11522
11537
|
return borderRadiusVariant &&
|
|
11523
11538
|
"\nborder-radius: 20px;\n";
|
|
@@ -11532,11 +11547,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11532
11547
|
var theme = useTheme();
|
|
11533
11548
|
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));
|
|
11534
11549
|
};
|
|
11535
|
-
var templateObject_1
|
|
11550
|
+
var templateObject_1$$;
|
|
11536
11551
|
|
|
11537
|
-
var horizontalStyles = css(templateObject_1$
|
|
11538
|
-
var verticalStyles = css(templateObject_2$
|
|
11539
|
-
var Container$
|
|
11552
|
+
var horizontalStyles = css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11553
|
+
var verticalStyles = css(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
11554
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __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) {
|
|
11540
11555
|
var position = _a.position;
|
|
11541
11556
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11542
11557
|
}, function (_a) {
|
|
@@ -11559,13 +11574,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11559
11574
|
var element = document.querySelector(".imageListContainer");
|
|
11560
11575
|
element.scrollBy(0, 200);
|
|
11561
11576
|
};
|
|
11562
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11577
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$L, __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: {
|
|
11563
11578
|
arrowWidth: 0.75,
|
|
11564
11579
|
arrowHeight: 1.25,
|
|
11565
11580
|
arrowPadding: 1.625,
|
|
11566
11581
|
}, 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));
|
|
11567
11582
|
};
|
|
11568
|
-
var templateObject_1$
|
|
11583
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11569
11584
|
|
|
11570
11585
|
var propTypes = {exports: {}};
|
|
11571
11586
|
|
|
@@ -13158,21 +13173,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13158
13173
|
afterZoomOut: PropTypes.func
|
|
13159
13174
|
} : {};
|
|
13160
13175
|
|
|
13161
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13162
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13163
|
-
var templateObject_1$
|
|
13176
|
+
var ProgressContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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); });
|
|
13177
|
+
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __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; });
|
|
13178
|
+
var templateObject_1$Z, templateObject_2$E;
|
|
13164
13179
|
|
|
13165
13180
|
var ProgressBar$1 = function (_a) {
|
|
13166
13181
|
var progress = _a.progress, hide = _a.hide;
|
|
13167
13182
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13168
13183
|
};
|
|
13169
13184
|
|
|
13170
|
-
var Container$
|
|
13171
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13172
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13185
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13186
|
+
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13187
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
13173
13188
|
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"])));
|
|
13174
13189
|
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"])));
|
|
13175
|
-
var templateObject_1$
|
|
13190
|
+
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$d;
|
|
13176
13191
|
|
|
13177
13192
|
var Video$1 = function (_a) {
|
|
13178
13193
|
var _b, _c, _d, _e;
|
|
@@ -13211,30 +13226,30 @@ var Video$1 = function (_a) {
|
|
|
13211
13226
|
setVideoProgress(videoRef.current.currentTime);
|
|
13212
13227
|
}
|
|
13213
13228
|
};
|
|
13214
|
-
return (jsxRuntime.jsxs(Container$
|
|
13229
|
+
return (jsxRuntime.jsxs(Container$K, { 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));
|
|
13215
13230
|
};
|
|
13216
13231
|
|
|
13217
|
-
var Container$
|
|
13232
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
13218
13233
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13219
13234
|
return borderRadiusVariant &&
|
|
13220
13235
|
"\n border-radius: 40px;\n ";
|
|
13221
13236
|
});
|
|
13222
|
-
var TopTagContainer$
|
|
13223
|
-
var BottomTagContainer$
|
|
13237
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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'); });
|
|
13238
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13224
13239
|
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"])));
|
|
13225
13240
|
var ImageProductWithTags$1 = function (_a) {
|
|
13226
13241
|
var _b;
|
|
13227
13242
|
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;
|
|
13228
13243
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13229
13244
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13230
|
-
return (jsxRuntime.jsxs(Container$
|
|
13245
|
+
return (jsxRuntime.jsxs(Container$J, __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: {
|
|
13231
13246
|
alt: content.alt,
|
|
13232
13247
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13233
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13248
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { 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));
|
|
13234
13249
|
};
|
|
13235
|
-
var templateObject_1$
|
|
13250
|
+
var templateObject_1$X, templateObject_2$C, templateObject_3$v, templateObject_4$k;
|
|
13236
13251
|
|
|
13237
|
-
var Container$
|
|
13252
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13238
13253
|
var ProductGallery = function (_a) {
|
|
13239
13254
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13240
13255
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13242,11 +13257,11 @@ var ProductGallery = function (_a) {
|
|
|
13242
13257
|
React$2.useEffect(function () {
|
|
13243
13258
|
setSelectedImage(initialValue);
|
|
13244
13259
|
}, [initialValue]);
|
|
13245
|
-
return (jsxRuntime.jsxs(Container$
|
|
13260
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13246
13261
|
setSelectedImage(value);
|
|
13247
13262
|
}, 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));
|
|
13248
13263
|
};
|
|
13249
|
-
var templateObject_1$
|
|
13264
|
+
var templateObject_1$W;
|
|
13250
13265
|
|
|
13251
13266
|
var getStylesBySize$5 = function (size) {
|
|
13252
13267
|
switch (size) {
|
|
@@ -13267,7 +13282,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13267
13282
|
};
|
|
13268
13283
|
}
|
|
13269
13284
|
};
|
|
13270
|
-
var Container$
|
|
13285
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13271
13286
|
var backgroundColor = _a.backgroundColor;
|
|
13272
13287
|
return backgroundColor;
|
|
13273
13288
|
}, function (_a) {
|
|
@@ -13295,11 +13310,11 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13295
13310
|
var IconButton = function (_a) {
|
|
13296
13311
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13297
13312
|
var theme = useTheme();
|
|
13298
|
-
return (jsxRuntime.jsx(Container$
|
|
13313
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13299
13314
|
};
|
|
13300
|
-
var templateObject_1$
|
|
13315
|
+
var templateObject_1$V;
|
|
13301
13316
|
|
|
13302
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13317
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13303
13318
|
var AmazonButton = function (_a) {
|
|
13304
13319
|
var onClick = _a.onClick;
|
|
13305
13320
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13308,9 +13323,9 @@ var PaypalButton = function (_a) {
|
|
|
13308
13323
|
var onClick = _a.onClick;
|
|
13309
13324
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13310
13325
|
};
|
|
13311
|
-
var templateObject_1$
|
|
13326
|
+
var templateObject_1$U;
|
|
13312
13327
|
|
|
13313
|
-
var Container$
|
|
13328
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13314
13329
|
height: 'auto',
|
|
13315
13330
|
textAlign: 'center',
|
|
13316
13331
|
justifyContent: 'center',
|
|
@@ -13360,12 +13375,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13360
13375
|
textAlign: 'center',
|
|
13361
13376
|
lineHeight: '18px',
|
|
13362
13377
|
};
|
|
13363
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13378
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __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));
|
|
13364
13379
|
};
|
|
13365
13380
|
|
|
13366
|
-
var Container$
|
|
13367
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13368
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13381
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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'); });
|
|
13382
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13383
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13369
13384
|
var titlePosition = _a.titlePosition;
|
|
13370
13385
|
return titlePosition == 'center' &&
|
|
13371
13386
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13373,15 +13388,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13373
13388
|
var ImageCardWithDescription = function (_a) {
|
|
13374
13389
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13375
13390
|
var isMobile = useWindowDimensions().isMobile;
|
|
13376
|
-
return (jsxRuntime.jsxs(Container$
|
|
13391
|
+
return (jsxRuntime.jsxs(Container$F, __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));
|
|
13377
13392
|
};
|
|
13378
|
-
var templateObject_1$
|
|
13393
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$u;
|
|
13379
13394
|
|
|
13380
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13395
|
+
var Label$1 = newStyled.span(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13381
13396
|
var color = _a.color;
|
|
13382
13397
|
return color;
|
|
13383
13398
|
});
|
|
13384
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13399
|
+
var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13385
13400
|
var color = _a.color;
|
|
13386
13401
|
return color;
|
|
13387
13402
|
});
|
|
@@ -13390,7 +13405,7 @@ var InputLabel = function (_a) {
|
|
|
13390
13405
|
var theme = useTheme();
|
|
13391
13406
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13392
13407
|
};
|
|
13393
|
-
var templateObject_1$
|
|
13408
|
+
var templateObject_1$S, templateObject_2$A;
|
|
13394
13409
|
|
|
13395
13410
|
var containerByStatus = function (theme, status) {
|
|
13396
13411
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13399,12 +13414,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13399
13414
|
return theme.colors.semantic.urgent.color;
|
|
13400
13415
|
return '';
|
|
13401
13416
|
};
|
|
13402
|
-
var Container$
|
|
13417
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13403
13418
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13404
13419
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13405
13420
|
});
|
|
13406
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13407
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13421
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13422
|
+
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13408
13423
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13409
13424
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13410
13425
|
}, function (_a) {
|
|
@@ -13477,7 +13492,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13477
13492
|
return theme.component.input.lineHeight;
|
|
13478
13493
|
});
|
|
13479
13494
|
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"])));
|
|
13480
|
-
var templateObject_1$
|
|
13495
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13481
13496
|
|
|
13482
13497
|
var BaseInput = function (_a) {
|
|
13483
13498
|
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"]);
|
|
@@ -13500,7 +13515,7 @@ var BaseInput = function (_a) {
|
|
|
13500
13515
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13501
13516
|
}, [status]);
|
|
13502
13517
|
var hasValue = Boolean(value);
|
|
13503
|
-
return (jsxRuntime.jsxs(Container$
|
|
13518
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13504
13519
|
onChange(event.target.value, event);
|
|
13505
13520
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13506
13521
|
onChange('', { target: { value: '' } });
|
|
@@ -13521,11 +13536,11 @@ var Button$4 = function (_a) {
|
|
|
13521
13536
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13522
13537
|
};
|
|
13523
13538
|
|
|
13524
|
-
var Container$
|
|
13539
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13525
13540
|
var theme = _a.theme;
|
|
13526
13541
|
return theme.component.inputCustom.input.borderRadius;
|
|
13527
13542
|
});
|
|
13528
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13543
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13529
13544
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13530
13545
|
return defaultRounded
|
|
13531
13546
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13540,23 +13555,23 @@ var Custom = function (_a) {
|
|
|
13540
13555
|
text: text,
|
|
13541
13556
|
disabled: rest.disabled,
|
|
13542
13557
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13543
|
-
return (jsxRuntime.jsx(Container$
|
|
13558
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13544
13559
|
};
|
|
13545
|
-
var templateObject_1$
|
|
13560
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
13546
13561
|
|
|
13547
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13562
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13548
13563
|
var size = _a.size;
|
|
13549
13564
|
return (size === 'small' ? '36px' : '');
|
|
13550
13565
|
});
|
|
13551
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13552
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13566
|
+
var SuccessMessage = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
13567
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13553
13568
|
var Success = function (_a) {
|
|
13554
13569
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13555
13570
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13556
13571
|
};
|
|
13557
|
-
var templateObject_1$
|
|
13572
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
13558
13573
|
|
|
13559
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13574
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13560
13575
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13561
13576
|
return status === exports.InputValidationType.Empty &&
|
|
13562
13577
|
type === 'primary' &&
|
|
@@ -13573,16 +13588,16 @@ var BasePlusButton = function (_a) {
|
|
|
13573
13588
|
}
|
|
13574
13589
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13575
13590
|
};
|
|
13576
|
-
var templateObject_1$
|
|
13591
|
+
var templateObject_1$O;
|
|
13577
13592
|
|
|
13578
|
-
var Container$
|
|
13579
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13593
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13594
|
+
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13580
13595
|
var BasePlusIcon = function (_a) {
|
|
13581
13596
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13582
13597
|
var theme = useTheme();
|
|
13583
|
-
return (jsxRuntime.jsx(Container$
|
|
13598
|
+
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13584
13599
|
};
|
|
13585
|
-
var templateObject_1$
|
|
13600
|
+
var templateObject_1$N, templateObject_2$w;
|
|
13586
13601
|
|
|
13587
13602
|
var Input$3 = {
|
|
13588
13603
|
Simple: BaseInput,
|
|
@@ -13591,7 +13606,7 @@ var Input$3 = {
|
|
|
13591
13606
|
SimplePlusIcon: BasePlusIcon,
|
|
13592
13607
|
};
|
|
13593
13608
|
|
|
13594
|
-
var Container$
|
|
13609
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13595
13610
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13596
13611
|
return borderRadiusVariant &&
|
|
13597
13612
|
"\n border-radius: 40px;\n ";
|
|
@@ -13600,11 +13615,11 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13600
13615
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13601
13616
|
});
|
|
13602
13617
|
// max-height: 31.875rem;
|
|
13603
|
-
var TopTagContainer$
|
|
13604
|
-
var BottomTagContainer$
|
|
13618
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13619
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13605
13620
|
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"])));
|
|
13606
13621
|
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"])));
|
|
13607
|
-
var settings$
|
|
13622
|
+
var settings$2 = {
|
|
13608
13623
|
dots: true,
|
|
13609
13624
|
infinite: false,
|
|
13610
13625
|
speed: 200,
|
|
@@ -13618,7 +13633,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13618
13633
|
var sliderWrapper = React$2.useRef(null);
|
|
13619
13634
|
React$2.useRef(null);
|
|
13620
13635
|
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13621
|
-
usePreventVerticalScroll$
|
|
13636
|
+
usePreventVerticalScroll$2(sliderWrapper);
|
|
13622
13637
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13623
13638
|
var _a;
|
|
13624
13639
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13648,20 +13663,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13648
13663
|
}
|
|
13649
13664
|
}
|
|
13650
13665
|
}, [contents, selectedValue]);
|
|
13651
|
-
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$
|
|
13666
|
+
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$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13652
13667
|
var _a;
|
|
13653
13668
|
var activeSlide = contents[e];
|
|
13654
13669
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13655
13670
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13656
13671
|
autoplay ? _playVideo() : _stopVideo();
|
|
13657
|
-
} }, settings$
|
|
13672
|
+
} }, settings$2, { 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) {
|
|
13658
13673
|
var _a;
|
|
13659
13674
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13660
13675
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13661
|
-
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$
|
|
13676
|
+
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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __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));
|
|
13662
13677
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13663
13678
|
};
|
|
13664
|
-
function usePreventVerticalScroll$
|
|
13679
|
+
function usePreventVerticalScroll$2(ref, dragThreshold) {
|
|
13665
13680
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13666
13681
|
var firstClientX = React$2.useRef(0);
|
|
13667
13682
|
var clientX = React$2.useRef(0);
|
|
@@ -13696,14 +13711,14 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13696
13711
|
};
|
|
13697
13712
|
}, [preventTouch, ref, touchStart]);
|
|
13698
13713
|
}
|
|
13699
|
-
var templateObject_1$
|
|
13714
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
13700
13715
|
|
|
13701
|
-
var Container$
|
|
13716
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
13702
13717
|
var ProductGalleryMobile = function (_a) {
|
|
13703
13718
|
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;
|
|
13704
|
-
return (jsxRuntime.jsx(Container$
|
|
13719
|
+
return (jsxRuntime.jsx(Container$A, __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));
|
|
13705
13720
|
};
|
|
13706
|
-
var templateObject_1$
|
|
13721
|
+
var templateObject_1$L;
|
|
13707
13722
|
|
|
13708
13723
|
function _extends() {
|
|
13709
13724
|
_extends = Object.assign || function (target) {
|
|
@@ -13970,27 +13985,27 @@ function useSwipeable(options) {
|
|
|
13970
13985
|
return handlers;
|
|
13971
13986
|
}
|
|
13972
13987
|
|
|
13973
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13988
|
+
var Button$2 = newStyled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13974
13989
|
var ArrowButton = function (_a) {
|
|
13975
13990
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13976
13991
|
return (jsxRuntime.jsx(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13977
13992
|
};
|
|
13978
|
-
var templateObject_1$
|
|
13993
|
+
var templateObject_1$K;
|
|
13979
13994
|
|
|
13980
|
-
var Container$
|
|
13995
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13981
13996
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13982
13997
|
var SlideDots = function (_a) {
|
|
13983
13998
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13984
13999
|
var theme = useTheme();
|
|
13985
|
-
return (jsxRuntime.jsx(Container$
|
|
14000
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13986
14001
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13987
14002
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
13988
14003
|
};
|
|
13989
|
-
var templateObject_1$
|
|
14004
|
+
var templateObject_1$J;
|
|
13990
14005
|
|
|
13991
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13992
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13993
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14006
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14007
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14008
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13994
14009
|
var SlideNavigation = function (_a) {
|
|
13995
14010
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13996
14011
|
var theme = useTheme();
|
|
@@ -14002,23 +14017,23 @@ var SlideNavigation = function (_a) {
|
|
|
14002
14017
|
onNavigate(selectedIndex + 1);
|
|
14003
14018
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14004
14019
|
};
|
|
14005
|
-
var templateObject_1$
|
|
14020
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q;
|
|
14006
14021
|
|
|
14007
|
-
var Container$
|
|
14022
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14008
14023
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14009
14024
|
return borderRadiusVariant &&
|
|
14010
14025
|
"\n border-radius: 40px;\n ";
|
|
14011
14026
|
});
|
|
14012
|
-
var TopTagContainer$
|
|
14013
|
-
var BottomTagContainer$
|
|
14027
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14028
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14014
14029
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14015
14030
|
var _b, _c;
|
|
14016
14031
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14017
|
-
return (jsxRuntime.jsxs(Container$
|
|
14032
|
+
return (jsxRuntime.jsxs(Container$y, __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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (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));
|
|
14018
14033
|
});
|
|
14019
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p;
|
|
14020
14035
|
|
|
14021
|
-
var Container$
|
|
14036
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
14022
14037
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14023
14038
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14024
14039
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14040,11 +14055,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14040
14055
|
React$2.useEffect(function () {
|
|
14041
14056
|
setSelectedImage(images[index]);
|
|
14042
14057
|
}, [index, images]);
|
|
14043
|
-
return (jsxRuntime.jsxs(Container$
|
|
14058
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14044
14059
|
};
|
|
14045
|
-
var templateObject_1$
|
|
14060
|
+
var templateObject_1$G;
|
|
14046
14061
|
|
|
14047
|
-
var Container$
|
|
14062
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14048
14063
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14049
14064
|
return borderRadiusVariant &&
|
|
14050
14065
|
"\n border-radius: 40px;\n ";
|
|
@@ -14053,15 +14068,15 @@ var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14053
14068
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14054
14069
|
});
|
|
14055
14070
|
// max-height: 31.875rem;
|
|
14056
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14057
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14071
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14072
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14058
14073
|
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14059
14074
|
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14060
14075
|
var VideoTag = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __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"])));
|
|
14061
14076
|
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14062
14077
|
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14063
14078
|
var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
14064
|
-
var settings = {
|
|
14079
|
+
var settings$1 = {
|
|
14065
14080
|
dots: true,
|
|
14066
14081
|
infinite: false,
|
|
14067
14082
|
speed: 200,
|
|
@@ -14075,7 +14090,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14075
14090
|
var sliderWrapper = React$2.useRef(null);
|
|
14076
14091
|
var iframeRef = React$2.useRef(null);
|
|
14077
14092
|
var _c = React$2.useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
14078
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
14093
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
14079
14094
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
14080
14095
|
var _a;
|
|
14081
14096
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -14105,20 +14120,20 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14105
14120
|
}
|
|
14106
14121
|
}
|
|
14107
14122
|
}, [images, selectedValue]);
|
|
14108
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14123
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14109
14124
|
var _a;
|
|
14110
14125
|
var activeSlide = images[e];
|
|
14111
14126
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14112
14127
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14113
14128
|
autoplay ? _playVideo() : _stopVideo();
|
|
14114
|
-
} }, 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) {
|
|
14129
|
+
} }, settings$1, { 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) {
|
|
14115
14130
|
var _a, _b;
|
|
14116
|
-
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 () {
|
|
14131
|
+
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$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __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 () {
|
|
14117
14132
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14118
14133
|
} }, 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));
|
|
14119
14134
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14120
14135
|
};
|
|
14121
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14136
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
14122
14137
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14123
14138
|
var firstClientX = React$2.useRef(0);
|
|
14124
14139
|
var clientX = React$2.useRef(0);
|
|
@@ -14153,14 +14168,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14153
14168
|
};
|
|
14154
14169
|
}, [preventTouch, ref, touchStart]);
|
|
14155
14170
|
}
|
|
14156
|
-
var templateObject_1$
|
|
14171
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
14157
14172
|
|
|
14158
|
-
var Container$
|
|
14173
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14159
14174
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14160
14175
|
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;
|
|
14161
|
-
return (jsxRuntime.jsx(Container$
|
|
14176
|
+
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14162
14177
|
};
|
|
14163
|
-
var templateObject_1$
|
|
14178
|
+
var templateObject_1$E;
|
|
14164
14179
|
|
|
14165
14180
|
var __defProp$1 = Object.defineProperty;
|
|
14166
14181
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14293,14 +14308,14 @@ var Portal = function (_a) {
|
|
|
14293
14308
|
var visibleStyle = function (_a) {
|
|
14294
14309
|
var opened = _a.opened;
|
|
14295
14310
|
return opened
|
|
14296
|
-
? css(templateObject_1$
|
|
14311
|
+
? css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14297
14312
|
};
|
|
14298
14313
|
var transformStyle = function (_a) {
|
|
14299
14314
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14300
14315
|
return opened
|
|
14301
|
-
? css(templateObject_3$
|
|
14316
|
+
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14302
14317
|
};
|
|
14303
|
-
var Container$
|
|
14318
|
+
var Container$u = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14304
14319
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14305
14320
|
}), visibleStyle, transformStyle);
|
|
14306
14321
|
var Overlay = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -14313,7 +14328,7 @@ var Modal = function (_a) {
|
|
|
14313
14328
|
}
|
|
14314
14329
|
close();
|
|
14315
14330
|
};
|
|
14316
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14331
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$u, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14317
14332
|
};
|
|
14318
14333
|
var modalEvent = function (id, detail) {
|
|
14319
14334
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14341,9 +14356,220 @@ var useModal = function (id) {
|
|
|
14341
14356
|
close: close,
|
|
14342
14357
|
}); }, [close, open, opened]);
|
|
14343
14358
|
};
|
|
14344
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14360
|
+
|
|
14361
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
14362
|
+
var timerColor = _a.timerColor;
|
|
14363
|
+
return timerColor || '';
|
|
14364
|
+
});
|
|
14365
|
+
var timeToSeconds = function (_a) {
|
|
14366
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
14367
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
14368
|
+
};
|
|
14369
|
+
var secondsToTime = function (secs) {
|
|
14370
|
+
var hours = Math.floor(secs / 3600);
|
|
14371
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
14372
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
14373
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
14374
|
+
};
|
|
14375
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
14376
|
+
var Timer = function (_a) {
|
|
14377
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
14378
|
+
var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
14379
|
+
React$2.useEffect(function () {
|
|
14380
|
+
var timer = setInterval(function () {
|
|
14381
|
+
setSecs(function (seconds) {
|
|
14382
|
+
if (seconds === 1) {
|
|
14383
|
+
clearInterval(timer);
|
|
14384
|
+
onTimeUp();
|
|
14385
|
+
return 0;
|
|
14386
|
+
}
|
|
14387
|
+
return seconds - 1;
|
|
14388
|
+
});
|
|
14389
|
+
}, 1000);
|
|
14390
|
+
if (secs <= 0)
|
|
14391
|
+
clearInterval(timer);
|
|
14392
|
+
return function () { return clearInterval(timer); };
|
|
14393
|
+
}, [onTimeUp, secs]);
|
|
14394
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
14395
|
+
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
14396
|
+
};
|
|
14397
|
+
var templateObject_1$C;
|
|
14398
|
+
|
|
14399
|
+
var TimerContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
14400
|
+
var textPosition = _a.textPosition;
|
|
14401
|
+
return textPosition;
|
|
14402
|
+
}, function (_a) {
|
|
14403
|
+
var backgroundColor = _a.backgroundColor;
|
|
14404
|
+
return backgroundColor;
|
|
14405
|
+
}, function (_a) {
|
|
14406
|
+
var borderRadius = _a.borderRadius;
|
|
14407
|
+
return borderRadius || 'unset';
|
|
14408
|
+
}, function (_a) {
|
|
14409
|
+
var borderRadius = _a.borderRadius;
|
|
14410
|
+
return borderRadius || '8px';
|
|
14411
|
+
});
|
|
14412
|
+
var templateObject_1$B;
|
|
14413
|
+
|
|
14414
|
+
var getDefaultCountdown = function () {
|
|
14415
|
+
var tomorrowDate = new Date();
|
|
14416
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
14417
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
14418
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
14419
|
+
return Number(totalSeconds.toFixed(0));
|
|
14420
|
+
};
|
|
14421
|
+
|
|
14422
|
+
var HurryUp = function (_a) {
|
|
14423
|
+
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"]);
|
|
14424
|
+
var theme = useTheme();
|
|
14425
|
+
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));
|
|
14426
|
+
};
|
|
14427
|
+
|
|
14428
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14429
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14430
|
+
return borderRadiusVariant &&
|
|
14431
|
+
"\n border-radius: 40px;\n ";
|
|
14432
|
+
}, function (_a) {
|
|
14433
|
+
var theme = _a.theme;
|
|
14434
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14435
|
+
});
|
|
14436
|
+
// max-height: 31.875rem;
|
|
14437
|
+
var TopTagContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __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'); });
|
|
14438
|
+
var BottomTagContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"], ["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"])));
|
|
14439
|
+
var settings = {
|
|
14440
|
+
dots: true,
|
|
14441
|
+
infinite: false,
|
|
14442
|
+
speed: 200,
|
|
14443
|
+
slidesToShow: 1,
|
|
14444
|
+
slidesToScroll: 1,
|
|
14445
|
+
initialSlide: 0,
|
|
14446
|
+
centerMode: true,
|
|
14447
|
+
centerPadding: '22',
|
|
14448
|
+
};
|
|
14449
|
+
var ImageProductWithTagsV4 = function (_a) {
|
|
14450
|
+
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;
|
|
14451
|
+
var slick = React$2.useRef(null);
|
|
14452
|
+
var sliderWrapper = React$2.useRef(null);
|
|
14453
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14454
|
+
var onButtonClick = React$2.useCallback(function (i) {
|
|
14455
|
+
var _a;
|
|
14456
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
14457
|
+
}, [slick]);
|
|
14458
|
+
var _sendCommandToIframe = function (command) {
|
|
14459
|
+
var iframe = document.getElementById('vwo-video');
|
|
14460
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14461
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14462
|
+
event: 'command',
|
|
14463
|
+
func: command,
|
|
14464
|
+
}), '*');
|
|
14465
|
+
};
|
|
14466
|
+
var _stopVideo = function () {
|
|
14467
|
+
_sendCommandToIframe('stopVideo');
|
|
14468
|
+
};
|
|
14469
|
+
var _playVideo = function () {
|
|
14470
|
+
_sendCommandToIframe('playVideo');
|
|
14471
|
+
};
|
|
14472
|
+
React$2.useEffect(function () {
|
|
14473
|
+
var _a;
|
|
14474
|
+
if (selectedValue) {
|
|
14475
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14476
|
+
if (matchingIndex !== -1) {
|
|
14477
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14478
|
+
}
|
|
14479
|
+
}
|
|
14480
|
+
}, [contents, selectedValue]);
|
|
14481
|
+
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$t, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14482
|
+
var _a;
|
|
14483
|
+
var activeSlide = contents[e];
|
|
14484
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14485
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14486
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14487
|
+
} }, settings, { ref: slick }, { children: contents.map(function (content) {
|
|
14488
|
+
var _a;
|
|
14489
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14490
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14491
|
+
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, __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)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14492
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14493
|
+
};
|
|
14494
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14495
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14496
|
+
var firstClientX = React$2.useRef(0);
|
|
14497
|
+
var clientX = React$2.useRef(0);
|
|
14498
|
+
var preventTouch = React$2.useCallback(function (e) {
|
|
14499
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14500
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14501
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14502
|
+
if (e.cancelable) {
|
|
14503
|
+
e.preventDefault();
|
|
14504
|
+
e.returnValue = false;
|
|
14505
|
+
}
|
|
14506
|
+
return false;
|
|
14507
|
+
}
|
|
14508
|
+
return true;
|
|
14509
|
+
}, [dragThreshold]);
|
|
14510
|
+
var touchStart = React$2.useCallback(function (e) {
|
|
14511
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14512
|
+
}, []);
|
|
14513
|
+
React$2.useEffect(function () {
|
|
14514
|
+
var current = ref.current;
|
|
14515
|
+
if (current) {
|
|
14516
|
+
current.addEventListener('touchstart', touchStart);
|
|
14517
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14518
|
+
}
|
|
14519
|
+
return function () {
|
|
14520
|
+
if (current) {
|
|
14521
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14522
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14523
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14524
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14525
|
+
}
|
|
14526
|
+
};
|
|
14527
|
+
}, [preventTouch, ref, touchStart]);
|
|
14528
|
+
}
|
|
14529
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m;
|
|
14530
|
+
|
|
14531
|
+
var Container$s = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
14532
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
14533
|
+
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;
|
|
14534
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ "data-testid": "product-gallery-mobile-v4" }, { children: jsxRuntime.jsx(ImageProductWithTagsV4, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14535
|
+
};
|
|
14536
|
+
var templateObject_1$z;
|
|
14345
14537
|
|
|
14346
|
-
var
|
|
14538
|
+
var Container$r = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
14539
|
+
var size = _a.size;
|
|
14540
|
+
return (size ? size : '100%');
|
|
14541
|
+
}, function (_a) {
|
|
14542
|
+
var size = _a.size;
|
|
14543
|
+
return (size ? size : '100%');
|
|
14544
|
+
});
|
|
14545
|
+
var borderSize = {
|
|
14546
|
+
xsmall: '1px',
|
|
14547
|
+
small: '1.5px',
|
|
14548
|
+
medium: '2px',
|
|
14549
|
+
large: '3px',
|
|
14550
|
+
};
|
|
14551
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
14552
|
+
var StyledSpinner = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
14553
|
+
var size = _a.size;
|
|
14554
|
+
return borderSize[size];
|
|
14555
|
+
}, function (_a) {
|
|
14556
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
14557
|
+
return background;
|
|
14558
|
+
}, function (_a) {
|
|
14559
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
14560
|
+
return color;
|
|
14561
|
+
}, function (_a) {
|
|
14562
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
14563
|
+
return duration;
|
|
14564
|
+
});
|
|
14565
|
+
var templateObject_1$y, templateObject_2$p;
|
|
14566
|
+
|
|
14567
|
+
var Spinner = function (_a) {
|
|
14568
|
+
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
14569
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
14570
|
+
};
|
|
14571
|
+
|
|
14572
|
+
var Bar$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14347
14573
|
var height = _a.height;
|
|
14348
14574
|
return height || '0.5rem';
|
|
14349
14575
|
}, function (_a) {
|
|
@@ -14382,7 +14608,7 @@ var BarContainer = newStyled.div({
|
|
|
14382
14608
|
padding: '0 16px',
|
|
14383
14609
|
position: 'relative',
|
|
14384
14610
|
});
|
|
14385
|
-
var Container$
|
|
14611
|
+
var Container$q = newStyled.div(function (_a) {
|
|
14386
14612
|
var backgroundColor = _a.backgroundColor;
|
|
14387
14613
|
return ({
|
|
14388
14614
|
width: '475px',
|
|
@@ -14413,21 +14639,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14413
14639
|
var theme = useTheme();
|
|
14414
14640
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14415
14641
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14416
|
-
return (jsxRuntime.jsxs(Container$
|
|
14642
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14417
14643
|
};
|
|
14418
|
-
var templateObject_1$
|
|
14644
|
+
var templateObject_1$x;
|
|
14419
14645
|
|
|
14420
|
-
var Container$
|
|
14646
|
+
var Container$p = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14421
14647
|
var theme = _a.theme;
|
|
14422
14648
|
return theme.component.orderBar.backgroundColor;
|
|
14423
14649
|
});
|
|
14424
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14650
|
+
var H1 = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14425
14651
|
var OrderBar = function (_a) {
|
|
14426
14652
|
var message = _a.message, color = _a.color;
|
|
14427
14653
|
var theme = useTheme();
|
|
14428
|
-
return (jsxRuntime.jsxs(Container$
|
|
14654
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14429
14655
|
};
|
|
14430
|
-
var templateObject_1$
|
|
14656
|
+
var templateObject_1$w, templateObject_2$o;
|
|
14431
14657
|
|
|
14432
14658
|
var htmlReactParser = {exports: {}};
|
|
14433
14659
|
|
|
@@ -18208,8 +18434,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18208
18434
|
HTMLReactParser$1.attributesToProps;
|
|
18209
18435
|
HTMLReactParser$1.Element;
|
|
18210
18436
|
|
|
18211
|
-
var Container$
|
|
18212
|
-
var Card = newStyled.div(templateObject_2$
|
|
18437
|
+
var Container$o = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
18438
|
+
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18213
18439
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
18214
18440
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
18215
18441
|
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
@@ -18218,7 +18444,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 =
|
|
|
18218
18444
|
var DiscountContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18219
18445
|
var PackSelector = function (_a) {
|
|
18220
18446
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18221
|
-
return (jsxRuntime.jsx(Container$
|
|
18447
|
+
return (jsxRuntime.jsx(Container$o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18222
18448
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18223
18449
|
}) }), void 0));
|
|
18224
18450
|
};
|
|
@@ -18245,10 +18471,10 @@ var PackCard = function (_a) {
|
|
|
18245
18471
|
currency: currencyCode || 'USD',
|
|
18246
18472
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18247
18473
|
};
|
|
18248
|
-
var templateObject_1$
|
|
18474
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
18249
18475
|
|
|
18250
|
-
var Container$
|
|
18251
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18476
|
+
var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18477
|
+
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18252
18478
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18253
18479
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18254
18480
|
}));
|
|
@@ -18269,7 +18495,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18269
18495
|
var background = _a.background;
|
|
18270
18496
|
return background || 'unset';
|
|
18271
18497
|
});
|
|
18272
|
-
var templateObject_1$
|
|
18498
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
18273
18499
|
|
|
18274
18500
|
var Pagination = function (_a) {
|
|
18275
18501
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18315,7 +18541,7 @@ var Pagination = function (_a) {
|
|
|
18315
18541
|
}
|
|
18316
18542
|
return pages;
|
|
18317
18543
|
}, [from, page, showReducedPages, to]);
|
|
18318
|
-
return (jsxRuntime.jsxs(Container$
|
|
18544
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18319
18545
|
};
|
|
18320
18546
|
|
|
18321
18547
|
var PaginatorBlog = function (_a) {
|
|
@@ -18329,12 +18555,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18329
18555
|
setPage(page);
|
|
18330
18556
|
onChange(page);
|
|
18331
18557
|
};
|
|
18332
|
-
return (jsxRuntime.jsxs(Container$
|
|
18558
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18333
18559
|
? theme.colors.shades['white'].color
|
|
18334
18560
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18335
18561
|
};
|
|
18336
18562
|
|
|
18337
|
-
var Container$
|
|
18563
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18338
18564
|
var width = _a.width;
|
|
18339
18565
|
return width;
|
|
18340
18566
|
}, function (_a) {
|
|
@@ -18350,13 +18576,13 @@ var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18350
18576
|
var PaymentMethod = function (_a) {
|
|
18351
18577
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18352
18578
|
var theme = useTheme();
|
|
18353
|
-
return (jsxRuntime.jsx(Container$
|
|
18579
|
+
return (jsxRuntime.jsx(Container$m, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18354
18580
|
};
|
|
18355
|
-
var templateObject_1$
|
|
18581
|
+
var templateObject_1$t;
|
|
18356
18582
|
|
|
18357
|
-
var Container$
|
|
18583
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18358
18584
|
var IMAGE_WIDTH = '63px';
|
|
18359
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18585
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18360
18586
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18361
18587
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18362
18588
|
}), IMAGE_WIDTH);
|
|
@@ -18394,9 +18620,9 @@ var StyledSpan = newStyled.span(templateObject_6$6 || (templateObject_6$6 = __ma
|
|
|
18394
18620
|
var SimpleOrderItem = function (_a) {
|
|
18395
18621
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18396
18622
|
var theme = useTheme();
|
|
18397
|
-
return (jsxRuntime.jsxs(Container$
|
|
18623
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18398
18624
|
};
|
|
18399
|
-
var templateObject_1$
|
|
18625
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18400
18626
|
|
|
18401
18627
|
var P$1 = newStyled.p(function (_a) {
|
|
18402
18628
|
var color = _a.color;
|
|
@@ -18410,7 +18636,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18410
18636
|
margin: '0.938rem 4.188rem',
|
|
18411
18637
|
});
|
|
18412
18638
|
});
|
|
18413
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18639
|
+
var Bar = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18414
18640
|
var height = _a.height;
|
|
18415
18641
|
return height || '0.5rem';
|
|
18416
18642
|
}, function (_a) {
|
|
@@ -18439,7 +18665,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18439
18665
|
position: 'absolute',
|
|
18440
18666
|
});
|
|
18441
18667
|
});
|
|
18442
|
-
var Container$
|
|
18668
|
+
var Container$k = newStyled.div(function (_a) {
|
|
18443
18669
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18444
18670
|
return ({
|
|
18445
18671
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18453,12 +18679,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18453
18679
|
var ProgressBar = function (_a) {
|
|
18454
18680
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18455
18681
|
var theme = useTheme();
|
|
18456
|
-
return (jsxRuntime.jsxs(Container$
|
|
18682
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18457
18683
|
};
|
|
18458
|
-
var templateObject_1$
|
|
18684
|
+
var templateObject_1$r;
|
|
18459
18685
|
|
|
18460
|
-
var Container$
|
|
18461
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18686
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18687
|
+
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18462
18688
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18463
18689
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18464
18690
|
var QuantityPicker = function (_a) {
|
|
@@ -18483,9 +18709,9 @@ var QuantityPicker = function (_a) {
|
|
|
18483
18709
|
return clamp(value);
|
|
18484
18710
|
});
|
|
18485
18711
|
}, [value, clamp]);
|
|
18486
|
-
return (jsxRuntime.jsxs(Container$
|
|
18712
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18487
18713
|
};
|
|
18488
|
-
var templateObject_1$
|
|
18714
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18489
18715
|
|
|
18490
18716
|
/* base styles & size variants */
|
|
18491
18717
|
var CustomRadioStyles$1 = {
|
|
@@ -18554,9 +18780,9 @@ var ContainerStyles$1 = {
|
|
|
18554
18780
|
},
|
|
18555
18781
|
};
|
|
18556
18782
|
|
|
18557
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18558
|
-
var Container$
|
|
18559
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18783
|
+
var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18784
|
+
var Container$i = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18785
|
+
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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) {
|
|
18560
18786
|
var disabled = _a.disabled;
|
|
18561
18787
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18562
18788
|
});
|
|
@@ -18572,9 +18798,9 @@ var RadioPrimary = function (_a) {
|
|
|
18572
18798
|
var value = event.currentTarget.value;
|
|
18573
18799
|
onChange({ value: value, label: label });
|
|
18574
18800
|
};
|
|
18575
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18801
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18576
18802
|
};
|
|
18577
|
-
var templateObject_1$
|
|
18803
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$h;
|
|
18578
18804
|
|
|
18579
18805
|
var RadioGroupInput = function (_a) {
|
|
18580
18806
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18653,9 +18879,9 @@ var ContainerStyles = {
|
|
|
18653
18879
|
},
|
|
18654
18880
|
};
|
|
18655
18881
|
|
|
18656
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18657
|
-
var Container$
|
|
18658
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18882
|
+
var Wrapper$2 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18883
|
+
var Container$h = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18884
|
+
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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) {
|
|
18659
18885
|
var disabled = _a.disabled;
|
|
18660
18886
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18661
18887
|
});
|
|
@@ -18677,9 +18903,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18677
18903
|
var value = event.currentTarget.value;
|
|
18678
18904
|
onChange({ value: value, label: label });
|
|
18679
18905
|
};
|
|
18680
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18906
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$h, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18681
18907
|
};
|
|
18682
|
-
var templateObject_1$
|
|
18908
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$g;
|
|
18683
18909
|
|
|
18684
18910
|
var ClubRadioGroupInput = function (_a) {
|
|
18685
18911
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18707,8 +18933,8 @@ function formatDate(date, format) {
|
|
|
18707
18933
|
}
|
|
18708
18934
|
}
|
|
18709
18935
|
|
|
18710
|
-
var Container$
|
|
18711
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18936
|
+
var Container$g = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18937
|
+
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18712
18938
|
var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18713
18939
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18714
18940
|
var DateText$1 = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
@@ -18745,15 +18971,15 @@ var Review$1 = function (_a) {
|
|
|
18745
18971
|
}
|
|
18746
18972
|
}
|
|
18747
18973
|
}, [opened]);
|
|
18748
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18974
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18749
18975
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18750
18976
|
};
|
|
18751
|
-
var templateObject_1$
|
|
18977
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18752
18978
|
|
|
18753
18979
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18754
18980
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18755
|
-
var Container$
|
|
18756
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18981
|
+
var Container$f = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18982
|
+
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18757
18983
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18758
18984
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18759
18985
|
var DateText = newStyled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -18794,7 +19020,7 @@ var Review = function (_a) {
|
|
|
18794
19020
|
});
|
|
18795
19021
|
};
|
|
18796
19022
|
}, [randomId]);
|
|
18797
|
-
return (jsxRuntime.jsxs(Container$
|
|
19023
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18798
19024
|
__html: showMoreMobile
|
|
18799
19025
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18800
19026
|
: description,
|
|
@@ -18804,10 +19030,10 @@ var Review = function (_a) {
|
|
|
18804
19030
|
: description,
|
|
18805
19031
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18806
19032
|
};
|
|
18807
|
-
var templateObject_1$
|
|
19033
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18808
19034
|
|
|
18809
|
-
var Container$
|
|
18810
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19035
|
+
var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19036
|
+
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
18811
19037
|
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"])));
|
|
18812
19038
|
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"])));
|
|
18813
19039
|
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"])));
|
|
@@ -18820,19 +19046,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18820
19046
|
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;
|
|
18821
19047
|
var starsNumber = 5;
|
|
18822
19048
|
var theme = useTheme();
|
|
18823
|
-
return (jsxRuntime.jsxs(Container$
|
|
19049
|
+
return (jsxRuntime.jsxs(Container$e, { 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));
|
|
18824
19050
|
};
|
|
18825
|
-
var templateObject_1$
|
|
19051
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18826
19052
|
|
|
18827
|
-
var Container$
|
|
18828
|
-
var Text = newStyled.p(templateObject_2$
|
|
19053
|
+
var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19054
|
+
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18829
19055
|
var ScrollToTop = function (_a) {
|
|
18830
19056
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18831
19057
|
var theme = useTheme();
|
|
18832
19058
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18833
|
-
return (jsxRuntime.jsxs(Container$
|
|
19059
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18834
19060
|
};
|
|
18835
|
-
var templateObject_1$
|
|
19061
|
+
var templateObject_1$k, templateObject_2$e;
|
|
18836
19062
|
|
|
18837
19063
|
var Input = newStyled.input(function (props) { return ({
|
|
18838
19064
|
padding: props.theme.component.input.padding,
|
|
@@ -18863,7 +19089,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18863
19089
|
},
|
|
18864
19090
|
}); });
|
|
18865
19091
|
|
|
18866
|
-
var Container$
|
|
19092
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18867
19093
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18868
19094
|
}));
|
|
18869
19095
|
var Description = newStyled.div({
|
|
@@ -18880,25 +19106,25 @@ var Description = newStyled.div({
|
|
|
18880
19106
|
var ProductItem = function (_a) {
|
|
18881
19107
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18882
19108
|
var theme = useTheme();
|
|
18883
|
-
return (jsxRuntime.jsxs(Container$
|
|
19109
|
+
return (jsxRuntime.jsxs(Container$c, __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));
|
|
18884
19110
|
};
|
|
18885
|
-
var templateObject_1$
|
|
19111
|
+
var templateObject_1$j;
|
|
18886
19112
|
|
|
18887
|
-
var Container$
|
|
19113
|
+
var Container$b = newStyled.div({
|
|
18888
19114
|
display: 'flex',
|
|
18889
19115
|
justifyContent: 'center',
|
|
18890
19116
|
padding: '1rem',
|
|
18891
19117
|
});
|
|
18892
19118
|
var Footer = function (_a) {
|
|
18893
19119
|
var text = _a.text, onClick = _a.onClick;
|
|
18894
|
-
return (jsxRuntime.jsx(Container$
|
|
19120
|
+
return (jsxRuntime.jsx(Container$b, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18895
19121
|
};
|
|
18896
19122
|
|
|
18897
19123
|
var Ul = newStyled.ul({
|
|
18898
19124
|
margin: '0px',
|
|
18899
19125
|
padding: '0px',
|
|
18900
19126
|
});
|
|
18901
|
-
var Li = newStyled.li(templateObject_1$
|
|
19127
|
+
var Li = newStyled.li(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18902
19128
|
padding: [0, '0rem 1rem'],
|
|
18903
19129
|
borderRadius: [0, '0.5rem'],
|
|
18904
19130
|
}));
|
|
@@ -18910,7 +19136,7 @@ var Anchor = newStyled.a({
|
|
|
18910
19136
|
padding: 0,
|
|
18911
19137
|
textDecoration: 'none',
|
|
18912
19138
|
});
|
|
18913
|
-
var Container$
|
|
19139
|
+
var Container$a = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
18914
19140
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18915
19141
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18916
19142
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18921,11 +19147,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18921
19147
|
var ResultsPanel = function (_a) {
|
|
18922
19148
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18923
19149
|
var theme = useTheme();
|
|
18924
|
-
return (jsxRuntime.jsxs(Container$
|
|
19150
|
+
return (jsxRuntime.jsxs(Container$a, __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));
|
|
18925
19151
|
};
|
|
18926
|
-
var templateObject_1$
|
|
19152
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
18927
19153
|
|
|
18928
|
-
var Button = newStyled.button(templateObject_1$
|
|
19154
|
+
var Button = newStyled.button(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
18929
19155
|
right: ['1rem', '7.75rem'],
|
|
18930
19156
|
top: ['0.75rem', '0.75rem'],
|
|
18931
19157
|
}));
|
|
@@ -18934,7 +19160,7 @@ var ClearButton = function (_a) {
|
|
|
18934
19160
|
var theme = useTheme();
|
|
18935
19161
|
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18936
19162
|
};
|
|
18937
|
-
var templateObject_1$
|
|
19163
|
+
var templateObject_1$h;
|
|
18938
19164
|
|
|
18939
19165
|
var SearchIconContainer = newStyled.div({
|
|
18940
19166
|
display: 'flex',
|
|
@@ -18944,7 +19170,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18944
19170
|
background: 'white',
|
|
18945
19171
|
alignSelf: 'center',
|
|
18946
19172
|
});
|
|
18947
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19173
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
18948
19174
|
var SearchControl = function (_a) {
|
|
18949
19175
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18950
19176
|
var theme = useTheme();
|
|
@@ -18960,7 +19186,7 @@ var SearchControl = function (_a) {
|
|
|
18960
19186
|
}
|
|
18961
19187
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18962
19188
|
};
|
|
18963
|
-
var templateObject_1$
|
|
19189
|
+
var templateObject_1$g;
|
|
18964
19190
|
|
|
18965
19191
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18966
19192
|
var reducer = function (state, action) {
|
|
@@ -18976,7 +19202,7 @@ var reducer = function (state, action) {
|
|
|
18976
19202
|
}
|
|
18977
19203
|
}
|
|
18978
19204
|
};
|
|
18979
|
-
var Container$
|
|
19205
|
+
var Container$9 = newStyled.div({
|
|
18980
19206
|
position: 'relative',
|
|
18981
19207
|
display: 'flex',
|
|
18982
19208
|
});
|
|
@@ -19016,7 +19242,7 @@ var SearchBar = function (_a) {
|
|
|
19016
19242
|
if (e.cancelable) {
|
|
19017
19243
|
e.preventDefault();
|
|
19018
19244
|
}
|
|
19019
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19245
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$9, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19020
19246
|
if (e.key === 'Enter') {
|
|
19021
19247
|
if (e.cancelable) {
|
|
19022
19248
|
e.preventDefault();
|
|
@@ -19027,20 +19253,20 @@ var SearchBar = function (_a) {
|
|
|
19027
19253
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19028
19254
|
};
|
|
19029
19255
|
|
|
19030
|
-
var Container$
|
|
19031
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19256
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19257
|
+
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19032
19258
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19033
19259
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19034
19260
|
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"])));
|
|
19035
19261
|
var SearchNavigation = function (_a) {
|
|
19036
19262
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19037
|
-
return (jsxRuntime.jsxs(Container$
|
|
19263
|
+
return (jsxRuntime.jsxs(Container$8, { 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) {
|
|
19038
19264
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19039
19265
|
}) }, void 0)] }, void 0));
|
|
19040
19266
|
};
|
|
19041
|
-
var templateObject_1$
|
|
19267
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
19042
19268
|
|
|
19043
|
-
var Container$
|
|
19269
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19044
19270
|
var alignCenter = _a.alignCenter;
|
|
19045
19271
|
return alignCenter &&
|
|
19046
19272
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19050,17 +19276,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19050
19276
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19051
19277
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19052
19278
|
});
|
|
19053
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19279
|
+
var TitleText = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19054
19280
|
var BannerText = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19055
19281
|
var ShortBanner = function (_a) {
|
|
19056
19282
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19057
19283
|
var theme = useTheme();
|
|
19058
|
-
return (jsxRuntime.jsxs(Container$
|
|
19284
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19059
19285
|
};
|
|
19060
|
-
var templateObject_1$
|
|
19286
|
+
var templateObject_1$e, templateObject_2$b, templateObject_3$a;
|
|
19061
19287
|
|
|
19062
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19063
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19288
|
+
var TableElement$1 = newStyled.table(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19289
|
+
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19064
19290
|
var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19065
19291
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19066
19292
|
var SizeChartTable = function (_a) {
|
|
@@ -19095,10 +19321,10 @@ var SizeChartTable = function (_a) {
|
|
|
19095
19321
|
backgroundColor: getCellColor(index, cell),
|
|
19096
19322
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
19097
19323
|
};
|
|
19098
|
-
var templateObject_1$
|
|
19324
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
19099
19325
|
|
|
19100
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19101
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19326
|
+
var TableElement = newStyled.table(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19327
|
+
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19102
19328
|
var TableHead = newStyled.th(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19103
19329
|
var TableRow = newStyled.tr(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19104
19330
|
var SizeTable = function (_a) {
|
|
@@ -19106,7 +19332,7 @@ var SizeTable = function (_a) {
|
|
|
19106
19332
|
var theme = useTheme();
|
|
19107
19333
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19108
19334
|
};
|
|
19109
|
-
var templateObject_1$
|
|
19335
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
19110
19336
|
|
|
19111
19337
|
var getStylesBySize$4 = function (size) {
|
|
19112
19338
|
switch (size) {
|
|
@@ -19133,7 +19359,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19133
19359
|
} });
|
|
19134
19360
|
};
|
|
19135
19361
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19136
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19362
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19137
19363
|
};
|
|
19138
19364
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19139
19365
|
if (disabled)
|
|
@@ -19149,23 +19375,23 @@ var TextButton = function (_a) {
|
|
|
19149
19375
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19150
19376
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19151
19377
|
};
|
|
19152
|
-
var templateObject_1$
|
|
19378
|
+
var templateObject_1$b;
|
|
19153
19379
|
|
|
19154
|
-
var Container$
|
|
19155
|
-
var P = newStyled.p(templateObject_2$
|
|
19380
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19381
|
+
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19156
19382
|
var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19157
19383
|
var SizeFitGuide = function (_a) {
|
|
19158
19384
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19159
|
-
return (jsxRuntime.jsxs(Container$
|
|
19385
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19160
19386
|
};
|
|
19161
|
-
var templateObject_1$
|
|
19387
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19162
19388
|
|
|
19163
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19389
|
+
var ButtonsContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19164
19390
|
var inline = _a.inline;
|
|
19165
19391
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19166
19392
|
});
|
|
19167
|
-
var Row = newStyled.div(templateObject_2$
|
|
19168
|
-
var templateObject_1$
|
|
19393
|
+
var Row = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19394
|
+
var templateObject_1$9, templateObject_2$7;
|
|
19169
19395
|
|
|
19170
19396
|
var SizeSelector = function (_a) {
|
|
19171
19397
|
var _b;
|
|
@@ -19184,7 +19410,7 @@ var SizeSelector = function (_a) {
|
|
|
19184
19410
|
}) }), void 0)] }), void 0));
|
|
19185
19411
|
};
|
|
19186
19412
|
|
|
19187
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19413
|
+
var TabContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19188
19414
|
var titleSize = _a.titleSize;
|
|
19189
19415
|
return titleSize;
|
|
19190
19416
|
}, function (_a) {
|
|
@@ -19201,10 +19427,10 @@ var Tab = function (_a) {
|
|
|
19201
19427
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19202
19428
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19203
19429
|
};
|
|
19204
|
-
var templateObject_1$
|
|
19430
|
+
var templateObject_1$8;
|
|
19205
19431
|
|
|
19206
|
-
var Container$
|
|
19207
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19432
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19433
|
+
var TabList = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19208
19434
|
var backgroundColor = _a.backgroundColor;
|
|
19209
19435
|
return backgroundColor;
|
|
19210
19436
|
}, function (_a) {
|
|
@@ -19221,16 +19447,16 @@ var Tabs = function (_a) {
|
|
|
19221
19447
|
return null;
|
|
19222
19448
|
}
|
|
19223
19449
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19224
|
-
return (jsxRuntime.jsxs(Container$
|
|
19450
|
+
return (jsxRuntime.jsxs(Container$5, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19225
19451
|
};
|
|
19226
|
-
var templateObject_1$
|
|
19452
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
19227
19453
|
|
|
19228
|
-
var Container$
|
|
19454
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19229
19455
|
var Tag = function (_a) {
|
|
19230
19456
|
var text = _a.text, className = _a.className;
|
|
19231
|
-
return jsxRuntime.jsx(Container$
|
|
19457
|
+
return jsxRuntime.jsx(Container$4, __assign$1({ className: className }, { children: text }), void 0);
|
|
19232
19458
|
};
|
|
19233
|
-
var templateObject_1$
|
|
19459
|
+
var templateObject_1$6;
|
|
19234
19460
|
|
|
19235
19461
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19236
19462
|
switch (size) {
|
|
@@ -19341,8 +19567,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19341
19567
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19342
19568
|
};
|
|
19343
19569
|
|
|
19344
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19345
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19570
|
+
var ImageWrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19571
|
+
var VideoOverlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19346
19572
|
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19347
19573
|
var ImageVideo = function (_a) {
|
|
19348
19574
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19363,11 +19589,11 @@ var ImageVideo = function (_a) {
|
|
|
19363
19589
|
height: '100%',
|
|
19364
19590
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19365
19591
|
};
|
|
19366
|
-
var templateObject_1$
|
|
19592
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
19367
19593
|
|
|
19368
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19369
|
-
var ContainerMobile = css(templateObject_2$
|
|
19370
|
-
var Container$
|
|
19594
|
+
var ContainerDesktop = css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19595
|
+
var ContainerMobile = css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19596
|
+
var Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19371
19597
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19372
19598
|
var TextWithImage = function (_a) {
|
|
19373
19599
|
var _b, _c, _d, _e;
|
|
@@ -19388,7 +19614,7 @@ var TextWithImage = function (_a) {
|
|
|
19388
19614
|
// @ts-ignore
|
|
19389
19615
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19390
19616
|
};
|
|
19391
|
-
return (jsxs(Container$
|
|
19617
|
+
return (jsxs(Container$3, __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: {
|
|
19392
19618
|
backgroundColor: props.btnBGColor,
|
|
19393
19619
|
color: '#ffffff',
|
|
19394
19620
|
border: props.btnBGColor,
|
|
@@ -19398,48 +19624,10 @@ var TextWithImage = function (_a) {
|
|
|
19398
19624
|
},
|
|
19399
19625
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19400
19626
|
};
|
|
19401
|
-
var templateObject_1$
|
|
19402
|
-
|
|
19403
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19404
|
-
var timerColor = _a.timerColor;
|
|
19405
|
-
return timerColor || '';
|
|
19406
|
-
});
|
|
19407
|
-
var timeToSeconds = function (_a) {
|
|
19408
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19409
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
19410
|
-
};
|
|
19411
|
-
var secondsToTime = function (secs) {
|
|
19412
|
-
var hours = Math.floor(secs / 3600);
|
|
19413
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19414
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19415
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19416
|
-
};
|
|
19417
|
-
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19418
|
-
var Timer = function (_a) {
|
|
19419
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
19420
|
-
var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19421
|
-
React$2.useEffect(function () {
|
|
19422
|
-
var timer = setInterval(function () {
|
|
19423
|
-
setSecs(function (seconds) {
|
|
19424
|
-
if (seconds === 1) {
|
|
19425
|
-
clearInterval(timer);
|
|
19426
|
-
onTimeUp();
|
|
19427
|
-
return 0;
|
|
19428
|
-
}
|
|
19429
|
-
return seconds - 1;
|
|
19430
|
-
});
|
|
19431
|
-
}, 1000);
|
|
19432
|
-
if (secs <= 0)
|
|
19433
|
-
clearInterval(timer);
|
|
19434
|
-
return function () { return clearInterval(timer); };
|
|
19435
|
-
}, [onTimeUp, secs]);
|
|
19436
|
-
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19437
|
-
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19438
|
-
};
|
|
19439
|
-
var templateObject_1$6;
|
|
19627
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4;
|
|
19440
19628
|
|
|
19441
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19442
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19629
|
+
var Wrapper$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19630
|
+
var GrandTotal = newStyled.h1(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19443
19631
|
var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19444
19632
|
var theme = _a.theme;
|
|
19445
19633
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19453,11 +19641,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19453
19641
|
var theme = _a.theme;
|
|
19454
19642
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19455
19643
|
});
|
|
19456
|
-
var Container$
|
|
19644
|
+
var Container$2 = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19457
19645
|
var highlightColor = _a.highlightColor;
|
|
19458
19646
|
return highlightColor;
|
|
19459
19647
|
});
|
|
19460
|
-
var TotalContainer = newStyled(Container$
|
|
19648
|
+
var TotalContainer = newStyled(Container$2)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19461
19649
|
var showTotalLabel = _a.showTotalLabel;
|
|
19462
19650
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19463
19651
|
});
|
|
@@ -19467,19 +19655,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19467
19655
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19468
19656
|
});
|
|
19469
19657
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19470
|
-
var templateObject_1$
|
|
19658
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19471
19659
|
|
|
19472
19660
|
var Total = function (_a) {
|
|
19473
19661
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19474
19662
|
var theme = useTheme();
|
|
19475
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
19663
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19476
19664
|
};
|
|
19477
19665
|
|
|
19478
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19666
|
+
var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19479
19667
|
var color = _a.color;
|
|
19480
19668
|
return color;
|
|
19481
19669
|
});
|
|
19482
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19670
|
+
var ItemContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19483
19671
|
var Item = newStyled.h4(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19484
19672
|
var theme = _a.theme;
|
|
19485
19673
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19500,15 +19688,15 @@ var Subtotal = function (_a) {
|
|
|
19500
19688
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19501
19689
|
})] }), void 0));
|
|
19502
19690
|
};
|
|
19503
|
-
var templateObject_1$
|
|
19691
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
19504
19692
|
|
|
19505
19693
|
var Totals = {
|
|
19506
19694
|
Total: Total,
|
|
19507
19695
|
Subtotal: Subtotal,
|
|
19508
19696
|
};
|
|
19509
19697
|
|
|
19510
|
-
var Container$
|
|
19511
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19698
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19699
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19512
19700
|
var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19513
19701
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19514
19702
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
@@ -19548,7 +19736,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19548
19736
|
}
|
|
19549
19737
|
return '30px';
|
|
19550
19738
|
};
|
|
19551
|
-
return (jsxRuntime.jsxs(Container$
|
|
19739
|
+
return (jsxRuntime.jsxs(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19552
19740
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19553
19741
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19554
19742
|
? activeCheckpointColor
|
|
@@ -19559,10 +19747,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19559
19747
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19560
19748
|
})] }), void 0));
|
|
19561
19749
|
};
|
|
19562
|
-
var templateObject_1$
|
|
19750
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19563
19751
|
|
|
19564
|
-
var Container
|
|
19565
|
-
var CheckpointContainer = newStyled.div(templateObject_2
|
|
19752
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19753
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19566
19754
|
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19567
19755
|
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19568
19756
|
var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
@@ -19590,7 +19778,7 @@ var TrackingProgress = function (_a) {
|
|
|
19590
19778
|
}
|
|
19591
19779
|
return '30px';
|
|
19592
19780
|
};
|
|
19593
|
-
return (jsxRuntime.jsxs(Container
|
|
19781
|
+
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19594
19782
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19595
19783
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19596
19784
|
? theme.colors.semantic.informative.color
|
|
@@ -19599,70 +19787,7 @@ var TrackingProgress = function (_a) {
|
|
|
19599
19787
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19600
19788
|
})] }), void 0));
|
|
19601
19789
|
};
|
|
19602
|
-
var templateObject_1
|
|
19603
|
-
|
|
19604
|
-
var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
19605
|
-
var textPosition = _a.textPosition;
|
|
19606
|
-
return textPosition;
|
|
19607
|
-
}, function (_a) {
|
|
19608
|
-
var backgroundColor = _a.backgroundColor;
|
|
19609
|
-
return backgroundColor;
|
|
19610
|
-
}, function (_a) {
|
|
19611
|
-
var borderRadius = _a.borderRadius;
|
|
19612
|
-
return borderRadius || 'unset';
|
|
19613
|
-
}, function (_a) {
|
|
19614
|
-
var borderRadius = _a.borderRadius;
|
|
19615
|
-
return borderRadius || '8px';
|
|
19616
|
-
});
|
|
19617
|
-
var templateObject_1$1;
|
|
19618
|
-
|
|
19619
|
-
var getDefaultCountdown = function () {
|
|
19620
|
-
var tomorrowDate = new Date();
|
|
19621
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19622
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19623
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19624
|
-
return Number(totalSeconds.toFixed(0));
|
|
19625
|
-
};
|
|
19626
|
-
|
|
19627
|
-
var HurryUp = function (_a) {
|
|
19628
|
-
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"]);
|
|
19629
|
-
var theme = useTheme();
|
|
19630
|
-
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));
|
|
19631
|
-
};
|
|
19632
|
-
|
|
19633
|
-
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) {
|
|
19634
|
-
var size = _a.size;
|
|
19635
|
-
return (size ? size : '100%');
|
|
19636
|
-
}, function (_a) {
|
|
19637
|
-
var size = _a.size;
|
|
19638
|
-
return (size ? size : '100%');
|
|
19639
|
-
});
|
|
19640
|
-
var borderSize = {
|
|
19641
|
-
xsmall: '1px',
|
|
19642
|
-
small: '1.5px',
|
|
19643
|
-
medium: '2px',
|
|
19644
|
-
large: '3px',
|
|
19645
|
-
};
|
|
19646
|
-
var DEFAULT_COLOR = '#5EAD9B';
|
|
19647
|
-
var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
19648
|
-
var size = _a.size;
|
|
19649
|
-
return borderSize[size];
|
|
19650
|
-
}, function (_a) {
|
|
19651
|
-
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19652
|
-
return background;
|
|
19653
|
-
}, function (_a) {
|
|
19654
|
-
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19655
|
-
return color;
|
|
19656
|
-
}, function (_a) {
|
|
19657
|
-
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19658
|
-
return duration;
|
|
19659
|
-
});
|
|
19660
|
-
var templateObject_1, templateObject_2;
|
|
19661
|
-
|
|
19662
|
-
var Spinner = function (_a) {
|
|
19663
|
-
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
19664
|
-
return (jsxRuntime.jsx(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
19665
|
-
};
|
|
19790
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19666
19791
|
|
|
19667
19792
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
19668
19793
|
exports.Accordion = Accordion$1;
|
|
@@ -19725,6 +19850,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
19725
19850
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19726
19851
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19727
19852
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19853
|
+
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19728
19854
|
exports.ProgressBar = ProgressBar;
|
|
19729
19855
|
exports.QuantityPicker = QuantityPicker;
|
|
19730
19856
|
exports.RadioGroupInput = RadioGroupInput;
|