@trafilea/afrodita-components 6.51.3 → 6.51.4
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.esm.js +94 -93
- package/build/index.esm.js.map +1 -1
- package/build/index.js +94 -93
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4876,7 +4876,7 @@ var TAGS = {
|
|
|
4876
4876
|
hero2: newStyled.h2(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject([""], [""]))),
|
|
4877
4877
|
hero3: newStyled.h3(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject([""], [""]))),
|
|
4878
4878
|
display1: newStyled.h1(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject([""], [""]))),
|
|
4879
|
-
display2: newStyled.h2(templateObject_5$
|
|
4879
|
+
display2: newStyled.h2(templateObject_5$S || (templateObject_5$S = __makeTemplateObject([""], [""]))),
|
|
4880
4880
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4881
4881
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4882
4882
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
@@ -5012,13 +5012,13 @@ var DEFAULTS = {
|
|
|
5012
5012
|
size: 'regular',
|
|
5013
5013
|
},
|
|
5014
5014
|
};
|
|
5015
|
-
var templateObject_1$2k, templateObject_2$1J, templateObject_3$1m, templateObject_4$15, templateObject_5$
|
|
5015
|
+
var templateObject_1$2k, templateObject_2$1J, templateObject_3$1m, templateObject_4$15, templateObject_5$S, templateObject_6$J, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5016
5016
|
|
|
5017
5017
|
var Container$1s = newStyled.div(templateObject_1$2j || (templateObject_1$2j = __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"])));
|
|
5018
5018
|
var Card$4 = newStyled.div(templateObject_2$1I || (templateObject_2$1I = __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"])));
|
|
5019
5019
|
var Tag$2 = newStyled.div(templateObject_3$1l || (templateObject_3$1l = __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"])));
|
|
5020
5020
|
var Label$7 = newStyled.div(templateObject_4$14 || (templateObject_4$14 = __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"])));
|
|
5021
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
5021
|
+
var Check$1 = newStyled.div(templateObject_5$R || (templateObject_5$R = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
5022
5022
|
var DiscountContainer$1 = newStyled.div(templateObject_6$I || (templateObject_6$I = __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"])));
|
|
5023
5023
|
var PackSelectorV2 = function (_a) {
|
|
5024
5024
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -5044,7 +5044,7 @@ var PackCard$1 = function (_a) {
|
|
|
5044
5044
|
currency: currencyCode || 'USD',
|
|
5045
5045
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5046
5046
|
};
|
|
5047
|
-
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$
|
|
5047
|
+
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$R, templateObject_6$I;
|
|
5048
5048
|
|
|
5049
5049
|
var Container$1r = newStyled.div(templateObject_1$2i || (templateObject_1$2i = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
5050
5050
|
var DropContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5340,8 +5340,8 @@ var Container$1o = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
5340
5340
|
var FlexCentered = newStyled.div(templateObject_2$1E || (templateObject_2$1E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
|
|
5341
5341
|
var LeftSide = newStyled.div(templateObject_3$1j || (templateObject_3$1j = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
|
|
5342
5342
|
var RightSide = newStyled.div(templateObject_4$13 || (templateObject_4$13 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
|
|
5343
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5344
|
-
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$
|
|
5343
|
+
var FlexStart = newStyled.div(templateObject_5$Q || (templateObject_5$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
5344
|
+
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$Q;
|
|
5345
5345
|
|
|
5346
5346
|
var CouponCard = function (_a) {
|
|
5347
5347
|
var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
|
|
@@ -6100,7 +6100,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1z || (templateObject_2$1z
|
|
|
6100
6100
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6101
6101
|
return actual === expected ? margin : '0';
|
|
6102
6102
|
};
|
|
6103
|
-
var ContentWrapper = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __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) {
|
|
6103
|
+
var ContentWrapper$1 = newStyled.div(templateObject_3$1g || (templateObject_3$1g = __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) {
|
|
6104
6104
|
var borderColor = _a.borderColor;
|
|
6105
6105
|
return borderColor;
|
|
6106
6106
|
}, function (_a) {
|
|
@@ -6117,7 +6117,7 @@ var TooltipText = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __
|
|
|
6117
6117
|
var color = _a.color;
|
|
6118
6118
|
return color;
|
|
6119
6119
|
});
|
|
6120
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6120
|
+
var TopSection = newStyled.div(templateObject_5$P || (templateObject_5$P = __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"])));
|
|
6121
6121
|
var Title$a = newStyled.h1(templateObject_6$H || (templateObject_6$H = __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) {
|
|
6122
6122
|
var color = _a.color;
|
|
6123
6123
|
return color;
|
|
@@ -6127,7 +6127,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6127
6127
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6128
6128
|
return right;
|
|
6129
6129
|
});
|
|
6130
|
-
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$11, templateObject_5$
|
|
6130
|
+
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$11, templateObject_5$P, templateObject_6$H, templateObject_7$z, templateObject_8$s;
|
|
6131
6131
|
|
|
6132
6132
|
var Tooltip = function (_a) {
|
|
6133
6133
|
var _b;
|
|
@@ -6147,7 +6147,7 @@ var Tooltip = function (_a) {
|
|
|
6147
6147
|
var ref = tooltipRef.current;
|
|
6148
6148
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6149
6149
|
}, [tooltipRef]);
|
|
6150
|
-
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
|
|
6150
|
+
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper$1, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$6, { children: React__default.createElement(header.Icon, {
|
|
6151
6151
|
testId: 'HeaderIcon',
|
|
6152
6152
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6153
6153
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -6190,7 +6190,7 @@ var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1f |
|
|
|
6190
6190
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6191
6191
|
});
|
|
6192
6192
|
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6193
|
-
var SubscriptionHeader$5 = newStyled.div(templateObject_5$
|
|
6193
|
+
var SubscriptionHeader$5 = newStyled.div(templateObject_5$O || (templateObject_5$O = __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) {
|
|
6194
6194
|
var theme = _a.theme;
|
|
6195
6195
|
return theme.colors.shades[200].color;
|
|
6196
6196
|
}, function (_a) {
|
|
@@ -6208,7 +6208,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6208
6208
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6209
6209
|
});
|
|
6210
6210
|
var Container$1k = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6211
|
-
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$10, templateObject_5$
|
|
6211
|
+
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$10, templateObject_5$O, templateObject_6$G, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6212
6212
|
|
|
6213
6213
|
var radioIds$3 = {
|
|
6214
6214
|
oneTime: {
|
|
@@ -6300,7 +6300,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$$ ||
|
|
|
6300
6300
|
var onClick = _a.onClick;
|
|
6301
6301
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6302
6302
|
});
|
|
6303
|
-
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$
|
|
6303
|
+
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$N || (templateObject_5$N = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
6304
6304
|
var SubscriptionHeader$4 = newStyled.div(templateObject_6$F || (templateObject_6$F = __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) {
|
|
6305
6305
|
var theme = _a.theme;
|
|
6306
6306
|
return theme.colors.shades[200].color;
|
|
@@ -6321,7 +6321,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6321
6321
|
var theme = _a.theme;
|
|
6322
6322
|
return theme.component.autoship.tooltip.margin;
|
|
6323
6323
|
});
|
|
6324
|
-
var templateObject_1$24, templateObject_2$1x, templateObject_3$1e, templateObject_4$$, templateObject_5$
|
|
6324
|
+
var templateObject_1$24, templateObject_2$1x, templateObject_3$1e, templateObject_4$$, templateObject_5$N, templateObject_6$F, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
|
|
6325
6325
|
|
|
6326
6326
|
var radioIds$2 = {
|
|
6327
6327
|
oneTime: {
|
|
@@ -6404,9 +6404,9 @@ var CustomerDetails = newStyled.div(templateObject_1$23 || (templateObject_1$23
|
|
|
6404
6404
|
var CustomerInfo = newStyled.div(templateObject_2$1w || (templateObject_2$1w = __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"])));
|
|
6405
6405
|
var Name = newStyled.h4(templateObject_3$1d || (templateObject_3$1d = __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"])));
|
|
6406
6406
|
var StarIconContainer = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __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"])));
|
|
6407
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6407
|
+
var Description$2 = newStyled.p(templateObject_5$M || (templateObject_5$M = __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"])));
|
|
6408
6408
|
var ReviewDays = newStyled.span(templateObject_6$E || (templateObject_6$E = __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"])));
|
|
6409
|
-
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$
|
|
6409
|
+
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$M, templateObject_6$E;
|
|
6410
6410
|
|
|
6411
6411
|
var NameWithStars = function (_a) {
|
|
6412
6412
|
var name = _a.name, size = _a.size;
|
|
@@ -6695,7 +6695,7 @@ var Container$1c = newStyled.div(templateObject_1$1R || (templateObject_1$1R = _
|
|
|
6695
6695
|
var MobileContainer = newStyled(Container$1c)(templateObject_2$1r || (templateObject_2$1r = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6696
6696
|
var DollarPart = newStyled.span(templateObject_3$18 || (templateObject_3$18 = __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"])));
|
|
6697
6697
|
var ClubMembersText = newStyled.span(templateObject_4$W || (templateObject_4$W = __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"])));
|
|
6698
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6698
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6699
6699
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6700
6700
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6701
6701
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6704,7 +6704,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6704
6704
|
var isMobile = useWindowDimensions().isMobile;
|
|
6705
6705
|
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$1c, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6706
6706
|
};
|
|
6707
|
-
var templateObject_1$1R, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$
|
|
6707
|
+
var templateObject_1$1R, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$L, templateObject_6$D, templateObject_7$w, templateObject_8$p;
|
|
6708
6708
|
|
|
6709
6709
|
var Spacing = function (_a) {
|
|
6710
6710
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -7065,9 +7065,9 @@ var Container$17 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
7065
7065
|
var HTMLVideo = newStyled.video(templateObject_2$1j || (templateObject_2$1j = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
7066
7066
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$14 || (templateObject_3$14 = __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"])));
|
|
7067
7067
|
var PlayContainer = newStyled.div(templateObject_4$T || (templateObject_4$T = __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"])));
|
|
7068
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7068
|
+
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"])));
|
|
7069
7069
|
var MuteButton = newStyled.button(templateObject_6$C || (templateObject_6$C = __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"])));
|
|
7070
|
-
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$
|
|
7070
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$K, templateObject_6$C;
|
|
7071
7071
|
|
|
7072
7072
|
var Video$1 = function (_a) {
|
|
7073
7073
|
var _b, _c, _d, _e;
|
|
@@ -7224,7 +7224,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1C || (templateObject_
|
|
|
7224
7224
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
7225
7225
|
var PriceContainer$1 = newStyled.span(templateObject_3$13 || (templateObject_3$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7226
7226
|
var PriceContainerV2 = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7227
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7227
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
7228
7228
|
var RegularPriceTag = function () {
|
|
7229
7229
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7230
7230
|
};
|
|
@@ -7278,7 +7278,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7278
7278
|
? finalPriceArray[0]
|
|
7279
7279
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price$1, __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, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7280
7280
|
};
|
|
7281
|
-
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$
|
|
7281
|
+
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$J;
|
|
7282
7282
|
|
|
7283
7283
|
var STYLES_BY_THEME = {
|
|
7284
7284
|
TheSpaDr: {
|
|
@@ -7405,7 +7405,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7405
7405
|
};
|
|
7406
7406
|
}
|
|
7407
7407
|
};
|
|
7408
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7408
|
+
var TopTagContainer$9 = newStyled.div(templateObject_5$I || (templateObject_5$I = __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) {
|
|
7409
7409
|
var style = _a.style;
|
|
7410
7410
|
return style.width;
|
|
7411
7411
|
});
|
|
@@ -7415,7 +7415,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7415
7415
|
});
|
|
7416
7416
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7417
7417
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7418
|
-
var templateObject_1$1B, templateObject_2$1g, templateObject_3$12, templateObject_4$R, templateObject_5$
|
|
7418
|
+
var templateObject_1$1B, templateObject_2$1g, templateObject_3$12, templateObject_4$R, templateObject_5$I, templateObject_6$B, templateObject_7$v, templateObject_8$o;
|
|
7419
7419
|
|
|
7420
7420
|
var ProductItemMobile = function (_a) {
|
|
7421
7421
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7561,7 +7561,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7561
7561
|
};
|
|
7562
7562
|
}
|
|
7563
7563
|
};
|
|
7564
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7564
|
+
var TopTagContainer$8 = newStyled.div(templateObject_5$H || (templateObject_5$H = __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) {
|
|
7565
7565
|
var style = _a.style;
|
|
7566
7566
|
return style.width;
|
|
7567
7567
|
});
|
|
@@ -7621,7 +7621,7 @@ var ProductItemTK = function (_a) {
|
|
|
7621
7621
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7622
7622
|
} }, { 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));
|
|
7623
7623
|
};
|
|
7624
|
-
var templateObject_1$1A, templateObject_2$1f, templateObject_3$11, templateObject_4$Q, templateObject_5$
|
|
7624
|
+
var templateObject_1$1A, templateObject_2$1f, templateObject_3$11, templateObject_4$Q, templateObject_5$H, templateObject_6$A, templateObject_7$u, templateObject_8$n;
|
|
7625
7625
|
|
|
7626
7626
|
var Container$13 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
7627
7627
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7645,7 +7645,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1y || (templateObject_1$1y
|
|
|
7645
7645
|
newStyled(lt.Label)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7646
7646
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$10 || (templateObject_3$10 = __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"])));
|
|
7647
7647
|
var Span = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7648
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7648
|
+
var OptionsContainer = newStyled.div(templateObject_5$G || (templateObject_5$G = __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"])));
|
|
7649
7649
|
var Label$5 = function (_a) {
|
|
7650
7650
|
var label = _a.label, values = _a.values;
|
|
7651
7651
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7663,7 +7663,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7663
7663
|
Option: Option,
|
|
7664
7664
|
OptionsContainer: OptionsContainer,
|
|
7665
7665
|
});
|
|
7666
|
-
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$
|
|
7666
|
+
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$G;
|
|
7667
7667
|
|
|
7668
7668
|
var OneColorSelector = function (_a) {
|
|
7669
7669
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7797,14 +7797,14 @@ var Row$2 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __makeTemp
|
|
|
7797
7797
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7798
7798
|
});
|
|
7799
7799
|
var H5 = newStyled.h5(templateObject_4$O || (templateObject_4$O = __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; });
|
|
7800
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7800
|
+
var H3 = newStyled.h3(templateObject_5$F || (templateObject_5$F = __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; });
|
|
7801
7801
|
var FreeShipping = newStyled.span(templateObject_6$z || (templateObject_6$z = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
7802
7802
|
var CrossSellCheckbox = function (_a) {
|
|
7803
7803
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7804
7804
|
var theme = useTheme();
|
|
7805
7805
|
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, __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));
|
|
7806
7806
|
};
|
|
7807
|
-
var templateObject_1$1v, templateObject_2$1b, templateObject_3$$, templateObject_4$O, templateObject_5$
|
|
7807
|
+
var templateObject_1$1v, templateObject_2$1b, templateObject_3$$, templateObject_4$O, templateObject_5$F, templateObject_6$z;
|
|
7808
7808
|
|
|
7809
7809
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7810
7810
|
__proto__: null,
|
|
@@ -7979,7 +7979,7 @@ var Col = newStyled.div(templateObject_4$M || (templateObject_4$M = __makeTempla
|
|
|
7979
7979
|
textAlign: ['center', 'inherit'],
|
|
7980
7980
|
width: ['100%', 'inherit'],
|
|
7981
7981
|
}));
|
|
7982
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
7982
|
+
var IconContainer$4 = newStyled.div(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
7983
7983
|
marginRight: ['0', '0.438rem'],
|
|
7984
7984
|
marginBottom: ['10px', '0'],
|
|
7985
7985
|
width: ['auto', '1.5rem'],
|
|
@@ -8007,7 +8007,7 @@ var DeliveryDetails = function (_a) {
|
|
|
8007
8007
|
var theme = useTheme();
|
|
8008
8008
|
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$4, __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$4, __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$4, __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));
|
|
8009
8009
|
};
|
|
8010
|
-
var templateObject_1$1s, templateObject_2$18, templateObject_3$Z, templateObject_4$M, templateObject_5$
|
|
8010
|
+
var templateObject_1$1s, templateObject_2$18, templateObject_3$Z, templateObject_4$M, templateObject_5$E, templateObject_6$y, templateObject_7$t, templateObject_8$m;
|
|
8011
8011
|
|
|
8012
8012
|
var Backdrop = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
8013
8013
|
var top = _a.top;
|
|
@@ -8074,9 +8074,9 @@ var List = newStyled.ul(templateObject_1$1q || (templateObject_1$1q = __makeTemp
|
|
|
8074
8074
|
var Item$2 = newStyled.li(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
8075
8075
|
var DropdownWrapper = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
8076
8076
|
var ArrowContainer$1 = newStyled.div(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
8077
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8077
|
+
var StyledDropdown = newStyled.ul(templateObject_5$D || (templateObject_5$D = __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; });
|
|
8078
8078
|
var DropdownItem = newStyled.li(templateObject_6$x || (templateObject_6$x = __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; });
|
|
8079
|
-
var templateObject_1$1q, templateObject_2$16, templateObject_3$Y, templateObject_4$L, templateObject_5$
|
|
8079
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$Y, templateObject_4$L, templateObject_5$D, templateObject_6$x;
|
|
8080
8080
|
|
|
8081
8081
|
var DropdownListIcons = function (_a) {
|
|
8082
8082
|
var items = _a.items;
|
|
@@ -8093,9 +8093,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1p || (templateObject_1$1
|
|
|
8093
8093
|
var DropdownLabel = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
8094
8094
|
var SizeLabel = newStyled.span(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8095
8095
|
var DetailLabel = newStyled.span(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
8096
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8096
|
+
var DropdownOptions = newStyled.div(templateObject_5$C || (templateObject_5$C = __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"])));
|
|
8097
8097
|
var DropdownOption = newStyled.div(templateObject_6$w || (templateObject_6$w = __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"])));
|
|
8098
|
-
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$
|
|
8098
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$C, templateObject_6$w;
|
|
8099
8099
|
|
|
8100
8100
|
var SizeDropdown = function (_a) {
|
|
8101
8101
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8126,7 +8126,7 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_3$W || (templateOb
|
|
|
8126
8126
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8127
8127
|
});
|
|
8128
8128
|
var DialogDropdownListItem = newStyled.li(templateObject_4$J || (templateObject_4$J = __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"])));
|
|
8129
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8129
|
+
var DialogDropdownLink = newStyled.a(templateObject_5$B || (templateObject_5$B = __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"])));
|
|
8130
8130
|
var DropdownDialog = function (_a) {
|
|
8131
8131
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
|
|
8132
8132
|
var theme = useTheme$1();
|
|
@@ -8135,7 +8135,7 @@ var DropdownDialog = function (_a) {
|
|
|
8135
8135
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8136
8136
|
}) }), void 0) }), void 0));
|
|
8137
8137
|
};
|
|
8138
|
-
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$
|
|
8138
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$B;
|
|
8139
8139
|
|
|
8140
8140
|
function FilteringDropdown(_a) {
|
|
8141
8141
|
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;
|
|
@@ -8184,13 +8184,13 @@ var SectionContent = newStyled.div(templateObject_1$1m || (templateObject_1$1m =
|
|
|
8184
8184
|
var Header$3 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
8185
8185
|
var MobileHeader = newStyled.div(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
8186
8186
|
var MobileIconsContainer = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
8187
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8187
|
+
var H4 = newStyled.h4(templateObject_5$A || (templateObject_5$A = __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; });
|
|
8188
8188
|
var FilterLink = newStyled.a(templateObject_6$v || (templateObject_6$v = __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; });
|
|
8189
8189
|
var OptionContainer = newStyled.div(templateObject_7$s || (templateObject_7$s = __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'); });
|
|
8190
8190
|
var ClearAll = newStyled.span(templateObject_8$l || (templateObject_8$l = __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; });
|
|
8191
8191
|
var MobileFooter = newStyled.div(templateObject_9$d || (templateObject_9$d = __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"])));
|
|
8192
8192
|
var MobileClearContainer = newStyled.div(templateObject_10$b || (templateObject_10$b = __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"])));
|
|
8193
|
-
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H, templateObject_5$
|
|
8193
|
+
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H, templateObject_5$A, templateObject_6$v, templateObject_7$s, templateObject_8$l, templateObject_9$d, templateObject_10$b;
|
|
8194
8194
|
|
|
8195
8195
|
var getStylesBySize$9 = function (size, theme) {
|
|
8196
8196
|
switch (size) {
|
|
@@ -12788,11 +12788,11 @@ var Container$Z = newStyled.div(templateObject_3$S || (templateObject_3$S = __ma
|
|
|
12788
12788
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12789
12789
|
});
|
|
12790
12790
|
var Button$7 = newStyled.button(templateObject_4$G || (templateObject_4$G = __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"])));
|
|
12791
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12791
|
+
var ArrowsContainer = newStyled.div(templateObject_5$z || (templateObject_5$z = __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"])));
|
|
12792
12792
|
var ArrowBaseStyles = newStyled.div(templateObject_6$u || (templateObject_6$u = __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"])));
|
|
12793
12793
|
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$r || (templateObject_7$r = __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"])));
|
|
12794
12794
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$k || (templateObject_8$k = __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"])));
|
|
12795
|
-
var templateObject_1$1g, templateObject_2$_, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
12795
|
+
var templateObject_1$1g, templateObject_2$_, templateObject_3$S, templateObject_4$G, templateObject_5$z, templateObject_6$u, templateObject_7$r, templateObject_8$k;
|
|
12796
12796
|
|
|
12797
12797
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12798
12798
|
var loading = 'eager';
|
|
@@ -14436,7 +14436,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$R || (templateObject_3
|
|
|
14436
14436
|
return (isCTAHidden ? '60px' : '120px');
|
|
14437
14437
|
});
|
|
14438
14438
|
var TopRightTagWrapper = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
14439
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14439
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14440
14440
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_6$t || (templateObject_6$t = __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"])));
|
|
14441
14441
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14442
14442
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14446,7 +14446,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14446
14446
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14447
14447
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14448
14448
|
});
|
|
14449
|
-
var templateObject_1$1f, templateObject_2$Z, templateObject_3$R, templateObject_4$F, templateObject_5$
|
|
14449
|
+
var templateObject_1$1f, templateObject_2$Z, templateObject_3$R, templateObject_4$F, templateObject_5$y, templateObject_6$t, templateObject_7$q, templateObject_8$j;
|
|
14450
14450
|
|
|
14451
14451
|
var ImageProductSlide$1 = function (_a) {
|
|
14452
14452
|
var _b;
|
|
@@ -14655,7 +14655,7 @@ var InputWrapper = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
14655
14655
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14656
14656
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14657
14657
|
});
|
|
14658
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14658
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
14659
14659
|
var theme = _a.theme;
|
|
14660
14660
|
return theme.component.input.placeholderColor;
|
|
14661
14661
|
}, function (_a) {
|
|
@@ -14669,7 +14669,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$w || (templateObject_5
|
|
|
14669
14669
|
return theme.component.input.lineHeight;
|
|
14670
14670
|
});
|
|
14671
14671
|
var ClearInput = newStyled.div(templateObject_6$s || (templateObject_6$s = __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"])));
|
|
14672
|
-
var templateObject_1$1a, templateObject_2$W, templateObject_3$P, templateObject_4$E, templateObject_5$
|
|
14672
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$P, templateObject_4$E, templateObject_5$x, templateObject_6$s;
|
|
14673
14673
|
|
|
14674
14674
|
var BaseInput = function (_a) {
|
|
14675
14675
|
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, customErrorMessage = _a.customErrorMessage, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder", "customErrorMessage"]);
|
|
@@ -14925,7 +14925,7 @@ var transformStyle = function (_a) {
|
|
|
14925
14925
|
var Container$R = newStyled.div(templateObject_6$r || (templateObject_6$r = __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 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"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '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'); }, function (_a) {
|
|
14926
14926
|
var width = _a.width;
|
|
14927
14927
|
return width
|
|
14928
|
-
? css(templateObject_5$
|
|
14928
|
+
? css(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14929
14929
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14930
14930
|
});
|
|
14931
14931
|
}, visibleStyle, transformStyle);
|
|
@@ -14970,7 +14970,7 @@ var useModal = function (id) {
|
|
|
14970
14970
|
close: close,
|
|
14971
14971
|
}); }, [close, open, opened]);
|
|
14972
14972
|
};
|
|
14973
|
-
var templateObject_1$15, templateObject_2$S, templateObject_3$N, templateObject_4$D, templateObject_5$
|
|
14973
|
+
var templateObject_1$15, templateObject_2$S, templateObject_3$N, templateObject_4$D, templateObject_5$w, templateObject_6$r, templateObject_7$p;
|
|
14974
14974
|
|
|
14975
14975
|
var htmlReactParser = {exports: {}};
|
|
14976
14976
|
|
|
@@ -18852,7 +18852,7 @@ var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __
|
|
|
18852
18852
|
var Card$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
18853
18853
|
var Tag$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
18854
18854
|
var Label$3 = newStyled.div(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
18855
|
-
var Check = newStyled.div(templateObject_5$
|
|
18855
|
+
var Check = newStyled.div(templateObject_5$v || (templateObject_5$v = __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"])));
|
|
18856
18856
|
var IconContainer$2 = newStyled.div(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18857
18857
|
var IconPlaceholder = newStyled.div(templateObject_7$o || (templateObject_7$o = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18858
18858
|
var DiscountContainer = newStyled.div(templateObject_8$i || (templateObject_8$i = __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"])));
|
|
@@ -18885,7 +18885,7 @@ var PackCard = function (_a) {
|
|
|
18885
18885
|
currency: currencyCode || 'USD',
|
|
18886
18886
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18887
18887
|
};
|
|
18888
|
-
var templateObject_1$12, templateObject_2$P, templateObject_3$M, templateObject_4$C, templateObject_5$
|
|
18888
|
+
var templateObject_1$12, templateObject_2$P, templateObject_3$M, templateObject_4$C, templateObject_5$v, templateObject_6$q, templateObject_7$o, templateObject_8$i;
|
|
18889
18889
|
|
|
18890
18890
|
var Container$N = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
18891
18891
|
var IconContainer$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
@@ -19029,7 +19029,7 @@ var PriceContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = _
|
|
|
19029
19029
|
})
|
|
19030
19030
|
: 'justify-content: end';
|
|
19031
19031
|
});
|
|
19032
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19032
|
+
var Quantity = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
19033
19033
|
var StyledSpan = newStyled.span(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
19034
19034
|
var Gift = newStyled.span(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"], ["\n color: ", ";\n font-weight: 600;\n font-size: 14px;\n line-height: 22px;\n"])), function (_a) {
|
|
19035
19035
|
var theme = _a.theme;
|
|
@@ -19041,7 +19041,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19041
19041
|
var theme = useTheme();
|
|
19042
19042
|
return (jsxs$1(Container$L, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { 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$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsx$1(Subtitle, __assign$1({ color: ((_c = (_b = theme.component.pricing) === null || _b === void 0 ? void 0 : _b.subtitle) === null || _c === void 0 ? void 0 : _c.color) || theme.colors.shades['700'].color, fontSize: ((_e = (_d = theme.component.pricing) === null || _d === void 0 ? void 0 : _d.subtitle) === null || _e === void 0 ? void 0 : _e.fontSize) || '0.75rem', lineHeight: ((_g = (_f = theme.component.pricing) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.lineHeight) || '1rem', fontWeight: ((_j = (_h = theme.component.pricing) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.fontWeight) || 'normal', "data-testid": "product-variant-title", margin: "0.5rem 0 0 0" }, { children: subtitle }), void 0)), midElement, isGift && jsx$1(Gift, { children: "Limited Time Only" }, 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)), isGift ? (jsx$1(Gift, { children: "GIFT" }, void 0)) : (jsx$1(PriceLabel$1, { 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));
|
|
19043
19043
|
};
|
|
19044
|
-
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$A, templateObject_5$
|
|
19044
|
+
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$A, templateObject_5$u, templateObject_6$p, templateObject_7$n;
|
|
19045
19045
|
|
|
19046
19046
|
var P$1 = newStyled.p(function (_a) {
|
|
19047
19047
|
var color = _a.color;
|
|
@@ -19356,7 +19356,7 @@ var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
19356
19356
|
var Content$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
19357
19357
|
var StarsContent = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
19358
19358
|
var ReviewContainer$1 = newStyled.div(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
19359
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19359
|
+
var DateText$1 = newStyled.span(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
19360
19360
|
var ReviewerName$1 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
19361
19361
|
var VerifiedText = newStyled.h1(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
19362
19362
|
var ReviewTitle$1 = newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
@@ -19393,7 +19393,7 @@ var Review$1 = function (_a) {
|
|
|
19393
19393
|
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$2, { children: image &&
|
|
19394
19394
|
(!isVideo ? (jsx$1(ImageWrapper$3, { 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));
|
|
19395
19395
|
};
|
|
19396
|
-
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$
|
|
19396
|
+
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$t, templateObject_6$o, templateObject_7$m, templateObject_8$h, templateObject_9$c, templateObject_10$a, templateObject_11$7, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
19397
19397
|
|
|
19398
19398
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19399
19399
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19401,7 +19401,7 @@ var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
19401
19401
|
var Heading = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
19402
19402
|
var Content = 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"])));
|
|
19403
19403
|
var ReviewContainer = newStyled.div(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19404
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19404
|
+
var DateText = newStyled.span(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
19405
19405
|
var VariantText = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
19406
19406
|
var ReviewerName = newStyled.h2(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
19407
19407
|
var ReviewTitle = newStyled.h3(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -19449,13 +19449,13 @@ var Review = function (_a) {
|
|
|
19449
19449
|
: description,
|
|
19450
19450
|
} }, 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$2, __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));
|
|
19451
19451
|
};
|
|
19452
|
-
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$
|
|
19452
|
+
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$s, templateObject_6$n, templateObject_7$l, templateObject_8$g, templateObject_9$b, templateObject_10$9, templateObject_11$6, templateObject_12$3, templateObject_13$2, templateObject_14$1, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19453
19453
|
|
|
19454
19454
|
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
19455
19455
|
var ReviewsContainer = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
19456
19456
|
var ReviewsCount = newStyled.div(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
19457
19457
|
var ReviewsStars = newStyled.div(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
19458
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19458
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
19459
19459
|
var ReviewsImages = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
19460
19460
|
var SummaryItem = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
19461
19461
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19467,7 +19467,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19467
19467
|
var theme = useTheme();
|
|
19468
19468
|
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));
|
|
19469
19469
|
};
|
|
19470
|
-
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$
|
|
19470
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$r, templateObject_6$m, templateObject_7$k;
|
|
19471
19471
|
|
|
19472
19472
|
var Container$D = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
19473
19473
|
var Text$1 = newStyled.p(templateObject_2$G || (templateObject_2$G = __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; });
|
|
@@ -19685,8 +19685,8 @@ var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
19685
19685
|
var BackArrow = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19686
19686
|
var BoldSpan = newStyled.span(templateObject_3$C || (templateObject_3$C = __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"])));
|
|
19687
19687
|
var NormalSpan = newStyled.span(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
19688
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19689
|
-
var templateObject_1$O, templateObject_2$E, templateObject_3$C, templateObject_4$v, templateObject_5$
|
|
19688
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
19689
|
+
var templateObject_1$O, templateObject_2$E, templateObject_3$C, templateObject_4$v, templateObject_5$q;
|
|
19690
19690
|
|
|
19691
19691
|
var SearchNavigation = function (_a) {
|
|
19692
19692
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19718,13 +19718,13 @@ var TableElement$3 = newStyled.table(templateObject_1$M || (templateObject_1$M =
|
|
|
19718
19718
|
var TableCell$3 = newStyled.td(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\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 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; });
|
|
19719
19719
|
var TableHead$3 = newStyled.th(templateObject_3$A || (templateObject_3$A = __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; });
|
|
19720
19720
|
var Label$2 = newStyled('div')(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19721
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19721
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19722
19722
|
var LeftLabel$1 = newStyled(Label$2)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19723
19723
|
var Container$w = newStyled('div')(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19724
19724
|
var LabelText$1 = newStyled('span')(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19725
19725
|
var Column$2 = newStyled('div')(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19726
19726
|
var TableRow$3 = newStyled.tr(templateObject_10$8 || (templateObject_10$8 = __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; });
|
|
19727
|
-
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u, templateObject_5$
|
|
19727
|
+
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u, templateObject_5$p, templateObject_6$l, templateObject_7$j, templateObject_8$f, templateObject_9$a, templateObject_10$8;
|
|
19728
19728
|
|
|
19729
19729
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19730
19730
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20095,12 +20095,12 @@ var ToastContent = newStyled.div(templateObject_4$q || (templateObject_4$q = __m
|
|
|
20095
20095
|
var distanceFromTop = _a.distanceFromTop;
|
|
20096
20096
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20097
20097
|
});
|
|
20098
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20098
|
+
var ToastText = newStyled.p(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"], ["\n font-size: 14px;\n font-weight: 500;\n line-height: 24px;\n margin: 0;\n color: ", ";\n\n @media (max-width: 768px) {\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n }\n"])), function (_a) {
|
|
20099
20099
|
var severity = _a.severity;
|
|
20100
20100
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20101
20101
|
});
|
|
20102
20102
|
var CloseIcon = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n margin-inline-start: auto;\n cursor: pointer;\n"], ["\n margin-inline-start: auto;\n cursor: pointer;\n"])));
|
|
20103
|
-
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q, templateObject_5$
|
|
20103
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q, templateObject_5$o, templateObject_6$k;
|
|
20104
20104
|
|
|
20105
20105
|
var Toast = React__default.forwardRef(function (_a, ref) {
|
|
20106
20106
|
var _b;
|
|
@@ -20141,7 +20141,7 @@ var Container$r = newStyled.div(templateObject_4$p || (templateObject_4$p = __ma
|
|
|
20141
20141
|
var highlightColor = _a.highlightColor;
|
|
20142
20142
|
return highlightColor;
|
|
20143
20143
|
});
|
|
20144
|
-
var TotalContainer = newStyled(Container$r)(templateObject_5$
|
|
20144
|
+
var TotalContainer = newStyled(Container$r)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
20145
20145
|
var showTotalLabel = _a.showTotalLabel;
|
|
20146
20146
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20147
20147
|
});
|
|
@@ -20151,7 +20151,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __
|
|
|
20151
20151
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20152
20152
|
});
|
|
20153
20153
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20154
|
-
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p, templateObject_5$
|
|
20154
|
+
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p, templateObject_5$n, templateObject_6$j, templateObject_7$i, templateObject_8$e;
|
|
20155
20155
|
|
|
20156
20156
|
var Total = function (_a) {
|
|
20157
20157
|
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;
|
|
@@ -20195,7 +20195,7 @@ var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
20195
20195
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20196
20196
|
var CheckpointDate$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __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; });
|
|
20197
20197
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$n || (templateObject_4$n = __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'); });
|
|
20198
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20198
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
20199
20199
|
var CheckpointStatus$1 = newStyled.p(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
20200
20200
|
return props.finishedTrack
|
|
20201
20201
|
? props.finishedTrackColor
|
|
@@ -20243,13 +20243,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20243
20243
|
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));
|
|
20244
20244
|
})] }), void 0));
|
|
20245
20245
|
};
|
|
20246
|
-
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$
|
|
20246
|
+
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$m, templateObject_6$i, templateObject_7$h, templateObject_8$d, templateObject_9$9, templateObject_10$7, templateObject_11$5;
|
|
20247
20247
|
|
|
20248
20248
|
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
20249
20249
|
var CheckpointContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20250
20250
|
var CheckpointDate = newStyled.div(templateObject_3$q || (templateObject_3$q = __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; });
|
|
20251
20251
|
var CheckpointDateLabel = newStyled.p(templateObject_4$m || (templateObject_4$m = __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'); });
|
|
20252
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20252
|
+
var CheckpointStatus = newStyled.p(templateObject_5$l || (templateObject_5$l = __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'); });
|
|
20253
20253
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
20254
20254
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20255
20255
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20283,7 +20283,7 @@ var TrackingProgress = function (_a) {
|
|
|
20283
20283
|
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));
|
|
20284
20284
|
})] }), void 0));
|
|
20285
20285
|
};
|
|
20286
|
-
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$
|
|
20286
|
+
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$l, templateObject_6$h, templateObject_7$g, templateObject_8$c;
|
|
20287
20287
|
|
|
20288
20288
|
var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n border: ", "\n border-radius: 8px;\n padding: 10px;\n"])), function (_a) {
|
|
20289
20289
|
var checked = _a.checked;
|
|
@@ -20292,10 +20292,10 @@ var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$x || (templa
|
|
|
20292
20292
|
var AutoShipHeaderBarWrapper$1 = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n"])));
|
|
20293
20293
|
var AutoShipBodyWrapper$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20294
20294
|
var AutoShipBodyTitle$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20295
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20295
|
+
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20296
20296
|
var AutoShipBodyListWrapper$1 = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20297
20297
|
var CheckboxInput = newStyled.input(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20298
|
-
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$
|
|
20298
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$k, templateObject_6$g, templateObject_7$f;
|
|
20299
20299
|
|
|
20300
20300
|
function AutoshipOfferCard(_a) {
|
|
20301
20301
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20326,11 +20326,11 @@ var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$w || (template
|
|
|
20326
20326
|
var AutoShipHeaderBarWrapper = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
20327
20327
|
var AutoShipBodyWrapper = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"], ["\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n background-color: #f7f7f7;\n"])));
|
|
20328
20328
|
var AutoShipBodyTitle = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n text-align: left;\n width: Fill (311px) px;\n height: Hug (34px) px;\n padding: 6px 10px 6px 10px;\n gap: 4px;\n opacity: 0px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20329
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20329
|
+
var AutoShipBodyListItem = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 10px;\n"])));
|
|
20330
20330
|
var AutoShipBodyListWrapper = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px 10px 10px 10px;\n"])));
|
|
20331
20331
|
newStyled.input(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"], ["\n width: 22px;\n height: 22px;\n gap: 0px;\n border-radius: 4px;\n border: 1px 0px 0px 0px;\n opacity: 0px;\n :checked {\n accent-color: #292929;\n }\n"])));
|
|
20332
20332
|
var ButtonRemoveWrapper = newStyled.div(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"], ["\n color: #292929;\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n text-align: left;\n text-decoration: underline;\n :hover {\n cursor: pointer;\n }\n"])));
|
|
20333
|
-
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$
|
|
20333
|
+
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$j, templateObject_6$f, templateObject_7$e, templateObject_8$b;
|
|
20334
20334
|
|
|
20335
20335
|
function AutoshipOfferCardCta(_a) {
|
|
20336
20336
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, buttonCopy = _a.buttonCopy;
|
|
@@ -20352,14 +20352,14 @@ var ContainerBase$3 = newStyled.div(templateObject_1$v || (templateObject_1$v =
|
|
|
20352
20352
|
var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n background-color: #fff3e34d;\n"])));
|
|
20353
20353
|
var SubscriptionHeader$3 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
20354
20354
|
newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20355
|
-
newStyled.div(templateObject_5$
|
|
20355
|
+
newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
20356
20356
|
newStyled(Text$7)(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
20357
20357
|
var Container$o = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20358
20358
|
var Benefits$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 8px;\n height: ", ";\n border-radius: 8px;\n"])), function (_a) {
|
|
20359
20359
|
var height = _a.height;
|
|
20360
20360
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20361
20361
|
});
|
|
20362
|
-
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$j, templateObject_5$
|
|
20362
|
+
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$j, templateObject_5$i, templateObject_6$e, templateObject_7$d, templateObject_8$a;
|
|
20363
20363
|
|
|
20364
20364
|
var renderCopy = function (copy) {
|
|
20365
20365
|
if (typeof copy === 'string') {
|
|
@@ -20452,10 +20452,10 @@ var ContainerWrapper$2 = newStyled.div(templateObject_1$t || (templateObject_1$t
|
|
|
20452
20452
|
var ImageWrapper = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n @media (max-width: 480px) {\n width: 102px;\n height: 123px;\n }\n"])));
|
|
20453
20453
|
var ImageComponent = newStyled(Image$3)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"], ["\n max-width: 132px;\n max-height: 160px;\n border-radius: 6px;\n position: relative;\n @media (max-width: 480px) {\n max-width: 102px;\n max-height: 123px;\n }\n"])));
|
|
20454
20454
|
var RightComponentWrapper = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 4px;\n padding: 5px;\n @media (max-width: 401px) {\n gap: 0px;\n padding: 0px;\n }\n"])));
|
|
20455
|
-
var TitleWrapper$1 = newStyled.div(templateObject_5$
|
|
20455
|
+
var TitleWrapper$1 = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n"], ["\n display: flex;\n flex-direction: row;\n"])));
|
|
20456
20456
|
var SubTitleWrapper = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"])));
|
|
20457
20457
|
var ButtonsWrapper = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
20458
|
-
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$i, templateObject_5$
|
|
20458
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$i, templateObject_5$h, templateObject_6$d, templateObject_7$c;
|
|
20459
20459
|
|
|
20460
20460
|
function CartItemCard(_a) {
|
|
20461
20461
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20519,7 +20519,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$h ||
|
|
|
20519
20519
|
var onClick = _a.onClick;
|
|
20520
20520
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20521
20521
|
});
|
|
20522
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
20522
|
+
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20523
20523
|
var SubscriptionHeader$2 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20524
20524
|
var isSelected = _a.isSelected;
|
|
20525
20525
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
@@ -20544,7 +20544,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20544
20544
|
: Shades200Color$1;
|
|
20545
20545
|
});
|
|
20546
20546
|
var Container$n = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20547
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$
|
|
20547
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$g, templateObject_6$c, templateObject_7$b, templateObject_8$9, templateObject_9$8, templateObject_10$6, templateObject_11$4;
|
|
20548
20548
|
|
|
20549
20549
|
var ClubOfferSelector = function (_a) {
|
|
20550
20550
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
@@ -20622,7 +20622,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$g ||
|
|
|
20622
20622
|
var onClick = _a.onClick;
|
|
20623
20623
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20624
20624
|
});
|
|
20625
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20625
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
20626
20626
|
var SubscriptionHeader$1 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: ", ";\n padding-bottom: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
20627
20627
|
var isSelected = _a.isSelected;
|
|
20628
20628
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20648,7 +20648,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20648
20648
|
});
|
|
20649
20649
|
var Container$m = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20650
20650
|
var TermsText = newStyled(Text$7)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n font-size: 10px;\n line-height: 10px;\n margin-bottom: 8px;\n\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20651
|
-
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$
|
|
20651
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$f, templateObject_6$b, templateObject_7$a, templateObject_8$8, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
20652
20652
|
|
|
20653
20653
|
var ClubOfferSelector2 = function (_a) {
|
|
20654
20654
|
var pricing = _a.pricing, clubOfferBenefits = _a.clubOfferBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, _b = _a.currencySymbol, currencySymbol = _b === void 0 ? '$' : _b, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, termsTextLink = _a.termsTextLink;
|
|
@@ -20704,8 +20704,8 @@ var ContainerWrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q
|
|
|
20704
20704
|
var CardHeaderWrapper = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n"])));
|
|
20705
20705
|
var CardBody = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"], ["\n display: flex;\n flex-direction: row;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n text-align: left;\n color: #292929;\n gap: 4px;\n a {\n color: #292929;\n text-decoration: underline;\n }\n"])));
|
|
20706
20706
|
var ClubCopyWrapper = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 5px;\n"])));
|
|
20707
|
-
var ClubCopyTextWrapper = newStyled.div(templateObject_5$
|
|
20708
|
-
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$
|
|
20707
|
+
var ClubCopyTextWrapper = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 600;\n line-height: 22px;\n"])));
|
|
20708
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$e;
|
|
20709
20709
|
|
|
20710
20710
|
function Card(_a) {
|
|
20711
20711
|
var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
|
|
@@ -20740,8 +20740,8 @@ var Benefits = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeT
|
|
|
20740
20740
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20741
20741
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20742
20742
|
});
|
|
20743
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20744
|
-
var templateObject_1$o, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$
|
|
20743
|
+
var Actions = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n"])));
|
|
20744
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$d;
|
|
20745
20745
|
|
|
20746
20746
|
var getTitleProps = function (_a) {
|
|
20747
20747
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20802,8 +20802,8 @@ var ContainerV2 = newStyled.div(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
20802
20802
|
var ActionsV2 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"], ["\n display: flex;\n width: 100%;\n gap: 8px;\n flex-direction: column;\n"])));
|
|
20803
20803
|
var SizeCardItem = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"], ["\n width: 59px;\n height: 36px;\n border-radius: 8px;\n border: 1px 0px 0px 0px;\n border-color: #bbbbbb;\n border-style: solid;\n border-width: 1px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n @media only screen and (max-width: 375px) {\n width: 45px !important;\n font-size: 11px !important;\n }\n"])));
|
|
20804
20804
|
var SizeCardWrapper = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"], ["\n display: grid;\n gap: 4px;\n grid-template-columns: repeat(5, 1fr);\n\n @media only screen and (max-width: 375px) {\n grid-template-columns: repeat(5, 1fr);\n }\n"])));
|
|
20805
|
-
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$
|
|
20806
|
-
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$
|
|
20805
|
+
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n"])));
|
|
20806
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$c;
|
|
20807
20807
|
|
|
20808
20808
|
var SizeOptions = function (_a) {
|
|
20809
20809
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20823,16 +20823,17 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20823
20823
|
return (jsxs$1(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsx$1(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxs$1(Body$1, { children: [src && alt && (jsx$1(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsx$1(RightContent, { children: jsx$1(Benefits, { children: jsx$1(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsx$1("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsx$1(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20824
20824
|
};
|
|
20825
20825
|
|
|
20826
|
-
var Container$k = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap:
|
|
20827
|
-
var QuatityLabel$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width:
|
|
20826
|
+
var Container$k = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"], ["\n display: flex;\n width: 100%;\n padding: ", ";\n gap: 20px;\n background-color: #f6f0e7;\n align-items: center;\n @media (max-width: 767px) {\n gap: 15px;\n }\n"])), function (props) { return (props.isMobile ? '16px 8px' : '20px 12px'); });
|
|
20827
|
+
var QuatityLabel$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"], ["\n background: #d4605b;\n border-radius: 50%;\n width: 53px;\n height: 53px;\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 53px;\n @media (max-width: 767px) {\n min-width: 56px;\n width: 56px;\n height: 56px;\n }\n"])));
|
|
20828
20828
|
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20829
|
-
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === ComponentSize.XSmall ? '8px' : '
|
|
20830
|
-
var
|
|
20829
|
+
var ButtonSecondaryNoWrap = newStyled(ButtonSecondary)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n padding: ", ";\n white-space: nowrap;\n"], ["\n padding: ", ";\n white-space: nowrap;\n"])), function (props) { return (props.size === ComponentSize.XSmall ? '8px' : '14px 32px'); });
|
|
20830
|
+
var ContentWrapper = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 6px;\n"])));
|
|
20831
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$c, templateObject_5$b;
|
|
20831
20832
|
|
|
20832
20833
|
var OfferAtCartV3 = function (_a) {
|
|
20833
20834
|
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
20834
20835
|
var isMobile = useDeviceType() === 'mobile';
|
|
20835
|
-
return (jsxs$1(Container$k, __assign$1({ isMobile: isMobile, className: className }, { children: [jsx$1(QuatityLabel$1, { children: quantity }, void 0), jsx$1(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? '
|
|
20836
|
+
return (jsxs$1(Container$k, __assign$1({ isMobile: isMobile, className: className }, { children: [jsx$1(QuatityLabel$1, { children: quantity }, void 0), jsxs$1(ContentWrapper, { children: [jsx$1(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? 'xsmall' : 'regular' }, { children: titleContent }), void 0), jsx$1(ButtonSecondaryNoWrap, { onClick: onAddToCart, size: isMobile ? ComponentSize.XSmall : ComponentSize.Large, text: ctaText }, void 0)] }, void 0)] }), void 0));
|
|
20836
20837
|
};
|
|
20837
20838
|
|
|
20838
20839
|
var Container$j = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"], ["\n display: flex;\n width: 100%;\n padding: 16px;\n border: 1px solid #d1d1d1;\n border-radius: 8px;\n gap: 14px;\n margin: auto;\n background-color: #fff;\n"])));
|