@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.esm.js
CHANGED
|
@@ -4073,8 +4073,8 @@ function jsxs(type, props, key) {
|
|
|
4073
4073
|
var TAGS = {
|
|
4074
4074
|
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4075
4075
|
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4076
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4077
|
-
display1: newStyled.h1(templateObject_4$
|
|
4076
|
+
hero3: newStyled.h3(templateObject_3$W || (templateObject_3$W = __makeTemplateObject([""], [""]))),
|
|
4077
|
+
display1: newStyled.h1(templateObject_4$G || (templateObject_4$G = __makeTemplateObject([""], [""]))),
|
|
4078
4078
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4079
4079
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4080
4080
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4207,12 +4207,12 @@ var DEFAULTS = {
|
|
|
4207
4207
|
size: 'regular',
|
|
4208
4208
|
},
|
|
4209
4209
|
};
|
|
4210
|
-
var templateObject_1$1Q, templateObject_2$1c, templateObject_3$
|
|
4210
|
+
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;
|
|
4211
4211
|
|
|
4212
4212
|
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"])));
|
|
4213
4213
|
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"])));
|
|
4214
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4215
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4214
|
+
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"])));
|
|
4215
|
+
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"])));
|
|
4216
4216
|
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"])));
|
|
4217
4217
|
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"])));
|
|
4218
4218
|
var PackSelectorV2 = function (_a) {
|
|
@@ -4239,7 +4239,7 @@ var PackCard$1 = function (_a) {
|
|
|
4239
4239
|
currency: currencyCode || 'USD',
|
|
4240
4240
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4241
4241
|
};
|
|
4242
|
-
var templateObject_1$1P, templateObject_2$1b, templateObject_3$
|
|
4242
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$V, templateObject_4$F, templateObject_5$q, templateObject_6$o;
|
|
4243
4243
|
|
|
4244
4244
|
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"])));
|
|
4245
4245
|
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -4254,12 +4254,12 @@ var templateObject_1$1O, templateObject_2$1a;
|
|
|
4254
4254
|
var DROPS_TOTAL = 5;
|
|
4255
4255
|
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"])));
|
|
4256
4256
|
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"])));
|
|
4257
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4257
|
+
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"])));
|
|
4258
4258
|
var AbsorbencyLevel = function (_a) {
|
|
4259
4259
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4260
4260
|
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4261
4261
|
};
|
|
4262
|
-
var templateObject_1$1N, templateObject_2$19, templateObject_3$
|
|
4262
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$U;
|
|
4263
4263
|
|
|
4264
4264
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4265
4265
|
`),"","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(`
|
|
@@ -4991,7 +4991,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
4991
4991
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
4992
4992
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
4993
4993
|
]; });
|
|
4994
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
4994
|
+
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) {
|
|
4995
4995
|
var theme = _a.theme;
|
|
4996
4996
|
return theme.component.radio.textSize;
|
|
4997
4997
|
}, function (_a) {
|
|
@@ -5007,7 +5007,7 @@ var RadioInput = function (_a) {
|
|
|
5007
5007
|
};
|
|
5008
5008
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5009
5009
|
};
|
|
5010
|
-
var templateObject_1$1F, templateObject_2$15, templateObject_3$
|
|
5010
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$T;
|
|
5011
5011
|
|
|
5012
5012
|
var getWrapperFlexDirection = function (position) {
|
|
5013
5013
|
switch (position) {
|
|
@@ -5096,14 +5096,14 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5096
5096
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5097
5097
|
return actual === expected ? margin : '0';
|
|
5098
5098
|
};
|
|
5099
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5099
|
+
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) {
|
|
5100
5100
|
var borderColor = _a.borderColor;
|
|
5101
5101
|
return borderColor;
|
|
5102
5102
|
}, function (_a) {
|
|
5103
5103
|
var backgroundColor = _a.backgroundColor;
|
|
5104
5104
|
return backgroundColor;
|
|
5105
5105
|
});
|
|
5106
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5106
|
+
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) {
|
|
5107
5107
|
var color = _a.color;
|
|
5108
5108
|
return color;
|
|
5109
5109
|
});
|
|
@@ -5114,7 +5114,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5114
5114
|
});
|
|
5115
5115
|
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"])));
|
|
5116
5116
|
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"])));
|
|
5117
|
-
var templateObject_1$1E, templateObject_2$14, templateObject_3$
|
|
5117
|
+
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;
|
|
5118
5118
|
|
|
5119
5119
|
var useOnClickOutside = function (ref, handler) {
|
|
5120
5120
|
useEffect(function () {
|
|
@@ -5432,7 +5432,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5432
5432
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5433
5433
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5434
5434
|
});
|
|
5435
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5435
|
+
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) {
|
|
5436
5436
|
var _b;
|
|
5437
5437
|
var size = _a.size;
|
|
5438
5438
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5465,7 +5465,7 @@ var PriceLabel = function (_a) {
|
|
|
5465
5465
|
};
|
|
5466
5466
|
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5467
5467
|
};
|
|
5468
|
-
var templateObject_1$1B, templateObject_2$11, templateObject_3$
|
|
5468
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5469
5469
|
|
|
5470
5470
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5471
5471
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5540,7 +5540,7 @@ var templateObject_1$1A;
|
|
|
5540
5540
|
|
|
5541
5541
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5542
5542
|
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"])));
|
|
5543
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5543
|
+
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"])));
|
|
5544
5544
|
var PriceLabelV3 = function (_a) {
|
|
5545
5545
|
var _b;
|
|
5546
5546
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5611,7 +5611,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5611
5611
|
lineHeight: '22px',
|
|
5612
5612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5613
5613
|
};
|
|
5614
|
-
var templateObject_1$1z, templateObject_2$10, templateObject_3$
|
|
5614
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$Q;
|
|
5615
5615
|
|
|
5616
5616
|
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5617
5617
|
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) {
|
|
@@ -5628,11 +5628,11 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5628
5628
|
var theme = _a.theme;
|
|
5629
5629
|
return theme.colors.pallete.primary.color;
|
|
5630
5630
|
});
|
|
5631
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5631
|
+
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) {
|
|
5632
5632
|
var onClick = _a.onClick;
|
|
5633
5633
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5634
5634
|
});
|
|
5635
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5635
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5636
5636
|
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) {
|
|
5637
5637
|
var theme = _a.theme;
|
|
5638
5638
|
return theme.colors.shades[200].color;
|
|
@@ -5651,7 +5651,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5651
5651
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5652
5652
|
});
|
|
5653
5653
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5654
|
-
var templateObject_1$1y, templateObject_2$$, templateObject_3$
|
|
5654
|
+
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;
|
|
5655
5655
|
|
|
5656
5656
|
var radioIds = {
|
|
5657
5657
|
oneTime: {
|
|
@@ -5728,11 +5728,11 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5728
5728
|
|
|
5729
5729
|
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5730
5730
|
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"])));
|
|
5731
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5732
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5731
|
+
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"])));
|
|
5732
|
+
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"])));
|
|
5733
5733
|
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"])));
|
|
5734
5734
|
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"])));
|
|
5735
|
-
var templateObject_1$1w, templateObject_2$_, templateObject_3$
|
|
5735
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$O, templateObject_4$C, templateObject_5$n, templateObject_6$l;
|
|
5736
5736
|
|
|
5737
5737
|
var NameWithStars = function (_a) {
|
|
5738
5738
|
var name = _a.name, size = _a.size;
|
|
@@ -5752,8 +5752,8 @@ var ResultFeedback = function (_a) {
|
|
|
5752
5752
|
|
|
5753
5753
|
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; });
|
|
5754
5754
|
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"])));
|
|
5755
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5756
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5755
|
+
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; });
|
|
5756
|
+
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) {
|
|
5757
5757
|
var theme = _a.theme;
|
|
5758
5758
|
return theme.colors.pallete.secondary.color;
|
|
5759
5759
|
}, function (_a) {
|
|
@@ -5763,7 +5763,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5763
5763
|
var theme = _a.theme, size = _a.size;
|
|
5764
5764
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5765
5765
|
});
|
|
5766
|
-
var templateObject_1$1v, templateObject_2$Z, templateObject_3$
|
|
5766
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5767
5767
|
|
|
5768
5768
|
/* base styles & size variants */
|
|
5769
5769
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5887,12 +5887,12 @@ var templateObject_1$1s;
|
|
|
5887
5887
|
|
|
5888
5888
|
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"])));
|
|
5889
5889
|
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"])));
|
|
5890
|
-
var TextLabel = newStyled(Text$8)(templateObject_3$
|
|
5890
|
+
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) {
|
|
5891
5891
|
var color = _a.color;
|
|
5892
5892
|
return color;
|
|
5893
5893
|
});
|
|
5894
|
-
var YouAreSaving = newStyled(Text$8)(templateObject_4$
|
|
5895
|
-
var templateObject_1$1r, templateObject_2$Y, templateObject_3$
|
|
5894
|
+
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"])));
|
|
5895
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5896
5896
|
|
|
5897
5897
|
var Minimalistic = function (_a) {
|
|
5898
5898
|
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;
|
|
@@ -5902,14 +5902,14 @@ var Minimalistic = function (_a) {
|
|
|
5902
5902
|
|
|
5903
5903
|
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"])));
|
|
5904
5904
|
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; });
|
|
5905
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5906
|
-
var PriceContainer$
|
|
5905
|
+
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; });
|
|
5906
|
+
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"])));
|
|
5907
5907
|
var Simple = function (_a) {
|
|
5908
5908
|
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;
|
|
5909
5909
|
var theme = useTheme();
|
|
5910
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$
|
|
5910
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5911
5911
|
};
|
|
5912
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5912
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5913
5913
|
|
|
5914
5914
|
var Bundle = {
|
|
5915
5915
|
Minimalistic: Minimalistic,
|
|
@@ -5921,7 +5921,7 @@ var Container$U = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5921
5921
|
return (displayBNPL ? 'flex' : 'none');
|
|
5922
5922
|
});
|
|
5923
5923
|
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"])));
|
|
5924
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5924
|
+
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"])));
|
|
5925
5925
|
var BuyNowPayLater = function (_a) {
|
|
5926
5926
|
var _b;
|
|
5927
5927
|
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;
|
|
@@ -5933,7 +5933,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5933
5933
|
}
|
|
5934
5934
|
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5935
5935
|
};
|
|
5936
|
-
var templateObject_1$1p, templateObject_2$W, templateObject_3$
|
|
5936
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K;
|
|
5937
5937
|
|
|
5938
5938
|
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; });
|
|
5939
5939
|
var Title$5 = function (_a) {
|
|
@@ -5994,8 +5994,8 @@ var CartProductItem = {
|
|
|
5994
5994
|
|
|
5995
5995
|
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"])));
|
|
5996
5996
|
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"])));
|
|
5997
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
5998
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
5997
|
+
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"])));
|
|
5998
|
+
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"])));
|
|
5999
5999
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6000
6000
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6001
6001
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6005,7 +6005,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6005
6005
|
var isMobile = useWindowDimensions().isMobile;
|
|
6006
6006
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6007
6007
|
};
|
|
6008
|
-
var templateObject_1$1j, templateObject_2$V, templateObject_3$
|
|
6008
|
+
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;
|
|
6009
6009
|
|
|
6010
6010
|
var Spacing = function (_a) {
|
|
6011
6011
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6015,8 +6015,8 @@ var Spacing = function (_a) {
|
|
|
6015
6015
|
|
|
6016
6016
|
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"])));
|
|
6017
6017
|
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"])));
|
|
6018
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6019
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6018
|
+
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"])));
|
|
6019
|
+
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) {
|
|
6020
6020
|
var index = _a.index;
|
|
6021
6021
|
return "".concat(6 + 3 * index, "px");
|
|
6022
6022
|
}, function (_a) {
|
|
@@ -6027,7 +6027,7 @@ var StrengthBars = function (_a) {
|
|
|
6027
6027
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6028
6028
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6029
6029
|
};
|
|
6030
|
-
var templateObject_1$1i, templateObject_2$U, templateObject_3$
|
|
6030
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6031
6031
|
|
|
6032
6032
|
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"])));
|
|
6033
6033
|
var templateObject_1$1h;
|
|
@@ -6137,6 +6137,8 @@ var templateObject_1$1e;
|
|
|
6137
6137
|
|
|
6138
6138
|
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"])));
|
|
6139
6139
|
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"])));
|
|
6140
|
+
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"])));
|
|
6141
|
+
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"])));
|
|
6140
6142
|
var RegularPriceTag = function () {
|
|
6141
6143
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6142
6144
|
};
|
|
@@ -6151,9 +6153,25 @@ function getTestId() {
|
|
|
6151
6153
|
return args.filter(Boolean).join('-');
|
|
6152
6154
|
}
|
|
6153
6155
|
var PriceLabelV4 = function (_a) {
|
|
6154
|
-
var
|
|
6156
|
+
var _b;
|
|
6157
|
+
_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 ? 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"]);
|
|
6155
6158
|
var theme = useTheme();
|
|
6156
6159
|
var isMobile = useWindowDimensions().isMobile;
|
|
6160
|
+
var productFinalPrice = clubPrice;
|
|
6161
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6162
|
+
var currencySymbol = '$';
|
|
6163
|
+
if (typeof productFinalPrice === 'string') {
|
|
6164
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6165
|
+
if (productFinalPrice.includes(availableCurrency)) {
|
|
6166
|
+
currencySymbol = availableCurrency;
|
|
6167
|
+
}
|
|
6168
|
+
});
|
|
6169
|
+
}
|
|
6170
|
+
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6171
|
+
productFinalPrice.includes('.') &&
|
|
6172
|
+
productFinalPrice.includes(currencySymbol)
|
|
6173
|
+
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6174
|
+
: ['', ''];
|
|
6157
6175
|
var priceCommonProps = {
|
|
6158
6176
|
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
6159
6177
|
color: color || theme.colors.pallete.secondary.color,
|
|
@@ -6167,11 +6185,13 @@ var PriceLabelV4 = function (_a) {
|
|
|
6167
6185
|
: isMobile
|
|
6168
6186
|
? ComponentSize.Small
|
|
6169
6187
|
: ComponentSize.XSmall;
|
|
6170
|
-
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor,
|
|
6188
|
+
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6171
6189
|
};
|
|
6172
|
-
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(
|
|
6190
|
+
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6191
|
+
? finalPriceArray[0]
|
|
6192
|
+
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6173
6193
|
};
|
|
6174
|
-
var templateObject_1$1d, templateObject_2$T;
|
|
6194
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
6175
6195
|
|
|
6176
6196
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6177
6197
|
var width = _a.width, height = _a.height;
|
|
@@ -6249,21 +6269,24 @@ var ProductItemMobile = function (_a) {
|
|
|
6249
6269
|
_a)[size];
|
|
6250
6270
|
}, [size]);
|
|
6251
6271
|
var PriceLabelDisplay = function () {
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6259
|
-
|
|
6260
|
-
|
|
6272
|
+
switch (version) {
|
|
6273
|
+
case 4:
|
|
6274
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, finalPriceStyle: showClubPriceLabel
|
|
6275
|
+
? !isMobile
|
|
6276
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6277
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6278
|
+
: undefined }, void 0)) : (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, clubPrice: clubPrice, finalPriceStyle: showClubPriceLabel
|
|
6279
|
+
? !isMobile
|
|
6280
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6281
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6282
|
+
: undefined }, void 0));
|
|
6283
|
+
default:
|
|
6284
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6285
|
+
? !isMobile
|
|
6286
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6287
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6288
|
+
: undefined }, void 0));
|
|
6261
6289
|
}
|
|
6262
|
-
return (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6263
|
-
? !isMobile
|
|
6264
|
-
? { fontSize: '16px', fontWeight: 700 }
|
|
6265
|
-
: { fontSize: '12px', fontWeight: 700 }
|
|
6266
|
-
: undefined }, void 0));
|
|
6267
6290
|
};
|
|
6268
6291
|
var RatingDisplay = function () {
|
|
6269
6292
|
if (isRatingLoading)
|