@trafilea/afrodita-components 6.51.2 → 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.d.ts +1 -0
- package/build/index.esm.js +96 -95
- package/build/index.esm.js.map +1 -1
- package/build/index.js +96 -95
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4902,7 +4902,7 @@ var TAGS = {
|
|
|
4902
4902
|
hero2: newStyled.h2(templateObject_2$1J || (templateObject_2$1J = __makeTemplateObject([""], [""]))),
|
|
4903
4903
|
hero3: newStyled.h3(templateObject_3$1m || (templateObject_3$1m = __makeTemplateObject([""], [""]))),
|
|
4904
4904
|
display1: newStyled.h1(templateObject_4$15 || (templateObject_4$15 = __makeTemplateObject([""], [""]))),
|
|
4905
|
-
display2: newStyled.h2(templateObject_5$
|
|
4905
|
+
display2: newStyled.h2(templateObject_5$S || (templateObject_5$S = __makeTemplateObject([""], [""]))),
|
|
4906
4906
|
display3: newStyled.h3(templateObject_6$J || (templateObject_6$J = __makeTemplateObject([""], [""]))),
|
|
4907
4907
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4908
4908
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
@@ -5038,13 +5038,13 @@ var DEFAULTS = {
|
|
|
5038
5038
|
size: 'regular',
|
|
5039
5039
|
},
|
|
5040
5040
|
};
|
|
5041
|
-
var templateObject_1$2k, templateObject_2$1J, templateObject_3$1m, templateObject_4$15, templateObject_5$
|
|
5041
|
+
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;
|
|
5042
5042
|
|
|
5043
5043
|
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"])));
|
|
5044
5044
|
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"])));
|
|
5045
5045
|
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"])));
|
|
5046
5046
|
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"])));
|
|
5047
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
5047
|
+
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"])));
|
|
5048
5048
|
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"])));
|
|
5049
5049
|
var PackSelectorV2 = function (_a) {
|
|
5050
5050
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
@@ -5070,7 +5070,7 @@ var PackCard$1 = function (_a) {
|
|
|
5070
5070
|
currency: currencyCode || 'USD',
|
|
5071
5071
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
5072
5072
|
};
|
|
5073
|
-
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$
|
|
5073
|
+
var templateObject_1$2j, templateObject_2$1I, templateObject_3$1l, templateObject_4$14, templateObject_5$R, templateObject_6$I;
|
|
5074
5074
|
|
|
5075
5075
|
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"])));
|
|
5076
5076
|
var DropContainer = newStyled.div(templateObject_2$1H || (templateObject_2$1H = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -5366,8 +5366,8 @@ var Container$1o = newStyled.div(templateObject_1$2d || (templateObject_1$2d = _
|
|
|
5366
5366
|
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"])));
|
|
5367
5367
|
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"])));
|
|
5368
5368
|
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"])));
|
|
5369
|
-
var FlexStart = newStyled.div(templateObject_5$
|
|
5370
|
-
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$
|
|
5369
|
+
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"])));
|
|
5370
|
+
var templateObject_1$2d, templateObject_2$1E, templateObject_3$1j, templateObject_4$13, templateObject_5$Q;
|
|
5371
5371
|
|
|
5372
5372
|
var CouponCard = function (_a) {
|
|
5373
5373
|
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;
|
|
@@ -6126,7 +6126,7 @@ var TooltipContainer = newStyled.div(templateObject_2$1z || (templateObject_2$1z
|
|
|
6126
6126
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6127
6127
|
return actual === expected ? margin : '0';
|
|
6128
6128
|
};
|
|
6129
|
-
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) {
|
|
6129
|
+
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) {
|
|
6130
6130
|
var borderColor = _a.borderColor;
|
|
6131
6131
|
return borderColor;
|
|
6132
6132
|
}, function (_a) {
|
|
@@ -6143,7 +6143,7 @@ var TooltipText = newStyled.div(templateObject_4$11 || (templateObject_4$11 = __
|
|
|
6143
6143
|
var color = _a.color;
|
|
6144
6144
|
return color;
|
|
6145
6145
|
});
|
|
6146
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
6146
|
+
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"])));
|
|
6147
6147
|
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) {
|
|
6148
6148
|
var color = _a.color;
|
|
6149
6149
|
return color;
|
|
@@ -6153,7 +6153,7 @@ var CloseToolTip = newStyled.button(templateObject_8$s || (templateObject_8$s =
|
|
|
6153
6153
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
6154
6154
|
return right;
|
|
6155
6155
|
});
|
|
6156
|
-
var templateObject_1$26, templateObject_2$1z, templateObject_3$1g, templateObject_4$11, templateObject_5$
|
|
6156
|
+
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;
|
|
6157
6157
|
|
|
6158
6158
|
var Tooltip = function (_a) {
|
|
6159
6159
|
var _b;
|
|
@@ -6173,7 +6173,7 @@ var Tooltip = function (_a) {
|
|
|
6173
6173
|
var ref = tooltipRef.current;
|
|
6174
6174
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
6175
6175
|
}, [tooltipRef]);
|
|
6176
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsxs(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) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(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)), jsxRuntime.jsxs(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 && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
|
|
6176
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsxs(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) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(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)), jsxRuntime.jsxs(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 && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$6, { children: React__default["default"].createElement(header.Icon, {
|
|
6177
6177
|
testId: 'HeaderIcon',
|
|
6178
6178
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
6179
6179
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
@@ -6216,7 +6216,7 @@ var SinglePurchaseContainer$4 = newStyled(ContainerBase$5)(templateObject_3$1f |
|
|
|
6216
6216
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6217
6217
|
});
|
|
6218
6218
|
var SubscriptionContainer$5 = newStyled(ContainerBase$5)(templateObject_4$10 || (templateObject_4$10 = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
6219
|
-
var SubscriptionHeader$5 = newStyled.div(templateObject_5$
|
|
6219
|
+
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) {
|
|
6220
6220
|
var theme = _a.theme;
|
|
6221
6221
|
return theme.colors.shades[200].color;
|
|
6222
6222
|
}, function (_a) {
|
|
@@ -6234,7 +6234,7 @@ var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateOb
|
|
|
6234
6234
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6235
6235
|
});
|
|
6236
6236
|
var Container$1k = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6237
|
-
var templateObject_1$25, templateObject_2$1y, templateObject_3$1f, templateObject_4$10, templateObject_5$
|
|
6237
|
+
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;
|
|
6238
6238
|
|
|
6239
6239
|
var radioIds$3 = {
|
|
6240
6240
|
oneTime: {
|
|
@@ -6326,7 +6326,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$4)(templateObject_4$$ ||
|
|
|
6326
6326
|
var onClick = _a.onClick;
|
|
6327
6327
|
return (onClick ? 'cursor: pointer;' : '');
|
|
6328
6328
|
});
|
|
6329
|
-
var SubscriptionContainer$4 = newStyled(ContainerBase$4)(templateObject_5$
|
|
6329
|
+
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"])));
|
|
6330
6330
|
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) {
|
|
6331
6331
|
var theme = _a.theme;
|
|
6332
6332
|
return theme.colors.shades[200].color;
|
|
@@ -6347,7 +6347,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6347
6347
|
var theme = _a.theme;
|
|
6348
6348
|
return theme.component.autoship.tooltip.margin;
|
|
6349
6349
|
});
|
|
6350
|
-
var templateObject_1$24, templateObject_2$1x, templateObject_3$1e, templateObject_4$$, templateObject_5$
|
|
6350
|
+
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;
|
|
6351
6351
|
|
|
6352
6352
|
var radioIds$2 = {
|
|
6353
6353
|
oneTime: {
|
|
@@ -6430,9 +6430,9 @@ var CustomerDetails = newStyled.div(templateObject_1$23 || (templateObject_1$23
|
|
|
6430
6430
|
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"])));
|
|
6431
6431
|
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"])));
|
|
6432
6432
|
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"])));
|
|
6433
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
6433
|
+
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"])));
|
|
6434
6434
|
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"])));
|
|
6435
|
-
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$
|
|
6435
|
+
var templateObject_1$23, templateObject_2$1w, templateObject_3$1d, templateObject_4$_, templateObject_5$M, templateObject_6$E;
|
|
6436
6436
|
|
|
6437
6437
|
var NameWithStars = function (_a) {
|
|
6438
6438
|
var name = _a.name, size = _a.size;
|
|
@@ -6721,7 +6721,7 @@ var Container$1c = newStyled.div(templateObject_1$1R || (templateObject_1$1R = _
|
|
|
6721
6721
|
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"])));
|
|
6722
6722
|
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"])));
|
|
6723
6723
|
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"])));
|
|
6724
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6724
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6725
6725
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$D || (templateObject_6$D = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6726
6726
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$w || (templateObject_7$w = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6727
6727
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$p || (templateObject_8$p = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6730,7 +6730,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6730
6730
|
var isMobile = useWindowDimensions().isMobile;
|
|
6731
6731
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$1c, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6732
6732
|
};
|
|
6733
|
-
var templateObject_1$1R, templateObject_2$1r, templateObject_3$18, templateObject_4$W, templateObject_5$
|
|
6733
|
+
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;
|
|
6734
6734
|
|
|
6735
6735
|
var Spacing = function (_a) {
|
|
6736
6736
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -7091,9 +7091,9 @@ var Container$17 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
7091
7091
|
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; });
|
|
7092
7092
|
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"])));
|
|
7093
7093
|
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"])));
|
|
7094
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
7094
|
+
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"])));
|
|
7095
7095
|
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"])));
|
|
7096
|
-
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$
|
|
7096
|
+
var templateObject_1$1F, templateObject_2$1j, templateObject_3$14, templateObject_4$T, templateObject_5$K, templateObject_6$C;
|
|
7097
7097
|
|
|
7098
7098
|
var Video$1 = function (_a) {
|
|
7099
7099
|
var _b, _c, _d, _e;
|
|
@@ -7250,7 +7250,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1C || (templateObject_
|
|
|
7250
7250
|
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"])));
|
|
7251
7251
|
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"])));
|
|
7252
7252
|
var PriceContainerV2 = newStyled.span(templateObject_4$S || (templateObject_4$S = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
7253
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
7253
|
+
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"])));
|
|
7254
7254
|
var RegularPriceTag = function () {
|
|
7255
7255
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
7256
7256
|
};
|
|
@@ -7304,7 +7304,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
7304
7304
|
? finalPriceArray[0]
|
|
7305
7305
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price$1, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
7306
7306
|
};
|
|
7307
|
-
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$
|
|
7307
|
+
var templateObject_1$1C, templateObject_2$1h, templateObject_3$13, templateObject_4$S, templateObject_5$J;
|
|
7308
7308
|
|
|
7309
7309
|
var STYLES_BY_THEME = {
|
|
7310
7310
|
TheSpaDr: {
|
|
@@ -7431,7 +7431,7 @@ var getStylesBySize$b = function (size) {
|
|
|
7431
7431
|
};
|
|
7432
7432
|
}
|
|
7433
7433
|
};
|
|
7434
|
-
var TopTagContainer$9 = newStyled.div(templateObject_5$
|
|
7434
|
+
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) {
|
|
7435
7435
|
var style = _a.style;
|
|
7436
7436
|
return style.width;
|
|
7437
7437
|
});
|
|
@@ -7441,7 +7441,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$B || (templateObject_6
|
|
|
7441
7441
|
});
|
|
7442
7442
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7443
7443
|
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"])));
|
|
7444
|
-
var templateObject_1$1B, templateObject_2$1g, templateObject_3$12, templateObject_4$R, templateObject_5$
|
|
7444
|
+
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;
|
|
7445
7445
|
|
|
7446
7446
|
var ProductItemMobile = function (_a) {
|
|
7447
7447
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7587,7 +7587,7 @@ var getStylesBySize$a = function (size) {
|
|
|
7587
7587
|
};
|
|
7588
7588
|
}
|
|
7589
7589
|
};
|
|
7590
|
-
var TopTagContainer$8 = newStyled.div(templateObject_5$
|
|
7590
|
+
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) {
|
|
7591
7591
|
var style = _a.style;
|
|
7592
7592
|
return style.width;
|
|
7593
7593
|
});
|
|
@@ -7647,7 +7647,7 @@ var ProductItemTK = function (_a) {
|
|
|
7647
7647
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
7648
7648
|
} }, { 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));
|
|
7649
7649
|
};
|
|
7650
|
-
var templateObject_1$1A, templateObject_2$1f, templateObject_3$11, templateObject_4$Q, templateObject_5$
|
|
7650
|
+
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;
|
|
7651
7651
|
|
|
7652
7652
|
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"])));
|
|
7653
7653
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -7671,7 +7671,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1y || (templateObject_1$1y
|
|
|
7671
7671
|
newStyled(lt.Label)(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7672
7672
|
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"])));
|
|
7673
7673
|
var Span = newStyled.span(templateObject_4$P || (templateObject_4$P = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7674
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
7674
|
+
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"])));
|
|
7675
7675
|
var Label$5 = function (_a) {
|
|
7676
7676
|
var label = _a.label, values = _a.values;
|
|
7677
7677
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -7689,7 +7689,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
7689
7689
|
Option: Option,
|
|
7690
7690
|
OptionsContainer: OptionsContainer,
|
|
7691
7691
|
});
|
|
7692
|
-
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$
|
|
7692
|
+
var templateObject_1$1y, templateObject_2$1e, templateObject_3$10, templateObject_4$P, templateObject_5$G;
|
|
7693
7693
|
|
|
7694
7694
|
var OneColorSelector = function (_a) {
|
|
7695
7695
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
@@ -7823,14 +7823,14 @@ var Row$2 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __makeTemp
|
|
|
7823
7823
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
7824
7824
|
});
|
|
7825
7825
|
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; });
|
|
7826
|
-
var H3 = newStyled.h3(templateObject_5$
|
|
7826
|
+
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; });
|
|
7827
7827
|
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; });
|
|
7828
7828
|
var CrossSellCheckbox = function (_a) {
|
|
7829
7829
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
7830
7830
|
var theme = useTheme();
|
|
7831
7831
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
7832
7832
|
};
|
|
7833
|
-
var templateObject_1$1v, templateObject_2$1b, templateObject_3$$, templateObject_4$O, templateObject_5$
|
|
7833
|
+
var templateObject_1$1v, templateObject_2$1b, templateObject_3$$, templateObject_4$O, templateObject_5$F, templateObject_6$z;
|
|
7834
7834
|
|
|
7835
7835
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
7836
7836
|
__proto__: null,
|
|
@@ -8005,7 +8005,7 @@ var Col = newStyled.div(templateObject_4$M || (templateObject_4$M = __makeTempla
|
|
|
8005
8005
|
textAlign: ['center', 'inherit'],
|
|
8006
8006
|
width: ['100%', 'inherit'],
|
|
8007
8007
|
}));
|
|
8008
|
-
var IconContainer$4 = newStyled.div(templateObject_5$
|
|
8008
|
+
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({
|
|
8009
8009
|
marginRight: ['0', '0.438rem'],
|
|
8010
8010
|
marginBottom: ['10px', '0'],
|
|
8011
8011
|
width: ['auto', '1.5rem'],
|
|
@@ -8033,7 +8033,7 @@ var DeliveryDetails = function (_a) {
|
|
|
8033
8033
|
var theme = useTheme();
|
|
8034
8034
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$4, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
8035
8035
|
};
|
|
8036
|
-
var templateObject_1$1s, templateObject_2$18, templateObject_3$Z, templateObject_4$M, templateObject_5$
|
|
8036
|
+
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;
|
|
8037
8037
|
|
|
8038
8038
|
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) {
|
|
8039
8039
|
var top = _a.top;
|
|
@@ -8100,9 +8100,9 @@ var List = newStyled.ul(templateObject_1$1q || (templateObject_1$1q = __makeTemp
|
|
|
8100
8100
|
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"])));
|
|
8101
8101
|
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"])));
|
|
8102
8102
|
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"])));
|
|
8103
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
8103
|
+
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; });
|
|
8104
8104
|
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; });
|
|
8105
|
-
var templateObject_1$1q, templateObject_2$16, templateObject_3$Y, templateObject_4$L, templateObject_5$
|
|
8105
|
+
var templateObject_1$1q, templateObject_2$16, templateObject_3$Y, templateObject_4$L, templateObject_5$D, templateObject_6$x;
|
|
8106
8106
|
|
|
8107
8107
|
var DropdownListIcons = function (_a) {
|
|
8108
8108
|
var items = _a.items;
|
|
@@ -8119,9 +8119,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1p || (templateObject_1$1
|
|
|
8119
8119
|
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"])));
|
|
8120
8120
|
var SizeLabel = newStyled.span(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8121
8121
|
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"])));
|
|
8122
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
8122
|
+
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"])));
|
|
8123
8123
|
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"])));
|
|
8124
|
-
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$
|
|
8124
|
+
var templateObject_1$1p, templateObject_2$15, templateObject_3$X, templateObject_4$K, templateObject_5$C, templateObject_6$w;
|
|
8125
8125
|
|
|
8126
8126
|
var SizeDropdown = function (_a) {
|
|
8127
8127
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -8152,7 +8152,7 @@ var DialogDropdownListContainer = newStyled.ul(templateObject_3$W || (templateOb
|
|
|
8152
8152
|
return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
|
|
8153
8153
|
});
|
|
8154
8154
|
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"])));
|
|
8155
|
-
var DialogDropdownLink = newStyled.a(templateObject_5$
|
|
8155
|
+
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"])));
|
|
8156
8156
|
var DropdownDialog = function (_a) {
|
|
8157
8157
|
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;
|
|
8158
8158
|
var theme = useTheme$1();
|
|
@@ -8161,7 +8161,7 @@ var DropdownDialog = function (_a) {
|
|
|
8161
8161
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
8162
8162
|
}) }), void 0) }), void 0));
|
|
8163
8163
|
};
|
|
8164
|
-
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$
|
|
8164
|
+
var templateObject_1$1o, templateObject_2$14, templateObject_3$W, templateObject_4$J, templateObject_5$B;
|
|
8165
8165
|
|
|
8166
8166
|
function FilteringDropdown(_a) {
|
|
8167
8167
|
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;
|
|
@@ -8210,13 +8210,13 @@ var SectionContent = newStyled.div(templateObject_1$1m || (templateObject_1$1m =
|
|
|
8210
8210
|
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"])));
|
|
8211
8211
|
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"])));
|
|
8212
8212
|
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"])));
|
|
8213
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
8213
|
+
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; });
|
|
8214
8214
|
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; });
|
|
8215
8215
|
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'); });
|
|
8216
8216
|
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; });
|
|
8217
8217
|
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"])));
|
|
8218
8218
|
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"])));
|
|
8219
|
-
var templateObject_1$1m, templateObject_2$12, templateObject_3$U, templateObject_4$H, templateObject_5$
|
|
8219
|
+
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;
|
|
8220
8220
|
|
|
8221
8221
|
var getStylesBySize$9 = function (size, theme) {
|
|
8222
8222
|
switch (size) {
|
|
@@ -12814,11 +12814,11 @@ var Container$Z = newStyled.div(templateObject_3$S || (templateObject_3$S = __ma
|
|
|
12814
12814
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
12815
12815
|
});
|
|
12816
12816
|
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"])));
|
|
12817
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
12817
|
+
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"])));
|
|
12818
12818
|
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"])));
|
|
12819
12819
|
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"])));
|
|
12820
12820
|
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"])));
|
|
12821
|
-
var templateObject_1$1g, templateObject_2$_, templateObject_3$S, templateObject_4$G, templateObject_5$
|
|
12821
|
+
var templateObject_1$1g, templateObject_2$_, templateObject_3$S, templateObject_4$G, templateObject_5$z, templateObject_6$u, templateObject_7$r, templateObject_8$k;
|
|
12822
12822
|
|
|
12823
12823
|
var getLoadingProp = function (index, itemsOnViewport) {
|
|
12824
12824
|
var loading = 'eager';
|
|
@@ -14462,7 +14462,7 @@ var BottomTagContainer$7 = newStyled.div(templateObject_3$R || (templateObject_3
|
|
|
14462
14462
|
return (isCTAHidden ? '60px' : '120px');
|
|
14463
14463
|
});
|
|
14464
14464
|
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"])));
|
|
14465
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_5$
|
|
14465
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
|
|
14466
14466
|
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"])));
|
|
14467
14467
|
var ImageStyled = newStyled(Image$3)(templateObject_7$q || (templateObject_7$q = __makeTemplateObject(["\n aspect-ratio: ", ";\n"], ["\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
14468
14468
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
@@ -14472,7 +14472,7 @@ var InnerImageZoomStyled = newStyled(InnerImageZoom)(templateObject_8$j || (temp
|
|
|
14472
14472
|
var theme = _a.theme, isRatioSquare = _a.isRatioSquare;
|
|
14473
14473
|
return isRatioSquare ? '1 / 1' : theme.component.gallery.aspectRatio;
|
|
14474
14474
|
});
|
|
14475
|
-
var templateObject_1$1f, templateObject_2$Z, templateObject_3$R, templateObject_4$F, templateObject_5$
|
|
14475
|
+
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;
|
|
14476
14476
|
|
|
14477
14477
|
var ImageProductSlide$1 = function (_a) {
|
|
14478
14478
|
var _b;
|
|
@@ -14681,7 +14681,7 @@ var InputWrapper = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
14681
14681
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
14682
14682
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
14683
14683
|
});
|
|
14684
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
14684
|
+
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) {
|
|
14685
14685
|
var theme = _a.theme;
|
|
14686
14686
|
return theme.component.input.placeholderColor;
|
|
14687
14687
|
}, function (_a) {
|
|
@@ -14695,7 +14695,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$w || (templateObject_5
|
|
|
14695
14695
|
return theme.component.input.lineHeight;
|
|
14696
14696
|
});
|
|
14697
14697
|
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"])));
|
|
14698
|
-
var templateObject_1$1a, templateObject_2$W, templateObject_3$P, templateObject_4$E, templateObject_5$
|
|
14698
|
+
var templateObject_1$1a, templateObject_2$W, templateObject_3$P, templateObject_4$E, templateObject_5$x, templateObject_6$s;
|
|
14699
14699
|
|
|
14700
14700
|
var BaseInput = function (_a) {
|
|
14701
14701
|
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"]);
|
|
@@ -14951,7 +14951,7 @@ var transformStyle = function (_a) {
|
|
|
14951
14951
|
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) {
|
|
14952
14952
|
var width = _a.width;
|
|
14953
14953
|
return width
|
|
14954
|
-
? css(templateObject_5$
|
|
14954
|
+
? css(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
14955
14955
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14956
14956
|
});
|
|
14957
14957
|
}, visibleStyle, transformStyle);
|
|
@@ -14996,7 +14996,7 @@ var useModal = function (id) {
|
|
|
14996
14996
|
close: close,
|
|
14997
14997
|
}); }, [close, open, opened]);
|
|
14998
14998
|
};
|
|
14999
|
-
var templateObject_1$15, templateObject_2$S, templateObject_3$N, templateObject_4$D, templateObject_5$
|
|
14999
|
+
var templateObject_1$15, templateObject_2$S, templateObject_3$N, templateObject_4$D, templateObject_5$w, templateObject_6$r, templateObject_7$p;
|
|
15000
15000
|
|
|
15001
15001
|
var htmlReactParser = {exports: {}};
|
|
15002
15002
|
|
|
@@ -18878,7 +18878,7 @@ var Container$O = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __
|
|
|
18878
18878
|
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"])));
|
|
18879
18879
|
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"])));
|
|
18880
18880
|
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"])));
|
|
18881
|
-
var Check = newStyled.div(templateObject_5$
|
|
18881
|
+
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"])));
|
|
18882
18882
|
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"])));
|
|
18883
18883
|
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"])));
|
|
18884
18884
|
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"])));
|
|
@@ -18911,7 +18911,7 @@ var PackCard = function (_a) {
|
|
|
18911
18911
|
currency: currencyCode || 'USD',
|
|
18912
18912
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18913
18913
|
};
|
|
18914
|
-
var templateObject_1$12, templateObject_2$P, templateObject_3$M, templateObject_4$C, templateObject_5$
|
|
18914
|
+
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;
|
|
18915
18915
|
|
|
18916
18916
|
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"])));
|
|
18917
18917
|
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"])));
|
|
@@ -19055,7 +19055,7 @@ var PriceContainer = newStyled.div(templateObject_4$A || (templateObject_4$A = _
|
|
|
19055
19055
|
})
|
|
19056
19056
|
: 'justify-content: end';
|
|
19057
19057
|
});
|
|
19058
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
19058
|
+
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"])));
|
|
19059
19059
|
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"])));
|
|
19060
19060
|
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) {
|
|
19061
19061
|
var theme = _a.theme;
|
|
@@ -19067,7 +19067,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
19067
19067
|
var theme = useTheme();
|
|
19068
19068
|
return (jsxRuntime.jsxs(Container$L, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$3, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), subtitle && (jsxRuntime.jsx(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 && jsxRuntime.jsx(Gift, { children: "Limited Time Only" }, void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), isGift ? (jsxRuntime.jsx(Gift, { children: "GIFT" }, void 0)) : (jsxRuntime.jsx(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));
|
|
19069
19069
|
};
|
|
19070
|
-
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$A, templateObject_5$
|
|
19070
|
+
var templateObject_1$$, templateObject_2$N, templateObject_3$K, templateObject_4$A, templateObject_5$u, templateObject_6$p, templateObject_7$n;
|
|
19071
19071
|
|
|
19072
19072
|
var P$1 = newStyled.p(function (_a) {
|
|
19073
19073
|
var color = _a.color;
|
|
@@ -19382,7 +19382,7 @@ var Container$G = newStyled.div(templateObject_1$W || (templateObject_1$W = __ma
|
|
|
19382
19382
|
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"])));
|
|
19383
19383
|
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"])));
|
|
19384
19384
|
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"])));
|
|
19385
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
19385
|
+
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"])));
|
|
19386
19386
|
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"])));
|
|
19387
19387
|
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"])));
|
|
19388
19388
|
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"])));
|
|
@@ -19419,7 +19419,7 @@ var Review$1 = function (_a) {
|
|
|
19419
19419
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer$2, { children: image &&
|
|
19420
19420
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$3, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
19421
19421
|
};
|
|
19422
|
-
var templateObject_1$W, templateObject_2$J, templateObject_3$G, templateObject_4$y, templateObject_5$
|
|
19422
|
+
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;
|
|
19423
19423
|
|
|
19424
19424
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
19425
19425
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
@@ -19427,7 +19427,7 @@ var Container$F = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
19427
19427
|
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"])));
|
|
19428
19428
|
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"])));
|
|
19429
19429
|
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"])));
|
|
19430
|
-
var DateText = newStyled.span(templateObject_5$
|
|
19430
|
+
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"])));
|
|
19431
19431
|
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"])));
|
|
19432
19432
|
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"])));
|
|
19433
19433
|
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"])));
|
|
@@ -19475,13 +19475,13 @@ var Review = function (_a) {
|
|
|
19475
19475
|
: description,
|
|
19476
19476
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
19477
19477
|
};
|
|
19478
|
-
var templateObject_1$V, templateObject_2$I, templateObject_3$F, templateObject_4$x, templateObject_5$
|
|
19478
|
+
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;
|
|
19479
19479
|
|
|
19480
19480
|
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"])));
|
|
19481
19481
|
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"])));
|
|
19482
19482
|
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"])));
|
|
19483
19483
|
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"])));
|
|
19484
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
19484
|
+
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"])));
|
|
19485
19485
|
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"])));
|
|
19486
19486
|
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) {
|
|
19487
19487
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -19493,7 +19493,7 @@ var ReviewsHeader = function (_a) {
|
|
|
19493
19493
|
var theme = useTheme();
|
|
19494
19494
|
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19495
19495
|
};
|
|
19496
|
-
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$
|
|
19496
|
+
var templateObject_1$U, templateObject_2$H, templateObject_3$E, templateObject_4$w, templateObject_5$r, templateObject_6$m, templateObject_7$k;
|
|
19497
19497
|
|
|
19498
19498
|
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"])));
|
|
19499
19499
|
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; });
|
|
@@ -19711,8 +19711,8 @@ var Container$y = newStyled.div(templateObject_1$O || (templateObject_1$O = __ma
|
|
|
19711
19711
|
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"])));
|
|
19712
19712
|
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"])));
|
|
19713
19713
|
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"])));
|
|
19714
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19715
|
-
var templateObject_1$O, templateObject_2$E, templateObject_3$C, templateObject_4$v, templateObject_5$
|
|
19714
|
+
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"])));
|
|
19715
|
+
var templateObject_1$O, templateObject_2$E, templateObject_3$C, templateObject_4$v, templateObject_5$q;
|
|
19716
19716
|
|
|
19717
19717
|
var SearchNavigation = function (_a) {
|
|
19718
19718
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
@@ -19744,13 +19744,13 @@ var TableElement$3 = newStyled.table(templateObject_1$M || (templateObject_1$M =
|
|
|
19744
19744
|
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; });
|
|
19745
19745
|
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; });
|
|
19746
19746
|
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"])));
|
|
19747
|
-
var TopLabel$1 = newStyled(Label$2)(templateObject_5$
|
|
19747
|
+
var TopLabel$1 = newStyled(Label$2)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19748
19748
|
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"])));
|
|
19749
19749
|
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"])));
|
|
19750
19750
|
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"])));
|
|
19751
19751
|
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"])));
|
|
19752
19752
|
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; });
|
|
19753
|
-
var templateObject_1$M, templateObject_2$C, templateObject_3$A, templateObject_4$u, templateObject_5$
|
|
19753
|
+
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;
|
|
19754
19754
|
|
|
19755
19755
|
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
19756
19756
|
var getCellColor$2 = function (index, cell) {
|
|
@@ -20121,12 +20121,12 @@ var ToastContent = newStyled.div(templateObject_4$q || (templateObject_4$q = __m
|
|
|
20121
20121
|
var distanceFromTop = _a.distanceFromTop;
|
|
20122
20122
|
return mobileSlideInAnimation(distanceFromTop);
|
|
20123
20123
|
});
|
|
20124
|
-
var ToastText = newStyled.p(templateObject_5$
|
|
20124
|
+
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) {
|
|
20125
20125
|
var severity = _a.severity;
|
|
20126
20126
|
return (severity === 'error' ? '#C64844' : '#292929');
|
|
20127
20127
|
});
|
|
20128
20128
|
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"])));
|
|
20129
|
-
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q, templateObject_5$
|
|
20129
|
+
var templateObject_1$C, templateObject_2$v, templateObject_3$u, templateObject_4$q, templateObject_5$o, templateObject_6$k;
|
|
20130
20130
|
|
|
20131
20131
|
var Toast = React__default["default"].forwardRef(function (_a, ref) {
|
|
20132
20132
|
var _b;
|
|
@@ -20167,7 +20167,7 @@ var Container$r = newStyled.div(templateObject_4$p || (templateObject_4$p = __ma
|
|
|
20167
20167
|
var highlightColor = _a.highlightColor;
|
|
20168
20168
|
return highlightColor;
|
|
20169
20169
|
});
|
|
20170
|
-
var TotalContainer = newStyled(Container$r)(templateObject_5$
|
|
20170
|
+
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) {
|
|
20171
20171
|
var showTotalLabel = _a.showTotalLabel;
|
|
20172
20172
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
20173
20173
|
});
|
|
@@ -20177,7 +20177,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$i || (templateObject_7$i = __
|
|
|
20177
20177
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
20178
20178
|
});
|
|
20179
20179
|
var TotalLabel = newStyled(Text$7)(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
20180
|
-
var templateObject_1$B, templateObject_2$u, templateObject_3$t, templateObject_4$p, templateObject_5$
|
|
20180
|
+
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;
|
|
20181
20181
|
|
|
20182
20182
|
var Total = function (_a) {
|
|
20183
20183
|
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;
|
|
@@ -20221,7 +20221,7 @@ var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
20221
20221
|
var CheckpointContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20222
20222
|
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; });
|
|
20223
20223
|
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'); });
|
|
20224
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
20224
|
+
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"])));
|
|
20225
20225
|
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) {
|
|
20226
20226
|
return props.finishedTrack
|
|
20227
20227
|
? props.finishedTrackColor
|
|
@@ -20269,13 +20269,13 @@ var TrackingProgressV2 = function (_a) {
|
|
|
20269
20269
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
20270
20270
|
})] }), void 0));
|
|
20271
20271
|
};
|
|
20272
|
-
var templateObject_1$z, templateObject_2$s, templateObject_3$r, templateObject_4$n, templateObject_5$
|
|
20272
|
+
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;
|
|
20273
20273
|
|
|
20274
20274
|
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"])));
|
|
20275
20275
|
var CheckpointContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
20276
20276
|
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; });
|
|
20277
20277
|
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'); });
|
|
20278
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
20278
|
+
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'); });
|
|
20279
20279
|
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) {
|
|
20280
20280
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
20281
20281
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
@@ -20309,7 +20309,7 @@ var TrackingProgress = function (_a) {
|
|
|
20309
20309
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
20310
20310
|
})] }), void 0));
|
|
20311
20311
|
};
|
|
20312
|
-
var templateObject_1$y, templateObject_2$r, templateObject_3$q, templateObject_4$m, templateObject_5$
|
|
20312
|
+
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;
|
|
20313
20313
|
|
|
20314
20314
|
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) {
|
|
20315
20315
|
var checked = _a.checked;
|
|
@@ -20318,10 +20318,10 @@ var AutoShipCardContainerWrapper$1 = newStyled.div(templateObject_1$x || (templa
|
|
|
20318
20318
|
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"])));
|
|
20319
20319
|
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"])));
|
|
20320
20320
|
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"])));
|
|
20321
|
-
var AutoShipBodyListItem$1 = newStyled.div(templateObject_5$
|
|
20321
|
+
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"])));
|
|
20322
20322
|
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"])));
|
|
20323
20323
|
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"])));
|
|
20324
|
-
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$
|
|
20324
|
+
var templateObject_1$x, templateObject_2$q, templateObject_3$p, templateObject_4$l, templateObject_5$k, templateObject_6$g, templateObject_7$f;
|
|
20325
20325
|
|
|
20326
20326
|
function AutoshipOfferCard(_a) {
|
|
20327
20327
|
var showMore = _a.showMore, copyList = _a.copyList, copy = _a.copy, handleCheckBoxChange = _a.handleCheckBoxChange, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b;
|
|
@@ -20352,11 +20352,11 @@ var AutoShipCardContainerWrapper = newStyled.div(templateObject_1$w || (template
|
|
|
20352
20352
|
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"])));
|
|
20353
20353
|
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"])));
|
|
20354
20354
|
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"])));
|
|
20355
|
-
var AutoShipBodyListItem = newStyled.div(templateObject_5$
|
|
20355
|
+
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"])));
|
|
20356
20356
|
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"])));
|
|
20357
20357
|
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"])));
|
|
20358
20358
|
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"])));
|
|
20359
|
-
var templateObject_1$w, templateObject_2$p, templateObject_3$o, templateObject_4$k, templateObject_5$
|
|
20359
|
+
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;
|
|
20360
20360
|
|
|
20361
20361
|
function AutoshipOfferCardCta(_a) {
|
|
20362
20362
|
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;
|
|
@@ -20378,14 +20378,14 @@ var ContainerBase$3 = newStyled.div(templateObject_1$v || (templateObject_1$v =
|
|
|
20378
20378
|
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"])));
|
|
20379
20379
|
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"])));
|
|
20380
20380
|
newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
20381
|
-
newStyled.div(templateObject_5$
|
|
20381
|
+
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"])));
|
|
20382
20382
|
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"])));
|
|
20383
20383
|
var Container$o = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20384
20384
|
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) {
|
|
20385
20385
|
var height = _a.height;
|
|
20386
20386
|
return height !== null && height !== void 0 ? height : '100%';
|
|
20387
20387
|
});
|
|
20388
|
-
var templateObject_1$v, templateObject_2$o, templateObject_3$n, templateObject_4$j, templateObject_5$
|
|
20388
|
+
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;
|
|
20389
20389
|
|
|
20390
20390
|
var renderCopy = function (copy) {
|
|
20391
20391
|
if (typeof copy === 'string') {
|
|
@@ -20478,10 +20478,10 @@ var ContainerWrapper$2 = newStyled.div(templateObject_1$t || (templateObject_1$t
|
|
|
20478
20478
|
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"])));
|
|
20479
20479
|
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"])));
|
|
20480
20480
|
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"])));
|
|
20481
|
-
var TitleWrapper$1 = newStyled.div(templateObject_5$
|
|
20481
|
+
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"])));
|
|
20482
20482
|
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"])));
|
|
20483
20483
|
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"])));
|
|
20484
|
-
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$i, templateObject_5$
|
|
20484
|
+
var templateObject_1$t, templateObject_2$m, templateObject_3$m, templateObject_4$i, templateObject_5$h, templateObject_6$d, templateObject_7$c;
|
|
20485
20485
|
|
|
20486
20486
|
function CartItemCard(_a) {
|
|
20487
20487
|
var style = _a.style, className = _a.className, children = _a.children;
|
|
@@ -20545,7 +20545,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$h ||
|
|
|
20545
20545
|
var onClick = _a.onClick;
|
|
20546
20546
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20547
20547
|
});
|
|
20548
|
-
var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$
|
|
20548
|
+
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"])));
|
|
20549
20549
|
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) {
|
|
20550
20550
|
var isSelected = _a.isSelected;
|
|
20551
20551
|
return (isSelected ? "1px solid ".concat(Shades200Color$1) : "none");
|
|
@@ -20570,7 +20570,7 @@ var StyledPrice$2 = newStyled(PriceLabelV2$1)(templateObject_10$6 || (templateOb
|
|
|
20570
20570
|
: Shades200Color$1;
|
|
20571
20571
|
});
|
|
20572
20572
|
var Container$n = newStyled.div(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20573
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$l, templateObject_4$h, templateObject_5$
|
|
20573
|
+
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;
|
|
20574
20574
|
|
|
20575
20575
|
var ClubOfferSelector = function (_a) {
|
|
20576
20576
|
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;
|
|
@@ -20648,7 +20648,7 @@ var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_4$g ||
|
|
|
20648
20648
|
var onClick = _a.onClick;
|
|
20649
20649
|
return (onClick ? 'cursor: pointer;' : '');
|
|
20650
20650
|
});
|
|
20651
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_5$
|
|
20651
|
+
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"])));
|
|
20652
20652
|
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) {
|
|
20653
20653
|
var isSelected = _a.isSelected;
|
|
20654
20654
|
return (isSelected ? "1px solid ".concat(Shades200Color) : "none");
|
|
@@ -20674,7 +20674,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_10$5 || (templateOb
|
|
|
20674
20674
|
});
|
|
20675
20675
|
var Container$m = newStyled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
20676
20676
|
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"])));
|
|
20677
|
-
var templateObject_1$r, templateObject_2$k, templateObject_3$k, templateObject_4$g, templateObject_5$
|
|
20677
|
+
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;
|
|
20678
20678
|
|
|
20679
20679
|
var ClubOfferSelector2 = function (_a) {
|
|
20680
20680
|
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;
|
|
@@ -20730,8 +20730,8 @@ var ContainerWrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q
|
|
|
20730
20730
|
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"])));
|
|
20731
20731
|
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"])));
|
|
20732
20732
|
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"])));
|
|
20733
|
-
var ClubCopyTextWrapper = newStyled.div(templateObject_5$
|
|
20734
|
-
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$
|
|
20733
|
+
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"])));
|
|
20734
|
+
var templateObject_1$q, templateObject_2$j, templateObject_3$j, templateObject_4$f, templateObject_5$e;
|
|
20735
20735
|
|
|
20736
20736
|
function Card(_a) {
|
|
20737
20737
|
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;
|
|
@@ -20743,13 +20743,13 @@ var StyledButton = newStyled.button(templateObject_1$p || (templateObject_1$p =
|
|
|
20743
20743
|
return customStyle && __assign$1({}, customStyle);
|
|
20744
20744
|
});
|
|
20745
20745
|
var JoinClubCard = function (_a) {
|
|
20746
|
-
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d, termsText = _a.termsText;
|
|
20746
|
+
var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d, termsText = _a.termsText, toggleColor = _a.toggleColor;
|
|
20747
20747
|
var _e = React$2.useState(isChecked), checked = _e[0], setChecked = _e[1];
|
|
20748
20748
|
var handleToggleValue = function (value) {
|
|
20749
20749
|
setChecked(value);
|
|
20750
20750
|
onCheckToggle(value);
|
|
20751
20751
|
};
|
|
20752
|
-
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
|
|
20752
|
+
return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked, color: toggleColor }, void 0)) }), void 0));
|
|
20753
20753
|
};
|
|
20754
20754
|
var templateObject_1$p;
|
|
20755
20755
|
|
|
@@ -20766,8 +20766,8 @@ var Benefits = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeT
|
|
|
20766
20766
|
var theme = _a.theme, backgroundColor = _a.backgroundColor;
|
|
20767
20767
|
return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades['10'].color;
|
|
20768
20768
|
});
|
|
20769
|
-
var Actions = newStyled.div(templateObject_5$
|
|
20770
|
-
var templateObject_1$o, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$
|
|
20769
|
+
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"])));
|
|
20770
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$i, templateObject_4$e, templateObject_5$d;
|
|
20771
20771
|
|
|
20772
20772
|
var getTitleProps = function (_a) {
|
|
20773
20773
|
var titleContent = _a.content, bold = _a.bold;
|
|
@@ -20828,8 +20828,8 @@ var ContainerV2 = newStyled.div(templateObject_1$n || (templateObject_1$n = __ma
|
|
|
20828
20828
|
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"])));
|
|
20829
20829
|
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"])));
|
|
20830
20830
|
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"])));
|
|
20831
|
-
var BottomCopyWrapper$1 = newStyled.div(templateObject_5$
|
|
20832
|
-
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$
|
|
20831
|
+
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"])));
|
|
20832
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$h, templateObject_4$d, templateObject_5$c;
|
|
20833
20833
|
|
|
20834
20834
|
var SizeOptions = function (_a) {
|
|
20835
20835
|
var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
|
|
@@ -20849,16 +20849,17 @@ var OfferAtCartV2 = function (_a) {
|
|
|
20849
20849
|
return (jsxRuntime.jsxs(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType$1.V2 : VariantType$1.V1 }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body$1, { children: [src && alt && (jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating, width: isMobile ? '90px' : '122px' }, void 0)), jsxRuntime.jsx(RightContent, { children: jsxRuntime.jsx(Benefits, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }, void 0) }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && jsxRuntime.jsx(BottomCopyWrapper$1, { children: renderBottomCopy(bottomCopy) }, void 0)] }), void 0));
|
|
20850
20850
|
};
|
|
20851
20851
|
|
|
20852
|
-
var Container$k = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n width: 100%;\n padding: ", ";\n gap:
|
|
20853
|
-
var QuatityLabel$1 = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n background: #d4605b;\n border-radius: 50%;\n width:
|
|
20852
|
+
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'); });
|
|
20853
|
+
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"])));
|
|
20854
20854
|
var TextSmallLineHeight = newStyled(Text$7)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n line-height: 17px;\n"], ["\n line-height: 17px;\n"])));
|
|
20855
|
-
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 === exports.ComponentSize.XSmall ? '8px' : '
|
|
20856
|
-
var
|
|
20855
|
+
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 === exports.ComponentSize.XSmall ? '8px' : '14px 32px'); });
|
|
20856
|
+
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"])));
|
|
20857
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$g, templateObject_4$c, templateObject_5$b;
|
|
20857
20858
|
|
|
20858
20859
|
var OfferAtCartV3 = function (_a) {
|
|
20859
20860
|
var className = _a.className, _b = _a.quantity, quantity = _b === void 0 ? '2X' : _b, titleContent = _a.title.content, onAddToCart = _a.onAddToCart, ctaText = _a.ctaText;
|
|
20860
20861
|
var isMobile = useDeviceType() === 'mobile';
|
|
20861
|
-
return (jsxRuntime.jsxs(Container$k, __assign$1({ isMobile: isMobile, className: className }, { children: [jsxRuntime.jsx(QuatityLabel$1, { children: quantity }, void 0), jsxRuntime.jsx(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? '
|
|
20862
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ isMobile: isMobile, className: className }, { children: [jsxRuntime.jsx(QuatityLabel$1, { children: quantity }, void 0), jsxRuntime.jsxs(ContentWrapper, { children: [jsxRuntime.jsx(TextSmallLineHeight, __assign$1({ variant: "body", weight: "bold", size: isMobile ? 'xsmall' : 'regular' }, { children: titleContent }), void 0), jsxRuntime.jsx(ButtonSecondaryNoWrap, { onClick: onAddToCart, size: isMobile ? exports.ComponentSize.XSmall : exports.ComponentSize.Large, text: ctaText }, void 0)] }, void 0)] }), void 0));
|
|
20862
20863
|
};
|
|
20863
20864
|
|
|
20864
20865
|
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"])));
|