@trafilea/afrodita-components 6.6.1 → 6.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +82 -59
- package/build/index.esm.js.map +1 -1
- package/build/index.js +82 -59
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4099,8 +4099,8 @@ function jsxs(type, props, key) {
|
|
|
4099
4099
|
var TAGS = {
|
|
4100
4100
|
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4101
4101
|
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4102
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4103
|
-
display1: newStyled.h1(templateObject_4$
|
|
4102
|
+
hero3: newStyled.h3(templateObject_3$W || (templateObject_3$W = __makeTemplateObject([""], [""]))),
|
|
4103
|
+
display1: newStyled.h1(templateObject_4$G || (templateObject_4$G = __makeTemplateObject([""], [""]))),
|
|
4104
4104
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4105
4105
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4106
4106
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4233,12 +4233,12 @@ var DEFAULTS = {
|
|
|
4233
4233
|
size: 'regular',
|
|
4234
4234
|
},
|
|
4235
4235
|
};
|
|
4236
|
-
var templateObject_1$1Q, templateObject_2$1c, templateObject_3$
|
|
4236
|
+
var templateObject_1$1Q, templateObject_2$1c, templateObject_3$W, templateObject_4$G, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4237
4237
|
|
|
4238
4238
|
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
4239
4239
|
var Card$3 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4240
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4241
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4240
|
+
var Tag$2 = newStyled.div(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
4241
|
+
var Label$4 = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4242
4242
|
var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
4243
4243
|
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
4244
4244
|
var PackSelectorV2 = function (_a) {
|
|
@@ -4265,7 +4265,7 @@ var PackCard$1 = function (_a) {
|
|
|
4265
4265
|
currency: currencyCode || 'USD',
|
|
4266
4266
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4267
4267
|
};
|
|
4268
|
-
var templateObject_1$1P, templateObject_2$1b, templateObject_3$
|
|
4268
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$V, templateObject_4$F, templateObject_5$q, templateObject_6$o;
|
|
4269
4269
|
|
|
4270
4270
|
var Container$15 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4271
4271
|
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -4280,12 +4280,12 @@ var templateObject_1$1O, templateObject_2$1a;
|
|
|
4280
4280
|
var DROPS_TOTAL = 5;
|
|
4281
4281
|
var Container$14 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4282
4282
|
var Title$8 = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4283
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4283
|
+
var Description$3 = newStyled.p(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4284
4284
|
var AbsorbencyLevel = function (_a) {
|
|
4285
4285
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4286
4286
|
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4287
4287
|
};
|
|
4288
|
-
var templateObject_1$1N, templateObject_2$19, templateObject_3$
|
|
4288
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$U;
|
|
4289
4289
|
|
|
4290
4290
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4291
4291
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -5017,7 +5017,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5017
5017
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5018
5018
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5019
5019
|
]; });
|
|
5020
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5020
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5021
5021
|
var theme = _a.theme;
|
|
5022
5022
|
return theme.component.radio.textSize;
|
|
5023
5023
|
}, function (_a) {
|
|
@@ -5033,7 +5033,7 @@ var RadioInput = function (_a) {
|
|
|
5033
5033
|
};
|
|
5034
5034
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5035
5035
|
};
|
|
5036
|
-
var templateObject_1$1F, templateObject_2$15, templateObject_3$
|
|
5036
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$T;
|
|
5037
5037
|
|
|
5038
5038
|
var getWrapperFlexDirection = function (position) {
|
|
5039
5039
|
switch (position) {
|
|
@@ -5122,14 +5122,14 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5122
5122
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5123
5123
|
return actual === expected ? margin : '0';
|
|
5124
5124
|
};
|
|
5125
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5125
|
+
var ContentWrapper = newStyled.div(templateObject_3$S || (templateObject_3$S = __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) {
|
|
5126
5126
|
var borderColor = _a.borderColor;
|
|
5127
5127
|
return borderColor;
|
|
5128
5128
|
}, function (_a) {
|
|
5129
5129
|
var backgroundColor = _a.backgroundColor;
|
|
5130
5130
|
return backgroundColor;
|
|
5131
5131
|
});
|
|
5132
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5132
|
+
var TooltipText = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
|
|
5133
5133
|
var color = _a.color;
|
|
5134
5134
|
return color;
|
|
5135
5135
|
});
|
|
@@ -5140,7 +5140,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5140
5140
|
});
|
|
5141
5141
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5142
5142
|
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5143
|
-
var templateObject_1$1E, templateObject_2$14, templateObject_3$
|
|
5143
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$S, templateObject_4$E, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5144
5144
|
|
|
5145
5145
|
var useOnClickOutside = function (ref, handler) {
|
|
5146
5146
|
React$2.useEffect(function () {
|
|
@@ -5458,7 +5458,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5458
5458
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5459
5459
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5460
5460
|
});
|
|
5461
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5461
|
+
var TagContainer = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5462
5462
|
var _b;
|
|
5463
5463
|
var size = _a.size;
|
|
5464
5464
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5491,7 +5491,7 @@ var PriceLabel = function (_a) {
|
|
|
5491
5491
|
};
|
|
5492
5492
|
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5493
5493
|
};
|
|
5494
|
-
var templateObject_1$1B, templateObject_2$11, templateObject_3$
|
|
5494
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5495
5495
|
|
|
5496
5496
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5497
5497
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5566,7 +5566,7 @@ var templateObject_1$1A;
|
|
|
5566
5566
|
|
|
5567
5567
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5568
5568
|
var ContainerDirectionColumn = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5569
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5569
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5570
5570
|
var PriceLabelV3 = function (_a) {
|
|
5571
5571
|
var _b;
|
|
5572
5572
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5637,7 +5637,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5637
5637
|
lineHeight: '22px',
|
|
5638
5638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5639
5639
|
};
|
|
5640
|
-
var templateObject_1$1z, templateObject_2$10, templateObject_3$
|
|
5640
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$Q;
|
|
5641
5641
|
|
|
5642
5642
|
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5643
5643
|
var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
@@ -5654,11 +5654,11 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5654
5654
|
var theme = _a.theme;
|
|
5655
5655
|
return theme.colors.pallete.primary.color;
|
|
5656
5656
|
});
|
|
5657
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5657
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5658
5658
|
var onClick = _a.onClick;
|
|
5659
5659
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5660
5660
|
});
|
|
5661
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5661
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5662
5662
|
var SubscriptionHeader = 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) {
|
|
5663
5663
|
var theme = _a.theme;
|
|
5664
5664
|
return theme.colors.shades[200].color;
|
|
@@ -5677,7 +5677,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5677
5677
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5678
5678
|
});
|
|
5679
5679
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5680
|
-
var templateObject_1$1y, templateObject_2$$, templateObject_3$
|
|
5680
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P, templateObject_4$D, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5681
5681
|
|
|
5682
5682
|
var radioIds = {
|
|
5683
5683
|
oneTime: {
|
|
@@ -5754,11 +5754,11 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5754
5754
|
|
|
5755
5755
|
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5756
5756
|
var CustomerInfo = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5757
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5758
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5757
|
+
var Name = newStyled.h4(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
5758
|
+
var StarIconContainer = newStyled.div(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
5759
5759
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
5760
5760
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
5761
|
-
var templateObject_1$1w, templateObject_2$_, templateObject_3$
|
|
5761
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$O, templateObject_4$C, templateObject_5$n, templateObject_6$l;
|
|
5762
5762
|
|
|
5763
5763
|
var NameWithStars = function (_a) {
|
|
5764
5764
|
var name = _a.name, size = _a.size;
|
|
@@ -5778,8 +5778,8 @@ var ResultFeedback = function (_a) {
|
|
|
5778
5778
|
|
|
5779
5779
|
var Container$X = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5780
5780
|
var ImageContainer$5 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5781
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5782
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5781
|
+
var ImageCard = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5782
|
+
var UserInfoText = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
5783
5783
|
var theme = _a.theme;
|
|
5784
5784
|
return theme.colors.pallete.secondary.color;
|
|
5785
5785
|
}, function (_a) {
|
|
@@ -5789,7 +5789,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5789
5789
|
var theme = _a.theme, size = _a.size;
|
|
5790
5790
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5791
5791
|
});
|
|
5792
|
-
var templateObject_1$1v, templateObject_2$Z, templateObject_3$
|
|
5792
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5793
5793
|
|
|
5794
5794
|
/* base styles & size variants */
|
|
5795
5795
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5913,12 +5913,12 @@ var templateObject_1$1s;
|
|
|
5913
5913
|
|
|
5914
5914
|
var StyledWrapper = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5915
5915
|
var StyledContainer = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
5916
|
-
var TextLabel = newStyled(Text$8)(templateObject_3$
|
|
5916
|
+
var TextLabel = newStyled(Text$8)(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5917
5917
|
var color = _a.color;
|
|
5918
5918
|
return color;
|
|
5919
5919
|
});
|
|
5920
|
-
var YouAreSaving = newStyled(Text$8)(templateObject_4$
|
|
5921
|
-
var templateObject_1$1r, templateObject_2$Y, templateObject_3$
|
|
5920
|
+
var YouAreSaving = newStyled(Text$8)(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5921
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5922
5922
|
|
|
5923
5923
|
var Minimalistic = function (_a) {
|
|
5924
5924
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -5928,14 +5928,14 @@ var Minimalistic = function (_a) {
|
|
|
5928
5928
|
|
|
5929
5929
|
var Container$V = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5930
5930
|
var Title$6 = newStyled.h1(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5931
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5932
|
-
var PriceContainer$
|
|
5931
|
+
var Details$1 = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5932
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
5933
5933
|
var Simple = function (_a) {
|
|
5934
5934
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5935
5935
|
var theme = useTheme();
|
|
5936
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$
|
|
5936
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5937
5937
|
};
|
|
5938
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5938
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5939
5939
|
|
|
5940
5940
|
var Bundle = {
|
|
5941
5941
|
Minimalistic: Minimalistic,
|
|
@@ -5947,7 +5947,7 @@ var Container$U = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5947
5947
|
return (displayBNPL ? 'flex' : 'none');
|
|
5948
5948
|
});
|
|
5949
5949
|
var TextContainer$1 = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
5950
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5950
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
5951
5951
|
var BuyNowPayLater = function (_a) {
|
|
5952
5952
|
var _b;
|
|
5953
5953
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -5959,7 +5959,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5959
5959
|
}
|
|
5960
5960
|
return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5961
5961
|
};
|
|
5962
|
-
var templateObject_1$1p, templateObject_2$W, templateObject_3$
|
|
5962
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K;
|
|
5963
5963
|
|
|
5964
5964
|
var Text$7 = newStyled.span(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5965
5965
|
var Title$5 = function (_a) {
|
|
@@ -6020,8 +6020,8 @@ var CartProductItem = {
|
|
|
6020
6020
|
|
|
6021
6021
|
var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6022
6022
|
var MobileContainer = newStyled(Container$S)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6023
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6024
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6023
|
+
var DollarPart = newStyled.span(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6024
|
+
var ClubMembersText = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
6025
6025
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6026
6026
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6027
6027
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6031,7 +6031,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6031
6031
|
var isMobile = useWindowDimensions().isMobile;
|
|
6032
6032
|
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$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6033
6033
|
};
|
|
6034
|
-
var templateObject_1$1j, templateObject_2$V, templateObject_3$
|
|
6034
|
+
var templateObject_1$1j, templateObject_2$V, templateObject_3$J, templateObject_4$y, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
6035
6035
|
|
|
6036
6036
|
var Spacing = function (_a) {
|
|
6037
6037
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6041,8 +6041,8 @@ var Spacing = function (_a) {
|
|
|
6041
6041
|
|
|
6042
6042
|
var Container$R = newStyled('div')(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6043
6043
|
var Content$2 = newStyled('div')(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6044
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6045
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6044
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6045
|
+
var Bar$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6046
6046
|
var index = _a.index;
|
|
6047
6047
|
return "".concat(6 + 3 * index, "px");
|
|
6048
6048
|
}, function (_a) {
|
|
@@ -6053,7 +6053,7 @@ var StrengthBars = function (_a) {
|
|
|
6053
6053
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6054
6054
|
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6055
6055
|
};
|
|
6056
|
-
var templateObject_1$1i, templateObject_2$U, templateObject_3$
|
|
6056
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6057
6057
|
|
|
6058
6058
|
var Container$Q = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6059
6059
|
var templateObject_1$1h;
|
|
@@ -6163,6 +6163,8 @@ var templateObject_1$1e;
|
|
|
6163
6163
|
|
|
6164
6164
|
var RegularPriceTagSpan = newStyled.span(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6165
6165
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
6166
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6167
|
+
var PriceWithTagContainer = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
|
|
6166
6168
|
var RegularPriceTag = function () {
|
|
6167
6169
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6168
6170
|
};
|
|
@@ -6177,9 +6179,25 @@ function getTestId() {
|
|
|
6177
6179
|
return args.filter(Boolean).join('-');
|
|
6178
6180
|
}
|
|
6179
6181
|
var PriceLabelV4 = function (_a) {
|
|
6180
|
-
var
|
|
6182
|
+
var _b;
|
|
6183
|
+
_a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
|
|
6181
6184
|
var theme = useTheme();
|
|
6182
6185
|
var isMobile = useWindowDimensions().isMobile;
|
|
6186
|
+
var productFinalPrice = clubPrice;
|
|
6187
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6188
|
+
var currencySymbol = '$';
|
|
6189
|
+
if (typeof productFinalPrice === 'string') {
|
|
6190
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6191
|
+
if (productFinalPrice.includes(availableCurrency)) {
|
|
6192
|
+
currencySymbol = availableCurrency;
|
|
6193
|
+
}
|
|
6194
|
+
});
|
|
6195
|
+
}
|
|
6196
|
+
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6197
|
+
productFinalPrice.includes('.') &&
|
|
6198
|
+
productFinalPrice.includes(currencySymbol)
|
|
6199
|
+
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6200
|
+
: ['', ''];
|
|
6183
6201
|
var priceCommonProps = {
|
|
6184
6202
|
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6185
6203
|
color: color || theme.colors.pallete.secondary.color,
|
|
@@ -6193,11 +6211,13 @@ var PriceLabelV4 = function (_a) {
|
|
|
6193
6211
|
: isMobile
|
|
6194
6212
|
? exports.ComponentSize.Small
|
|
6195
6213
|
: exports.ComponentSize.XSmall;
|
|
6196
|
-
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor,
|
|
6214
|
+
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6197
6215
|
};
|
|
6198
|
-
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(
|
|
6216
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6217
|
+
? finalPriceArray[0]
|
|
6218
|
+
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6199
6219
|
};
|
|
6200
|
-
var templateObject_1$1d, templateObject_2$T;
|
|
6220
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
6201
6221
|
|
|
6202
6222
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6203
6223
|
var width = _a.width, height = _a.height;
|
|
@@ -6275,21 +6295,24 @@ var ProductItemMobile = function (_a) {
|
|
|
6275
6295
|
_a)[size];
|
|
6276
6296
|
}, [size]);
|
|
6277
6297
|
var PriceLabelDisplay = function () {
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6298
|
+
switch (version) {
|
|
6299
|
+
case 4:
|
|
6300
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, finalPriceStyle: showClubPriceLabel
|
|
6301
|
+
? !isMobile
|
|
6302
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6303
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6304
|
+
: undefined }, void 0)) : (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, finalPriceStyle: showClubPriceLabel
|
|
6305
|
+
? !isMobile
|
|
6306
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6307
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6308
|
+
: undefined }, void 0));
|
|
6309
|
+
default:
|
|
6310
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6311
|
+
? !isMobile
|
|
6312
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6313
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6314
|
+
: undefined }, void 0));
|
|
6287
6315
|
}
|
|
6288
|
-
return (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6289
|
-
? !isMobile
|
|
6290
|
-
? { fontSize: '16px', fontWeight: 700 }
|
|
6291
|
-
: { fontSize: '12px', fontWeight: 700 }
|
|
6292
|
-
: undefined }, void 0));
|
|
6293
6316
|
};
|
|
6294
6317
|
var RatingDisplay = function () {
|
|
6295
6318
|
if (isRatingLoading)
|