@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.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$
|
|
3128
|
+
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) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,11 +3150,11 @@ var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1Y;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
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) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$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) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1X, templateObject_2$1h;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -3392,6 +3392,8 @@ var Share = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name
|
|
|
3392
3392
|
|
|
3393
3393
|
var SignOut = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/signout" }), void 0); };
|
|
3394
3394
|
|
|
3395
|
+
var SignOutLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "actions/signout_light" }), void 0)); };
|
|
3396
|
+
|
|
3395
3397
|
var Trash = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/trash" }), void 0); };
|
|
3396
3398
|
|
|
3397
3399
|
var Warning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/warning" }), void 0); };
|
|
@@ -3435,6 +3437,7 @@ var Actions = /*#__PURE__*/Object.freeze({
|
|
|
3435
3437
|
SettingsSolid: SettingsSolid,
|
|
3436
3438
|
Share: Share,
|
|
3437
3439
|
SignOut: SignOut,
|
|
3440
|
+
SignOutLight: SignOutLight,
|
|
3438
3441
|
Trash: Trash,
|
|
3439
3442
|
Warning: Warning
|
|
3440
3443
|
});
|
|
@@ -3604,81 +3607,87 @@ var Download = /*#__PURE__*/Object.freeze({
|
|
|
3604
3607
|
GooglePlay: GooglePlay
|
|
3605
3608
|
});
|
|
3606
3609
|
|
|
3607
|
-
var
|
|
3610
|
+
var BlowingKiss = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/blowing_kiss" }), void 0); };
|
|
3608
3611
|
|
|
3609
|
-
var
|
|
3612
|
+
var Frowning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/frowning" }), void 0); };
|
|
3610
3613
|
|
|
3611
3614
|
var Grinning = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/grinning" }), void 0); };
|
|
3612
3615
|
|
|
3613
3616
|
var GrinningWithSweat = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/grinning_with_sweat" }), void 0)); };
|
|
3614
3617
|
|
|
3615
|
-
var
|
|
3618
|
+
var Relieved = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/relieved" }), void 0); };
|
|
3616
3619
|
|
|
3617
|
-
var
|
|
3620
|
+
var SmilingV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v2" }), void 0); };
|
|
3618
3621
|
|
|
3619
|
-
var
|
|
3622
|
+
var SmilingV3 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/smiling_v3" }), void 0); };
|
|
3623
|
+
|
|
3624
|
+
var Thinking = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "emoji/thinking" }), void 0); };
|
|
3620
3625
|
|
|
3621
3626
|
var Emoji = /*#__PURE__*/Object.freeze({
|
|
3622
3627
|
__proto__: null,
|
|
3623
|
-
Thinking: Thinking,
|
|
3624
|
-
SmilingV2: SmilingV2,
|
|
3625
|
-
Grinning: Grinning,
|
|
3626
|
-
GrinningWithSweat: GrinningWithSweat,
|
|
3627
3628
|
BlowingKiss: BlowingKiss,
|
|
3628
3629
|
Frowning: Frowning,
|
|
3629
|
-
|
|
3630
|
+
Grinning: Grinning,
|
|
3631
|
+
GrinningWithSweat: GrinningWithSweat,
|
|
3632
|
+
Relieved: Relieved,
|
|
3633
|
+
SmilingV2: SmilingV2,
|
|
3634
|
+
SmilingV3: SmilingV3,
|
|
3635
|
+
Thinking: Thinking
|
|
3630
3636
|
});
|
|
3631
3637
|
|
|
3632
3638
|
var AdaChat = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/ada_chat" }), void 0); };
|
|
3633
3639
|
|
|
3634
|
-
var
|
|
3640
|
+
var Comment$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment" }), void 0); };
|
|
3635
3641
|
|
|
3636
|
-
var
|
|
3642
|
+
var CommentDots = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_dots" }), void 0)); };
|
|
3637
3643
|
|
|
3638
|
-
var
|
|
3644
|
+
var CommentLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_light" }), void 0)); };
|
|
3639
3645
|
|
|
3640
|
-
var
|
|
3646
|
+
var CommentMoney = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/comment_money" }), void 0)); };
|
|
3641
3647
|
|
|
3642
3648
|
var Community$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/community" }), void 0); };
|
|
3643
3649
|
|
|
3644
|
-
var
|
|
3650
|
+
var Light = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light" }), void 0); };
|
|
3645
3651
|
|
|
3646
|
-
var
|
|
3652
|
+
var LightBulb$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb" }), void 0); };
|
|
3647
3653
|
|
|
3648
|
-
var
|
|
3654
|
+
var LightBulbSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/light_bulb_solid" }), void 0)); };
|
|
3649
3655
|
|
|
3650
|
-
var
|
|
3656
|
+
var Mail = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/mail" }), void 0); };
|
|
3651
3657
|
|
|
3652
|
-
var
|
|
3658
|
+
var Messenger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/messenger" }), void 0); };
|
|
3653
3659
|
|
|
3654
|
-
var
|
|
3660
|
+
var QuestionCircle = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/question_circle" }), void 0)); };
|
|
3655
3661
|
|
|
3656
|
-
var
|
|
3662
|
+
var QuestionCircleLight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/question_circle_light" }), void 0)); };
|
|
3657
3663
|
|
|
3658
|
-
var
|
|
3664
|
+
var QuoteLeft = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_left" }), void 0); };
|
|
3659
3665
|
|
|
3660
|
-
var
|
|
3666
|
+
var QuoteRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_right" }), void 0)); };
|
|
3661
3667
|
|
|
3662
|
-
var
|
|
3668
|
+
var QuoteSolidLeft = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_left" }), void 0)); };
|
|
3669
|
+
|
|
3670
|
+
var QuoteSolidRight = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "messaging/quote_solid_right" }), void 0)); };
|
|
3663
3671
|
|
|
3664
3672
|
var Messaging = /*#__PURE__*/Object.freeze({
|
|
3665
3673
|
__proto__: null,
|
|
3666
3674
|
AdaChat: AdaChat,
|
|
3667
|
-
QuestionCircle: QuestionCircle,
|
|
3668
|
-
Messenger: Messenger,
|
|
3669
3675
|
Comment: Comment$1,
|
|
3670
|
-
|
|
3676
|
+
CommentDots: CommentDots,
|
|
3677
|
+
CommentLight: CommentLight,
|
|
3678
|
+
CommentMoney: CommentMoney,
|
|
3671
3679
|
Community: Community$1,
|
|
3672
|
-
QuoteLeft: QuoteLeft,
|
|
3673
|
-
QuoteRight: QuoteRight,
|
|
3674
|
-
QuoteSolidLeft: QuoteSolidLeft,
|
|
3675
|
-
QuoteSolidRight: QuoteSolidRight,
|
|
3676
3680
|
Light: Light,
|
|
3677
3681
|
LightBulb: LightBulb$1,
|
|
3678
3682
|
LightBulbSolid: LightBulbSolid,
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3683
|
+
Mail: Mail,
|
|
3684
|
+
Messenger: Messenger,
|
|
3685
|
+
QuestionCircle: QuestionCircle,
|
|
3686
|
+
QuestionCircleLight: QuestionCircleLight,
|
|
3687
|
+
QuoteLeft: QuoteLeft,
|
|
3688
|
+
QuoteRight: QuoteRight,
|
|
3689
|
+
QuoteSolidLeft: QuoteSolidLeft,
|
|
3690
|
+
QuoteSolidRight: QuoteSolidRight
|
|
3682
3691
|
});
|
|
3683
3692
|
|
|
3684
3693
|
var BirthdayGifts = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/birthday_gifts" }), void 0)); };
|
|
@@ -3733,89 +3742,89 @@ var MyAccount = /*#__PURE__*/Object.freeze({
|
|
|
3733
3742
|
VIP: VIP
|
|
3734
3743
|
});
|
|
3735
3744
|
|
|
3736
|
-
var
|
|
3737
|
-
|
|
3738
|
-
var User = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
|
|
3739
|
-
|
|
3740
|
-
var ShoppingBag = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
|
|
3745
|
+
var AddressInformation = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/address_information" }), void 0)); };
|
|
3741
3746
|
|
|
3742
|
-
var
|
|
3747
|
+
var Benefits = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/benefits" }), void 0); };
|
|
3743
3748
|
|
|
3744
|
-
var
|
|
3749
|
+
var ClubMembership = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/club_membership" }), void 0)); };
|
|
3745
3750
|
|
|
3746
|
-
var
|
|
3751
|
+
var Ellipsis = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis" }), void 0); };
|
|
3747
3752
|
|
|
3748
|
-
var
|
|
3753
|
+
var EllipsisHorizontal = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/ellipsis_horizontal" }), void 0)); };
|
|
3749
3754
|
|
|
3750
|
-
var
|
|
3755
|
+
var Filters$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
|
|
3751
3756
|
|
|
3752
|
-
var
|
|
3757
|
+
var Hamburger = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
|
|
3753
3758
|
|
|
3754
3759
|
var Home = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/home" }), void 0); };
|
|
3755
3760
|
|
|
3756
3761
|
var HomeSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/home_solid" }), void 0); };
|
|
3757
3762
|
|
|
3758
|
-
var
|
|
3759
|
-
|
|
3760
|
-
var UserSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
|
|
3763
|
+
var Loading$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/loading" }), void 0); };
|
|
3761
3764
|
|
|
3762
|
-
var
|
|
3765
|
+
var Lock = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock" }), void 0); };
|
|
3763
3766
|
|
|
3764
|
-
var
|
|
3767
|
+
var LockSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/lock_solid" }), void 0); };
|
|
3765
3768
|
|
|
3766
|
-
var
|
|
3769
|
+
var MapMarker = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_marker" }), void 0); };
|
|
3767
3770
|
|
|
3768
|
-
var
|
|
3771
|
+
var MapSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/map_solid" }), void 0); };
|
|
3769
3772
|
|
|
3770
|
-
var
|
|
3773
|
+
var MenuLines = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/menu_lines" }), void 0); };
|
|
3771
3774
|
|
|
3772
|
-
var
|
|
3775
|
+
var Search = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/search" }), void 0); };
|
|
3773
3776
|
|
|
3774
|
-
var
|
|
3777
|
+
var Shaperbox = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shaperbox" }), void 0); };
|
|
3775
3778
|
|
|
3776
|
-
var
|
|
3779
|
+
var ShoppingBag = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag" }), void 0)); };
|
|
3777
3780
|
|
|
3778
|
-
var
|
|
3781
|
+
var ShoppingBagV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v2" }), void 0)); };
|
|
3779
3782
|
|
|
3780
|
-
var
|
|
3783
|
+
var ShoppingBagV3 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v3" }), void 0)); };
|
|
3781
3784
|
|
|
3782
|
-
var
|
|
3785
|
+
var ShoppingCart = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart" }), void 0)); };
|
|
3783
3786
|
|
|
3784
3787
|
var ShoppingCartV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart_v2" }), void 0)); };
|
|
3785
3788
|
|
|
3786
|
-
var
|
|
3789
|
+
var SlideDot$1 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot" }), void 0); };
|
|
3787
3790
|
|
|
3788
|
-
var
|
|
3791
|
+
var SlideDotSolid = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/slide_dot_solid" }), void 0)); };
|
|
3792
|
+
|
|
3793
|
+
var User = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user" }), void 0); };
|
|
3794
|
+
|
|
3795
|
+
var UserSolid = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_solid" }), void 0); };
|
|
3796
|
+
|
|
3797
|
+
var UserV2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "navigation/user_v2" }), void 0); };
|
|
3789
3798
|
|
|
3790
3799
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
3791
3800
|
__proto__: null,
|
|
3792
|
-
Search: Search,
|
|
3793
|
-
User: User,
|
|
3794
|
-
ShoppingBag: ShoppingBag,
|
|
3795
|
-
ShoppingCart: ShoppingCart,
|
|
3796
|
-
MapMarker: MapMarker,
|
|
3797
|
-
Hamburger: Hamburger,
|
|
3798
3801
|
AddressInformation: AddressInformation,
|
|
3799
|
-
ClubMembership: ClubMembership,
|
|
3800
3802
|
Benefits: Benefits,
|
|
3801
|
-
|
|
3802
|
-
HomeSolid: HomeSolid,
|
|
3803
|
-
ShoppingBagV2: ShoppingBagV2,
|
|
3804
|
-
UserSolid: UserSolid,
|
|
3805
|
-
SlideDot: SlideDot$1,
|
|
3806
|
-
SlideDotSolid: SlideDotSolid,
|
|
3803
|
+
ClubMembership: ClubMembership,
|
|
3807
3804
|
Ellipsis: Ellipsis,
|
|
3808
3805
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
3809
3806
|
Filters: Filters$1,
|
|
3807
|
+
Hamburger: Hamburger,
|
|
3808
|
+
Home: Home,
|
|
3809
|
+
HomeSolid: HomeSolid,
|
|
3810
|
+
Loading: Loading$1,
|
|
3810
3811
|
Lock: Lock,
|
|
3811
3812
|
LockSolid: LockSolid,
|
|
3812
|
-
|
|
3813
|
+
MapMarker: MapMarker,
|
|
3813
3814
|
MapSolid: MapSolid,
|
|
3814
3815
|
MenuLines: MenuLines,
|
|
3815
|
-
|
|
3816
|
-
|
|
3816
|
+
Search: Search,
|
|
3817
|
+
Shaperbox: Shaperbox,
|
|
3818
|
+
ShoppingBag: ShoppingBag,
|
|
3819
|
+
ShoppingBagV2: ShoppingBagV2,
|
|
3817
3820
|
ShoppingBagV3: ShoppingBagV3,
|
|
3818
|
-
|
|
3821
|
+
ShoppingCart: ShoppingCart,
|
|
3822
|
+
ShoppingCartV2: ShoppingCartV2,
|
|
3823
|
+
SlideDot: SlideDot$1,
|
|
3824
|
+
SlideDotSolid: SlideDotSolid,
|
|
3825
|
+
User: User,
|
|
3826
|
+
UserSolid: UserSolid,
|
|
3827
|
+
UserV2: UserV2
|
|
3819
3828
|
});
|
|
3820
3829
|
|
|
3821
3830
|
var BodConLabel = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "other/bod_con_label" }), void 0); };
|
|
@@ -3921,6 +3930,10 @@ var ErrorCross = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
|
|
|
3921
3930
|
|
|
3922
3931
|
var FlagUSA = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/flag_usa" }), void 0); };
|
|
3923
3932
|
|
|
3933
|
+
var FreeReturnsV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/free_returns_v2" }), void 0)); };
|
|
3934
|
+
|
|
3935
|
+
var FreeShippingV2 = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/free_shipping_v2" }), void 0)); };
|
|
3936
|
+
|
|
3924
3937
|
var Hours = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/hours" }), void 0); };
|
|
3925
3938
|
|
|
3926
3939
|
var KlarnaLogo = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "pdp/klarna_logo" }), void 0); };
|
|
@@ -3969,6 +3982,8 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
3969
3982
|
DropEmpty: DropEmpty,
|
|
3970
3983
|
ErrorCross: ErrorCross,
|
|
3971
3984
|
FlagUSA: FlagUSA,
|
|
3985
|
+
FreeReturnsV2: FreeReturnsV2,
|
|
3986
|
+
FreeShippingV2: FreeShippingV2,
|
|
3972
3987
|
Hours: Hours,
|
|
3973
3988
|
KlarnaLogo: KlarnaLogo,
|
|
3974
3989
|
LightBulb: LightBulb,
|
|
@@ -4086,9 +4101,9 @@ function jsxs(type, props, key) {
|
|
|
4086
4101
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4087
4102
|
// `variants` styles that are consistent through all themes.
|
|
4088
4103
|
var TAGS = {
|
|
4089
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4090
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4091
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4104
|
+
hero1: newStyled.h1(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""]))),
|
|
4105
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4106
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4092
4107
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4093
4108
|
display2: newStyled.h2(templateObject_5$t || (templateObject_5$t = __makeTemplateObject([""], [""]))),
|
|
4094
4109
|
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4222,17 +4237,17 @@ var DEFAULTS = {
|
|
|
4222
4237
|
size: 'regular',
|
|
4223
4238
|
},
|
|
4224
4239
|
};
|
|
4225
|
-
var templateObject_1$
|
|
4240
|
+
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;
|
|
4226
4241
|
|
|
4227
|
-
var Container$
|
|
4228
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4229
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4242
|
+
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"])));
|
|
4243
|
+
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"])));
|
|
4244
|
+
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"])));
|
|
4230
4245
|
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"])));
|
|
4231
4246
|
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"])));
|
|
4232
4247
|
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"])));
|
|
4233
4248
|
var PackSelectorV2 = function (_a) {
|
|
4234
4249
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4235
|
-
return (jsx$1(Container$
|
|
4250
|
+
return (jsx$1(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4236
4251
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4237
4252
|
}) }), void 0));
|
|
4238
4253
|
};
|
|
@@ -4254,27 +4269,27 @@ var PackCard$1 = function (_a) {
|
|
|
4254
4269
|
currency: currencyCode || 'USD',
|
|
4255
4270
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4256
4271
|
};
|
|
4257
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$s, templateObject_6$n;
|
|
4258
4273
|
|
|
4259
|
-
var Container$
|
|
4260
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4274
|
+
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"])));
|
|
4275
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4261
4276
|
var DropList = function (_a) {
|
|
4262
4277
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4263
|
-
return (jsx$1(Container$
|
|
4278
|
+
return (jsx$1(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4264
4279
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4265
4280
|
}) }, void 0));
|
|
4266
4281
|
};
|
|
4267
|
-
var templateObject_1$
|
|
4282
|
+
var templateObject_1$1U, templateObject_2$1e;
|
|
4268
4283
|
|
|
4269
4284
|
var DROPS_TOTAL = 5;
|
|
4270
|
-
var Container$
|
|
4271
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4272
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4285
|
+
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"])));
|
|
4286
|
+
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"])));
|
|
4287
|
+
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"])));
|
|
4273
4288
|
var AbsorbencyLevel = function (_a) {
|
|
4274
4289
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4275
|
-
return (jsxs$1(Container$
|
|
4290
|
+
return (jsxs$1(Container$19, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4276
4291
|
};
|
|
4277
|
-
var templateObject_1$
|
|
4292
|
+
var templateObject_1$1T, templateObject_2$1d, templateObject_3$X;
|
|
4278
4293
|
|
|
4279
4294
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4280
4295
|
`),"","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(`
|
|
@@ -4350,7 +4365,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4350
4365
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4351
4366
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4352
4367
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4353
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4368
|
+
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"])));
|
|
4354
4369
|
var Accordion$1 = function (_a) {
|
|
4355
4370
|
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;
|
|
4356
4371
|
var theme = useTheme();
|
|
@@ -4374,9 +4389,9 @@ var Accordion$1 = function (_a) {
|
|
|
4374
4389
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4375
4390
|
} }), void 0));
|
|
4376
4391
|
};
|
|
4377
|
-
var templateObject_1$
|
|
4392
|
+
var templateObject_1$1S;
|
|
4378
4393
|
|
|
4379
|
-
var Container$
|
|
4394
|
+
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"])));
|
|
4380
4395
|
var AccordionOptions = function (_a) {
|
|
4381
4396
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4382
4397
|
var _b = useState({
|
|
@@ -4389,7 +4404,7 @@ var AccordionOptions = function (_a) {
|
|
|
4389
4404
|
}
|
|
4390
4405
|
return false;
|
|
4391
4406
|
};
|
|
4392
|
-
return (jsx$1(Container$
|
|
4407
|
+
return (jsx$1(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4393
4408
|
var forceOpenValue = getForceOpen(index);
|
|
4394
4409
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4395
4410
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4400,7 +4415,7 @@ var AccordionOptions = function (_a) {
|
|
|
4400
4415
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4401
4416
|
}) }, void 0));
|
|
4402
4417
|
};
|
|
4403
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1R;
|
|
4404
4419
|
|
|
4405
4420
|
var CardSectionType;
|
|
4406
4421
|
(function (CardSectionType) {
|
|
@@ -4562,14 +4577,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4562
4577
|
literal: true,
|
|
4563
4578
|
});
|
|
4564
4579
|
|
|
4565
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4566
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4580
|
+
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; });
|
|
4581
|
+
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"])));
|
|
4567
4582
|
var Error$1 = function (_a) {
|
|
4568
4583
|
var error = _a.error;
|
|
4569
4584
|
var theme = useTheme();
|
|
4570
4585
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4571
4586
|
};
|
|
4572
|
-
var templateObject_1$
|
|
4587
|
+
var templateObject_1$1Q, templateObject_2$1c;
|
|
4573
4588
|
|
|
4574
4589
|
var BaseSelectButton = function (_a) {
|
|
4575
4590
|
var children = _a.children, as = _a.as;
|
|
@@ -4586,7 +4601,7 @@ function BaseSelectOption(_a) {
|
|
|
4586
4601
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4587
4602
|
}
|
|
4588
4603
|
|
|
4589
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4604
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4590
4605
|
function BaseSelect(_a) {
|
|
4591
4606
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4592
4607
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4596,7 +4611,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4596
4611
|
Options: BaseSelectOptions,
|
|
4597
4612
|
Option: BaseSelectOption,
|
|
4598
4613
|
});
|
|
4599
|
-
var templateObject_1$
|
|
4614
|
+
var templateObject_1$1P;
|
|
4600
4615
|
|
|
4601
4616
|
var CustomButton = newStyled.button(function (_a) {
|
|
4602
4617
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4635,7 +4650,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4635
4650
|
});
|
|
4636
4651
|
});
|
|
4637
4652
|
//TODO Remove this when we find the real solution
|
|
4638
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4653
|
+
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) {
|
|
4639
4654
|
var open = _a.open;
|
|
4640
4655
|
return open &&
|
|
4641
4656
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4655,7 +4670,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4655
4670
|
} }), void 0));
|
|
4656
4671
|
};
|
|
4657
4672
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4658
|
-
var templateObject_1$
|
|
4673
|
+
var templateObject_1$1O;
|
|
4659
4674
|
|
|
4660
4675
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4661
4676
|
var theme = _a.theme;
|
|
@@ -4822,7 +4837,7 @@ var CustomCheckboxStyles = {
|
|
|
4822
4837
|
},
|
|
4823
4838
|
};
|
|
4824
4839
|
|
|
4825
|
-
var Container$
|
|
4840
|
+
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"])));
|
|
4826
4841
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4827
4842
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4828
4843
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4833,7 +4848,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4833
4848
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4834
4849
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4835
4850
|
]; });
|
|
4836
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4851
|
+
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) {
|
|
4837
4852
|
var disabled = _a.disabled;
|
|
4838
4853
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4839
4854
|
});
|
|
@@ -4847,9 +4862,9 @@ var Checkbox = function (_a) {
|
|
|
4847
4862
|
}
|
|
4848
4863
|
onChange(e.target.checked);
|
|
4849
4864
|
};
|
|
4850
|
-
return (jsxs$1(Container$
|
|
4865
|
+
return (jsxs$1(Container$17, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4851
4866
|
};
|
|
4852
|
-
var templateObject_1$
|
|
4867
|
+
var templateObject_1$1N, templateObject_2$1b;
|
|
4853
4868
|
|
|
4854
4869
|
var CustomOption = newStyled.li(function (_a) {
|
|
4855
4870
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4898,8 +4913,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4898
4913
|
Option: BaseDropdownOption,
|
|
4899
4914
|
});
|
|
4900
4915
|
|
|
4901
|
-
var Container$
|
|
4902
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4916
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
4917
|
+
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"])));
|
|
4903
4918
|
function SimpleDropdown(_a) {
|
|
4904
4919
|
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;
|
|
4905
4920
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4928,10 +4943,10 @@ function SimpleDropdown(_a) {
|
|
|
4928
4943
|
}
|
|
4929
4944
|
setSelectedValue(value);
|
|
4930
4945
|
}, [value, options, initialValue]);
|
|
4931
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4946
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
|
|
4932
4947
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4933
4948
|
}
|
|
4934
|
-
var templateObject_1$
|
|
4949
|
+
var templateObject_1$1M, templateObject_2$1a;
|
|
4935
4950
|
|
|
4936
4951
|
/* base styles & size variants */
|
|
4937
4952
|
var CustomRadioStyles$2 = {
|
|
@@ -4996,9 +5011,9 @@ var ContainerStyles$2 = {
|
|
|
4996
5011
|
},
|
|
4997
5012
|
};
|
|
4998
5013
|
|
|
4999
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5000
|
-
var Container$
|
|
5001
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5014
|
+
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"])));
|
|
5015
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5016
|
+
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) {
|
|
5002
5017
|
var disabled = _a.disabled;
|
|
5003
5018
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5004
5019
|
});
|
|
@@ -5006,7 +5021,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5006
5021
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5007
5022
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5008
5023
|
]; });
|
|
5009
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5024
|
+
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) {
|
|
5010
5025
|
var theme = _a.theme;
|
|
5011
5026
|
return theme.component.radio.textSize;
|
|
5012
5027
|
}, function (_a) {
|
|
@@ -5020,9 +5035,9 @@ var RadioInput = function (_a) {
|
|
|
5020
5035
|
var value = event.currentTarget.value;
|
|
5021
5036
|
onChange({ value: value, label: label });
|
|
5022
5037
|
};
|
|
5023
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5038
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5024
5039
|
};
|
|
5025
|
-
var templateObject_1$
|
|
5040
|
+
var templateObject_1$1L, templateObject_2$19, templateObject_3$W;
|
|
5026
5041
|
|
|
5027
5042
|
var getWrapperFlexDirection = function (position) {
|
|
5028
5043
|
switch (position) {
|
|
@@ -5073,7 +5088,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5073
5088
|
}
|
|
5074
5089
|
};
|
|
5075
5090
|
|
|
5076
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5091
|
+
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) {
|
|
5077
5092
|
var position = _a.position;
|
|
5078
5093
|
return getWrapperFlexDirection(position);
|
|
5079
5094
|
}, function (_a) {
|
|
@@ -5083,7 +5098,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5083
5098
|
var disableHover = _a.disableHover;
|
|
5084
5099
|
return (disableHover ? 0 : 1);
|
|
5085
5100
|
});
|
|
5086
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5101
|
+
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) {
|
|
5087
5102
|
var position = _a.position;
|
|
5088
5103
|
return getContainerFlexDirection(position);
|
|
5089
5104
|
}, function (_a) {
|
|
@@ -5111,7 +5126,7 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5111
5126
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5112
5127
|
return actual === expected ? margin : '0';
|
|
5113
5128
|
};
|
|
5114
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5129
|
+
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) {
|
|
5115
5130
|
var borderColor = _a.borderColor;
|
|
5116
5131
|
return borderColor;
|
|
5117
5132
|
}, function (_a) {
|
|
@@ -5129,7 +5144,7 @@ var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTem
|
|
|
5129
5144
|
});
|
|
5130
5145
|
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"])));
|
|
5131
5146
|
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5132
|
-
var templateObject_1$
|
|
5147
|
+
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;
|
|
5133
5148
|
|
|
5134
5149
|
var useOnClickOutside = function (ref, handler) {
|
|
5135
5150
|
useEffect(function () {
|
|
@@ -5271,7 +5286,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5271
5286
|
};
|
|
5272
5287
|
}
|
|
5273
5288
|
};
|
|
5274
|
-
var Container$
|
|
5289
|
+
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) {
|
|
5275
5290
|
var backgroundColor = _a.backgroundColor;
|
|
5276
5291
|
return backgroundColor;
|
|
5277
5292
|
}, function (_a) {
|
|
@@ -5293,7 +5308,7 @@ var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5293
5308
|
var size = _a.size;
|
|
5294
5309
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5295
5310
|
});
|
|
5296
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5311
|
+
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) {
|
|
5297
5312
|
var textColor = _a.textColor;
|
|
5298
5313
|
return textColor;
|
|
5299
5314
|
}, function (_a) {
|
|
@@ -5308,9 +5323,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5308
5323
|
var ClubOfferTag = function (_a) {
|
|
5309
5324
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5310
5325
|
var theme = useTheme();
|
|
5311
|
-
return (jsx$1(Container$
|
|
5326
|
+
return (jsx$1(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: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5312
5327
|
};
|
|
5313
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
5314
5329
|
|
|
5315
5330
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5316
5331
|
var _a, _b, _c;
|
|
@@ -5341,7 +5356,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5341
5356
|
};
|
|
5342
5357
|
}
|
|
5343
5358
|
};
|
|
5344
|
-
var Container$
|
|
5359
|
+
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) {
|
|
5345
5360
|
var backgroundColor = _a.backgroundColor;
|
|
5346
5361
|
return backgroundColor;
|
|
5347
5362
|
}, function (_a) {
|
|
@@ -5363,7 +5378,7 @@ var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5363
5378
|
var size = _a.size;
|
|
5364
5379
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5365
5380
|
});
|
|
5366
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5381
|
+
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) {
|
|
5367
5382
|
var textColor = _a.textColor;
|
|
5368
5383
|
return textColor;
|
|
5369
5384
|
}, function (_a) {
|
|
@@ -5378,9 +5393,9 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5378
5393
|
var DiscountTag = function (_a) {
|
|
5379
5394
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5380
5395
|
var theme = useTheme();
|
|
5381
|
-
return (jsx$1(Container$
|
|
5396
|
+
return (jsx$1(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: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5382
5397
|
};
|
|
5383
|
-
var templateObject_1$
|
|
5398
|
+
var templateObject_1$1I, templateObject_2$16;
|
|
5384
5399
|
|
|
5385
5400
|
var getStylesBySize$b = function (size, theme) {
|
|
5386
5401
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5422,8 +5437,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5422
5437
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5423
5438
|
}
|
|
5424
5439
|
};
|
|
5425
|
-
var Container$
|
|
5426
|
-
var Price = newStyled.p(templateObject_2$
|
|
5440
|
+
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"])));
|
|
5441
|
+
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) {
|
|
5427
5442
|
var weight = _a.weight;
|
|
5428
5443
|
return (weight ? weight : '400');
|
|
5429
5444
|
}, function (_a) {
|
|
@@ -5447,7 +5462,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5447
5462
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5448
5463
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5449
5464
|
});
|
|
5450
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5465
|
+
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) {
|
|
5451
5466
|
var _b;
|
|
5452
5467
|
var size = _a.size;
|
|
5453
5468
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5478,11 +5493,11 @@ var PriceLabel = function (_a) {
|
|
|
5478
5493
|
: ComponentSize.XSmall;
|
|
5479
5494
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5480
5495
|
};
|
|
5481
|
-
return (jsxs$1(Container$
|
|
5496
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5482
5497
|
};
|
|
5483
|
-
var templateObject_1$
|
|
5498
|
+
var templateObject_1$1H, templateObject_2$15, templateObject_3$U;
|
|
5484
5499
|
|
|
5485
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5500
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5486
5501
|
var PriceLabelV2 = function (_a) {
|
|
5487
5502
|
var _b;
|
|
5488
5503
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5535,7 +5550,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5535
5550
|
var savetoString = saveto.toFixed(2);
|
|
5536
5551
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5537
5552
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5538
|
-
return (jsxs$1(Container$
|
|
5553
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5539
5554
|
marginTop: '-5px',
|
|
5540
5555
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5541
5556
|
? finalPriceArray[0]
|
|
@@ -5553,11 +5568,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5553
5568
|
lineHeight: '22px',
|
|
5554
5569
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5555
5570
|
};
|
|
5556
|
-
var templateObject_1$
|
|
5571
|
+
var templateObject_1$1G;
|
|
5557
5572
|
|
|
5558
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5559
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5560
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5573
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5574
|
+
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"])));
|
|
5575
|
+
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"])));
|
|
5561
5576
|
var PriceLabelV3 = function (_a) {
|
|
5562
5577
|
var _b;
|
|
5563
5578
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5612,7 +5627,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5612
5627
|
return null;
|
|
5613
5628
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5614
5629
|
};
|
|
5615
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5630
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$12, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5616
5631
|
marginTop: '-5px',
|
|
5617
5632
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5618
5633
|
marginTop: '-6px',
|
|
@@ -5628,10 +5643,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5628
5643
|
lineHeight: '22px',
|
|
5629
5644
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5630
5645
|
};
|
|
5631
|
-
var templateObject_1$
|
|
5646
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5632
5647
|
|
|
5633
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5634
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5648
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5649
|
+
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) {
|
|
5635
5650
|
var selected = _a.selected, theme = _a.theme;
|
|
5636
5651
|
return selected
|
|
5637
5652
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5645,7 +5660,7 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5645
5660
|
var theme = _a.theme;
|
|
5646
5661
|
return theme.colors.pallete.primary.color;
|
|
5647
5662
|
});
|
|
5648
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5663
|
+
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) {
|
|
5649
5664
|
var onClick = _a.onClick;
|
|
5650
5665
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5651
5666
|
});
|
|
@@ -5667,8 +5682,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5667
5682
|
var selected = _a.selected, theme = _a.theme;
|
|
5668
5683
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5669
5684
|
});
|
|
5670
|
-
var Container
|
|
5671
|
-
var templateObject_1$
|
|
5685
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5686
|
+
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;
|
|
5672
5687
|
|
|
5673
5688
|
var radioIds = {
|
|
5674
5689
|
oneTime: {
|
|
@@ -5718,17 +5733,17 @@ var Autoship = function (_a) {
|
|
|
5718
5733
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5719
5734
|
};
|
|
5720
5735
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5721
|
-
return (jsxs$1(Container
|
|
5736
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5722
5737
|
? benefitsColor.selected
|
|
5723
5738
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5724
5739
|
};
|
|
5725
5740
|
|
|
5726
|
-
var Img = newStyled.img(templateObject_1$
|
|
5741
|
+
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; });
|
|
5727
5742
|
var Image$3 = function (_a) {
|
|
5728
5743
|
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;
|
|
5729
5744
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5730
5745
|
};
|
|
5731
|
-
var templateObject_1$
|
|
5746
|
+
var templateObject_1$1D;
|
|
5732
5747
|
|
|
5733
5748
|
var _a$2;
|
|
5734
5749
|
var BeforeAfterVariant;
|
|
@@ -5743,13 +5758,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5743
5758
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5744
5759
|
_a$2);
|
|
5745
5760
|
|
|
5746
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5747
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5748
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5761
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
5762
|
+
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"])));
|
|
5763
|
+
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"])));
|
|
5749
5764
|
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"])));
|
|
5750
5765
|
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"])));
|
|
5751
5766
|
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"])));
|
|
5752
|
-
var templateObject_1$
|
|
5767
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$p, templateObject_6$k;
|
|
5753
5768
|
|
|
5754
5769
|
var NameWithStars = function (_a) {
|
|
5755
5770
|
var name = _a.name, size = _a.size;
|
|
@@ -5767,9 +5782,9 @@ var ResultFeedback = function (_a) {
|
|
|
5767
5782
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5768
5783
|
};
|
|
5769
5784
|
|
|
5770
|
-
var Container$
|
|
5771
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5772
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5785
|
+
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; });
|
|
5786
|
+
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"])));
|
|
5787
|
+
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; });
|
|
5773
5788
|
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) {
|
|
5774
5789
|
var theme = _a.theme;
|
|
5775
5790
|
return theme.colors.pallete.secondary.color;
|
|
@@ -5780,7 +5795,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5780
5795
|
var theme = _a.theme, size = _a.size;
|
|
5781
5796
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5782
5797
|
});
|
|
5783
|
-
var templateObject_1$
|
|
5798
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D;
|
|
5784
5799
|
|
|
5785
5800
|
/* base styles & size variants */
|
|
5786
5801
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5855,10 +5870,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5855
5870
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5856
5871
|
var infoText = buildInfoText(name, age, months);
|
|
5857
5872
|
var Component = componentByVariant[variant];
|
|
5858
|
-
return (jsxs$1(Container$
|
|
5873
|
+
return (jsxs$1(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5859
5874
|
};
|
|
5860
5875
|
|
|
5861
|
-
var Section = newStyled.div(templateObject_1$
|
|
5876
|
+
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) {
|
|
5862
5877
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5863
5878
|
});
|
|
5864
5879
|
var CardHeader = function (_a) {
|
|
@@ -5869,16 +5884,16 @@ var CardFooter = function (_a) {
|
|
|
5869
5884
|
var children = _a.children;
|
|
5870
5885
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5871
5886
|
};
|
|
5872
|
-
var templateObject_1$
|
|
5887
|
+
var templateObject_1$1A;
|
|
5873
5888
|
|
|
5874
|
-
var Body = newStyled.div(templateObject_1$
|
|
5889
|
+
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"])));
|
|
5875
5890
|
var CardBody = function (_a) {
|
|
5876
5891
|
var children = _a.children;
|
|
5877
5892
|
return jsx$1(Body, { children: children }, void 0);
|
|
5878
5893
|
};
|
|
5879
|
-
var templateObject_1$
|
|
5894
|
+
var templateObject_1$1z;
|
|
5880
5895
|
|
|
5881
|
-
var Container
|
|
5896
|
+
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) {
|
|
5882
5897
|
var flex = _a.flex;
|
|
5883
5898
|
return flex &&
|
|
5884
5899
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5893,23 +5908,23 @@ var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5893
5908
|
var Card$1 = function (_a) {
|
|
5894
5909
|
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;
|
|
5895
5910
|
var theme = useTheme();
|
|
5896
|
-
return (jsx$1(Container
|
|
5911
|
+
return (jsx$1(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));
|
|
5897
5912
|
};
|
|
5898
5913
|
var Card$2 = Object.assign(Card$1, {
|
|
5899
5914
|
Header: CardHeader,
|
|
5900
5915
|
Footer: CardFooter,
|
|
5901
5916
|
Body: CardBody,
|
|
5902
5917
|
});
|
|
5903
|
-
var templateObject_1$
|
|
5918
|
+
var templateObject_1$1y;
|
|
5904
5919
|
|
|
5905
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5906
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5907
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
5920
|
+
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"])));
|
|
5921
|
+
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"])));
|
|
5922
|
+
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) {
|
|
5908
5923
|
var color = _a.color;
|
|
5909
5924
|
return color;
|
|
5910
5925
|
});
|
|
5911
5926
|
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"])));
|
|
5912
|
-
var templateObject_1$
|
|
5927
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$P, templateObject_4$C;
|
|
5913
5928
|
|
|
5914
5929
|
var Minimalistic = function (_a) {
|
|
5915
5930
|
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;
|
|
@@ -5917,28 +5932,28 @@ var Minimalistic = function (_a) {
|
|
|
5917
5932
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5918
5933
|
};
|
|
5919
5934
|
|
|
5920
|
-
var Container$
|
|
5921
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
5922
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5935
|
+
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"])));
|
|
5936
|
+
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; });
|
|
5937
|
+
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; });
|
|
5923
5938
|
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"])));
|
|
5924
5939
|
var Simple = function (_a) {
|
|
5925
5940
|
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;
|
|
5926
5941
|
var theme = useTheme();
|
|
5927
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5942
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$_, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5928
5943
|
};
|
|
5929
|
-
var templateObject_1$
|
|
5944
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$B;
|
|
5930
5945
|
|
|
5931
5946
|
var Bundle = {
|
|
5932
5947
|
Minimalistic: Minimalistic,
|
|
5933
5948
|
Simple: Simple,
|
|
5934
5949
|
};
|
|
5935
5950
|
|
|
5936
|
-
var Container$
|
|
5951
|
+
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) {
|
|
5937
5952
|
var displayBNPL = _a.displayBNPL;
|
|
5938
5953
|
return (displayBNPL ? 'flex' : 'none');
|
|
5939
5954
|
});
|
|
5940
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5941
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5955
|
+
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"])));
|
|
5956
|
+
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"])));
|
|
5942
5957
|
var BuyNowPayLater = function (_a) {
|
|
5943
5958
|
var _b;
|
|
5944
5959
|
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;
|
|
@@ -5948,43 +5963,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5948
5963
|
console.error('Icon', iconName, 'not found');
|
|
5949
5964
|
return null;
|
|
5950
5965
|
}
|
|
5951
|
-
return (jsx$1(Container$
|
|
5966
|
+
return (jsx$1(Container$Z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5952
5967
|
};
|
|
5953
|
-
var templateObject_1$
|
|
5968
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N;
|
|
5954
5969
|
|
|
5955
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5970
|
+
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; });
|
|
5956
5971
|
var Title$5 = function (_a) {
|
|
5957
5972
|
var title = _a.title;
|
|
5958
5973
|
var theme = useTheme();
|
|
5959
5974
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5960
5975
|
};
|
|
5961
|
-
var templateObject_1$
|
|
5976
|
+
var templateObject_1$1u;
|
|
5962
5977
|
|
|
5963
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5978
|
+
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; });
|
|
5964
5979
|
var Promo = function (_a) {
|
|
5965
5980
|
var text = _a.text;
|
|
5966
5981
|
var theme = useTheme();
|
|
5967
5982
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5968
5983
|
};
|
|
5969
|
-
var templateObject_1$
|
|
5984
|
+
var templateObject_1$1t;
|
|
5970
5985
|
|
|
5971
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
5986
|
+
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; });
|
|
5972
5987
|
var Description$1 = function (_a) {
|
|
5973
5988
|
var text = _a.text;
|
|
5974
5989
|
var theme = useTheme();
|
|
5975
5990
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5976
5991
|
};
|
|
5977
|
-
var templateObject_1$
|
|
5992
|
+
var templateObject_1$1s;
|
|
5978
5993
|
|
|
5979
|
-
var Container$
|
|
5994
|
+
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"); });
|
|
5980
5995
|
var CloseButton$1 = function (_a) {
|
|
5981
5996
|
var onClick = _a.onClick, size = _a.size;
|
|
5982
5997
|
var theme = useTheme();
|
|
5983
|
-
return (jsx$1(Container$
|
|
5998
|
+
return (jsx$1(Container$Y, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5984
5999
|
};
|
|
5985
|
-
var templateObject_1$
|
|
6000
|
+
var templateObject_1$1r;
|
|
5986
6001
|
|
|
5987
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6002
|
+
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) {
|
|
5988
6003
|
var backgroundColor = _a.backgroundColor;
|
|
5989
6004
|
return backgroundColor;
|
|
5990
6005
|
}, function (_a) {
|
|
@@ -5999,7 +6014,7 @@ var OfferBanner = function (_a) {
|
|
|
5999
6014
|
var theme = useTheme();
|
|
6000
6015
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6001
6016
|
};
|
|
6002
|
-
var templateObject_1$
|
|
6017
|
+
var templateObject_1$1q;
|
|
6003
6018
|
|
|
6004
6019
|
var CartProductItem = {
|
|
6005
6020
|
Title: Title$5,
|
|
@@ -6009,9 +6024,9 @@ var CartProductItem = {
|
|
|
6009
6024
|
CloseButton: CloseButton$1,
|
|
6010
6025
|
};
|
|
6011
6026
|
|
|
6012
|
-
var Container$
|
|
6013
|
-
var MobileContainer = newStyled(Container$
|
|
6014
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6027
|
+
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"])));
|
|
6028
|
+
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"])));
|
|
6029
|
+
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"])));
|
|
6015
6030
|
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"])));
|
|
6016
6031
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6017
6032
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6020,9 +6035,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (t
|
|
|
6020
6035
|
var ClubPriceLabel = function (_a) {
|
|
6021
6036
|
var clubPrice = _a.clubPrice;
|
|
6022
6037
|
var isMobile = useWindowDimensions().isMobile;
|
|
6023
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6038
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$X, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6024
6039
|
};
|
|
6025
|
-
var templateObject_1$
|
|
6040
|
+
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;
|
|
6026
6041
|
|
|
6027
6042
|
var Spacing = function (_a) {
|
|
6028
6043
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6030,9 +6045,9 @@ var Spacing = function (_a) {
|
|
|
6030
6045
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6031
6046
|
};
|
|
6032
6047
|
|
|
6033
|
-
var Container$
|
|
6034
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6035
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6048
|
+
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"])));
|
|
6049
|
+
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"])));
|
|
6050
|
+
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"])));
|
|
6036
6051
|
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) {
|
|
6037
6052
|
var index = _a.index;
|
|
6038
6053
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6042,14 +6057,14 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6042
6057
|
});
|
|
6043
6058
|
var StrengthBars = function (_a) {
|
|
6044
6059
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6045
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$W, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6046
6061
|
};
|
|
6047
|
-
var templateObject_1$
|
|
6062
|
+
var templateObject_1$1o, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
6048
6063
|
|
|
6049
|
-
var Container$
|
|
6050
|
-
var templateObject_1$
|
|
6064
|
+
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"])));
|
|
6065
|
+
var templateObject_1$1n;
|
|
6051
6066
|
|
|
6052
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6067
|
+
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) {
|
|
6053
6068
|
var marginRight = _a.marginRight;
|
|
6054
6069
|
return marginRight;
|
|
6055
6070
|
});
|
|
@@ -6061,11 +6076,11 @@ var StarList = function (_a) {
|
|
|
6061
6076
|
width: theme.component.stars.element[size].width,
|
|
6062
6077
|
height: theme.component.stars.element[size].height,
|
|
6063
6078
|
};
|
|
6064
|
-
return (jsx$1(Container$
|
|
6079
|
+
return (jsx$1(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6065
6080
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6066
6081
|
}) }, void 0));
|
|
6067
6082
|
};
|
|
6068
|
-
var templateObject_1$
|
|
6083
|
+
var templateObject_1$1m;
|
|
6069
6084
|
|
|
6070
6085
|
/* base styles & size variants */
|
|
6071
6086
|
var LabelStyles = {
|
|
@@ -6106,8 +6121,8 @@ var LabelStyles = {
|
|
|
6106
6121
|
});
|
|
6107
6122
|
},
|
|
6108
6123
|
};
|
|
6109
|
-
var Container$
|
|
6110
|
-
var templateObject_1$
|
|
6124
|
+
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"])));
|
|
6125
|
+
var templateObject_1$1l;
|
|
6111
6126
|
|
|
6112
6127
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6113
6128
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6127,7 +6142,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6127
6142
|
}),
|
|
6128
6143
|
];
|
|
6129
6144
|
});
|
|
6130
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6145
|
+
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; });
|
|
6131
6146
|
var starsNumber = 5;
|
|
6132
6147
|
var Rating = function (_a) {
|
|
6133
6148
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6148,13 +6163,13 @@ var Rating = function (_a) {
|
|
|
6148
6163
|
href: reviewsContainerId,
|
|
6149
6164
|
}
|
|
6150
6165
|
: {};
|
|
6151
|
-
return (jsxs$1(Container$
|
|
6166
|
+
return (jsxs$1(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6152
6167
|
};
|
|
6153
|
-
var templateObject_1$
|
|
6168
|
+
var templateObject_1$1k;
|
|
6154
6169
|
|
|
6155
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6156
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6157
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6170
|
+
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"])));
|
|
6171
|
+
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"])));
|
|
6172
|
+
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"])));
|
|
6158
6173
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6159
6174
|
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"])));
|
|
6160
6175
|
var RegularPriceTag = function () {
|
|
@@ -6205,11 +6220,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6205
6220
|
: ComponentSize.XSmall;
|
|
6206
6221
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6207
6222
|
};
|
|
6208
|
-
return (jsxs$1(Container$
|
|
6223
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6209
6224
|
? finalPriceArray[0]
|
|
6210
6225
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6211
6226
|
};
|
|
6212
|
-
var templateObject_1$
|
|
6227
|
+
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$n;
|
|
6213
6228
|
|
|
6214
6229
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6215
6230
|
var width = _a.width, height = _a.height;
|
|
@@ -6219,9 +6234,9 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6219
6234
|
height: height,
|
|
6220
6235
|
});
|
|
6221
6236
|
});
|
|
6222
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6223
|
-
var Container$
|
|
6224
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6237
|
+
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"])));
|
|
6238
|
+
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"])));
|
|
6239
|
+
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"])));
|
|
6225
6240
|
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; });
|
|
6226
6241
|
var getStylesBySize$9 = function (size) {
|
|
6227
6242
|
switch (size) {
|
|
@@ -6248,11 +6263,11 @@ var getStylesBySize$9 = function (size) {
|
|
|
6248
6263
|
};
|
|
6249
6264
|
}
|
|
6250
6265
|
};
|
|
6251
|
-
var TopTagContainer$
|
|
6266
|
+
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) {
|
|
6252
6267
|
var style = _a.style;
|
|
6253
6268
|
return style.width;
|
|
6254
6269
|
});
|
|
6255
|
-
var BottomTagContainer$
|
|
6270
|
+
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) {
|
|
6256
6271
|
var style = _a.style;
|
|
6257
6272
|
return style.width;
|
|
6258
6273
|
});
|
|
@@ -6313,9 +6328,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6313
6328
|
return jsx(Fragment, {}, void 0);
|
|
6314
6329
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6315
6330
|
};
|
|
6316
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6331
|
+
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));
|
|
6317
6332
|
};
|
|
6318
|
-
var templateObject_1$
|
|
6333
|
+
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6319
6334
|
|
|
6320
6335
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6321
6336
|
var width = _a.width, height = _a.height;
|
|
@@ -6325,9 +6340,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6325
6340
|
height: height,
|
|
6326
6341
|
});
|
|
6327
6342
|
});
|
|
6328
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6329
|
-
var Container$
|
|
6330
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6343
|
+
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; });
|
|
6344
|
+
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"])));
|
|
6345
|
+
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"])));
|
|
6331
6346
|
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; });
|
|
6332
6347
|
var getStylesBySize$8 = function (size) {
|
|
6333
6348
|
switch (size) {
|
|
@@ -6354,11 +6369,11 @@ var getStylesBySize$8 = function (size) {
|
|
|
6354
6369
|
};
|
|
6355
6370
|
}
|
|
6356
6371
|
};
|
|
6357
|
-
var TopTagContainer$
|
|
6372
|
+
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) {
|
|
6358
6373
|
var style = _a.style;
|
|
6359
6374
|
return style.width;
|
|
6360
6375
|
});
|
|
6361
|
-
var BottomTagContainer$
|
|
6376
|
+
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) {
|
|
6362
6377
|
var style = _a.style;
|
|
6363
6378
|
return style.width;
|
|
6364
6379
|
});
|
|
@@ -6406,26 +6421,26 @@ var ProductItemTK = function (_a) {
|
|
|
6406
6421
|
: undefined }, void 0));
|
|
6407
6422
|
};
|
|
6408
6423
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6409
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6424
|
+
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 ? (
|
|
6410
6425
|
// @ts-ignore
|
|
6411
6426
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6412
6427
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6413
6428
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6414
6429
|
} }, { 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));
|
|
6415
6430
|
};
|
|
6416
|
-
var templateObject_1$
|
|
6431
|
+
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6417
6432
|
|
|
6418
|
-
var Container$
|
|
6433
|
+
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"])));
|
|
6419
6434
|
function withProductGrid(ProductItemComponent, data) {
|
|
6420
6435
|
function WithProductGrid(props) {
|
|
6421
|
-
return (jsx$1(Container$
|
|
6436
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6422
6437
|
}
|
|
6423
6438
|
/* istanbul ignore next */
|
|
6424
6439
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6425
6440
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6426
6441
|
return WithProductGrid;
|
|
6427
6442
|
}
|
|
6428
|
-
var templateObject_1$
|
|
6443
|
+
var templateObject_1$1g;
|
|
6429
6444
|
|
|
6430
6445
|
var Collection = {
|
|
6431
6446
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6472,9 +6487,9 @@ var OutOfStock = function (_a) {
|
|
|
6472
6487
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6473
6488
|
};
|
|
6474
6489
|
|
|
6475
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6476
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6477
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6490
|
+
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"])));
|
|
6491
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6492
|
+
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"])));
|
|
6478
6493
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6479
6494
|
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"])));
|
|
6480
6495
|
var Label$2 = function (_a) {
|
|
@@ -6494,23 +6509,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6494
6509
|
Option: Option,
|
|
6495
6510
|
OptionsContainer: OptionsContainer,
|
|
6496
6511
|
});
|
|
6497
|
-
var templateObject_1$
|
|
6512
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$k;
|
|
6498
6513
|
|
|
6499
|
-
var Container$
|
|
6514
|
+
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) {
|
|
6500
6515
|
var borderColor = _a.borderColor;
|
|
6501
6516
|
return borderColor;
|
|
6502
6517
|
}, function (_a) {
|
|
6503
6518
|
var noStock = _a.noStock;
|
|
6504
6519
|
return (noStock ? '0.4' : '1');
|
|
6505
6520
|
});
|
|
6506
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6521
|
+
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"])));
|
|
6507
6522
|
var PatternSelector = function (_a) {
|
|
6508
6523
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6509
6524
|
var theme = useTheme();
|
|
6510
6525
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6511
|
-
return (jsx$1(Container$
|
|
6526
|
+
return (jsx$1(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6512
6527
|
};
|
|
6513
|
-
var templateObject_1$
|
|
6528
|
+
var templateObject_1$1e, templateObject_2$T;
|
|
6514
6529
|
|
|
6515
6530
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6516
6531
|
if (options == null || options.length === 0) {
|
|
@@ -6569,9 +6584,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6569
6584
|
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));
|
|
6570
6585
|
};
|
|
6571
6586
|
|
|
6572
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6573
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6574
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6587
|
+
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'); });
|
|
6588
|
+
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"])));
|
|
6589
|
+
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) {
|
|
6575
6590
|
return props.rightToLeft &&
|
|
6576
6591
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6577
6592
|
});
|
|
@@ -6583,7 +6598,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6583
6598
|
var theme = useTheme();
|
|
6584
6599
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6585
6600
|
};
|
|
6586
|
-
var templateObject_1$
|
|
6601
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6587
6602
|
|
|
6588
6603
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6589
6604
|
__proto__: null,
|
|
@@ -6611,7 +6626,7 @@ var sizeMapper = (_a = {},
|
|
|
6611
6626
|
_a[ComponentSize.Large] = 'large',
|
|
6612
6627
|
_a[ComponentSize.XSmall] = 'small',
|
|
6613
6628
|
_a);
|
|
6614
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6629
|
+
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) {
|
|
6615
6630
|
var wide = _a.wide;
|
|
6616
6631
|
return (wide ? '100%' : 'fit-content');
|
|
6617
6632
|
}, function (_a) {
|
|
@@ -6633,8 +6648,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6633
6648
|
var theme = _a.theme;
|
|
6634
6649
|
return theme.colors.text.disabled;
|
|
6635
6650
|
});
|
|
6636
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6637
|
-
var templateObject_1$
|
|
6651
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6652
|
+
var templateObject_1$1c, templateObject_2$R;
|
|
6638
6653
|
|
|
6639
6654
|
var BaseCTA = function (_a) {
|
|
6640
6655
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6701,23 +6716,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6701
6716
|
} }), void 0));
|
|
6702
6717
|
};
|
|
6703
6718
|
|
|
6704
|
-
var Container$
|
|
6705
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6706
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6719
|
+
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; });
|
|
6720
|
+
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"])));
|
|
6721
|
+
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; });
|
|
6707
6722
|
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; });
|
|
6708
6723
|
var Note = function (_a) {
|
|
6709
6724
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6710
6725
|
var theme = useTheme();
|
|
6711
|
-
return (jsxs$1(Container$
|
|
6726
|
+
return (jsxs$1(Container$P, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6712
6727
|
};
|
|
6713
|
-
var templateObject_1$
|
|
6728
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$t;
|
|
6714
6729
|
|
|
6715
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6730
|
+
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) {
|
|
6716
6731
|
var theme = _a.theme;
|
|
6717
6732
|
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 ");
|
|
6718
6733
|
});
|
|
6719
|
-
var Line = newStyled.div(templateObject_2$
|
|
6720
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6734
|
+
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; });
|
|
6735
|
+
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({
|
|
6721
6736
|
flexDirection: ['column', 'row'],
|
|
6722
6737
|
}));
|
|
6723
6738
|
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({
|
|
@@ -6755,16 +6770,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6755
6770
|
var theme = useTheme();
|
|
6756
6771
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6757
6772
|
};
|
|
6758
|
-
var templateObject_1$
|
|
6773
|
+
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;
|
|
6759
6774
|
|
|
6760
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6775
|
+
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) {
|
|
6761
6776
|
var top = _a.top;
|
|
6762
6777
|
return top;
|
|
6763
6778
|
}, function (_a) {
|
|
6764
6779
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6765
6780
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6766
6781
|
});
|
|
6767
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6782
|
+
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) {
|
|
6768
6783
|
var height = _a.height;
|
|
6769
6784
|
return height;
|
|
6770
6785
|
}, function (_a) {
|
|
@@ -6811,20 +6826,20 @@ var Drawer = function (_a) {
|
|
|
6811
6826
|
}, [isOpen, onClose, onOpen]);
|
|
6812
6827
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6813
6828
|
};
|
|
6814
|
-
var templateObject_1$
|
|
6829
|
+
var templateObject_1$19, templateObject_2$O;
|
|
6815
6830
|
|
|
6816
6831
|
var TooltipArrow = function (_a) {
|
|
6817
6832
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6818
6833
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
6819
6834
|
};
|
|
6820
6835
|
|
|
6821
|
-
var List = newStyled.ul(templateObject_1$
|
|
6822
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6823
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6836
|
+
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"])));
|
|
6837
|
+
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"])));
|
|
6838
|
+
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"])));
|
|
6824
6839
|
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"])));
|
|
6825
6840
|
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; });
|
|
6826
6841
|
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; });
|
|
6827
|
-
var templateObject_1$
|
|
6842
|
+
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6828
6843
|
|
|
6829
6844
|
var DropdownListIcons = function (_a) {
|
|
6830
6845
|
var items = _a.items;
|
|
@@ -6837,13 +6852,13 @@ var Dropdown = function (_a) {
|
|
|
6837
6852
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6838
6853
|
};
|
|
6839
6854
|
|
|
6840
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6841
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6842
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6855
|
+
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"])));
|
|
6856
|
+
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"])));
|
|
6857
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6843
6858
|
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"])));
|
|
6844
6859
|
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"])));
|
|
6845
6860
|
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"])));
|
|
6846
|
-
var templateObject_1$
|
|
6861
|
+
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6847
6862
|
|
|
6848
6863
|
var SizeDropdown = function (_a) {
|
|
6849
6864
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6866,9 +6881,9 @@ var SizeDropdown = function (_a) {
|
|
|
6866
6881
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6867
6882
|
};
|
|
6868
6883
|
|
|
6869
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6870
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6871
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6884
|
+
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; });
|
|
6885
|
+
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; });
|
|
6886
|
+
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"])));
|
|
6872
6887
|
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"])));
|
|
6873
6888
|
var DropdownDialog = function (_a) {
|
|
6874
6889
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -6878,7 +6893,7 @@ var DropdownDialog = function (_a) {
|
|
|
6878
6893
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6879
6894
|
}) }), void 0) }), void 0));
|
|
6880
6895
|
};
|
|
6881
|
-
var templateObject_1$
|
|
6896
|
+
var templateObject_1$16, templateObject_2$L, templateObject_3$B, templateObject_4$p;
|
|
6882
6897
|
|
|
6883
6898
|
function FilteringDropdown(_a) {
|
|
6884
6899
|
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;
|
|
@@ -6911,21 +6926,21 @@ function FilteringDropdown(_a) {
|
|
|
6911
6926
|
}) }, void 0)] }), void 0));
|
|
6912
6927
|
}
|
|
6913
6928
|
|
|
6914
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6915
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6916
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6917
|
-
var Container$
|
|
6929
|
+
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; });
|
|
6930
|
+
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; });
|
|
6931
|
+
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"])));
|
|
6932
|
+
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'); });
|
|
6918
6933
|
var Accordion = function (_a) {
|
|
6919
6934
|
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;
|
|
6920
6935
|
var theme = useTheme();
|
|
6921
6936
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6922
|
-
return (jsxs$1(Container$
|
|
6937
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6923
6938
|
};
|
|
6924
|
-
var templateObject_1$
|
|
6939
|
+
var templateObject_1$15, templateObject_2$K, templateObject_3$A, templateObject_4$o;
|
|
6925
6940
|
|
|
6926
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6927
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6928
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6941
|
+
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; });
|
|
6942
|
+
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"])));
|
|
6943
|
+
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"])));
|
|
6929
6944
|
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"])));
|
|
6930
6945
|
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; });
|
|
6931
6946
|
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; });
|
|
@@ -6933,7 +6948,7 @@ var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 =
|
|
|
6933
6948
|
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; });
|
|
6934
6949
|
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"])));
|
|
6935
6950
|
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"])));
|
|
6936
|
-
var templateObject_1$
|
|
6951
|
+
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;
|
|
6937
6952
|
|
|
6938
6953
|
var getStylesBySize$7 = function (size, theme) {
|
|
6939
6954
|
switch (size) {
|
|
@@ -6998,9 +7013,9 @@ var SelectorSecondary = function (_a) {
|
|
|
6998
7013
|
} }), id: id }, void 0));
|
|
6999
7014
|
};
|
|
7000
7015
|
|
|
7001
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7002
|
-
var LI = newStyled.li(templateObject_2$
|
|
7003
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7016
|
+
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"])));
|
|
7017
|
+
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; });
|
|
7018
|
+
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"])));
|
|
7004
7019
|
var Tags = function (_a) {
|
|
7005
7020
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7006
7021
|
var theme = useTheme();
|
|
@@ -7008,7 +7023,7 @@ var Tags = function (_a) {
|
|
|
7008
7023
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7009
7024
|
}) }), void 0));
|
|
7010
7025
|
};
|
|
7011
|
-
var templateObject_1$
|
|
7026
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y;
|
|
7012
7027
|
|
|
7013
7028
|
var Filters = function (_a) {
|
|
7014
7029
|
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;
|
|
@@ -7144,8 +7159,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7144
7159
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7145
7160
|
};
|
|
7146
7161
|
|
|
7147
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7148
|
-
var Container$
|
|
7162
|
+
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"])));
|
|
7163
|
+
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"])));
|
|
7149
7164
|
var FitGuarantee = function (_a) {
|
|
7150
7165
|
var _b;
|
|
7151
7166
|
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;
|
|
@@ -7156,17 +7171,17 @@ var FitGuarantee = function (_a) {
|
|
|
7156
7171
|
console.error('Icon', iconName, 'not found');
|
|
7157
7172
|
return null;
|
|
7158
7173
|
}
|
|
7159
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7174
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7160
7175
|
margin: '0.1rem 0',
|
|
7161
7176
|
width: '100%',
|
|
7162
7177
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7163
7178
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7164
7179
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7165
7180
|
};
|
|
7166
|
-
var templateObject_1$
|
|
7181
|
+
var templateObject_1$12, templateObject_2$H;
|
|
7167
7182
|
|
|
7168
|
-
var Container$
|
|
7169
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7183
|
+
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"])));
|
|
7184
|
+
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; });
|
|
7170
7185
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7171
7186
|
border: 'none',
|
|
7172
7187
|
background: 'transparent',
|
|
@@ -7179,9 +7194,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7179
7194
|
var FitPredictor = function (_a) {
|
|
7180
7195
|
var onClick = _a.onClick;
|
|
7181
7196
|
var theme = useTheme();
|
|
7182
|
-
return (jsxs(Container$
|
|
7197
|
+
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));
|
|
7183
7198
|
};
|
|
7184
|
-
var templateObject_1
|
|
7199
|
+
var templateObject_1$11, templateObject_2$G;
|
|
7185
7200
|
|
|
7186
7201
|
var Button$6 = newStyled.button(function () { return ({
|
|
7187
7202
|
background: 'transparent',
|
|
@@ -11425,14 +11440,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11425
11440
|
return Slider;
|
|
11426
11441
|
}(React__default.Component);
|
|
11427
11442
|
|
|
11428
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11443
|
+
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) {
|
|
11429
11444
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11430
11445
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11431
11446
|
}, function (_a) {
|
|
11432
11447
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11433
11448
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11434
11449
|
});
|
|
11435
|
-
var templateObject_1$
|
|
11450
|
+
var templateObject_1$10;
|
|
11436
11451
|
|
|
11437
11452
|
var getStylesBySize$6 = function (size) {
|
|
11438
11453
|
// rem units
|
|
@@ -11491,7 +11506,7 @@ var SliderNavigation = function (_a) {
|
|
|
11491
11506
|
} }, { 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));
|
|
11492
11507
|
};
|
|
11493
11508
|
|
|
11494
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11509
|
+
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) {
|
|
11495
11510
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11496
11511
|
return borderRadiusVariant &&
|
|
11497
11512
|
"\nborder-radius: 20px;\n";
|
|
@@ -11506,11 +11521,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11506
11521
|
var theme = useTheme();
|
|
11507
11522
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11508
11523
|
};
|
|
11509
|
-
var templateObject_1
|
|
11524
|
+
var templateObject_1$$;
|
|
11510
11525
|
|
|
11511
|
-
var horizontalStyles = css(templateObject_1$
|
|
11512
|
-
var verticalStyles = css(templateObject_2$
|
|
11513
|
-
var Container$
|
|
11526
|
+
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"])));
|
|
11527
|
+
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"])));
|
|
11528
|
+
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) {
|
|
11514
11529
|
var position = _a.position;
|
|
11515
11530
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11516
11531
|
}, function (_a) {
|
|
@@ -11533,13 +11548,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11533
11548
|
var element = document.querySelector(".imageListContainer");
|
|
11534
11549
|
element.scrollBy(0, 200);
|
|
11535
11550
|
};
|
|
11536
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11551
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11537
11552
|
arrowWidth: 0.75,
|
|
11538
11553
|
arrowHeight: 1.25,
|
|
11539
11554
|
arrowPadding: 1.625,
|
|
11540
11555
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11541
11556
|
};
|
|
11542
|
-
var templateObject_1$
|
|
11557
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11543
11558
|
|
|
11544
11559
|
var propTypes = {exports: {}};
|
|
11545
11560
|
|
|
@@ -13132,21 +13147,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13132
13147
|
afterZoomOut: PropTypes.func
|
|
13133
13148
|
} : {};
|
|
13134
13149
|
|
|
13135
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13136
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13137
|
-
var templateObject_1$
|
|
13150
|
+
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); });
|
|
13151
|
+
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; });
|
|
13152
|
+
var templateObject_1$Z, templateObject_2$E;
|
|
13138
13153
|
|
|
13139
13154
|
var ProgressBar$1 = function (_a) {
|
|
13140
13155
|
var progress = _a.progress, hide = _a.hide;
|
|
13141
13156
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13142
13157
|
};
|
|
13143
13158
|
|
|
13144
|
-
var Container$
|
|
13145
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13146
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13159
|
+
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"])));
|
|
13160
|
+
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"])));
|
|
13161
|
+
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"])));
|
|
13147
13162
|
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"])));
|
|
13148
13163
|
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"])));
|
|
13149
|
-
var templateObject_1$
|
|
13164
|
+
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$d;
|
|
13150
13165
|
|
|
13151
13166
|
var Video$1 = function (_a) {
|
|
13152
13167
|
var _b, _c, _d, _e;
|
|
@@ -13185,30 +13200,30 @@ var Video$1 = function (_a) {
|
|
|
13185
13200
|
setVideoProgress(videoRef.current.currentTime);
|
|
13186
13201
|
}
|
|
13187
13202
|
};
|
|
13188
|
-
return (jsxs$1(Container$
|
|
13203
|
+
return (jsxs$1(Container$K, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); } }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13189
13204
|
};
|
|
13190
13205
|
|
|
13191
|
-
var Container$
|
|
13206
|
+
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) {
|
|
13192
13207
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13193
13208
|
return borderRadiusVariant &&
|
|
13194
13209
|
"\n border-radius: 40px;\n ";
|
|
13195
13210
|
});
|
|
13196
|
-
var TopTagContainer$
|
|
13197
|
-
var BottomTagContainer$
|
|
13211
|
+
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'); });
|
|
13212
|
+
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"])));
|
|
13198
13213
|
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"])));
|
|
13199
13214
|
var ImageProductWithTags$1 = function (_a) {
|
|
13200
13215
|
var _b;
|
|
13201
13216
|
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;
|
|
13202
13217
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13203
13218
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13204
|
-
return (jsxs$1(Container$
|
|
13219
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13205
13220
|
alt: content.alt,
|
|
13206
13221
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13207
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
13222
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13208
13223
|
};
|
|
13209
|
-
var templateObject_1$
|
|
13224
|
+
var templateObject_1$X, templateObject_2$C, templateObject_3$v, templateObject_4$k;
|
|
13210
13225
|
|
|
13211
|
-
var Container$
|
|
13226
|
+
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"])));
|
|
13212
13227
|
var ProductGallery = function (_a) {
|
|
13213
13228
|
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;
|
|
13214
13229
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13216,11 +13231,11 @@ var ProductGallery = function (_a) {
|
|
|
13216
13231
|
useEffect(function () {
|
|
13217
13232
|
setSelectedImage(initialValue);
|
|
13218
13233
|
}, [initialValue]);
|
|
13219
|
-
return (jsxs$1(Container$
|
|
13234
|
+
return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13220
13235
|
setSelectedImage(value);
|
|
13221
13236
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13222
13237
|
};
|
|
13223
|
-
var templateObject_1$
|
|
13238
|
+
var templateObject_1$W;
|
|
13224
13239
|
|
|
13225
13240
|
var getStylesBySize$5 = function (size) {
|
|
13226
13241
|
switch (size) {
|
|
@@ -13241,7 +13256,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13241
13256
|
};
|
|
13242
13257
|
}
|
|
13243
13258
|
};
|
|
13244
|
-
var Container$
|
|
13259
|
+
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) {
|
|
13245
13260
|
var backgroundColor = _a.backgroundColor;
|
|
13246
13261
|
return backgroundColor;
|
|
13247
13262
|
}, function (_a) {
|
|
@@ -13269,11 +13284,11 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13269
13284
|
var IconButton = function (_a) {
|
|
13270
13285
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13271
13286
|
var theme = useTheme();
|
|
13272
|
-
return (jsx$1(Container$
|
|
13287
|
+
return (jsx$1(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));
|
|
13273
13288
|
};
|
|
13274
|
-
var templateObject_1$
|
|
13289
|
+
var templateObject_1$V;
|
|
13275
13290
|
|
|
13276
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13291
|
+
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; });
|
|
13277
13292
|
var AmazonButton = function (_a) {
|
|
13278
13293
|
var onClick = _a.onClick;
|
|
13279
13294
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13282,9 +13297,9 @@ var PaypalButton = function (_a) {
|
|
|
13282
13297
|
var onClick = _a.onClick;
|
|
13283
13298
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13284
13299
|
};
|
|
13285
|
-
var templateObject_1$
|
|
13300
|
+
var templateObject_1$U;
|
|
13286
13301
|
|
|
13287
|
-
var Container$
|
|
13302
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13288
13303
|
height: 'auto',
|
|
13289
13304
|
textAlign: 'center',
|
|
13290
13305
|
justifyContent: 'center',
|
|
@@ -13334,12 +13349,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13334
13349
|
textAlign: 'center',
|
|
13335
13350
|
lineHeight: '18px',
|
|
13336
13351
|
};
|
|
13337
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13352
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13338
13353
|
};
|
|
13339
13354
|
|
|
13340
|
-
var Container$
|
|
13341
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13342
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13355
|
+
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'); });
|
|
13356
|
+
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'); });
|
|
13357
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13343
13358
|
var titlePosition = _a.titlePosition;
|
|
13344
13359
|
return titlePosition == 'center' &&
|
|
13345
13360
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13347,15 +13362,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13347
13362
|
var ImageCardWithDescription = function (_a) {
|
|
13348
13363
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13349
13364
|
var isMobile = useWindowDimensions().isMobile;
|
|
13350
|
-
return (jsxs$1(Container$
|
|
13365
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13351
13366
|
};
|
|
13352
|
-
var templateObject_1$
|
|
13367
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$u;
|
|
13353
13368
|
|
|
13354
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13369
|
+
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) {
|
|
13355
13370
|
var color = _a.color;
|
|
13356
13371
|
return color;
|
|
13357
13372
|
});
|
|
13358
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13373
|
+
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) {
|
|
13359
13374
|
var color = _a.color;
|
|
13360
13375
|
return color;
|
|
13361
13376
|
});
|
|
@@ -13364,7 +13379,7 @@ var InputLabel = function (_a) {
|
|
|
13364
13379
|
var theme = useTheme();
|
|
13365
13380
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13366
13381
|
};
|
|
13367
|
-
var templateObject_1$
|
|
13382
|
+
var templateObject_1$S, templateObject_2$A;
|
|
13368
13383
|
|
|
13369
13384
|
var containerByStatus = function (theme, status) {
|
|
13370
13385
|
if (status === InputValidationType.Valid)
|
|
@@ -13373,12 +13388,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13373
13388
|
return theme.colors.semantic.urgent.color;
|
|
13374
13389
|
return '';
|
|
13375
13390
|
};
|
|
13376
|
-
var Container$
|
|
13391
|
+
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) {
|
|
13377
13392
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13378
13393
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13379
13394
|
});
|
|
13380
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13381
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13395
|
+
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"])));
|
|
13396
|
+
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) {
|
|
13382
13397
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13383
13398
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13384
13399
|
}, function (_a) {
|
|
@@ -13451,7 +13466,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13451
13466
|
return theme.component.input.lineHeight;
|
|
13452
13467
|
});
|
|
13453
13468
|
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"])));
|
|
13454
|
-
var templateObject_1$
|
|
13469
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13455
13470
|
|
|
13456
13471
|
var BaseInput = function (_a) {
|
|
13457
13472
|
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"]);
|
|
@@ -13474,7 +13489,7 @@ var BaseInput = function (_a) {
|
|
|
13474
13489
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13475
13490
|
}, [status]);
|
|
13476
13491
|
var hasValue = Boolean(value);
|
|
13477
|
-
return (jsxs$1(Container$
|
|
13492
|
+
return (jsxs$1(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13478
13493
|
onChange(event.target.value, event);
|
|
13479
13494
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13480
13495
|
onChange('', { target: { value: '' } });
|
|
@@ -13495,11 +13510,11 @@ var Button$4 = function (_a) {
|
|
|
13495
13510
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13496
13511
|
};
|
|
13497
13512
|
|
|
13498
|
-
var Container$
|
|
13513
|
+
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) {
|
|
13499
13514
|
var theme = _a.theme;
|
|
13500
13515
|
return theme.component.inputCustom.input.borderRadius;
|
|
13501
13516
|
});
|
|
13502
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13517
|
+
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) {
|
|
13503
13518
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13504
13519
|
return defaultRounded
|
|
13505
13520
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13514,23 +13529,23 @@ var Custom = function (_a) {
|
|
|
13514
13529
|
text: text,
|
|
13515
13530
|
disabled: rest.disabled,
|
|
13516
13531
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13517
|
-
return (jsx$1(Container$
|
|
13532
|
+
return (jsx$1(Container$D, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13518
13533
|
};
|
|
13519
|
-
var templateObject_1$
|
|
13534
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
13520
13535
|
|
|
13521
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13536
|
+
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) {
|
|
13522
13537
|
var size = _a.size;
|
|
13523
13538
|
return (size === 'small' ? '36px' : '');
|
|
13524
13539
|
});
|
|
13525
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13526
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13540
|
+
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"])));
|
|
13541
|
+
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"])));
|
|
13527
13542
|
var Success = function (_a) {
|
|
13528
13543
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13529
13544
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13530
13545
|
};
|
|
13531
|
-
var templateObject_1$
|
|
13546
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
13532
13547
|
|
|
13533
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13548
|
+
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) {
|
|
13534
13549
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13535
13550
|
return status === InputValidationType.Empty &&
|
|
13536
13551
|
type === 'primary' &&
|
|
@@ -13547,16 +13562,16 @@ var BasePlusButton = function (_a) {
|
|
|
13547
13562
|
}
|
|
13548
13563
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13549
13564
|
};
|
|
13550
|
-
var templateObject_1$
|
|
13565
|
+
var templateObject_1$O;
|
|
13551
13566
|
|
|
13552
|
-
var Container$
|
|
13553
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13567
|
+
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"])));
|
|
13568
|
+
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"])));
|
|
13554
13569
|
var BasePlusIcon = function (_a) {
|
|
13555
13570
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13556
13571
|
var theme = useTheme();
|
|
13557
|
-
return (jsx$1(Container$
|
|
13572
|
+
return (jsx$1(Container$C, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13558
13573
|
};
|
|
13559
|
-
var templateObject_1$
|
|
13574
|
+
var templateObject_1$N, templateObject_2$w;
|
|
13560
13575
|
|
|
13561
13576
|
var Input$3 = {
|
|
13562
13577
|
Simple: BaseInput,
|
|
@@ -13565,7 +13580,7 @@ var Input$3 = {
|
|
|
13565
13580
|
SimplePlusIcon: BasePlusIcon,
|
|
13566
13581
|
};
|
|
13567
13582
|
|
|
13568
|
-
var Container$
|
|
13583
|
+
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) {
|
|
13569
13584
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13570
13585
|
return borderRadiusVariant &&
|
|
13571
13586
|
"\n border-radius: 40px;\n ";
|
|
@@ -13574,11 +13589,11 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13574
13589
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13575
13590
|
});
|
|
13576
13591
|
// max-height: 31.875rem;
|
|
13577
|
-
var TopTagContainer$
|
|
13578
|
-
var BottomTagContainer$
|
|
13592
|
+
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'); });
|
|
13593
|
+
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"])));
|
|
13579
13594
|
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"])));
|
|
13580
13595
|
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"])));
|
|
13581
|
-
var settings$
|
|
13596
|
+
var settings$2 = {
|
|
13582
13597
|
dots: true,
|
|
13583
13598
|
infinite: false,
|
|
13584
13599
|
speed: 200,
|
|
@@ -13592,7 +13607,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13592
13607
|
var sliderWrapper = useRef(null);
|
|
13593
13608
|
useRef(null);
|
|
13594
13609
|
var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13595
|
-
usePreventVerticalScroll$
|
|
13610
|
+
usePreventVerticalScroll$2(sliderWrapper);
|
|
13596
13611
|
var onButtonClick = useCallback(function (i) {
|
|
13597
13612
|
var _a;
|
|
13598
13613
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13622,20 +13637,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13622
13637
|
}
|
|
13623
13638
|
}
|
|
13624
13639
|
}, [contents, selectedValue]);
|
|
13625
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13640
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13626
13641
|
var _a;
|
|
13627
13642
|
var activeSlide = contents[e];
|
|
13628
13643
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13629
13644
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13630
13645
|
autoplay ? _playVideo() : _stopVideo();
|
|
13631
|
-
} }, settings$
|
|
13646
|
+
} }, settings$2, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13632
13647
|
var _a;
|
|
13633
13648
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13634
13649
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13635
|
-
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$
|
|
13650
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13636
13651
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13637
13652
|
};
|
|
13638
|
-
function usePreventVerticalScroll$
|
|
13653
|
+
function usePreventVerticalScroll$2(ref, dragThreshold) {
|
|
13639
13654
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13640
13655
|
var firstClientX = useRef(0);
|
|
13641
13656
|
var clientX = useRef(0);
|
|
@@ -13670,14 +13685,14 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13670
13685
|
};
|
|
13671
13686
|
}, [preventTouch, ref, touchStart]);
|
|
13672
13687
|
}
|
|
13673
|
-
var templateObject_1$
|
|
13688
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
13674
13689
|
|
|
13675
|
-
var Container$
|
|
13690
|
+
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"])));
|
|
13676
13691
|
var ProductGalleryMobile = function (_a) {
|
|
13677
13692
|
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;
|
|
13678
|
-
return (jsx$1(Container$
|
|
13693
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13679
13694
|
};
|
|
13680
|
-
var templateObject_1$
|
|
13695
|
+
var templateObject_1$L;
|
|
13681
13696
|
|
|
13682
13697
|
function _extends() {
|
|
13683
13698
|
_extends = Object.assign || function (target) {
|
|
@@ -13944,27 +13959,27 @@ function useSwipeable(options) {
|
|
|
13944
13959
|
return handlers;
|
|
13945
13960
|
}
|
|
13946
13961
|
|
|
13947
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13962
|
+
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"])));
|
|
13948
13963
|
var ArrowButton = function (_a) {
|
|
13949
13964
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13950
13965
|
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13951
13966
|
};
|
|
13952
|
-
var templateObject_1$
|
|
13967
|
+
var templateObject_1$K;
|
|
13953
13968
|
|
|
13954
|
-
var Container$
|
|
13969
|
+
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"])));
|
|
13955
13970
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13956
13971
|
var SlideDots = function (_a) {
|
|
13957
13972
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13958
13973
|
var theme = useTheme();
|
|
13959
|
-
return (jsx$1(Container$
|
|
13974
|
+
return (jsx$1(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13960
13975
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13961
13976
|
: 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));
|
|
13962
13977
|
};
|
|
13963
|
-
var templateObject_1$
|
|
13978
|
+
var templateObject_1$J;
|
|
13964
13979
|
|
|
13965
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13966
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13967
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13980
|
+
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"])));
|
|
13981
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13982
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13968
13983
|
var SlideNavigation = function (_a) {
|
|
13969
13984
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13970
13985
|
var theme = useTheme();
|
|
@@ -13976,23 +13991,23 @@ var SlideNavigation = function (_a) {
|
|
|
13976
13991
|
onNavigate(selectedIndex + 1);
|
|
13977
13992
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13978
13993
|
};
|
|
13979
|
-
var templateObject_1$
|
|
13994
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q;
|
|
13980
13995
|
|
|
13981
|
-
var Container$
|
|
13996
|
+
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) {
|
|
13982
13997
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13983
13998
|
return borderRadiusVariant &&
|
|
13984
13999
|
"\n border-radius: 40px;\n ";
|
|
13985
14000
|
});
|
|
13986
|
-
var TopTagContainer$
|
|
13987
|
-
var BottomTagContainer$
|
|
14001
|
+
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'); });
|
|
14002
|
+
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"])));
|
|
13988
14003
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13989
14004
|
var _b, _c;
|
|
13990
14005
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13991
|
-
return (jsxs$1(Container$
|
|
14006
|
+
return (jsxs$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13992
14007
|
});
|
|
13993
|
-
var templateObject_1$
|
|
14008
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p;
|
|
13994
14009
|
|
|
13995
|
-
var Container$
|
|
14010
|
+
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"])));
|
|
13996
14011
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13997
14012
|
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;
|
|
13998
14013
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14014,11 +14029,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14014
14029
|
useEffect(function () {
|
|
14015
14030
|
setSelectedImage(images[index]);
|
|
14016
14031
|
}, [index, images]);
|
|
14017
|
-
return (jsxs$1(Container$
|
|
14032
|
+
return (jsxs$1(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14018
14033
|
};
|
|
14019
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$G;
|
|
14020
14035
|
|
|
14021
|
-
var Container$
|
|
14036
|
+
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) {
|
|
14022
14037
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14023
14038
|
return borderRadiusVariant &&
|
|
14024
14039
|
"\n border-radius: 40px;\n ";
|
|
@@ -14027,15 +14042,15 @@ var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14027
14042
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14028
14043
|
});
|
|
14029
14044
|
// max-height: 31.875rem;
|
|
14030
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14031
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14045
|
+
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'); });
|
|
14046
|
+
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"])));
|
|
14032
14047
|
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"])));
|
|
14033
14048
|
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"])));
|
|
14034
14049
|
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"])));
|
|
14035
14050
|
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14036
14051
|
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"])));
|
|
14037
14052
|
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"])));
|
|
14038
|
-
var settings = {
|
|
14053
|
+
var settings$1 = {
|
|
14039
14054
|
dots: true,
|
|
14040
14055
|
infinite: false,
|
|
14041
14056
|
speed: 200,
|
|
@@ -14049,7 +14064,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14049
14064
|
var sliderWrapper = useRef(null);
|
|
14050
14065
|
var iframeRef = useRef(null);
|
|
14051
14066
|
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
14052
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
14067
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
14053
14068
|
var onButtonClick = useCallback(function (i) {
|
|
14054
14069
|
var _a;
|
|
14055
14070
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -14079,20 +14094,20 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14079
14094
|
}
|
|
14080
14095
|
}
|
|
14081
14096
|
}, [images, selectedValue]);
|
|
14082
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14097
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14083
14098
|
var _a;
|
|
14084
14099
|
var activeSlide = images[e];
|
|
14085
14100
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14086
14101
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14087
14102
|
autoplay ? _playVideo() : _stopVideo();
|
|
14088
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14103
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14089
14104
|
var _a, _b;
|
|
14090
|
-
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14105
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14091
14106
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14092
14107
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14093
14108
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14094
14109
|
};
|
|
14095
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14110
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
14096
14111
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14097
14112
|
var firstClientX = useRef(0);
|
|
14098
14113
|
var clientX = useRef(0);
|
|
@@ -14127,14 +14142,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14127
14142
|
};
|
|
14128
14143
|
}, [preventTouch, ref, touchStart]);
|
|
14129
14144
|
}
|
|
14130
|
-
var templateObject_1$
|
|
14145
|
+
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;
|
|
14131
14146
|
|
|
14132
|
-
var Container$
|
|
14147
|
+
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"])));
|
|
14133
14148
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14134
14149
|
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;
|
|
14135
|
-
return (jsx$1(Container$
|
|
14150
|
+
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14136
14151
|
};
|
|
14137
|
-
var templateObject_1$
|
|
14152
|
+
var templateObject_1$E;
|
|
14138
14153
|
|
|
14139
14154
|
var __defProp$1 = Object.defineProperty;
|
|
14140
14155
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14267,14 +14282,14 @@ var Portal = function (_a) {
|
|
|
14267
14282
|
var visibleStyle = function (_a) {
|
|
14268
14283
|
var opened = _a.opened;
|
|
14269
14284
|
return opened
|
|
14270
|
-
? css(templateObject_1$
|
|
14285
|
+
? 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 "])));
|
|
14271
14286
|
};
|
|
14272
14287
|
var transformStyle = function (_a) {
|
|
14273
14288
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14274
14289
|
return opened
|
|
14275
|
-
? css(templateObject_3$
|
|
14290
|
+
? 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%)');
|
|
14276
14291
|
};
|
|
14277
|
-
var Container$
|
|
14292
|
+
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({
|
|
14278
14293
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14279
14294
|
}), visibleStyle, transformStyle);
|
|
14280
14295
|
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);
|
|
@@ -14287,7 +14302,7 @@ var Modal = function (_a) {
|
|
|
14287
14302
|
}
|
|
14288
14303
|
close();
|
|
14289
14304
|
};
|
|
14290
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14305
|
+
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));
|
|
14291
14306
|
};
|
|
14292
14307
|
var modalEvent = function (id, detail) {
|
|
14293
14308
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14315,9 +14330,220 @@ var useModal = function (id) {
|
|
|
14315
14330
|
close: close,
|
|
14316
14331
|
}); }, [close, open, opened]);
|
|
14317
14332
|
};
|
|
14318
|
-
var templateObject_1$
|
|
14333
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14334
|
+
|
|
14335
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
14336
|
+
var timerColor = _a.timerColor;
|
|
14337
|
+
return timerColor || '';
|
|
14338
|
+
});
|
|
14339
|
+
var timeToSeconds = function (_a) {
|
|
14340
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
14341
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
14342
|
+
};
|
|
14343
|
+
var secondsToTime = function (secs) {
|
|
14344
|
+
var hours = Math.floor(secs / 3600);
|
|
14345
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
14346
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
14347
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
14348
|
+
};
|
|
14349
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
14350
|
+
var Timer = function (_a) {
|
|
14351
|
+
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"]);
|
|
14352
|
+
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
14353
|
+
useEffect(function () {
|
|
14354
|
+
var timer = setInterval(function () {
|
|
14355
|
+
setSecs(function (seconds) {
|
|
14356
|
+
if (seconds === 1) {
|
|
14357
|
+
clearInterval(timer);
|
|
14358
|
+
onTimeUp();
|
|
14359
|
+
return 0;
|
|
14360
|
+
}
|
|
14361
|
+
return seconds - 1;
|
|
14362
|
+
});
|
|
14363
|
+
}, 1000);
|
|
14364
|
+
if (secs <= 0)
|
|
14365
|
+
clearInterval(timer);
|
|
14366
|
+
return function () { return clearInterval(timer); };
|
|
14367
|
+
}, [onTimeUp, secs]);
|
|
14368
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
14369
|
+
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
14370
|
+
};
|
|
14371
|
+
var templateObject_1$C;
|
|
14372
|
+
|
|
14373
|
+
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) {
|
|
14374
|
+
var textPosition = _a.textPosition;
|
|
14375
|
+
return textPosition;
|
|
14376
|
+
}, function (_a) {
|
|
14377
|
+
var backgroundColor = _a.backgroundColor;
|
|
14378
|
+
return backgroundColor;
|
|
14379
|
+
}, function (_a) {
|
|
14380
|
+
var borderRadius = _a.borderRadius;
|
|
14381
|
+
return borderRadius || 'unset';
|
|
14382
|
+
}, function (_a) {
|
|
14383
|
+
var borderRadius = _a.borderRadius;
|
|
14384
|
+
return borderRadius || '8px';
|
|
14385
|
+
});
|
|
14386
|
+
var templateObject_1$B;
|
|
14387
|
+
|
|
14388
|
+
var getDefaultCountdown = function () {
|
|
14389
|
+
var tomorrowDate = new Date();
|
|
14390
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
14391
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
14392
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
14393
|
+
return Number(totalSeconds.toFixed(0));
|
|
14394
|
+
};
|
|
14395
|
+
|
|
14396
|
+
var HurryUp = function (_a) {
|
|
14397
|
+
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"]);
|
|
14398
|
+
var theme = useTheme();
|
|
14399
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
14400
|
+
};
|
|
14401
|
+
|
|
14402
|
+
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) {
|
|
14403
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14404
|
+
return borderRadiusVariant &&
|
|
14405
|
+
"\n border-radius: 40px;\n ";
|
|
14406
|
+
}, function (_a) {
|
|
14407
|
+
var theme = _a.theme;
|
|
14408
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14409
|
+
});
|
|
14410
|
+
// max-height: 31.875rem;
|
|
14411
|
+
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'); });
|
|
14412
|
+
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"])));
|
|
14413
|
+
var settings = {
|
|
14414
|
+
dots: true,
|
|
14415
|
+
infinite: false,
|
|
14416
|
+
speed: 200,
|
|
14417
|
+
slidesToShow: 1,
|
|
14418
|
+
slidesToScroll: 1,
|
|
14419
|
+
initialSlide: 0,
|
|
14420
|
+
centerMode: true,
|
|
14421
|
+
centerPadding: '22',
|
|
14422
|
+
};
|
|
14423
|
+
var ImageProductWithTagsV4 = function (_a) {
|
|
14424
|
+
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;
|
|
14425
|
+
var slick = useRef(null);
|
|
14426
|
+
var sliderWrapper = useRef(null);
|
|
14427
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14428
|
+
var onButtonClick = useCallback(function (i) {
|
|
14429
|
+
var _a;
|
|
14430
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
14431
|
+
}, [slick]);
|
|
14432
|
+
var _sendCommandToIframe = function (command) {
|
|
14433
|
+
var iframe = document.getElementById('vwo-video');
|
|
14434
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14435
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14436
|
+
event: 'command',
|
|
14437
|
+
func: command,
|
|
14438
|
+
}), '*');
|
|
14439
|
+
};
|
|
14440
|
+
var _stopVideo = function () {
|
|
14441
|
+
_sendCommandToIframe('stopVideo');
|
|
14442
|
+
};
|
|
14443
|
+
var _playVideo = function () {
|
|
14444
|
+
_sendCommandToIframe('playVideo');
|
|
14445
|
+
};
|
|
14446
|
+
useEffect(function () {
|
|
14447
|
+
var _a;
|
|
14448
|
+
if (selectedValue) {
|
|
14449
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14450
|
+
if (matchingIndex !== -1) {
|
|
14451
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14452
|
+
}
|
|
14453
|
+
}
|
|
14454
|
+
}, [contents, selectedValue]);
|
|
14455
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$t, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14456
|
+
var _a;
|
|
14457
|
+
var activeSlide = contents[e];
|
|
14458
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14459
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14460
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14461
|
+
} }, settings, { ref: slick }, { children: contents.map(function (content) {
|
|
14462
|
+
var _a;
|
|
14463
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14464
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14465
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14466
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14467
|
+
};
|
|
14468
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14469
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14470
|
+
var firstClientX = useRef(0);
|
|
14471
|
+
var clientX = useRef(0);
|
|
14472
|
+
var preventTouch = useCallback(function (e) {
|
|
14473
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14474
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14475
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14476
|
+
if (e.cancelable) {
|
|
14477
|
+
e.preventDefault();
|
|
14478
|
+
e.returnValue = false;
|
|
14479
|
+
}
|
|
14480
|
+
return false;
|
|
14481
|
+
}
|
|
14482
|
+
return true;
|
|
14483
|
+
}, [dragThreshold]);
|
|
14484
|
+
var touchStart = useCallback(function (e) {
|
|
14485
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14486
|
+
}, []);
|
|
14487
|
+
useEffect(function () {
|
|
14488
|
+
var current = ref.current;
|
|
14489
|
+
if (current) {
|
|
14490
|
+
current.addEventListener('touchstart', touchStart);
|
|
14491
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14492
|
+
}
|
|
14493
|
+
return function () {
|
|
14494
|
+
if (current) {
|
|
14495
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14496
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14497
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14498
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14499
|
+
}
|
|
14500
|
+
};
|
|
14501
|
+
}, [preventTouch, ref, touchStart]);
|
|
14502
|
+
}
|
|
14503
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m;
|
|
14504
|
+
|
|
14505
|
+
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"])));
|
|
14506
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
14507
|
+
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;
|
|
14508
|
+
return (jsx$1(Container$s, __assign$1({ "data-testid": "product-gallery-mobile-v4" }, { children: jsx$1(ImageProductWithTagsV4, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14509
|
+
};
|
|
14510
|
+
var templateObject_1$z;
|
|
14319
14511
|
|
|
14320
|
-
var
|
|
14512
|
+
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) {
|
|
14513
|
+
var size = _a.size;
|
|
14514
|
+
return (size ? size : '100%');
|
|
14515
|
+
}, function (_a) {
|
|
14516
|
+
var size = _a.size;
|
|
14517
|
+
return (size ? size : '100%');
|
|
14518
|
+
});
|
|
14519
|
+
var borderSize = {
|
|
14520
|
+
xsmall: '1px',
|
|
14521
|
+
small: '1.5px',
|
|
14522
|
+
medium: '2px',
|
|
14523
|
+
large: '3px',
|
|
14524
|
+
};
|
|
14525
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
14526
|
+
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) {
|
|
14527
|
+
var size = _a.size;
|
|
14528
|
+
return borderSize[size];
|
|
14529
|
+
}, function (_a) {
|
|
14530
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
14531
|
+
return background;
|
|
14532
|
+
}, function (_a) {
|
|
14533
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
14534
|
+
return color;
|
|
14535
|
+
}, function (_a) {
|
|
14536
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
14537
|
+
return duration;
|
|
14538
|
+
});
|
|
14539
|
+
var templateObject_1$y, templateObject_2$p;
|
|
14540
|
+
|
|
14541
|
+
var Spinner = function (_a) {
|
|
14542
|
+
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;
|
|
14543
|
+
return (jsx$1(Container$r, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
14544
|
+
};
|
|
14545
|
+
|
|
14546
|
+
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) {
|
|
14321
14547
|
var height = _a.height;
|
|
14322
14548
|
return height || '0.5rem';
|
|
14323
14549
|
}, function (_a) {
|
|
@@ -14356,7 +14582,7 @@ var BarContainer = newStyled.div({
|
|
|
14356
14582
|
padding: '0 16px',
|
|
14357
14583
|
position: 'relative',
|
|
14358
14584
|
});
|
|
14359
|
-
var Container$
|
|
14585
|
+
var Container$q = newStyled.div(function (_a) {
|
|
14360
14586
|
var backgroundColor = _a.backgroundColor;
|
|
14361
14587
|
return ({
|
|
14362
14588
|
width: '475px',
|
|
@@ -14387,21 +14613,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14387
14613
|
var theme = useTheme();
|
|
14388
14614
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14389
14615
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14390
|
-
return (jsxs$1(Container$
|
|
14616
|
+
return (jsxs$1(Container$q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14391
14617
|
};
|
|
14392
|
-
var templateObject_1$
|
|
14618
|
+
var templateObject_1$x;
|
|
14393
14619
|
|
|
14394
|
-
var Container$
|
|
14620
|
+
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) {
|
|
14395
14621
|
var theme = _a.theme;
|
|
14396
14622
|
return theme.component.orderBar.backgroundColor;
|
|
14397
14623
|
});
|
|
14398
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14624
|
+
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; });
|
|
14399
14625
|
var OrderBar = function (_a) {
|
|
14400
14626
|
var message = _a.message, color = _a.color;
|
|
14401
14627
|
var theme = useTheme();
|
|
14402
|
-
return (jsxs$1(Container$
|
|
14628
|
+
return (jsxs$1(Container$p, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14403
14629
|
};
|
|
14404
|
-
var templateObject_1$
|
|
14630
|
+
var templateObject_1$w, templateObject_2$o;
|
|
14405
14631
|
|
|
14406
14632
|
var htmlReactParser = {exports: {}};
|
|
14407
14633
|
|
|
@@ -18182,8 +18408,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18182
18408
|
HTMLReactParser$1.attributesToProps;
|
|
18183
18409
|
HTMLReactParser$1.Element;
|
|
18184
18410
|
|
|
18185
|
-
var Container$
|
|
18186
|
-
var Card = newStyled.div(templateObject_2$
|
|
18411
|
+
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"])));
|
|
18412
|
+
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"])));
|
|
18187
18413
|
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"])));
|
|
18188
18414
|
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"])));
|
|
18189
18415
|
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"])));
|
|
@@ -18192,7 +18418,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 =
|
|
|
18192
18418
|
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"])));
|
|
18193
18419
|
var PackSelector = function (_a) {
|
|
18194
18420
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18195
|
-
return (jsx$1(Container$
|
|
18421
|
+
return (jsx$1(Container$o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18196
18422
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18197
18423
|
}) }), void 0));
|
|
18198
18424
|
};
|
|
@@ -18219,10 +18445,10 @@ var PackCard = function (_a) {
|
|
|
18219
18445
|
currency: currencyCode || 'USD',
|
|
18220
18446
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18221
18447
|
};
|
|
18222
|
-
var templateObject_1$
|
|
18448
|
+
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;
|
|
18223
18449
|
|
|
18224
|
-
var Container$
|
|
18225
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18450
|
+
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"])));
|
|
18451
|
+
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"])));
|
|
18226
18452
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18227
18453
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18228
18454
|
}));
|
|
@@ -18243,7 +18469,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18243
18469
|
var background = _a.background;
|
|
18244
18470
|
return background || 'unset';
|
|
18245
18471
|
});
|
|
18246
|
-
var templateObject_1$
|
|
18472
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
18247
18473
|
|
|
18248
18474
|
var Pagination = function (_a) {
|
|
18249
18475
|
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;
|
|
@@ -18289,7 +18515,7 @@ var Pagination = function (_a) {
|
|
|
18289
18515
|
}
|
|
18290
18516
|
return pages;
|
|
18291
18517
|
}, [from, page, showReducedPages, to]);
|
|
18292
|
-
return (jsxs$1(Container$
|
|
18518
|
+
return (jsxs$1(Container$n, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18293
18519
|
};
|
|
18294
18520
|
|
|
18295
18521
|
var PaginatorBlog = function (_a) {
|
|
@@ -18303,12 +18529,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18303
18529
|
setPage(page);
|
|
18304
18530
|
onChange(page);
|
|
18305
18531
|
};
|
|
18306
|
-
return (jsxs$1(Container$
|
|
18532
|
+
return (jsxs$1(Container$n, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18307
18533
|
? theme.colors.shades['white'].color
|
|
18308
18534
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18309
18535
|
};
|
|
18310
18536
|
|
|
18311
|
-
var Container$
|
|
18537
|
+
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) {
|
|
18312
18538
|
var width = _a.width;
|
|
18313
18539
|
return width;
|
|
18314
18540
|
}, function (_a) {
|
|
@@ -18324,13 +18550,13 @@ var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18324
18550
|
var PaymentMethod = function (_a) {
|
|
18325
18551
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18326
18552
|
var theme = useTheme();
|
|
18327
|
-
return (jsx$1(Container$
|
|
18553
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
18328
18554
|
};
|
|
18329
|
-
var templateObject_1$
|
|
18555
|
+
var templateObject_1$t;
|
|
18330
18556
|
|
|
18331
|
-
var Container$
|
|
18557
|
+
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"])));
|
|
18332
18558
|
var IMAGE_WIDTH = '63px';
|
|
18333
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18559
|
+
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);
|
|
18334
18560
|
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({
|
|
18335
18561
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18336
18562
|
}), IMAGE_WIDTH);
|
|
@@ -18368,9 +18594,9 @@ var StyledSpan = newStyled.span(templateObject_6$6 || (templateObject_6$6 = __ma
|
|
|
18368
18594
|
var SimpleOrderItem = function (_a) {
|
|
18369
18595
|
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;
|
|
18370
18596
|
var theme = useTheme();
|
|
18371
|
-
return (jsxs$1(Container$
|
|
18597
|
+
return (jsxs$1(Container$l, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18372
18598
|
};
|
|
18373
|
-
var templateObject_1$
|
|
18599
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18374
18600
|
|
|
18375
18601
|
var P$1 = newStyled.p(function (_a) {
|
|
18376
18602
|
var color = _a.color;
|
|
@@ -18384,7 +18610,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18384
18610
|
margin: '0.938rem 4.188rem',
|
|
18385
18611
|
});
|
|
18386
18612
|
});
|
|
18387
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18613
|
+
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) {
|
|
18388
18614
|
var height = _a.height;
|
|
18389
18615
|
return height || '0.5rem';
|
|
18390
18616
|
}, function (_a) {
|
|
@@ -18413,7 +18639,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18413
18639
|
position: 'absolute',
|
|
18414
18640
|
});
|
|
18415
18641
|
});
|
|
18416
|
-
var Container$
|
|
18642
|
+
var Container$k = newStyled.div(function (_a) {
|
|
18417
18643
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18418
18644
|
return ({
|
|
18419
18645
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18427,12 +18653,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18427
18653
|
var ProgressBar = function (_a) {
|
|
18428
18654
|
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;
|
|
18429
18655
|
var theme = useTheme();
|
|
18430
|
-
return (jsxs$1(Container$
|
|
18656
|
+
return (jsxs$1(Container$k, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18431
18657
|
};
|
|
18432
|
-
var templateObject_1$
|
|
18658
|
+
var templateObject_1$r;
|
|
18433
18659
|
|
|
18434
|
-
var Container$
|
|
18435
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18660
|
+
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; });
|
|
18661
|
+
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"])));
|
|
18436
18662
|
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"])));
|
|
18437
18663
|
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)'; });
|
|
18438
18664
|
var QuantityPicker = function (_a) {
|
|
@@ -18457,9 +18683,9 @@ var QuantityPicker = function (_a) {
|
|
|
18457
18683
|
return clamp(value);
|
|
18458
18684
|
});
|
|
18459
18685
|
}, [value, clamp]);
|
|
18460
|
-
return (jsxs$1(Container$
|
|
18686
|
+
return (jsxs$1(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: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18461
18687
|
};
|
|
18462
|
-
var templateObject_1$
|
|
18688
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18463
18689
|
|
|
18464
18690
|
/* base styles & size variants */
|
|
18465
18691
|
var CustomRadioStyles$1 = {
|
|
@@ -18528,9 +18754,9 @@ var ContainerStyles$1 = {
|
|
|
18528
18754
|
},
|
|
18529
18755
|
};
|
|
18530
18756
|
|
|
18531
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18532
|
-
var Container$
|
|
18533
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18757
|
+
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"])));
|
|
18758
|
+
var Container$i = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18759
|
+
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) {
|
|
18534
18760
|
var disabled = _a.disabled;
|
|
18535
18761
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18536
18762
|
});
|
|
@@ -18546,9 +18772,9 @@ var RadioPrimary = function (_a) {
|
|
|
18546
18772
|
var value = event.currentTarget.value;
|
|
18547
18773
|
onChange({ value: value, label: label });
|
|
18548
18774
|
};
|
|
18549
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18775
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18550
18776
|
};
|
|
18551
|
-
var templateObject_1$
|
|
18777
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$h;
|
|
18552
18778
|
|
|
18553
18779
|
var RadioGroupInput = function (_a) {
|
|
18554
18780
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18627,9 +18853,9 @@ var ContainerStyles = {
|
|
|
18627
18853
|
},
|
|
18628
18854
|
};
|
|
18629
18855
|
|
|
18630
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18631
|
-
var Container$
|
|
18632
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18856
|
+
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"])));
|
|
18857
|
+
var Container$h = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18858
|
+
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) {
|
|
18633
18859
|
var disabled = _a.disabled;
|
|
18634
18860
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18635
18861
|
});
|
|
@@ -18651,9 +18877,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18651
18877
|
var value = event.currentTarget.value;
|
|
18652
18878
|
onChange({ value: value, label: label });
|
|
18653
18879
|
};
|
|
18654
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18880
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$h, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18655
18881
|
};
|
|
18656
|
-
var templateObject_1$
|
|
18882
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$g;
|
|
18657
18883
|
|
|
18658
18884
|
var ClubRadioGroupInput = function (_a) {
|
|
18659
18885
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18681,8 +18907,8 @@ function formatDate(date, format) {
|
|
|
18681
18907
|
}
|
|
18682
18908
|
}
|
|
18683
18909
|
|
|
18684
|
-
var Container$
|
|
18685
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18910
|
+
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"])));
|
|
18911
|
+
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"])));
|
|
18686
18912
|
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"])));
|
|
18687
18913
|
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"])));
|
|
18688
18914
|
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"])));
|
|
@@ -18719,15 +18945,15 @@ var Review$1 = function (_a) {
|
|
|
18719
18945
|
}
|
|
18720
18946
|
}
|
|
18721
18947
|
}, [opened]);
|
|
18722
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18948
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$g, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18723
18949
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18724
18950
|
};
|
|
18725
|
-
var templateObject_1$
|
|
18951
|
+
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;
|
|
18726
18952
|
|
|
18727
18953
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18728
18954
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18729
|
-
var Container$
|
|
18730
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18955
|
+
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"])));
|
|
18956
|
+
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"])));
|
|
18731
18957
|
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"])));
|
|
18732
18958
|
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"])));
|
|
18733
18959
|
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"])));
|
|
@@ -18768,7 +18994,7 @@ var Review = function (_a) {
|
|
|
18768
18994
|
});
|
|
18769
18995
|
};
|
|
18770
18996
|
}, [randomId]);
|
|
18771
|
-
return (jsxs$1(Container$
|
|
18997
|
+
return (jsxs$1(Container$f, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18772
18998
|
__html: showMoreMobile
|
|
18773
18999
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18774
19000
|
: description,
|
|
@@ -18778,10 +19004,10 @@ var Review = function (_a) {
|
|
|
18778
19004
|
: description,
|
|
18779
19005
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18780
19006
|
};
|
|
18781
|
-
var templateObject_1$
|
|
19007
|
+
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;
|
|
18782
19008
|
|
|
18783
|
-
var Container$
|
|
18784
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19009
|
+
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"])));
|
|
19010
|
+
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"])));
|
|
18785
19011
|
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"])));
|
|
18786
19012
|
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"])));
|
|
18787
19013
|
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"])));
|
|
@@ -18794,19 +19020,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18794
19020
|
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;
|
|
18795
19021
|
var starsNumber = 5;
|
|
18796
19022
|
var theme = useTheme();
|
|
18797
|
-
return (jsxs$1(Container$
|
|
19023
|
+
return (jsxs$1(Container$e, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18798
19024
|
};
|
|
18799
|
-
var templateObject_1$
|
|
19025
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18800
19026
|
|
|
18801
|
-
var Container$
|
|
18802
|
-
var Text = newStyled.p(templateObject_2$
|
|
19027
|
+
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"])));
|
|
19028
|
+
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; });
|
|
18803
19029
|
var ScrollToTop = function (_a) {
|
|
18804
19030
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18805
19031
|
var theme = useTheme();
|
|
18806
19032
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18807
|
-
return (jsxs$1(Container$
|
|
19033
|
+
return (jsxs$1(Container$d, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18808
19034
|
};
|
|
18809
|
-
var templateObject_1$
|
|
19035
|
+
var templateObject_1$k, templateObject_2$e;
|
|
18810
19036
|
|
|
18811
19037
|
var Input = newStyled.input(function (props) { return ({
|
|
18812
19038
|
padding: props.theme.component.input.padding,
|
|
@@ -18837,7 +19063,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18837
19063
|
},
|
|
18838
19064
|
}); });
|
|
18839
19065
|
|
|
18840
|
-
var Container$
|
|
19066
|
+
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({
|
|
18841
19067
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18842
19068
|
}));
|
|
18843
19069
|
var Description = newStyled.div({
|
|
@@ -18854,25 +19080,25 @@ var Description = newStyled.div({
|
|
|
18854
19080
|
var ProductItem = function (_a) {
|
|
18855
19081
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18856
19082
|
var theme = useTheme();
|
|
18857
|
-
return (jsxs$1(Container$
|
|
19083
|
+
return (jsxs$1(Container$c, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18858
19084
|
};
|
|
18859
|
-
var templateObject_1$
|
|
19085
|
+
var templateObject_1$j;
|
|
18860
19086
|
|
|
18861
|
-
var Container$
|
|
19087
|
+
var Container$b = newStyled.div({
|
|
18862
19088
|
display: 'flex',
|
|
18863
19089
|
justifyContent: 'center',
|
|
18864
19090
|
padding: '1rem',
|
|
18865
19091
|
});
|
|
18866
19092
|
var Footer = function (_a) {
|
|
18867
19093
|
var text = _a.text, onClick = _a.onClick;
|
|
18868
|
-
return (jsx$1(Container$
|
|
19094
|
+
return (jsx$1(Container$b, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18869
19095
|
};
|
|
18870
19096
|
|
|
18871
19097
|
var Ul = newStyled.ul({
|
|
18872
19098
|
margin: '0px',
|
|
18873
19099
|
padding: '0px',
|
|
18874
19100
|
});
|
|
18875
|
-
var Li = newStyled.li(templateObject_1$
|
|
19101
|
+
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({
|
|
18876
19102
|
padding: [0, '0rem 1rem'],
|
|
18877
19103
|
borderRadius: [0, '0.5rem'],
|
|
18878
19104
|
}));
|
|
@@ -18884,7 +19110,7 @@ var Anchor = newStyled.a({
|
|
|
18884
19110
|
padding: 0,
|
|
18885
19111
|
textDecoration: 'none',
|
|
18886
19112
|
});
|
|
18887
|
-
var Container$
|
|
19113
|
+
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({
|
|
18888
19114
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18889
19115
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18890
19116
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18895,11 +19121,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18895
19121
|
var ResultsPanel = function (_a) {
|
|
18896
19122
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18897
19123
|
var theme = useTheme();
|
|
18898
|
-
return (jsxs$1(Container$
|
|
19124
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18899
19125
|
};
|
|
18900
|
-
var templateObject_1$
|
|
19126
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
18901
19127
|
|
|
18902
|
-
var Button = newStyled.button(templateObject_1$
|
|
19128
|
+
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({
|
|
18903
19129
|
right: ['1rem', '7.75rem'],
|
|
18904
19130
|
top: ['0.75rem', '0.75rem'],
|
|
18905
19131
|
}));
|
|
@@ -18908,7 +19134,7 @@ var ClearButton = function (_a) {
|
|
|
18908
19134
|
var theme = useTheme();
|
|
18909
19135
|
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18910
19136
|
};
|
|
18911
|
-
var templateObject_1$
|
|
19137
|
+
var templateObject_1$h;
|
|
18912
19138
|
|
|
18913
19139
|
var SearchIconContainer = newStyled.div({
|
|
18914
19140
|
display: 'flex',
|
|
@@ -18918,7 +19144,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18918
19144
|
background: 'white',
|
|
18919
19145
|
alignSelf: 'center',
|
|
18920
19146
|
});
|
|
18921
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19147
|
+
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"])));
|
|
18922
19148
|
var SearchControl = function (_a) {
|
|
18923
19149
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18924
19150
|
var theme = useTheme();
|
|
@@ -18934,7 +19160,7 @@ var SearchControl = function (_a) {
|
|
|
18934
19160
|
}
|
|
18935
19161
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18936
19162
|
};
|
|
18937
|
-
var templateObject_1$
|
|
19163
|
+
var templateObject_1$g;
|
|
18938
19164
|
|
|
18939
19165
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18940
19166
|
var reducer = function (state, action) {
|
|
@@ -18950,7 +19176,7 @@ var reducer = function (state, action) {
|
|
|
18950
19176
|
}
|
|
18951
19177
|
}
|
|
18952
19178
|
};
|
|
18953
|
-
var Container$
|
|
19179
|
+
var Container$9 = newStyled.div({
|
|
18954
19180
|
position: 'relative',
|
|
18955
19181
|
display: 'flex',
|
|
18956
19182
|
});
|
|
@@ -18990,7 +19216,7 @@ var SearchBar = function (_a) {
|
|
|
18990
19216
|
if (e.cancelable) {
|
|
18991
19217
|
e.preventDefault();
|
|
18992
19218
|
}
|
|
18993
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19219
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$9, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
18994
19220
|
if (e.key === 'Enter') {
|
|
18995
19221
|
if (e.cancelable) {
|
|
18996
19222
|
e.preventDefault();
|
|
@@ -19001,20 +19227,20 @@ var SearchBar = function (_a) {
|
|
|
19001
19227
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19002
19228
|
};
|
|
19003
19229
|
|
|
19004
|
-
var Container$
|
|
19005
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19230
|
+
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"])));
|
|
19231
|
+
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"])));
|
|
19006
19232
|
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"])));
|
|
19007
19233
|
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"])));
|
|
19008
19234
|
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"])));
|
|
19009
19235
|
var SearchNavigation = function (_a) {
|
|
19010
19236
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19011
|
-
return (jsxs$1(Container$
|
|
19237
|
+
return (jsxs$1(Container$8, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19012
19238
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19013
19239
|
}) }, void 0)] }, void 0));
|
|
19014
19240
|
};
|
|
19015
|
-
var templateObject_1$
|
|
19241
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
19016
19242
|
|
|
19017
|
-
var Container$
|
|
19243
|
+
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) {
|
|
19018
19244
|
var alignCenter = _a.alignCenter;
|
|
19019
19245
|
return alignCenter &&
|
|
19020
19246
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19024,17 +19250,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19024
19250
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19025
19251
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19026
19252
|
});
|
|
19027
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19253
|
+
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"])));
|
|
19028
19254
|
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"])));
|
|
19029
19255
|
var ShortBanner = function (_a) {
|
|
19030
19256
|
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;
|
|
19031
19257
|
var theme = useTheme();
|
|
19032
|
-
return (jsxs$1(Container$
|
|
19258
|
+
return (jsxs$1(Container$7, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19033
19259
|
};
|
|
19034
|
-
var templateObject_1$
|
|
19260
|
+
var templateObject_1$e, templateObject_2$b, templateObject_3$a;
|
|
19035
19261
|
|
|
19036
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19037
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19262
|
+
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; });
|
|
19263
|
+
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; });
|
|
19038
19264
|
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; });
|
|
19039
19265
|
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; });
|
|
19040
19266
|
var SizeChartTable = function (_a) {
|
|
@@ -19069,10 +19295,10 @@ var SizeChartTable = function (_a) {
|
|
|
19069
19295
|
backgroundColor: getCellColor(index, cell),
|
|
19070
19296
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
19071
19297
|
};
|
|
19072
|
-
var templateObject_1$
|
|
19298
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
19073
19299
|
|
|
19074
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19075
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19300
|
+
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; });
|
|
19301
|
+
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; });
|
|
19076
19302
|
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; });
|
|
19077
19303
|
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; });
|
|
19078
19304
|
var SizeTable = function (_a) {
|
|
@@ -19080,7 +19306,7 @@ var SizeTable = function (_a) {
|
|
|
19080
19306
|
var theme = useTheme();
|
|
19081
19307
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19082
19308
|
};
|
|
19083
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
19084
19310
|
|
|
19085
19311
|
var getStylesBySize$4 = function (size) {
|
|
19086
19312
|
switch (size) {
|
|
@@ -19107,7 +19333,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19107
19333
|
} });
|
|
19108
19334
|
};
|
|
19109
19335
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19110
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19336
|
+
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));
|
|
19111
19337
|
};
|
|
19112
19338
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19113
19339
|
if (disabled)
|
|
@@ -19123,23 +19349,23 @@ var TextButton = function (_a) {
|
|
|
19123
19349
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19124
19350
|
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));
|
|
19125
19351
|
};
|
|
19126
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$b;
|
|
19127
19353
|
|
|
19128
|
-
var Container$
|
|
19129
|
-
var P = newStyled.p(templateObject_2$
|
|
19354
|
+
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"])));
|
|
19355
|
+
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19130
19356
|
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"])));
|
|
19131
19357
|
var SizeFitGuide = function (_a) {
|
|
19132
19358
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19133
|
-
return (jsxs$1(Container$
|
|
19359
|
+
return (jsxs$1(Container$6, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19134
19360
|
};
|
|
19135
|
-
var templateObject_1$
|
|
19361
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19136
19362
|
|
|
19137
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19363
|
+
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) {
|
|
19138
19364
|
var inline = _a.inline;
|
|
19139
19365
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19140
19366
|
});
|
|
19141
|
-
var Row = newStyled.div(templateObject_2$
|
|
19142
|
-
var templateObject_1$
|
|
19367
|
+
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"])));
|
|
19368
|
+
var templateObject_1$9, templateObject_2$7;
|
|
19143
19369
|
|
|
19144
19370
|
var SizeSelector = function (_a) {
|
|
19145
19371
|
var _b;
|
|
@@ -19158,7 +19384,7 @@ var SizeSelector = function (_a) {
|
|
|
19158
19384
|
}) }), void 0)] }), void 0));
|
|
19159
19385
|
};
|
|
19160
19386
|
|
|
19161
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19387
|
+
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) {
|
|
19162
19388
|
var titleSize = _a.titleSize;
|
|
19163
19389
|
return titleSize;
|
|
19164
19390
|
}, function (_a) {
|
|
@@ -19175,10 +19401,10 @@ var Tab = function (_a) {
|
|
|
19175
19401
|
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;
|
|
19176
19402
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19177
19403
|
};
|
|
19178
|
-
var templateObject_1$
|
|
19404
|
+
var templateObject_1$8;
|
|
19179
19405
|
|
|
19180
|
-
var Container$
|
|
19181
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19406
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19407
|
+
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) {
|
|
19182
19408
|
var backgroundColor = _a.backgroundColor;
|
|
19183
19409
|
return backgroundColor;
|
|
19184
19410
|
}, function (_a) {
|
|
@@ -19195,16 +19421,16 @@ var Tabs = function (_a) {
|
|
|
19195
19421
|
return null;
|
|
19196
19422
|
}
|
|
19197
19423
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19198
|
-
return (jsxs$1(Container$
|
|
19424
|
+
return (jsxs$1(Container$5, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19199
19425
|
};
|
|
19200
|
-
var templateObject_1$
|
|
19426
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
19201
19427
|
|
|
19202
|
-
var Container$
|
|
19428
|
+
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"])));
|
|
19203
19429
|
var Tag = function (_a) {
|
|
19204
19430
|
var text = _a.text, className = _a.className;
|
|
19205
|
-
return jsx$1(Container$
|
|
19431
|
+
return jsx$1(Container$4, __assign$1({ className: className }, { children: text }), void 0);
|
|
19206
19432
|
};
|
|
19207
|
-
var templateObject_1$
|
|
19433
|
+
var templateObject_1$6;
|
|
19208
19434
|
|
|
19209
19435
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19210
19436
|
switch (size) {
|
|
@@ -19315,8 +19541,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19315
19541
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19316
19542
|
};
|
|
19317
19543
|
|
|
19318
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19319
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19544
|
+
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"])));
|
|
19545
|
+
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"])));
|
|
19320
19546
|
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"])));
|
|
19321
19547
|
var ImageVideo = function (_a) {
|
|
19322
19548
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19337,11 +19563,11 @@ var ImageVideo = function (_a) {
|
|
|
19337
19563
|
height: '100%',
|
|
19338
19564
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19339
19565
|
};
|
|
19340
|
-
var templateObject_1$
|
|
19566
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
19341
19567
|
|
|
19342
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19343
|
-
var ContainerMobile = css(templateObject_2$
|
|
19344
|
-
var Container$
|
|
19568
|
+
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"])));
|
|
19569
|
+
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"])));
|
|
19570
|
+
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);
|
|
19345
19571
|
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"])));
|
|
19346
19572
|
var TextWithImage = function (_a) {
|
|
19347
19573
|
var _b, _c, _d, _e;
|
|
@@ -19362,7 +19588,7 @@ var TextWithImage = function (_a) {
|
|
|
19362
19588
|
// @ts-ignore
|
|
19363
19589
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19364
19590
|
};
|
|
19365
|
-
return (jsxs(Container$
|
|
19591
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19366
19592
|
backgroundColor: props.btnBGColor,
|
|
19367
19593
|
color: '#ffffff',
|
|
19368
19594
|
border: props.btnBGColor,
|
|
@@ -19372,48 +19598,10 @@ var TextWithImage = function (_a) {
|
|
|
19372
19598
|
},
|
|
19373
19599
|
} }, 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));
|
|
19374
19600
|
};
|
|
19375
|
-
var templateObject_1$
|
|
19376
|
-
|
|
19377
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19378
|
-
var timerColor = _a.timerColor;
|
|
19379
|
-
return timerColor || '';
|
|
19380
|
-
});
|
|
19381
|
-
var timeToSeconds = function (_a) {
|
|
19382
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19383
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
19384
|
-
};
|
|
19385
|
-
var secondsToTime = function (secs) {
|
|
19386
|
-
var hours = Math.floor(secs / 3600);
|
|
19387
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19388
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19389
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19390
|
-
};
|
|
19391
|
-
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19392
|
-
var Timer = function (_a) {
|
|
19393
|
-
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"]);
|
|
19394
|
-
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19395
|
-
useEffect(function () {
|
|
19396
|
-
var timer = setInterval(function () {
|
|
19397
|
-
setSecs(function (seconds) {
|
|
19398
|
-
if (seconds === 1) {
|
|
19399
|
-
clearInterval(timer);
|
|
19400
|
-
onTimeUp();
|
|
19401
|
-
return 0;
|
|
19402
|
-
}
|
|
19403
|
-
return seconds - 1;
|
|
19404
|
-
});
|
|
19405
|
-
}, 1000);
|
|
19406
|
-
if (secs <= 0)
|
|
19407
|
-
clearInterval(timer);
|
|
19408
|
-
return function () { return clearInterval(timer); };
|
|
19409
|
-
}, [onTimeUp, secs]);
|
|
19410
|
-
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19411
|
-
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19412
|
-
};
|
|
19413
|
-
var templateObject_1$6;
|
|
19601
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4;
|
|
19414
19602
|
|
|
19415
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19416
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19603
|
+
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"])));
|
|
19604
|
+
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; });
|
|
19417
19605
|
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) {
|
|
19418
19606
|
var theme = _a.theme;
|
|
19419
19607
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19427,11 +19615,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19427
19615
|
var theme = _a.theme;
|
|
19428
19616
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19429
19617
|
});
|
|
19430
|
-
var Container$
|
|
19618
|
+
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) {
|
|
19431
19619
|
var highlightColor = _a.highlightColor;
|
|
19432
19620
|
return highlightColor;
|
|
19433
19621
|
});
|
|
19434
|
-
var TotalContainer = newStyled(Container$
|
|
19622
|
+
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) {
|
|
19435
19623
|
var showTotalLabel = _a.showTotalLabel;
|
|
19436
19624
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19437
19625
|
});
|
|
@@ -19441,19 +19629,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19441
19629
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19442
19630
|
});
|
|
19443
19631
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19444
|
-
var templateObject_1$
|
|
19632
|
+
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;
|
|
19445
19633
|
|
|
19446
19634
|
var Total = function (_a) {
|
|
19447
19635
|
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;
|
|
19448
19636
|
var theme = useTheme();
|
|
19449
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19637
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$2, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19450
19638
|
};
|
|
19451
19639
|
|
|
19452
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19640
|
+
var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19453
19641
|
var color = _a.color;
|
|
19454
19642
|
return color;
|
|
19455
19643
|
});
|
|
19456
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19644
|
+
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"])));
|
|
19457
19645
|
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) {
|
|
19458
19646
|
var theme = _a.theme;
|
|
19459
19647
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19474,15 +19662,15 @@ var Subtotal = function (_a) {
|
|
|
19474
19662
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19475
19663
|
})] }), void 0));
|
|
19476
19664
|
};
|
|
19477
|
-
var templateObject_1$
|
|
19665
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
19478
19666
|
|
|
19479
19667
|
var Totals = {
|
|
19480
19668
|
Total: Total,
|
|
19481
19669
|
Subtotal: Subtotal,
|
|
19482
19670
|
};
|
|
19483
19671
|
|
|
19484
|
-
var Container$
|
|
19485
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19672
|
+
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"])));
|
|
19673
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19486
19674
|
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; });
|
|
19487
19675
|
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'); });
|
|
19488
19676
|
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"])));
|
|
@@ -19522,7 +19710,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19522
19710
|
}
|
|
19523
19711
|
return '30px';
|
|
19524
19712
|
};
|
|
19525
|
-
return (jsxs$1(Container$
|
|
19713
|
+
return (jsxs$1(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19526
19714
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19527
19715
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19528
19716
|
? activeCheckpointColor
|
|
@@ -19533,10 +19721,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19533
19721
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19534
19722
|
})] }), void 0));
|
|
19535
19723
|
};
|
|
19536
|
-
var templateObject_1$
|
|
19724
|
+
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;
|
|
19537
19725
|
|
|
19538
|
-
var Container
|
|
19539
|
-
var CheckpointContainer = newStyled.div(templateObject_2
|
|
19726
|
+
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"])));
|
|
19727
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19540
19728
|
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; });
|
|
19541
19729
|
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'); });
|
|
19542
19730
|
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'); });
|
|
@@ -19564,7 +19752,7 @@ var TrackingProgress = function (_a) {
|
|
|
19564
19752
|
}
|
|
19565
19753
|
return '30px';
|
|
19566
19754
|
};
|
|
19567
|
-
return (jsxs$1(Container
|
|
19755
|
+
return (jsxs$1(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19568
19756
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19569
19757
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19570
19758
|
? theme.colors.semantic.informative.color
|
|
@@ -19573,70 +19761,7 @@ var TrackingProgress = function (_a) {
|
|
|
19573
19761
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19574
19762
|
})] }), void 0));
|
|
19575
19763
|
};
|
|
19576
|
-
var templateObject_1
|
|
19577
|
-
|
|
19578
|
-
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) {
|
|
19579
|
-
var textPosition = _a.textPosition;
|
|
19580
|
-
return textPosition;
|
|
19581
|
-
}, function (_a) {
|
|
19582
|
-
var backgroundColor = _a.backgroundColor;
|
|
19583
|
-
return backgroundColor;
|
|
19584
|
-
}, function (_a) {
|
|
19585
|
-
var borderRadius = _a.borderRadius;
|
|
19586
|
-
return borderRadius || 'unset';
|
|
19587
|
-
}, function (_a) {
|
|
19588
|
-
var borderRadius = _a.borderRadius;
|
|
19589
|
-
return borderRadius || '8px';
|
|
19590
|
-
});
|
|
19591
|
-
var templateObject_1$1;
|
|
19592
|
-
|
|
19593
|
-
var getDefaultCountdown = function () {
|
|
19594
|
-
var tomorrowDate = new Date();
|
|
19595
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19596
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19597
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19598
|
-
return Number(totalSeconds.toFixed(0));
|
|
19599
|
-
};
|
|
19600
|
-
|
|
19601
|
-
var HurryUp = function (_a) {
|
|
19602
|
-
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"]);
|
|
19603
|
-
var theme = useTheme();
|
|
19604
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19605
|
-
};
|
|
19606
|
-
|
|
19607
|
-
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) {
|
|
19608
|
-
var size = _a.size;
|
|
19609
|
-
return (size ? size : '100%');
|
|
19610
|
-
}, function (_a) {
|
|
19611
|
-
var size = _a.size;
|
|
19612
|
-
return (size ? size : '100%');
|
|
19613
|
-
});
|
|
19614
|
-
var borderSize = {
|
|
19615
|
-
xsmall: '1px',
|
|
19616
|
-
small: '1.5px',
|
|
19617
|
-
medium: '2px',
|
|
19618
|
-
large: '3px',
|
|
19619
|
-
};
|
|
19620
|
-
var DEFAULT_COLOR = '#5EAD9B';
|
|
19621
|
-
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) {
|
|
19622
|
-
var size = _a.size;
|
|
19623
|
-
return borderSize[size];
|
|
19624
|
-
}, function (_a) {
|
|
19625
|
-
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19626
|
-
return background;
|
|
19627
|
-
}, function (_a) {
|
|
19628
|
-
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19629
|
-
return color;
|
|
19630
|
-
}, function (_a) {
|
|
19631
|
-
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19632
|
-
return duration;
|
|
19633
|
-
});
|
|
19634
|
-
var templateObject_1, templateObject_2;
|
|
19635
|
-
|
|
19636
|
-
var Spinner = function (_a) {
|
|
19637
|
-
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;
|
|
19638
|
-
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19639
|
-
};
|
|
19764
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19640
19765
|
|
|
19641
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19766
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19642
19767
|
//# sourceMappingURL=index.esm.js.map
|