@trafilea/afrodita-components 6.6.0 → 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.d.ts +5 -1
- package/build/index.esm.js +86 -60
- package/build/index.esm.js.map +1 -1
- package/build/index.js +86 -60
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3578,6 +3578,8 @@ var Underwear = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({},
|
|
|
3578
3578
|
|
|
3579
3579
|
var WireFreeComfort = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort" }), void 0)); };
|
|
3580
3580
|
|
|
3581
|
+
var WireFreeComfortBold = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort_bold" }), void 0)); };
|
|
3582
|
+
|
|
3581
3583
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
3582
3584
|
__proto__: null,
|
|
3583
3585
|
Atom: Atom,
|
|
@@ -3602,7 +3604,8 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
3602
3604
|
ThumbsDown: ThumbsDown,
|
|
3603
3605
|
ThumbsUp: ThumbsUp,
|
|
3604
3606
|
Underwear: Underwear,
|
|
3605
|
-
WireFreeComfort: WireFreeComfort
|
|
3607
|
+
WireFreeComfort: WireFreeComfort,
|
|
3608
|
+
WireFreeComfortBold: WireFreeComfortBold
|
|
3606
3609
|
});
|
|
3607
3610
|
|
|
3608
3611
|
var AppleStore = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "download/apple_store" }), void 0); };
|
|
@@ -4096,8 +4099,8 @@ function jsxs(type, props, key) {
|
|
|
4096
4099
|
var TAGS = {
|
|
4097
4100
|
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4098
4101
|
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4099
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4100
|
-
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([""], [""]))),
|
|
4101
4104
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4102
4105
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4103
4106
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4230,12 +4233,12 @@ var DEFAULTS = {
|
|
|
4230
4233
|
size: 'regular',
|
|
4231
4234
|
},
|
|
4232
4235
|
};
|
|
4233
|
-
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;
|
|
4234
4237
|
|
|
4235
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"])));
|
|
4236
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"])));
|
|
4237
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4238
|
-
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"])));
|
|
4239
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"])));
|
|
4240
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"])));
|
|
4241
4244
|
var PackSelectorV2 = function (_a) {
|
|
@@ -4262,7 +4265,7 @@ var PackCard$1 = function (_a) {
|
|
|
4262
4265
|
currency: currencyCode || 'USD',
|
|
4263
4266
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4264
4267
|
};
|
|
4265
|
-
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;
|
|
4266
4269
|
|
|
4267
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"])));
|
|
4268
4271
|
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -4277,12 +4280,12 @@ var templateObject_1$1O, templateObject_2$1a;
|
|
|
4277
4280
|
var DROPS_TOTAL = 5;
|
|
4278
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"])));
|
|
4279
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"])));
|
|
4280
|
-
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"])));
|
|
4281
4284
|
var AbsorbencyLevel = function (_a) {
|
|
4282
4285
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4283
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));
|
|
4284
4287
|
};
|
|
4285
|
-
var templateObject_1$1N, templateObject_2$19, templateObject_3$
|
|
4288
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$U;
|
|
4286
4289
|
|
|
4287
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(`
|
|
4288
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(`
|
|
@@ -5014,7 +5017,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5014
5017
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5015
5018
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5016
5019
|
]; });
|
|
5017
|
-
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) {
|
|
5018
5021
|
var theme = _a.theme;
|
|
5019
5022
|
return theme.component.radio.textSize;
|
|
5020
5023
|
}, function (_a) {
|
|
@@ -5030,7 +5033,7 @@ var RadioInput = function (_a) {
|
|
|
5030
5033
|
};
|
|
5031
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));
|
|
5032
5035
|
};
|
|
5033
|
-
var templateObject_1$1F, templateObject_2$15, templateObject_3$
|
|
5036
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$T;
|
|
5034
5037
|
|
|
5035
5038
|
var getWrapperFlexDirection = function (position) {
|
|
5036
5039
|
switch (position) {
|
|
@@ -5119,14 +5122,14 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5119
5122
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5120
5123
|
return actual === expected ? margin : '0';
|
|
5121
5124
|
};
|
|
5122
|
-
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) {
|
|
5123
5126
|
var borderColor = _a.borderColor;
|
|
5124
5127
|
return borderColor;
|
|
5125
5128
|
}, function (_a) {
|
|
5126
5129
|
var backgroundColor = _a.backgroundColor;
|
|
5127
5130
|
return backgroundColor;
|
|
5128
5131
|
});
|
|
5129
|
-
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) {
|
|
5130
5133
|
var color = _a.color;
|
|
5131
5134
|
return color;
|
|
5132
5135
|
});
|
|
@@ -5137,7 +5140,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5137
5140
|
});
|
|
5138
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"])));
|
|
5139
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"])));
|
|
5140
|
-
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;
|
|
5141
5144
|
|
|
5142
5145
|
var useOnClickOutside = function (ref, handler) {
|
|
5143
5146
|
React$2.useEffect(function () {
|
|
@@ -5455,7 +5458,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5455
5458
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5456
5459
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5457
5460
|
});
|
|
5458
|
-
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) {
|
|
5459
5462
|
var _b;
|
|
5460
5463
|
var size = _a.size;
|
|
5461
5464
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5488,7 +5491,7 @@ var PriceLabel = function (_a) {
|
|
|
5488
5491
|
};
|
|
5489
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));
|
|
5490
5493
|
};
|
|
5491
|
-
var templateObject_1$1B, templateObject_2$11, templateObject_3$
|
|
5494
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5492
5495
|
|
|
5493
5496
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5494
5497
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5563,7 +5566,7 @@ var templateObject_1$1A;
|
|
|
5563
5566
|
|
|
5564
5567
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5565
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"])));
|
|
5566
|
-
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"])));
|
|
5567
5570
|
var PriceLabelV3 = function (_a) {
|
|
5568
5571
|
var _b;
|
|
5569
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"]);
|
|
@@ -5634,7 +5637,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5634
5637
|
lineHeight: '22px',
|
|
5635
5638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5636
5639
|
};
|
|
5637
|
-
var templateObject_1$1z, templateObject_2$10, templateObject_3$
|
|
5640
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$Q;
|
|
5638
5641
|
|
|
5639
5642
|
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5640
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) {
|
|
@@ -5651,11 +5654,11 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5651
5654
|
var theme = _a.theme;
|
|
5652
5655
|
return theme.colors.pallete.primary.color;
|
|
5653
5656
|
});
|
|
5654
|
-
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) {
|
|
5655
5658
|
var onClick = _a.onClick;
|
|
5656
5659
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5657
5660
|
});
|
|
5658
|
-
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"])));
|
|
5659
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) {
|
|
5660
5663
|
var theme = _a.theme;
|
|
5661
5664
|
return theme.colors.shades[200].color;
|
|
@@ -5674,7 +5677,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5674
5677
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5675
5678
|
});
|
|
5676
5679
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5677
|
-
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;
|
|
5678
5681
|
|
|
5679
5682
|
var radioIds = {
|
|
5680
5683
|
oneTime: {
|
|
@@ -5751,11 +5754,11 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5751
5754
|
|
|
5752
5755
|
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5753
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"])));
|
|
5754
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5755
|
-
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"])));
|
|
5756
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"])));
|
|
5757
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"])));
|
|
5758
|
-
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;
|
|
5759
5762
|
|
|
5760
5763
|
var NameWithStars = function (_a) {
|
|
5761
5764
|
var name = _a.name, size = _a.size;
|
|
@@ -5775,8 +5778,8 @@ var ResultFeedback = function (_a) {
|
|
|
5775
5778
|
|
|
5776
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; });
|
|
5777
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"])));
|
|
5778
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5779
|
-
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) {
|
|
5780
5783
|
var theme = _a.theme;
|
|
5781
5784
|
return theme.colors.pallete.secondary.color;
|
|
5782
5785
|
}, function (_a) {
|
|
@@ -5786,7 +5789,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5786
5789
|
var theme = _a.theme, size = _a.size;
|
|
5787
5790
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5788
5791
|
});
|
|
5789
|
-
var templateObject_1$1v, templateObject_2$Z, templateObject_3$
|
|
5792
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5790
5793
|
|
|
5791
5794
|
/* base styles & size variants */
|
|
5792
5795
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5910,12 +5913,12 @@ var templateObject_1$1s;
|
|
|
5910
5913
|
|
|
5911
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"])));
|
|
5912
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"])));
|
|
5913
|
-
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) {
|
|
5914
5917
|
var color = _a.color;
|
|
5915
5918
|
return color;
|
|
5916
5919
|
});
|
|
5917
|
-
var YouAreSaving = newStyled(Text$8)(templateObject_4$
|
|
5918
|
-
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;
|
|
5919
5922
|
|
|
5920
5923
|
var Minimalistic = function (_a) {
|
|
5921
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;
|
|
@@ -5925,14 +5928,14 @@ var Minimalistic = function (_a) {
|
|
|
5925
5928
|
|
|
5926
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"])));
|
|
5927
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; });
|
|
5928
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5929
|
-
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"])));
|
|
5930
5933
|
var Simple = function (_a) {
|
|
5931
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;
|
|
5932
5935
|
var theme = useTheme();
|
|
5933
|
-
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));
|
|
5934
5937
|
};
|
|
5935
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5938
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5936
5939
|
|
|
5937
5940
|
var Bundle = {
|
|
5938
5941
|
Minimalistic: Minimalistic,
|
|
@@ -5944,7 +5947,7 @@ var Container$U = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5944
5947
|
return (displayBNPL ? 'flex' : 'none');
|
|
5945
5948
|
});
|
|
5946
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"])));
|
|
5947
|
-
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"])));
|
|
5948
5951
|
var BuyNowPayLater = function (_a) {
|
|
5949
5952
|
var _b;
|
|
5950
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;
|
|
@@ -5956,7 +5959,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5956
5959
|
}
|
|
5957
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));
|
|
5958
5961
|
};
|
|
5959
|
-
var templateObject_1$1p, templateObject_2$W, templateObject_3$
|
|
5962
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K;
|
|
5960
5963
|
|
|
5961
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; });
|
|
5962
5965
|
var Title$5 = function (_a) {
|
|
@@ -6017,8 +6020,8 @@ var CartProductItem = {
|
|
|
6017
6020
|
|
|
6018
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"])));
|
|
6019
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"])));
|
|
6020
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6021
|
-
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"])));
|
|
6022
6025
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6023
6026
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6024
6027
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6028,7 +6031,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6028
6031
|
var isMobile = useWindowDimensions().isMobile;
|
|
6029
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));
|
|
6030
6033
|
};
|
|
6031
|
-
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;
|
|
6032
6035
|
|
|
6033
6036
|
var Spacing = function (_a) {
|
|
6034
6037
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6038,8 +6041,8 @@ var Spacing = function (_a) {
|
|
|
6038
6041
|
|
|
6039
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"])));
|
|
6040
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"])));
|
|
6041
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6042
|
-
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) {
|
|
6043
6046
|
var index = _a.index;
|
|
6044
6047
|
return "".concat(6 + 3 * index, "px");
|
|
6045
6048
|
}, function (_a) {
|
|
@@ -6050,7 +6053,7 @@ var StrengthBars = function (_a) {
|
|
|
6050
6053
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6051
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));
|
|
6052
6055
|
};
|
|
6053
|
-
var templateObject_1$1i, templateObject_2$U, templateObject_3$
|
|
6056
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6054
6057
|
|
|
6055
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"])));
|
|
6056
6059
|
var templateObject_1$1h;
|
|
@@ -6160,6 +6163,8 @@ var templateObject_1$1e;
|
|
|
6160
6163
|
|
|
6161
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"])));
|
|
6162
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"])));
|
|
6163
6168
|
var RegularPriceTag = function () {
|
|
6164
6169
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6165
6170
|
};
|
|
@@ -6174,9 +6179,25 @@ function getTestId() {
|
|
|
6174
6179
|
return args.filter(Boolean).join('-');
|
|
6175
6180
|
}
|
|
6176
6181
|
var PriceLabelV4 = function (_a) {
|
|
6177
|
-
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"]);
|
|
6178
6184
|
var theme = useTheme();
|
|
6179
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
|
+
: ['', ''];
|
|
6180
6201
|
var priceCommonProps = {
|
|
6181
6202
|
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6182
6203
|
color: color || theme.colors.pallete.secondary.color,
|
|
@@ -6190,11 +6211,13 @@ var PriceLabelV4 = function (_a) {
|
|
|
6190
6211
|
: isMobile
|
|
6191
6212
|
? exports.ComponentSize.Small
|
|
6192
6213
|
: exports.ComponentSize.XSmall;
|
|
6193
|
-
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));
|
|
6194
6215
|
};
|
|
6195
|
-
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));
|
|
6196
6219
|
};
|
|
6197
|
-
var templateObject_1$1d, templateObject_2$T;
|
|
6220
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
6198
6221
|
|
|
6199
6222
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6200
6223
|
var width = _a.width, height = _a.height;
|
|
@@ -6272,21 +6295,24 @@ var ProductItemMobile = function (_a) {
|
|
|
6272
6295
|
_a)[size];
|
|
6273
6296
|
}, [size]);
|
|
6274
6297
|
var PriceLabelDisplay = function () {
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
|
|
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));
|
|
6284
6315
|
}
|
|
6285
|
-
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
|
|
6286
|
-
? !isMobile
|
|
6287
|
-
? { fontSize: '16px', fontWeight: 700 }
|
|
6288
|
-
: { fontSize: '12px', fontWeight: 700 }
|
|
6289
|
-
: undefined }, void 0));
|
|
6290
6316
|
};
|
|
6291
6317
|
var RatingDisplay = function () {
|
|
6292
6318
|
if (isRatingLoading)
|