@trafilea/afrodita-components 6.22.0 → 6.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +2 -1
- package/build/index.esm.js +43 -35
- package/build/index.esm.js.map +1 -1
- package/build/index.js +43 -35
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +6 -2
- 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.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ declare type StyledIconProps = {
|
|
|
49
49
|
|
|
50
50
|
declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_solid_reload' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/signout_light' | 'actions/trash' | 'actions/warning' | 'actions/navigate' | 'actions/camera';
|
|
51
51
|
declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' | 'arrows/chevron_left' | 'arrows/chevron_left_lite' | 'arrows/chevron_left_variant' | 'arrows/chevron_right' | 'arrows/chevron_right_lite' | 'arrows/chevron_right_variant' | 'arrows/chevron_up' | 'arrows/chevron_up_solid' | 'arrows/chevron_up_variant' | 'arrows/circle_chevron_down' | 'arrows/circle_chevron_left' | 'arrows/circle_chevron_right' | 'arrows/circle_chevron_up' | 'arrows/circle_line_down' | 'arrows/circle_line_left' | 'arrows/circle_line_right' | 'arrows/circle_line_up' | 'arrows/circle_up' | 'arrows/double_arrow_up' | 'arrows/chevron_right_grey';
|
|
52
|
-
declare type Custom$1 = 'custom/atom' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support';
|
|
52
|
+
declare type Custom$1 = 'custom/atom' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support' | 'custom/sound_on' | 'custom/sound_off';
|
|
53
53
|
declare type Download$1 = 'download/apple_store' | 'download/google_play';
|
|
54
54
|
declare type Emoji$1 = 'emoji/blowing_kiss' | 'emoji/frowning' | 'emoji/grinning' | 'emoji/grinning_with_sweat' | 'emoji/relieved' | 'emoji/smiling_v2' | 'emoji/smiling_v3' | 'emoji/thinking';
|
|
55
55
|
declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right' | 'messaging/question_circle_light';
|
|
@@ -3680,6 +3680,7 @@ declare type VideoProps = {
|
|
|
3680
3680
|
thumbnail: string;
|
|
3681
3681
|
source: string;
|
|
3682
3682
|
height?: string;
|
|
3683
|
+
hasAudioControl?: boolean;
|
|
3683
3684
|
withProgressBar?: boolean;
|
|
3684
3685
|
} & DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
|
|
3685
3686
|
declare const Video: React.FC<VideoProps>;
|
package/build/index.esm.js
CHANGED
|
@@ -4736,7 +4736,7 @@ var TAGS = {
|
|
|
4736
4736
|
hero3: newStyled.h3(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject([""], [""]))),
|
|
4737
4737
|
display1: newStyled.h1(templateObject_4$R || (templateObject_4$R = __makeTemplateObject([""], [""]))),
|
|
4738
4738
|
display2: newStyled.h2(templateObject_5$C || (templateObject_5$C = __makeTemplateObject([""], [""]))),
|
|
4739
|
-
display3: newStyled.h3(templateObject_6$
|
|
4739
|
+
display3: newStyled.h3(templateObject_6$x || (templateObject_6$x = __makeTemplateObject([""], [""]))),
|
|
4740
4740
|
heading1: newStyled.h1(templateObject_7$n || (templateObject_7$n = __makeTemplateObject([""], [""]))),
|
|
4741
4741
|
heading2: newStyled.h2(templateObject_8$j || (templateObject_8$j = __makeTemplateObject([""], [""]))),
|
|
4742
4742
|
heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
|
|
@@ -4867,14 +4867,14 @@ var DEFAULTS = {
|
|
|
4867
4867
|
size: 'regular',
|
|
4868
4868
|
},
|
|
4869
4869
|
};
|
|
4870
|
-
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$
|
|
4870
|
+
var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$x, templateObject_7$n, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4871
4871
|
|
|
4872
4872
|
var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
4873
4873
|
var Card$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __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"])));
|
|
4874
4874
|
var Tag$2 = newStyled.div(templateObject_3$12 || (templateObject_3$12 = __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"])));
|
|
4875
4875
|
var Label$6 = newStyled.div(templateObject_4$Q || (templateObject_4$Q = __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"])));
|
|
4876
4876
|
var Check$1 = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4877
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4877
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
4878
4878
|
var PackSelectorV2 = function (_a) {
|
|
4879
4879
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4880
4880
|
return (jsx$1(Container$1e, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4899,7 +4899,7 @@ var PackCard$1 = function (_a) {
|
|
|
4899
4899
|
currency: currencyCode || 'USD',
|
|
4900
4900
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4901
4901
|
};
|
|
4902
|
-
var templateObject_1$1X, templateObject_2$1l, templateObject_3$12, templateObject_4$Q, templateObject_5$B, templateObject_6$
|
|
4902
|
+
var templateObject_1$1X, templateObject_2$1l, templateObject_3$12, templateObject_4$Q, templateObject_5$B, templateObject_6$w;
|
|
4903
4903
|
|
|
4904
4904
|
var Container$1d = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4905
4905
|
var DropContainer = newStyled.div(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5872,7 +5872,7 @@ var TooltipText = newStyled.div(templateObject_4$N || (templateObject_4$N = __ma
|
|
|
5872
5872
|
return color;
|
|
5873
5873
|
});
|
|
5874
5874
|
var TopSection = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5875
|
-
var Title$a = newStyled.h1(templateObject_6$
|
|
5875
|
+
var Title$a = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5876
5876
|
var color = _a.color;
|
|
5877
5877
|
return color;
|
|
5878
5878
|
});
|
|
@@ -5881,7 +5881,7 @@ var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i =
|
|
|
5881
5881
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5882
5882
|
return right;
|
|
5883
5883
|
});
|
|
5884
|
-
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$
|
|
5884
|
+
var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v, templateObject_7$m, templateObject_8$i;
|
|
5885
5885
|
|
|
5886
5886
|
var Tooltip = function (_a) {
|
|
5887
5887
|
var _b;
|
|
@@ -5951,7 +5951,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5
|
|
|
5951
5951
|
var theme = _a.theme;
|
|
5952
5952
|
return theme.colors.pallete.primary.color;
|
|
5953
5953
|
});
|
|
5954
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5954
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5955
5955
|
var Benefit$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5956
5956
|
var BenefitText$1 = newStyled(Text$7)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5957
5957
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
@@ -5962,7 +5962,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
|
|
|
5962
5962
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5963
5963
|
});
|
|
5964
5964
|
var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
|
|
5965
|
-
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$
|
|
5965
|
+
var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$u, templateObject_7$l, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
|
|
5966
5966
|
|
|
5967
5967
|
var radioIds$1 = {
|
|
5968
5968
|
oneTime: {
|
|
@@ -6055,7 +6055,7 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$L || (te
|
|
|
6055
6055
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6056
6056
|
});
|
|
6057
6057
|
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6058
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
6058
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$t || (templateObject_6$t = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
6059
6059
|
var theme = _a.theme;
|
|
6060
6060
|
return theme.colors.shades[200].color;
|
|
6061
6061
|
}, function (_a) {
|
|
@@ -6075,7 +6075,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
|
|
|
6075
6075
|
var theme = _a.theme;
|
|
6076
6076
|
return theme.component.autoship.tooltip.margin;
|
|
6077
6077
|
});
|
|
6078
|
-
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$
|
|
6078
|
+
var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$t, templateObject_7$k, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
|
|
6079
6079
|
|
|
6080
6080
|
var radioIds = {
|
|
6081
6081
|
oneTime: {
|
|
@@ -6158,8 +6158,8 @@ var CustomerInfo = newStyled.div(templateObject_2$19 || (templateObject_2$19 = _
|
|
|
6158
6158
|
var Name = newStyled.h4(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
6159
6159
|
var StarIconContainer = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
6160
6160
|
var Description$2 = newStyled.p(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
6161
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
6162
|
-
var templateObject_1$1H, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$w, templateObject_6$
|
|
6161
|
+
var ReviewDays = newStyled.span(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
6162
|
+
var templateObject_1$1H, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$w, templateObject_6$s;
|
|
6163
6163
|
|
|
6164
6164
|
var NameWithStars = function (_a) {
|
|
6165
6165
|
var name = _a.name, size = _a.size;
|
|
@@ -6424,7 +6424,7 @@ var MobileContainer = newStyled(Container$$)(templateObject_2$14 || (templateObj
|
|
|
6424
6424
|
var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
6425
6425
|
var ClubMembersText = newStyled.span(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
6426
6426
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6427
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6427
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6428
6428
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6429
6429
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6430
6430
|
var ClubPriceLabel = function (_a) {
|
|
@@ -6432,7 +6432,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6432
6432
|
var isMobile = useWindowDimensions().isMobile;
|
|
6433
6433
|
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$$, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6434
6434
|
};
|
|
6435
|
-
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$
|
|
6435
|
+
var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$r, templateObject_7$j, templateObject_8$f;
|
|
6436
6436
|
|
|
6437
6437
|
var Spacing = function (_a) {
|
|
6438
6438
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6662,7 +6662,7 @@ var TopTagContainer$8 = newStyled.div(templateObject_5$t || (templateObject_5$t
|
|
|
6662
6662
|
var style = _a.style;
|
|
6663
6663
|
return style.width;
|
|
6664
6664
|
});
|
|
6665
|
-
var BottomTagContainer$8 = newStyled.div(templateObject_6$
|
|
6665
|
+
var BottomTagContainer$8 = newStyled.div(templateObject_6$q || (templateObject_6$q = __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) {
|
|
6666
6666
|
var style = _a.style;
|
|
6667
6667
|
return style.width;
|
|
6668
6668
|
});
|
|
@@ -6725,7 +6725,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6725
6725
|
};
|
|
6726
6726
|
return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __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$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __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$3, { 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$X, __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$7, __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));
|
|
6727
6727
|
};
|
|
6728
|
-
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$
|
|
6728
|
+
var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$i;
|
|
6729
6729
|
|
|
6730
6730
|
var ImageContainer$5 = newStyled.div(function (_a) {
|
|
6731
6731
|
var width = _a.width, height = _a.height;
|
|
@@ -6768,7 +6768,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$s || (templateObject_5$s
|
|
|
6768
6768
|
var style = _a.style;
|
|
6769
6769
|
return style.width;
|
|
6770
6770
|
});
|
|
6771
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6771
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6772
6772
|
var BottomTagContainer$7 = newStyled.div(templateObject_7$h || (templateObject_7$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) {
|
|
6773
6773
|
var style = _a.style;
|
|
6774
6774
|
return style.width;
|
|
@@ -6824,7 +6824,7 @@ var ProductItemTK = function (_a) {
|
|
|
6824
6824
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6825
6825
|
} }, { children: title }), void 0)) : (jsx(Title$6, __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));
|
|
6826
6826
|
};
|
|
6827
|
-
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$
|
|
6827
|
+
var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$p, templateObject_7$h, templateObject_8$e;
|
|
6828
6828
|
|
|
6829
6829
|
var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6830
6830
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6988,13 +6988,13 @@ var Row$2 = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemp
|
|
|
6988
6988
|
});
|
|
6989
6989
|
var H5 = newStyled.h5(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6990
6990
|
var H3$1 = newStyled.h3(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6991
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6991
|
+
var FreeShipping = newStyled.span(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6992
6992
|
var CrossSellCheckbox = function (_a) {
|
|
6993
6993
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6994
6994
|
var theme = useTheme();
|
|
6995
6995
|
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));
|
|
6996
6996
|
};
|
|
6997
|
-
var templateObject_1$1i, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$
|
|
6997
|
+
var templateObject_1$1i, templateObject_2$Z, templateObject_3$L, templateObject_4$A, templateObject_5$q, templateObject_6$o;
|
|
6998
6998
|
|
|
6999
6999
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7000
7000
|
__proto__: null,
|
|
@@ -7166,7 +7166,7 @@ var IconContainer$3 = newStyled.div(templateObject_5$p || (templateObject_5$p =
|
|
|
7166
7166
|
marginBottom: ['10px', '0'],
|
|
7167
7167
|
width: ['auto', '1.5rem'],
|
|
7168
7168
|
}));
|
|
7169
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7169
|
+
var SectionTitle = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
7170
7170
|
display: ['block', 'flex'],
|
|
7171
7171
|
}), function (_a) {
|
|
7172
7172
|
var theme = _a.theme;
|
|
@@ -7189,7 +7189,7 @@ var DeliveryDetails = function (_a) {
|
|
|
7189
7189
|
var theme = useTheme();
|
|
7190
7190
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __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));
|
|
7191
7191
|
};
|
|
7192
|
-
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$
|
|
7192
|
+
var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$d;
|
|
7193
7193
|
|
|
7194
7194
|
var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
7195
7195
|
var top = _a.top;
|
|
@@ -7257,8 +7257,8 @@ var Item$2 = newStyled.li(templateObject_2$U || (templateObject_2$U = __makeTemp
|
|
|
7257
7257
|
var DropdownWrapper = newStyled.div(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
7258
7258
|
var ArrowContainer$1 = newStyled.div(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
7259
7259
|
var StyledDropdown = newStyled.ul(templateObject_5$o || (templateObject_5$o = __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; });
|
|
7260
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7261
|
-
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$
|
|
7260
|
+
var DropdownItem = newStyled.li(templateObject_6$m || (templateObject_6$m = __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; });
|
|
7261
|
+
var templateObject_1$1d, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$m;
|
|
7262
7262
|
|
|
7263
7263
|
var DropdownListIcons = function (_a) {
|
|
7264
7264
|
var items = _a.items;
|
|
@@ -7276,8 +7276,8 @@ var DropdownLabel = newStyled.div(templateObject_2$T || (templateObject_2$T = __
|
|
|
7276
7276
|
var SizeLabel = newStyled.span(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7277
7277
|
var DetailLabel = newStyled.span(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
7278
7278
|
var DropdownOptions = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
7279
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7280
|
-
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$
|
|
7279
|
+
var DropdownOption = newStyled.div(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
7280
|
+
var templateObject_1$1c, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$n, templateObject_6$l;
|
|
7281
7281
|
|
|
7282
7282
|
var SizeDropdown = function (_a) {
|
|
7283
7283
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7362,12 +7362,12 @@ var Header$1 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeT
|
|
|
7362
7362
|
var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
7363
7363
|
var MobileIconsContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __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"])));
|
|
7364
7364
|
var H4 = newStyled.h4(templateObject_5$m || (templateObject_5$m = __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; });
|
|
7365
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7365
|
+
var FilterLink = newStyled.a(templateObject_6$k || (templateObject_6$k = __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; });
|
|
7366
7366
|
var OptionContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7367
7367
|
var ClearAll = newStyled.span(templateObject_8$c || (templateObject_8$c = __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; });
|
|
7368
7368
|
var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7369
7369
|
var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7370
|
-
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$
|
|
7370
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$6;
|
|
7371
7371
|
|
|
7372
7372
|
var getStylesBySize$a = function (size, theme) {
|
|
7373
7373
|
switch (size) {
|
|
@@ -11963,10 +11963,10 @@ var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
|
|
|
11963
11963
|
});
|
|
11964
11964
|
var Button$6 = newStyled.button(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11965
11965
|
var ArrowsContainer = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11966
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11966
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11967
11967
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11968
11968
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11969
|
-
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$
|
|
11969
|
+
var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$e, templateObject_8$b;
|
|
11970
11970
|
|
|
11971
11971
|
var ImagePreviewList = function (_a) {
|
|
11972
11972
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
|
|
@@ -13590,16 +13590,18 @@ var HTMLVideo = newStyled.video(templateObject_2$K || (templateObject_2$K = __ma
|
|
|
13590
13590
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
13591
13591
|
var PlayContainer = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13592
13592
|
var PauseContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13593
|
-
var
|
|
13593
|
+
var MuteButton = newStyled.button(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"], ["\n position: absolute;\n background: transparent;\n border: none;\n bottom: 21px;\n right: 23px;\n z-index: 2;\n cursor: pointer;\n"])));
|
|
13594
|
+
var templateObject_1$11, templateObject_2$K, templateObject_3$B, templateObject_4$r, templateObject_5$k, templateObject_6$i;
|
|
13594
13595
|
|
|
13595
13596
|
var Video$1 = function (_a) {
|
|
13596
13597
|
var _b, _c, _d, _e;
|
|
13597
|
-
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar"]);
|
|
13598
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height, className = _a.className, _f = _a.withProgressBar, withProgressBar = _f === void 0 ? true : _f, hasAudioControl = _a.hasAudioControl, rest = __rest(_a, ["source", "thumbnail", "height", "className", "withProgressBar", "hasAudioControl"]);
|
|
13598
13599
|
var videoRef = useRef(null);
|
|
13599
13600
|
var _g = useState(true), isLoading = _g[0], setIsLoading = _g[1];
|
|
13600
13601
|
var _h = useState(false), isPlaying = _h[0], setIsPlaying = _h[1];
|
|
13601
|
-
var _j = useState(
|
|
13602
|
-
var _k = useState(
|
|
13602
|
+
var _j = useState(false), isMuted = _j[0], setIsMuted = _j[1];
|
|
13603
|
+
var _k = useState(0), videoProgress = _k[0], setVideoProgress = _k[1];
|
|
13604
|
+
var _l = useState(false), debouncePlay = _l[0], setDebouncePlay = _l[1];
|
|
13603
13605
|
var isStarted = videoProgress > 0;
|
|
13604
13606
|
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13605
13607
|
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
@@ -13624,12 +13626,18 @@ var Video$1 = function (_a) {
|
|
|
13624
13626
|
setIsPlaying(false);
|
|
13625
13627
|
}
|
|
13626
13628
|
};
|
|
13629
|
+
var handleMuteToggle = function () {
|
|
13630
|
+
if (videoRef.current) {
|
|
13631
|
+
videoRef.current.muted = !videoRef.current.muted;
|
|
13632
|
+
setIsMuted(function (prevState) { return !prevState; });
|
|
13633
|
+
}
|
|
13634
|
+
};
|
|
13627
13635
|
var onTimeUpdate = function () {
|
|
13628
13636
|
if (videoRef.current) {
|
|
13629
13637
|
setVideoProgress(videoRef.current.currentTime);
|
|
13630
13638
|
}
|
|
13631
13639
|
};
|
|
13632
|
-
return (jsxs$1(Container$O, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13640
|
+
return (jsxs$1(Container$O, __assign$1({ className: className }, { children: [!isLoading && withProgressBar && 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)), hasAudioControl && (jsxs$1(MuteButton, __assign$1({ onClick: handleMuteToggle }, { children: [isMuted && jsx$1(Icon$1, { name: "custom/sound_off" }, void 0), !isMuted && jsx$1(Icon$1, { name: "custom/sound_on" }, void 0)] }), void 0)), jsxs$1(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13633
13641
|
};
|
|
13634
13642
|
|
|
13635
13643
|
var Container$N = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: fit-content;\n /* &.styleforhorizontal {\n height: 30rem;\n } */\n display: block;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n width: 100%;\n max-width: max-content;\n"])), function (_a) {
|