@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.d.ts
CHANGED
|
@@ -49,7 +49,7 @@ declare type StyledIconProps = {
|
|
|
49
49
|
|
|
50
50
|
declare type Actions$1 = 'actions/add' | 'actions/check_box_empty' | 'actions/check_box_light' | 'actions/check_box_solid' | 'actions/check' | 'actions/circle_check' | 'actions/circle_clear' | 'actions/circle_info' | 'actions/circle_minus' | 'actions/circle_plus' | 'actions/circle_question' | 'actions/circle_solid_check' | 'actions/circle_solid_clear' | 'actions/circle_solid_info' | 'actions/circle_solid_minus' | 'actions/circle_solid_plus' | 'actions/circle_solid_question' | 'actions/circle_solid_styled_check' | 'actions/circle_solid_warning' | 'actions/circle_warning' | 'actions/clear_light' | 'actions/close' | 'actions/copy_outlined' | 'actions/copy' | 'actions/edit' | 'actions/light_check' | 'actions/light_exclamation' | 'actions/like_solid' | 'actions/like' | 'actions/minus' | 'actions/not_allowed' | 'actions/question' | 'actions/radio_empty' | 'actions/radio_filled' | 'actions/settings_solid' | 'actions/settings' | 'actions/share' | 'actions/signout' | 'actions/trash' | 'actions/warning';
|
|
51
51
|
declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' | 'arrows/chevron_left' | 'arrows/chevron_left_lite' | 'arrows/chevron_left_variant' | 'arrows/chevron_right' | 'arrows/chevron_right_lite' | 'arrows/chevron_right_variant' | 'arrows/chevron_up' | 'arrows/chevron_up_solid' | 'arrows/chevron_up_variant' | 'arrows/circle_chevron_down' | 'arrows/circle_chevron_left' | 'arrows/circle_chevron_right' | 'arrows/circle_chevron_up' | 'arrows/circle_line_down' | 'arrows/circle_line_left' | 'arrows/circle_line_right' | 'arrows/circle_line_up' | 'arrows/circle_up' | 'arrows/double_arrow_up';
|
|
52
|
-
declare type Custom$1 = 'custom/atom' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort';
|
|
52
|
+
declare type Custom$1 = 'custom/atom' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold';
|
|
53
53
|
declare type Download$1 = 'download/apple_store' | 'download/google_play';
|
|
54
54
|
declare type Emoji$1 = 'emoji/blowing_kiss' | 'emoji/frowning' | 'emoji/grinning' | 'emoji/grinning_with_sweat' | 'emoji/relieved' | 'emoji/smiling_v2' | 'emoji/thinking';
|
|
55
55
|
declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right';
|
|
@@ -372,6 +372,8 @@ declare const Underwear: IconComponent;
|
|
|
372
372
|
|
|
373
373
|
declare const WireFreeComfort: IconComponent;
|
|
374
374
|
|
|
375
|
+
declare const WireFreeComfortBold: IconComponent;
|
|
376
|
+
|
|
375
377
|
declare const Custom_Atom: typeof Atom;
|
|
376
378
|
declare const Custom_Bra: typeof Bra;
|
|
377
379
|
declare const Custom_Bubbles: typeof Bubbles;
|
|
@@ -395,6 +397,7 @@ declare const Custom_ThumbsDown: typeof ThumbsDown;
|
|
|
395
397
|
declare const Custom_ThumbsUp: typeof ThumbsUp;
|
|
396
398
|
declare const Custom_Underwear: typeof Underwear;
|
|
397
399
|
declare const Custom_WireFreeComfort: typeof WireFreeComfort;
|
|
400
|
+
declare const Custom_WireFreeComfortBold: typeof WireFreeComfortBold;
|
|
398
401
|
declare namespace Custom {
|
|
399
402
|
export {
|
|
400
403
|
Custom_Atom as Atom,
|
|
@@ -420,6 +423,7 @@ declare namespace Custom {
|
|
|
420
423
|
Custom_ThumbsUp as ThumbsUp,
|
|
421
424
|
Custom_Underwear as Underwear,
|
|
422
425
|
Custom_WireFreeComfort as WireFreeComfort,
|
|
426
|
+
Custom_WireFreeComfortBold as WireFreeComfortBold,
|
|
423
427
|
};
|
|
424
428
|
}
|
|
425
429
|
|
package/build/index.esm.js
CHANGED
|
@@ -3552,6 +3552,8 @@ var Underwear = function (props) { return jsx$1(Icon$1, __assign$1({}, props, {
|
|
|
3552
3552
|
|
|
3553
3553
|
var WireFreeComfort = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort" }), void 0)); };
|
|
3554
3554
|
|
|
3555
|
+
var WireFreeComfortBold = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort_bold" }), void 0)); };
|
|
3556
|
+
|
|
3555
3557
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
3556
3558
|
__proto__: null,
|
|
3557
3559
|
Atom: Atom,
|
|
@@ -3576,7 +3578,8 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
3576
3578
|
ThumbsDown: ThumbsDown,
|
|
3577
3579
|
ThumbsUp: ThumbsUp,
|
|
3578
3580
|
Underwear: Underwear,
|
|
3579
|
-
WireFreeComfort: WireFreeComfort
|
|
3581
|
+
WireFreeComfort: WireFreeComfort,
|
|
3582
|
+
WireFreeComfortBold: WireFreeComfortBold
|
|
3580
3583
|
});
|
|
3581
3584
|
|
|
3582
3585
|
var AppleStore = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "download/apple_store" }), void 0); };
|
|
@@ -4070,8 +4073,8 @@ function jsxs(type, props, key) {
|
|
|
4070
4073
|
var TAGS = {
|
|
4071
4074
|
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4072
4075
|
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4073
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4074
|
-
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([""], [""]))),
|
|
4075
4078
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4076
4079
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4077
4080
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4204,12 +4207,12 @@ var DEFAULTS = {
|
|
|
4204
4207
|
size: 'regular',
|
|
4205
4208
|
},
|
|
4206
4209
|
};
|
|
4207
|
-
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;
|
|
4208
4211
|
|
|
4209
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"])));
|
|
4210
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"])));
|
|
4211
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4212
|
-
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"])));
|
|
4213
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"])));
|
|
4214
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"])));
|
|
4215
4218
|
var PackSelectorV2 = function (_a) {
|
|
@@ -4236,7 +4239,7 @@ var PackCard$1 = function (_a) {
|
|
|
4236
4239
|
currency: currencyCode || 'USD',
|
|
4237
4240
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4238
4241
|
};
|
|
4239
|
-
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;
|
|
4240
4243
|
|
|
4241
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"])));
|
|
4242
4245
|
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
@@ -4251,12 +4254,12 @@ var templateObject_1$1O, templateObject_2$1a;
|
|
|
4251
4254
|
var DROPS_TOTAL = 5;
|
|
4252
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"])));
|
|
4253
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"])));
|
|
4254
|
-
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"])));
|
|
4255
4258
|
var AbsorbencyLevel = function (_a) {
|
|
4256
4259
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4257
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));
|
|
4258
4261
|
};
|
|
4259
|
-
var templateObject_1$1N, templateObject_2$19, templateObject_3$
|
|
4262
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$U;
|
|
4260
4263
|
|
|
4261
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(`
|
|
4262
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(`
|
|
@@ -4988,7 +4991,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
4988
4991
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
4989
4992
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
4990
4993
|
]; });
|
|
4991
|
-
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) {
|
|
4992
4995
|
var theme = _a.theme;
|
|
4993
4996
|
return theme.component.radio.textSize;
|
|
4994
4997
|
}, function (_a) {
|
|
@@ -5004,7 +5007,7 @@ var RadioInput = function (_a) {
|
|
|
5004
5007
|
};
|
|
5005
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));
|
|
5006
5009
|
};
|
|
5007
|
-
var templateObject_1$1F, templateObject_2$15, templateObject_3$
|
|
5010
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$T;
|
|
5008
5011
|
|
|
5009
5012
|
var getWrapperFlexDirection = function (position) {
|
|
5010
5013
|
switch (position) {
|
|
@@ -5093,14 +5096,14 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5093
5096
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5094
5097
|
return actual === expected ? margin : '0';
|
|
5095
5098
|
};
|
|
5096
|
-
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) {
|
|
5097
5100
|
var borderColor = _a.borderColor;
|
|
5098
5101
|
return borderColor;
|
|
5099
5102
|
}, function (_a) {
|
|
5100
5103
|
var backgroundColor = _a.backgroundColor;
|
|
5101
5104
|
return backgroundColor;
|
|
5102
5105
|
});
|
|
5103
|
-
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) {
|
|
5104
5107
|
var color = _a.color;
|
|
5105
5108
|
return color;
|
|
5106
5109
|
});
|
|
@@ -5111,7 +5114,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5111
5114
|
});
|
|
5112
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"])));
|
|
5113
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"])));
|
|
5114
|
-
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;
|
|
5115
5118
|
|
|
5116
5119
|
var useOnClickOutside = function (ref, handler) {
|
|
5117
5120
|
useEffect(function () {
|
|
@@ -5429,7 +5432,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5429
5432
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5430
5433
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5431
5434
|
});
|
|
5432
|
-
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) {
|
|
5433
5436
|
var _b;
|
|
5434
5437
|
var size = _a.size;
|
|
5435
5438
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5462,7 +5465,7 @@ var PriceLabel = function (_a) {
|
|
|
5462
5465
|
};
|
|
5463
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));
|
|
5464
5467
|
};
|
|
5465
|
-
var templateObject_1$1B, templateObject_2$11, templateObject_3$
|
|
5468
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5466
5469
|
|
|
5467
5470
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5468
5471
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5537,7 +5540,7 @@ var templateObject_1$1A;
|
|
|
5537
5540
|
|
|
5538
5541
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5539
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"])));
|
|
5540
|
-
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"])));
|
|
5541
5544
|
var PriceLabelV3 = function (_a) {
|
|
5542
5545
|
var _b;
|
|
5543
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"]);
|
|
@@ -5608,7 +5611,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5608
5611
|
lineHeight: '22px',
|
|
5609
5612
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5610
5613
|
};
|
|
5611
|
-
var templateObject_1$1z, templateObject_2$10, templateObject_3$
|
|
5614
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$Q;
|
|
5612
5615
|
|
|
5613
5616
|
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5614
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) {
|
|
@@ -5625,11 +5628,11 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5625
5628
|
var theme = _a.theme;
|
|
5626
5629
|
return theme.colors.pallete.primary.color;
|
|
5627
5630
|
});
|
|
5628
|
-
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) {
|
|
5629
5632
|
var onClick = _a.onClick;
|
|
5630
5633
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5631
5634
|
});
|
|
5632
|
-
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"])));
|
|
5633
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) {
|
|
5634
5637
|
var theme = _a.theme;
|
|
5635
5638
|
return theme.colors.shades[200].color;
|
|
@@ -5648,7 +5651,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5648
5651
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5649
5652
|
});
|
|
5650
5653
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5651
|
-
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;
|
|
5652
5655
|
|
|
5653
5656
|
var radioIds = {
|
|
5654
5657
|
oneTime: {
|
|
@@ -5725,11 +5728,11 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5725
5728
|
|
|
5726
5729
|
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5727
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"])));
|
|
5728
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5729
|
-
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"])));
|
|
5730
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"])));
|
|
5731
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"])));
|
|
5732
|
-
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;
|
|
5733
5736
|
|
|
5734
5737
|
var NameWithStars = function (_a) {
|
|
5735
5738
|
var name = _a.name, size = _a.size;
|
|
@@ -5749,8 +5752,8 @@ var ResultFeedback = function (_a) {
|
|
|
5749
5752
|
|
|
5750
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; });
|
|
5751
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"])));
|
|
5752
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5753
|
-
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) {
|
|
5754
5757
|
var theme = _a.theme;
|
|
5755
5758
|
return theme.colors.pallete.secondary.color;
|
|
5756
5759
|
}, function (_a) {
|
|
@@ -5760,7 +5763,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5760
5763
|
var theme = _a.theme, size = _a.size;
|
|
5761
5764
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5762
5765
|
});
|
|
5763
|
-
var templateObject_1$1v, templateObject_2$Z, templateObject_3$
|
|
5766
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5764
5767
|
|
|
5765
5768
|
/* base styles & size variants */
|
|
5766
5769
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5884,12 +5887,12 @@ var templateObject_1$1s;
|
|
|
5884
5887
|
|
|
5885
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"])));
|
|
5886
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"])));
|
|
5887
|
-
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) {
|
|
5888
5891
|
var color = _a.color;
|
|
5889
5892
|
return color;
|
|
5890
5893
|
});
|
|
5891
|
-
var YouAreSaving = newStyled(Text$8)(templateObject_4$
|
|
5892
|
-
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;
|
|
5893
5896
|
|
|
5894
5897
|
var Minimalistic = function (_a) {
|
|
5895
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;
|
|
@@ -5899,14 +5902,14 @@ var Minimalistic = function (_a) {
|
|
|
5899
5902
|
|
|
5900
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"])));
|
|
5901
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; });
|
|
5902
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5903
|
-
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"])));
|
|
5904
5907
|
var Simple = function (_a) {
|
|
5905
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;
|
|
5906
5909
|
var theme = useTheme();
|
|
5907
|
-
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));
|
|
5908
5911
|
};
|
|
5909
|
-
var templateObject_1$1q, templateObject_2$X, templateObject_3$
|
|
5912
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5910
5913
|
|
|
5911
5914
|
var Bundle = {
|
|
5912
5915
|
Minimalistic: Minimalistic,
|
|
@@ -5918,7 +5921,7 @@ var Container$U = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
5918
5921
|
return (displayBNPL ? 'flex' : 'none');
|
|
5919
5922
|
});
|
|
5920
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"])));
|
|
5921
|
-
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"])));
|
|
5922
5925
|
var BuyNowPayLater = function (_a) {
|
|
5923
5926
|
var _b;
|
|
5924
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;
|
|
@@ -5930,7 +5933,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5930
5933
|
}
|
|
5931
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));
|
|
5932
5935
|
};
|
|
5933
|
-
var templateObject_1$1p, templateObject_2$W, templateObject_3$
|
|
5936
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K;
|
|
5934
5937
|
|
|
5935
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; });
|
|
5936
5939
|
var Title$5 = function (_a) {
|
|
@@ -5991,8 +5994,8 @@ var CartProductItem = {
|
|
|
5991
5994
|
|
|
5992
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"])));
|
|
5993
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"])));
|
|
5994
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
5995
|
-
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"])));
|
|
5996
5999
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5997
6000
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
5998
6001
|
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
@@ -6002,7 +6005,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6002
6005
|
var isMobile = useWindowDimensions().isMobile;
|
|
6003
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));
|
|
6004
6007
|
};
|
|
6005
|
-
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;
|
|
6006
6009
|
|
|
6007
6010
|
var Spacing = function (_a) {
|
|
6008
6011
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6012,8 +6015,8 @@ var Spacing = function (_a) {
|
|
|
6012
6015
|
|
|
6013
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"])));
|
|
6014
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"])));
|
|
6015
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6016
|
-
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) {
|
|
6017
6020
|
var index = _a.index;
|
|
6018
6021
|
return "".concat(6 + 3 * index, "px");
|
|
6019
6022
|
}, function (_a) {
|
|
@@ -6024,7 +6027,7 @@ var StrengthBars = function (_a) {
|
|
|
6024
6027
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6025
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));
|
|
6026
6029
|
};
|
|
6027
|
-
var templateObject_1$1i, templateObject_2$U, templateObject_3$
|
|
6030
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6028
6031
|
|
|
6029
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"])));
|
|
6030
6033
|
var templateObject_1$1h;
|
|
@@ -6134,6 +6137,8 @@ var templateObject_1$1e;
|
|
|
6134
6137
|
|
|
6135
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"])));
|
|
6136
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"])));
|
|
6137
6142
|
var RegularPriceTag = function () {
|
|
6138
6143
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6139
6144
|
};
|
|
@@ -6148,9 +6153,25 @@ function getTestId() {
|
|
|
6148
6153
|
return args.filter(Boolean).join('-');
|
|
6149
6154
|
}
|
|
6150
6155
|
var PriceLabelV4 = function (_a) {
|
|
6151
|
-
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"]);
|
|
6152
6158
|
var theme = useTheme();
|
|
6153
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
|
+
: ['', ''];
|
|
6154
6175
|
var priceCommonProps = {
|
|
6155
6176
|
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
6156
6177
|
color: color || theme.colors.pallete.secondary.color,
|
|
@@ -6164,11 +6185,13 @@ var PriceLabelV4 = function (_a) {
|
|
|
6164
6185
|
: isMobile
|
|
6165
6186
|
? ComponentSize.Small
|
|
6166
6187
|
: ComponentSize.XSmall;
|
|
6167
|
-
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));
|
|
6168
6189
|
};
|
|
6169
|
-
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));
|
|
6170
6193
|
};
|
|
6171
|
-
var templateObject_1$1d, templateObject_2$T;
|
|
6194
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
6172
6195
|
|
|
6173
6196
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6174
6197
|
var width = _a.width, height = _a.height;
|
|
@@ -6246,21 +6269,24 @@ var ProductItemMobile = function (_a) {
|
|
|
6246
6269
|
_a)[size];
|
|
6247
6270
|
}, [size]);
|
|
6248
6271
|
var PriceLabelDisplay = function () {
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
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));
|
|
6258
6289
|
}
|
|
6259
|
-
return (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6260
|
-
? !isMobile
|
|
6261
|
-
? { fontSize: '16px', fontWeight: 700 }
|
|
6262
|
-
: { fontSize: '12px', fontWeight: 700 }
|
|
6263
|
-
: undefined }, void 0));
|
|
6264
6290
|
};
|
|
6265
6291
|
var RatingDisplay = function () {
|
|
6266
6292
|
if (isRatingLoading)
|