@trafilea/afrodita-components 6.8.7 → 6.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +213 -215
- package/build/index.esm.js.map +1 -1
- package/build/index.js +213 -215
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
3128
|
+
var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3152,9 +3152,9 @@ var SkeletonBox = function (_a) {
|
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
3153
|
return jsx$1(Container$1a, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1W;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1U || (templateObject_1$1U
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1f || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1V, templateObject_2$1g;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -4086,13 +4086,13 @@ function jsxs(type, props, key) {
|
|
|
4086
4086
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4087
4087
|
// `variants` styles that are consistent through all themes.
|
|
4088
4088
|
var TAGS = {
|
|
4089
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4090
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4089
|
+
hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4090
|
+
hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
|
|
4091
4091
|
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4092
4092
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4093
4093
|
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4094
|
-
display3: newStyled.h3(templateObject_6$
|
|
4095
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4094
|
+
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
4095
|
+
heading1: newStyled.h1(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
|
|
4096
4096
|
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4097
4097
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4098
4098
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4222,14 +4222,14 @@ var DEFAULTS = {
|
|
|
4222
4222
|
size: 'regular',
|
|
4223
4223
|
},
|
|
4224
4224
|
};
|
|
4225
|
-
var templateObject_1$
|
|
4225
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$s, templateObject_6$o, templateObject_7$g, 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;
|
|
4226
4226
|
|
|
4227
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
4228
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4227
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
4228
|
+
var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
4229
4229
|
var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4230
4230
|
var Label$4 = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
4231
4231
|
var Check$1 = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4232
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4232
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
4233
4233
|
var PackSelectorV2 = function (_a) {
|
|
4234
4234
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4235
4235
|
return (jsx$1(Container$19, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4254,27 +4254,27 @@ var PackCard$1 = function (_a) {
|
|
|
4254
4254
|
currency: currencyCode || 'USD',
|
|
4255
4255
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4256
4256
|
};
|
|
4257
|
-
var templateObject_1$
|
|
4257
|
+
var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$r, templateObject_6$n;
|
|
4258
4258
|
|
|
4259
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
4260
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4259
|
+
var Container$18 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4260
|
+
var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4261
4261
|
var DropList = function (_a) {
|
|
4262
4262
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4263
4263
|
return (jsx$1(Container$18, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4264
4264
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4265
4265
|
}) }, void 0));
|
|
4266
4266
|
};
|
|
4267
|
-
var templateObject_1$
|
|
4267
|
+
var templateObject_1$1S, templateObject_2$1d;
|
|
4268
4268
|
|
|
4269
4269
|
var DROPS_TOTAL = 5;
|
|
4270
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
4271
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4270
|
+
var Container$17 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4271
|
+
var Title$8 = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4272
4272
|
var Description$3 = newStyled.p(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
4273
4273
|
var AbsorbencyLevel = function (_a) {
|
|
4274
4274
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4275
4275
|
return (jsxs$1(Container$17, { 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));
|
|
4276
4276
|
};
|
|
4277
|
-
var templateObject_1$
|
|
4277
|
+
var templateObject_1$1R, templateObject_2$1c, templateObject_3$W;
|
|
4278
4278
|
|
|
4279
4279
|
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(`
|
|
4280
4280
|
`),"","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(`
|
|
@@ -4350,7 +4350,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4350
4350
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4351
4351
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4352
4352
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4353
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4353
|
+
var StyledContent = newStyled.button(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4354
4354
|
var Accordion$1 = function (_a) {
|
|
4355
4355
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4356
4356
|
var theme = useTheme();
|
|
@@ -4374,9 +4374,9 @@ var Accordion$1 = function (_a) {
|
|
|
4374
4374
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4375
4375
|
} }), void 0));
|
|
4376
4376
|
};
|
|
4377
|
-
var templateObject_1$
|
|
4377
|
+
var templateObject_1$1Q;
|
|
4378
4378
|
|
|
4379
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4379
|
+
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4380
4380
|
var AccordionOptions = function (_a) {
|
|
4381
4381
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4382
4382
|
var _b = useState({
|
|
@@ -4400,7 +4400,7 @@ var AccordionOptions = function (_a) {
|
|
|
4400
4400
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4401
4401
|
}) }, void 0));
|
|
4402
4402
|
};
|
|
4403
|
-
var templateObject_1$
|
|
4403
|
+
var templateObject_1$1P;
|
|
4404
4404
|
|
|
4405
4405
|
var CardSectionType;
|
|
4406
4406
|
(function (CardSectionType) {
|
|
@@ -4562,14 +4562,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4562
4562
|
literal: true,
|
|
4563
4563
|
});
|
|
4564
4564
|
|
|
4565
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4566
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4565
|
+
var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4566
|
+
var ErrorContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4567
4567
|
var Error$1 = function (_a) {
|
|
4568
4568
|
var error = _a.error;
|
|
4569
4569
|
var theme = useTheme();
|
|
4570
4570
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4571
4571
|
};
|
|
4572
|
-
var templateObject_1$
|
|
4572
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
4573
4573
|
|
|
4574
4574
|
var BaseSelectButton = function (_a) {
|
|
4575
4575
|
var children = _a.children, as = _a.as;
|
|
@@ -4586,7 +4586,7 @@ function BaseSelectOption(_a) {
|
|
|
4586
4586
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4587
4587
|
}
|
|
4588
4588
|
|
|
4589
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4589
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4590
4590
|
function BaseSelect(_a) {
|
|
4591
4591
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4592
4592
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4596,7 +4596,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4596
4596
|
Options: BaseSelectOptions,
|
|
4597
4597
|
Option: BaseSelectOption,
|
|
4598
4598
|
});
|
|
4599
|
-
var templateObject_1$
|
|
4599
|
+
var templateObject_1$1N;
|
|
4600
4600
|
|
|
4601
4601
|
var CustomButton = newStyled.button(function (_a) {
|
|
4602
4602
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4635,7 +4635,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4635
4635
|
});
|
|
4636
4636
|
});
|
|
4637
4637
|
//TODO Remove this when we find the real solution
|
|
4638
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4638
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4639
4639
|
var open = _a.open;
|
|
4640
4640
|
return open &&
|
|
4641
4641
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4655,7 +4655,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4655
4655
|
} }), void 0));
|
|
4656
4656
|
};
|
|
4657
4657
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4658
|
-
var templateObject_1$
|
|
4658
|
+
var templateObject_1$1M;
|
|
4659
4659
|
|
|
4660
4660
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4661
4661
|
var theme = _a.theme;
|
|
@@ -4822,7 +4822,7 @@ var CustomCheckboxStyles = {
|
|
|
4822
4822
|
},
|
|
4823
4823
|
};
|
|
4824
4824
|
|
|
4825
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4825
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4826
4826
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4827
4827
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4828
4828
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4833,7 +4833,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4833
4833
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4834
4834
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4835
4835
|
]; });
|
|
4836
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4836
|
+
var Input$5 = newStyled.input(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4837
4837
|
var disabled = _a.disabled;
|
|
4838
4838
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4839
4839
|
});
|
|
@@ -4849,7 +4849,7 @@ var Checkbox = function (_a) {
|
|
|
4849
4849
|
};
|
|
4850
4850
|
return (jsxs$1(Container$15, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4851
4851
|
};
|
|
4852
|
-
var templateObject_1$
|
|
4852
|
+
var templateObject_1$1L, templateObject_2$1a;
|
|
4853
4853
|
|
|
4854
4854
|
var CustomOption = newStyled.li(function (_a) {
|
|
4855
4855
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4898,8 +4898,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4898
4898
|
Option: BaseDropdownOption,
|
|
4899
4899
|
});
|
|
4900
4900
|
|
|
4901
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4902
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4901
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4902
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4903
4903
|
function SimpleDropdown(_a) {
|
|
4904
4904
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4905
4905
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4931,7 +4931,7 @@ function SimpleDropdown(_a) {
|
|
|
4931
4931
|
var DropdownContainer = showRequiredPlaceholder ? Container$14 : Fragment$1;
|
|
4932
4932
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4933
4933
|
}
|
|
4934
|
-
var templateObject_1$
|
|
4934
|
+
var templateObject_1$1K, templateObject_2$19;
|
|
4935
4935
|
|
|
4936
4936
|
/* base styles & size variants */
|
|
4937
4937
|
var CustomRadioStyles$2 = {
|
|
@@ -4996,9 +4996,9 @@ var ContainerStyles$2 = {
|
|
|
4996
4996
|
},
|
|
4997
4997
|
};
|
|
4998
4998
|
|
|
4999
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4999
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5000
5000
|
var Container$13 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5001
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5001
|
+
var Input$4 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5002
5002
|
var disabled = _a.disabled;
|
|
5003
5003
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5004
5004
|
});
|
|
@@ -5022,7 +5022,7 @@ var RadioInput = function (_a) {
|
|
|
5022
5022
|
};
|
|
5023
5023
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$13, __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));
|
|
5024
5024
|
};
|
|
5025
|
-
var templateObject_1$
|
|
5025
|
+
var templateObject_1$1J, templateObject_2$18, templateObject_3$V;
|
|
5026
5026
|
|
|
5027
5027
|
var getWrapperFlexDirection = function (position) {
|
|
5028
5028
|
switch (position) {
|
|
@@ -5073,7 +5073,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5073
5073
|
}
|
|
5074
5074
|
};
|
|
5075
5075
|
|
|
5076
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5076
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5077
5077
|
var position = _a.position;
|
|
5078
5078
|
return getWrapperFlexDirection(position);
|
|
5079
5079
|
}, function (_a) {
|
|
@@ -5083,7 +5083,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __ma
|
|
|
5083
5083
|
var disableHover = _a.disableHover;
|
|
5084
5084
|
return (disableHover ? 0 : 1);
|
|
5085
5085
|
});
|
|
5086
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5086
|
+
var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5087
5087
|
var position = _a.position;
|
|
5088
5088
|
return getContainerFlexDirection(position);
|
|
5089
5089
|
}, function (_a) {
|
|
@@ -5123,13 +5123,13 @@ var TooltipText = newStyled.div(templateObject_4$G || (templateObject_4$G = __ma
|
|
|
5123
5123
|
return color;
|
|
5124
5124
|
});
|
|
5125
5125
|
var TopSection = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5126
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5126
|
+
var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5127
5127
|
var color = _a.color;
|
|
5128
5128
|
return color;
|
|
5129
5129
|
});
|
|
5130
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5130
|
+
var IconContainer$5 = newStyled.div(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
5131
5131
|
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"])));
|
|
5132
|
-
var templateObject_1$
|
|
5132
|
+
var templateObject_1$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$q, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5133
5133
|
|
|
5134
5134
|
var useOnClickOutside = function (ref, handler) {
|
|
5135
5135
|
useEffect(function () {
|
|
@@ -5271,7 +5271,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5271
5271
|
};
|
|
5272
5272
|
}
|
|
5273
5273
|
};
|
|
5274
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
5274
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5275
5275
|
var backgroundColor = _a.backgroundColor;
|
|
5276
5276
|
return backgroundColor;
|
|
5277
5277
|
}, function (_a) {
|
|
@@ -5293,7 +5293,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5293
5293
|
var size = _a.size;
|
|
5294
5294
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5295
5295
|
});
|
|
5296
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5296
|
+
var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5297
5297
|
var textColor = _a.textColor;
|
|
5298
5298
|
return textColor;
|
|
5299
5299
|
}, function (_a) {
|
|
@@ -5310,7 +5310,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5310
5310
|
var theme = useTheme();
|
|
5311
5311
|
return (jsx$1(Container$12, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5312
5312
|
};
|
|
5313
|
-
var templateObject_1$
|
|
5313
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5314
5314
|
|
|
5315
5315
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5316
5316
|
var _a, _b, _c;
|
|
@@ -5341,7 +5341,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5341
5341
|
};
|
|
5342
5342
|
}
|
|
5343
5343
|
};
|
|
5344
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
5344
|
+
var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5345
5345
|
var backgroundColor = _a.backgroundColor;
|
|
5346
5346
|
return backgroundColor;
|
|
5347
5347
|
}, function (_a) {
|
|
@@ -5363,7 +5363,7 @@ var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
5363
5363
|
var size = _a.size;
|
|
5364
5364
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5365
5365
|
});
|
|
5366
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5366
|
+
var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5367
5367
|
var textColor = _a.textColor;
|
|
5368
5368
|
return textColor;
|
|
5369
5369
|
}, function (_a) {
|
|
@@ -5380,7 +5380,7 @@ var DiscountTag = function (_a) {
|
|
|
5380
5380
|
var theme = useTheme();
|
|
5381
5381
|
return (jsx$1(Container$11, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5382
5382
|
};
|
|
5383
|
-
var templateObject_1$
|
|
5383
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
5384
5384
|
|
|
5385
5385
|
var getStylesBySize$b = function (size, theme) {
|
|
5386
5386
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5422,8 +5422,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5422
5422
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5423
5423
|
}
|
|
5424
5424
|
};
|
|
5425
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5426
|
-
var Price = newStyled.p(templateObject_2$
|
|
5425
|
+
var Container$10 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5426
|
+
var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
5427
5427
|
var weight = _a.weight;
|
|
5428
5428
|
return (weight ? weight : '400');
|
|
5429
5429
|
}, function (_a) {
|
|
@@ -5480,9 +5480,9 @@ var PriceLabel = function (_a) {
|
|
|
5480
5480
|
};
|
|
5481
5481
|
return (jsxs$1(Container$10, __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));
|
|
5482
5482
|
};
|
|
5483
|
-
var templateObject_1$
|
|
5483
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5484
5484
|
|
|
5485
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5485
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5486
5486
|
var PriceLabelV2 = function (_a) {
|
|
5487
5487
|
var _b;
|
|
5488
5488
|
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, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5551,10 +5551,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5551
5551
|
lineHeight: '22px',
|
|
5552
5552
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5553
5553
|
};
|
|
5554
|
-
var templateObject_1$
|
|
5554
|
+
var templateObject_1$1E;
|
|
5555
5555
|
|
|
5556
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5557
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5556
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5557
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5558
5558
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5559
5559
|
var PriceLabelV3 = function (_a) {
|
|
5560
5560
|
var _b;
|
|
@@ -5626,10 +5626,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5626
5626
|
lineHeight: '22px',
|
|
5627
5627
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5628
5628
|
};
|
|
5629
|
-
var templateObject_1$
|
|
5629
|
+
var templateObject_1$1D, templateObject_2$13, templateObject_3$S;
|
|
5630
5630
|
|
|
5631
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5632
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5631
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5632
|
+
var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5633
5633
|
var selected = _a.selected, theme = _a.theme;
|
|
5634
5634
|
return selected
|
|
5635
5635
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5655,8 +5655,8 @@ var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p
|
|
|
5655
5655
|
var theme = _a.theme;
|
|
5656
5656
|
return theme.colors.pallete.primary.color;
|
|
5657
5657
|
});
|
|
5658
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5659
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5658
|
+
var BenefitsContainer = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5659
|
+
var Benefit = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5660
5660
|
var BenefitText = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5661
5661
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5662
5662
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -5666,7 +5666,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5666
5666
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5667
5667
|
});
|
|
5668
5668
|
var Container$$ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5669
|
-
var templateObject_1$
|
|
5669
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5670
5670
|
|
|
5671
5671
|
var radioIds = {
|
|
5672
5672
|
oneTime: {
|
|
@@ -5721,12 +5721,12 @@ var Autoship = function (_a) {
|
|
|
5721
5721
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5722
5722
|
};
|
|
5723
5723
|
|
|
5724
|
-
var Img = newStyled.img(templateObject_1$
|
|
5724
|
+
var Img = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
5725
5725
|
var Image$3 = function (_a) {
|
|
5726
5726
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
5727
5727
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5728
5728
|
};
|
|
5729
|
-
var templateObject_1$
|
|
5729
|
+
var templateObject_1$1B;
|
|
5730
5730
|
|
|
5731
5731
|
var _a$2;
|
|
5732
5732
|
var BeforeAfterVariant;
|
|
@@ -5741,13 +5741,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5741
5741
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5742
5742
|
_a$2);
|
|
5743
5743
|
|
|
5744
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5745
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5744
|
+
var CustomerDetails = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
5745
|
+
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5746
5746
|
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
5747
5747
|
var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
5748
5748
|
var Description$2 = newStyled.p(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
5749
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5750
|
-
var templateObject_1$
|
|
5749
|
+
var ReviewDays = newStyled.span(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
5750
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$o, templateObject_6$k;
|
|
5751
5751
|
|
|
5752
5752
|
var NameWithStars = function (_a) {
|
|
5753
5753
|
var name = _a.name, size = _a.size;
|
|
@@ -5765,8 +5765,8 @@ var ResultFeedback = function (_a) {
|
|
|
5765
5765
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5766
5766
|
};
|
|
5767
5767
|
|
|
5768
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5769
|
-
var ImageContainer$5 = newStyled.div(templateObject_2
|
|
5768
|
+
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
5769
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5770
5770
|
var ImageCard = newStyled.div(templateObject_3$P || (templateObject_3$P = __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; });
|
|
5771
5771
|
var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
5772
5772
|
var theme = _a.theme;
|
|
@@ -5778,7 +5778,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5778
5778
|
var theme = _a.theme, size = _a.size;
|
|
5779
5779
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5780
5780
|
});
|
|
5781
|
-
var templateObject_1$
|
|
5781
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
5782
5782
|
|
|
5783
5783
|
/* base styles & size variants */
|
|
5784
5784
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5856,7 +5856,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5856
5856
|
return (jsxs$1(Container$_, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5857
5857
|
};
|
|
5858
5858
|
|
|
5859
|
-
var Section = newStyled.div(templateObject_1$
|
|
5859
|
+
var Section = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
5860
5860
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5861
5861
|
});
|
|
5862
5862
|
var CardHeader = function (_a) {
|
|
@@ -5867,16 +5867,16 @@ var CardFooter = function (_a) {
|
|
|
5867
5867
|
var children = _a.children;
|
|
5868
5868
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5869
5869
|
};
|
|
5870
|
-
var templateObject_1$
|
|
5870
|
+
var templateObject_1$1y;
|
|
5871
5871
|
|
|
5872
|
-
var Body = newStyled.div(templateObject_1$
|
|
5872
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
5873
5873
|
var CardBody = function (_a) {
|
|
5874
5874
|
var children = _a.children;
|
|
5875
5875
|
return jsx$1(Body, { children: children }, void 0);
|
|
5876
5876
|
};
|
|
5877
|
-
var templateObject_1$
|
|
5877
|
+
var templateObject_1$1x;
|
|
5878
5878
|
|
|
5879
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5879
|
+
var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
5880
5880
|
var flex = _a.flex;
|
|
5881
5881
|
return flex &&
|
|
5882
5882
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5898,16 +5898,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5898
5898
|
Footer: CardFooter,
|
|
5899
5899
|
Body: CardBody,
|
|
5900
5900
|
});
|
|
5901
|
-
var templateObject_1$
|
|
5901
|
+
var templateObject_1$1w;
|
|
5902
5902
|
|
|
5903
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5904
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5903
|
+
var StyledWrapper = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
5904
|
+
var StyledContainer = 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"])));
|
|
5905
5905
|
var TextLabel = newStyled(Text$7)(templateObject_3$O || (templateObject_3$O = __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) {
|
|
5906
5906
|
var color = _a.color;
|
|
5907
5907
|
return color;
|
|
5908
5908
|
});
|
|
5909
5909
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
5910
|
-
var templateObject_1$
|
|
5910
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
5911
5911
|
|
|
5912
5912
|
var Minimalistic = function (_a) {
|
|
5913
5913
|
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;
|
|
@@ -5915,8 +5915,8 @@ var Minimalistic = function (_a) {
|
|
|
5915
5915
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5916
5916
|
};
|
|
5917
5917
|
|
|
5918
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
5919
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5918
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5919
|
+
var Title$6 = newStyled.h1(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
5920
5920
|
var Details$1 = newStyled.span(templateObject_3$N || (templateObject_3$N = __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; });
|
|
5921
5921
|
var PriceContainer$2 = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5922
5922
|
var Simple = function (_a) {
|
|
@@ -5924,18 +5924,18 @@ var Simple = function (_a) {
|
|
|
5924
5924
|
var theme = useTheme();
|
|
5925
5925
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$Y, { 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));
|
|
5926
5926
|
};
|
|
5927
|
-
var templateObject_1$
|
|
5927
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
5928
5928
|
|
|
5929
5929
|
var Bundle = {
|
|
5930
5930
|
Minimalistic: Minimalistic,
|
|
5931
5931
|
Simple: Simple,
|
|
5932
5932
|
};
|
|
5933
5933
|
|
|
5934
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5934
|
+
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
5935
5935
|
var displayBNPL = _a.displayBNPL;
|
|
5936
5936
|
return (displayBNPL ? 'flex' : 'none');
|
|
5937
5937
|
});
|
|
5938
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5938
|
+
var TextContainer$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
5939
5939
|
var IconWrapper$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
5940
5940
|
var BuyNowPayLater = function (_a) {
|
|
5941
5941
|
var _b;
|
|
@@ -5948,41 +5948,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5948
5948
|
}
|
|
5949
5949
|
return (jsx$1(Container$X, __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$7, __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));
|
|
5950
5950
|
};
|
|
5951
|
-
var templateObject_1$
|
|
5951
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$M;
|
|
5952
5952
|
|
|
5953
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5953
|
+
var Text$6 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5954
5954
|
var Title$5 = function (_a) {
|
|
5955
5955
|
var title = _a.title;
|
|
5956
5956
|
var theme = useTheme();
|
|
5957
5957
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5958
5958
|
};
|
|
5959
|
-
var templateObject_1$
|
|
5959
|
+
var templateObject_1$1s;
|
|
5960
5960
|
|
|
5961
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5961
|
+
var P$3 = newStyled.p(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5962
5962
|
var Promo = function (_a) {
|
|
5963
5963
|
var text = _a.text;
|
|
5964
5964
|
var theme = useTheme();
|
|
5965
5965
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5966
5966
|
};
|
|
5967
|
-
var templateObject_1$
|
|
5967
|
+
var templateObject_1$1r;
|
|
5968
5968
|
|
|
5969
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
5969
|
+
var Text$5 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5970
5970
|
var Description$1 = function (_a) {
|
|
5971
5971
|
var text = _a.text;
|
|
5972
5972
|
var theme = useTheme();
|
|
5973
5973
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5974
5974
|
};
|
|
5975
|
-
var templateObject_1$
|
|
5975
|
+
var templateObject_1$1q;
|
|
5976
5976
|
|
|
5977
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5977
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
5978
5978
|
var CloseButton$1 = function (_a) {
|
|
5979
5979
|
var onClick = _a.onClick, size = _a.size;
|
|
5980
5980
|
var theme = useTheme();
|
|
5981
5981
|
return (jsx$1(Container$W, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5982
5982
|
};
|
|
5983
|
-
var templateObject_1$
|
|
5983
|
+
var templateObject_1$1p;
|
|
5984
5984
|
|
|
5985
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
5985
|
+
var Text$4 = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
5986
5986
|
var backgroundColor = _a.backgroundColor;
|
|
5987
5987
|
return backgroundColor;
|
|
5988
5988
|
}, function (_a) {
|
|
@@ -5997,7 +5997,7 @@ var OfferBanner = function (_a) {
|
|
|
5997
5997
|
var theme = useTheme();
|
|
5998
5998
|
return (jsx$1(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5999
5999
|
};
|
|
6000
|
-
var templateObject_1$
|
|
6000
|
+
var templateObject_1$1o;
|
|
6001
6001
|
|
|
6002
6002
|
var CartProductItem = {
|
|
6003
6003
|
Title: Title$5,
|
|
@@ -6007,20 +6007,20 @@ var CartProductItem = {
|
|
|
6007
6007
|
CloseButton: CloseButton$1,
|
|
6008
6008
|
};
|
|
6009
6009
|
|
|
6010
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6011
|
-
var MobileContainer = newStyled(Container$V)(templateObject_2$
|
|
6010
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6011
|
+
var MobileContainer = newStyled(Container$V)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6012
6012
|
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6013
6013
|
var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
6014
6014
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6015
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6016
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6015
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6016
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6017
6017
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6018
6018
|
var ClubPriceLabel = function (_a) {
|
|
6019
6019
|
var clubPrice = _a.clubPrice;
|
|
6020
6020
|
var isMobile = useWindowDimensions().isMobile;
|
|
6021
6021
|
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$V, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6022
6022
|
};
|
|
6023
|
-
var templateObject_1$
|
|
6023
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$n, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6024
6024
|
|
|
6025
6025
|
var Spacing = function (_a) {
|
|
6026
6026
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6028,8 +6028,8 @@ var Spacing = function (_a) {
|
|
|
6028
6028
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6029
6029
|
};
|
|
6030
6030
|
|
|
6031
|
-
var Container$U = newStyled('div')(templateObject_1$
|
|
6032
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6031
|
+
var Container$U = newStyled('div')(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
6032
|
+
var Content$2 = newStyled('div')(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6033
6033
|
var BarContainer$1 = newStyled('div')(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6034
6034
|
var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __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) {
|
|
6035
6035
|
var index = _a.index;
|
|
@@ -6042,12 +6042,12 @@ var StrengthBars = function (_a) {
|
|
|
6042
6042
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6043
6043
|
return (jsxs$1(Container$U, __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));
|
|
6044
6044
|
};
|
|
6045
|
-
var templateObject_1$
|
|
6045
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6046
6046
|
|
|
6047
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
6048
|
-
var templateObject_1$
|
|
6047
|
+
var Container$T = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6048
|
+
var templateObject_1$1l;
|
|
6049
6049
|
|
|
6050
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6050
|
+
var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6051
6051
|
var marginRight = _a.marginRight;
|
|
6052
6052
|
return marginRight;
|
|
6053
6053
|
});
|
|
@@ -6063,7 +6063,7 @@ var StarList = function (_a) {
|
|
|
6063
6063
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6064
6064
|
}) }, void 0));
|
|
6065
6065
|
};
|
|
6066
|
-
var templateObject_1$
|
|
6066
|
+
var templateObject_1$1k;
|
|
6067
6067
|
|
|
6068
6068
|
/* base styles & size variants */
|
|
6069
6069
|
var LabelStyles = {
|
|
@@ -6104,8 +6104,8 @@ var LabelStyles = {
|
|
|
6104
6104
|
});
|
|
6105
6105
|
},
|
|
6106
6106
|
};
|
|
6107
|
-
var Container$S = newStyled.a(templateObject_1$
|
|
6108
|
-
var templateObject_1$
|
|
6107
|
+
var Container$S = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6108
|
+
var templateObject_1$1j;
|
|
6109
6109
|
|
|
6110
6110
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6111
6111
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6125,7 +6125,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6125
6125
|
}),
|
|
6126
6126
|
];
|
|
6127
6127
|
});
|
|
6128
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6128
|
+
var RatingLabel = newStyled.span(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6129
6129
|
var starsNumber = 5;
|
|
6130
6130
|
var Rating = function (_a) {
|
|
6131
6131
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6148,10 +6148,10 @@ var Rating = function (_a) {
|
|
|
6148
6148
|
: {};
|
|
6149
6149
|
return (jsxs$1(Container$S, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6150
6150
|
};
|
|
6151
|
-
var templateObject_1$
|
|
6151
|
+
var templateObject_1$1i;
|
|
6152
6152
|
|
|
6153
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6154
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6153
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6154
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6155
6155
|
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6156
6156
|
var PriceWithTagContainer = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
|
|
6157
6157
|
var RegularPriceTag = function () {
|
|
@@ -6206,7 +6206,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6206
6206
|
? finalPriceArray[0]
|
|
6207
6207
|
: (_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));
|
|
6208
6208
|
};
|
|
6209
|
-
var templateObject_1$
|
|
6209
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y;
|
|
6210
6210
|
|
|
6211
6211
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6212
6212
|
var width = _a.width, height = _a.height;
|
|
@@ -6216,8 +6216,8 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6216
6216
|
height: height,
|
|
6217
6217
|
});
|
|
6218
6218
|
});
|
|
6219
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6220
|
-
var Container$R = newStyled.a(templateObject_2$
|
|
6219
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6220
|
+
var Container$R = newStyled.a(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6221
6221
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6222
6222
|
var Title$4 = newStyled.p(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6223
6223
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6249,11 +6249,11 @@ var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m
|
|
|
6249
6249
|
var style = _a.style;
|
|
6250
6250
|
return style.width;
|
|
6251
6251
|
});
|
|
6252
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6252
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6253
6253
|
var style = _a.style;
|
|
6254
6254
|
return style.width;
|
|
6255
6255
|
});
|
|
6256
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6256
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6257
6257
|
var ProductItemMobile = function (_a) {
|
|
6258
6258
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6259
6259
|
display: false,
|
|
@@ -6312,7 +6312,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6312
6312
|
};
|
|
6313
6313
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$R, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6314
6314
|
};
|
|
6315
|
-
var templateObject_1$
|
|
6315
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6316
6316
|
|
|
6317
6317
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6318
6318
|
var width = _a.width, height = _a.height;
|
|
@@ -6322,8 +6322,8 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6322
6322
|
height: height,
|
|
6323
6323
|
});
|
|
6324
6324
|
});
|
|
6325
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6326
|
-
var Container$Q = newStyled.a(templateObject_2$
|
|
6325
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6326
|
+
var Container$Q = newStyled.a(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6327
6327
|
var ProdCardContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6328
6328
|
var Title$3 = newStyled.p(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6329
6329
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6355,11 +6355,11 @@ var TopTagContainer$4 = newStyled.div(templateObject_5$l || (templateObject_5$l
|
|
|
6355
6355
|
var style = _a.style;
|
|
6356
6356
|
return style.width;
|
|
6357
6357
|
});
|
|
6358
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_6$
|
|
6358
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6359
6359
|
var style = _a.style;
|
|
6360
6360
|
return style.width;
|
|
6361
6361
|
});
|
|
6362
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6362
|
+
var MarginTopContainer = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6363
6363
|
var ProductItemTK = function (_a) {
|
|
6364
6364
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6365
6365
|
display: false,
|
|
@@ -6410,9 +6410,9 @@ var ProductItemTK = function (_a) {
|
|
|
6410
6410
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6411
6411
|
} }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6412
6412
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6414
6414
|
|
|
6415
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
6415
|
+
var Container$P = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6416
6416
|
function withProductGrid(ProductItemComponent, data) {
|
|
6417
6417
|
function WithProductGrid(props) {
|
|
6418
6418
|
return (jsx$1(Container$P, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6422,7 +6422,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6422
6422
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6423
6423
|
return WithProductGrid;
|
|
6424
6424
|
}
|
|
6425
|
-
var templateObject_1$
|
|
6425
|
+
var templateObject_1$1e;
|
|
6426
6426
|
|
|
6427
6427
|
var Collection = {
|
|
6428
6428
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6469,8 +6469,8 @@ var OutOfStock = function (_a) {
|
|
|
6469
6469
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6470
6470
|
};
|
|
6471
6471
|
|
|
6472
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6473
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6472
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6473
|
+
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6474
6474
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6475
6475
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6476
6476
|
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -6491,23 +6491,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6491
6491
|
Option: Option,
|
|
6492
6492
|
OptionsContainer: OptionsContainer,
|
|
6493
6493
|
});
|
|
6494
|
-
var templateObject_1$
|
|
6494
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$k;
|
|
6495
6495
|
|
|
6496
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
6496
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6497
6497
|
var borderColor = _a.borderColor;
|
|
6498
6498
|
return borderColor;
|
|
6499
6499
|
}, function (_a) {
|
|
6500
6500
|
var noStock = _a.noStock;
|
|
6501
6501
|
return (noStock ? '0.4' : '1');
|
|
6502
6502
|
});
|
|
6503
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6503
|
+
var Image$2 = newStyled.img(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6504
6504
|
var PatternSelector = function (_a) {
|
|
6505
6505
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6506
6506
|
var theme = useTheme();
|
|
6507
6507
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6508
6508
|
return (jsx$1(Container$O, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6509
6509
|
};
|
|
6510
|
-
var templateObject_1$
|
|
6510
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6511
6511
|
|
|
6512
6512
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6513
6513
|
if (options == null || options.length === 0) {
|
|
@@ -6566,21 +6566,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6566
6566
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6567
6567
|
};
|
|
6568
6568
|
|
|
6569
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6570
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6569
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6570
|
+
var Col$1 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6571
6571
|
var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6572
6572
|
return props.rightToLeft &&
|
|
6573
6573
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6574
6574
|
});
|
|
6575
6575
|
var H5 = newStyled.h5(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6576
6576
|
var H3$1 = newStyled.h3(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6577
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6577
|
+
var FreeShipping = newStyled.span(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6578
6578
|
var CrossSellCheckbox = function (_a) {
|
|
6579
6579
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6580
6580
|
var theme = useTheme();
|
|
6581
6581
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6582
6582
|
};
|
|
6583
|
-
var templateObject_1$
|
|
6583
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6584
6584
|
|
|
6585
6585
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6586
6586
|
__proto__: null,
|
|
@@ -6608,7 +6608,7 @@ var sizeMapper = (_a = {},
|
|
|
6608
6608
|
_a[ComponentSize.Large] = 'large',
|
|
6609
6609
|
_a[ComponentSize.XSmall] = 'small',
|
|
6610
6610
|
_a);
|
|
6611
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6611
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6612
6612
|
var wide = _a.wide;
|
|
6613
6613
|
return (wide ? '100%' : 'fit-content');
|
|
6614
6614
|
}, function (_a) {
|
|
@@ -6630,8 +6630,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$19 || (templateObj
|
|
|
6630
6630
|
var theme = _a.theme;
|
|
6631
6631
|
return theme.colors.text.disabled;
|
|
6632
6632
|
});
|
|
6633
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6634
|
-
var templateObject_1$
|
|
6633
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6634
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
6635
6635
|
|
|
6636
6636
|
var BaseCTA = function (_a) {
|
|
6637
6637
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6698,8 +6698,8 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6698
6698
|
} }), void 0));
|
|
6699
6699
|
};
|
|
6700
6700
|
|
|
6701
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
6702
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6701
|
+
var Container$N = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6702
|
+
var IconContainer$4 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6703
6703
|
var Text$3 = newStyled.p(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6704
6704
|
var Details = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6705
6705
|
var Note = function (_a) {
|
|
@@ -6707,13 +6707,13 @@ var Note = function (_a) {
|
|
|
6707
6707
|
var theme = useTheme();
|
|
6708
6708
|
return (jsxs$1(Container$N, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6709
6709
|
};
|
|
6710
|
-
var templateObject_1$
|
|
6710
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t;
|
|
6711
6711
|
|
|
6712
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6712
|
+
var Title$2 = newStyled.h1(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
6713
6713
|
var theme = _a.theme;
|
|
6714
6714
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
6715
6715
|
});
|
|
6716
|
-
var Line = newStyled.div(templateObject_2$
|
|
6716
|
+
var Line = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
6717
6717
|
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
6718
6718
|
flexDirection: ['column', 'row'],
|
|
6719
6719
|
}));
|
|
@@ -6729,13 +6729,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$i || (templateObject_5$i =
|
|
|
6729
6729
|
marginBottom: ['10px', '0'],
|
|
6730
6730
|
width: ['auto', '1.5rem'],
|
|
6731
6731
|
}));
|
|
6732
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6732
|
+
var SectionTitle = newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6733
6733
|
display: ['block', 'flex'],
|
|
6734
6734
|
}), function (_a) {
|
|
6735
6735
|
var theme = _a.theme;
|
|
6736
6736
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
6737
6737
|
});
|
|
6738
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6738
|
+
var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
6739
6739
|
var theme = _a.theme;
|
|
6740
6740
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
6741
6741
|
}, function (_a) {
|
|
@@ -6752,16 +6752,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6752
6752
|
var theme = useTheme();
|
|
6753
6753
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6754
6754
|
};
|
|
6755
|
-
var templateObject_1$
|
|
6755
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6756
6756
|
|
|
6757
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6757
|
+
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
6758
6758
|
var top = _a.top;
|
|
6759
6759
|
return top;
|
|
6760
6760
|
}, function (_a) {
|
|
6761
6761
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6762
6762
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6763
6763
|
});
|
|
6764
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6764
|
+
var Sidebar = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
6765
6765
|
var height = _a.height;
|
|
6766
6766
|
return height;
|
|
6767
6767
|
}, function (_a) {
|
|
@@ -6808,20 +6808,20 @@ var Drawer = function (_a) {
|
|
|
6808
6808
|
}, [isOpen, onClose, onOpen]);
|
|
6809
6809
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6810
6810
|
};
|
|
6811
|
-
var templateObject_1$
|
|
6811
|
+
var templateObject_1$17, templateObject_2$N;
|
|
6812
6812
|
|
|
6813
6813
|
var TooltipArrow = function (_a) {
|
|
6814
6814
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6815
6815
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
6816
6816
|
};
|
|
6817
6817
|
|
|
6818
|
-
var List = newStyled.ul(templateObject_1$
|
|
6819
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6818
|
+
var List = newStyled.ul(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6819
|
+
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6820
6820
|
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
6821
6821
|
var ArrowContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
6822
6822
|
var StyledDropdown = newStyled.ul(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
6823
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6824
|
-
var templateObject_1$
|
|
6823
|
+
var DropdownItem = newStyled.li(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
6824
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6825
6825
|
|
|
6826
6826
|
var DropdownListIcons = function (_a) {
|
|
6827
6827
|
var items = _a.items;
|
|
@@ -6834,13 +6834,13 @@ var Dropdown = function (_a) {
|
|
|
6834
6834
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6835
6835
|
};
|
|
6836
6836
|
|
|
6837
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6838
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6837
|
+
var DropdownContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6838
|
+
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6839
6839
|
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6840
6840
|
var DetailLabel = newStyled.span(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
6841
6841
|
var DropdownOptions = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
6842
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6843
|
-
var templateObject_1$
|
|
6842
|
+
var DropdownOption = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
6843
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6844
6844
|
|
|
6845
6845
|
var SizeDropdown = function (_a) {
|
|
6846
6846
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6863,8 +6863,8 @@ var SizeDropdown = function (_a) {
|
|
|
6863
6863
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6864
6864
|
};
|
|
6865
6865
|
|
|
6866
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6867
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6866
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6867
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6868
6868
|
var DialogDropdownListItem = newStyled.li(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
6869
6869
|
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
6870
6870
|
var DropdownDialog = function (_a) {
|
|
@@ -6875,7 +6875,7 @@ var DropdownDialog = function (_a) {
|
|
|
6875
6875
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6876
6876
|
}) }), void 0) }), void 0));
|
|
6877
6877
|
};
|
|
6878
|
-
var templateObject_1$
|
|
6878
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
6879
6879
|
|
|
6880
6880
|
function FilteringDropdown(_a) {
|
|
6881
6881
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -6908,8 +6908,8 @@ function FilteringDropdown(_a) {
|
|
|
6908
6908
|
}) }, void 0)] }), void 0));
|
|
6909
6909
|
}
|
|
6910
6910
|
|
|
6911
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6912
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6911
|
+
var Title$1 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6912
|
+
var H3 = newStyled.h3(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6913
6913
|
var ArrowContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6914
6914
|
var Container$M = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
6915
6915
|
var Accordion = function (_a) {
|
|
@@ -6918,19 +6918,19 @@ var Accordion = function (_a) {
|
|
|
6918
6918
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6919
6919
|
return (jsxs$1(Container$M, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6920
6920
|
};
|
|
6921
|
-
var templateObject_1$
|
|
6921
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z, templateObject_4$o;
|
|
6922
6922
|
|
|
6923
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6924
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6923
|
+
var SectionContent = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6924
|
+
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6925
6925
|
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
6926
6926
|
var MobileIconsContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
6927
6927
|
var H4 = newStyled.h4(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6928
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6929
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6928
|
+
var FilterLink = newStyled.a(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6929
|
+
var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
6930
6930
|
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6931
6931
|
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6932
6932
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
6933
|
-
var templateObject_1$
|
|
6933
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6934
6934
|
|
|
6935
6935
|
var getStylesBySize$7 = function (size, theme) {
|
|
6936
6936
|
switch (size) {
|
|
@@ -6995,8 +6995,8 @@ var SelectorSecondary = function (_a) {
|
|
|
6995
6995
|
} }), id: id }, void 0));
|
|
6996
6996
|
};
|
|
6997
6997
|
|
|
6998
|
-
var UL = newStyled.ul(templateObject_1$
|
|
6999
|
-
var LI = newStyled.li(templateObject_2$
|
|
6998
|
+
var UL = newStyled.ul(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
6999
|
+
var LI = newStyled.li(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7000
7000
|
var CloseIconContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7001
7001
|
var Tags = function (_a) {
|
|
7002
7002
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7005,7 +7005,7 @@ var Tags = function (_a) {
|
|
|
7005
7005
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7006
7006
|
}) }), void 0));
|
|
7007
7007
|
};
|
|
7008
|
-
var templateObject_1$
|
|
7008
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$x;
|
|
7009
7009
|
|
|
7010
7010
|
var Filters = function (_a) {
|
|
7011
7011
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7141,8 +7141,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7141
7141
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7142
7142
|
};
|
|
7143
7143
|
|
|
7144
|
-
var Wrapper$4 = newStyled.div(templateObject_1
|
|
7145
|
-
var Container$L = newStyled.div(templateObject_2$
|
|
7144
|
+
var Wrapper$4 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7145
|
+
var Container$L = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7146
7146
|
var FitGuarantee = function (_a) {
|
|
7147
7147
|
var _b;
|
|
7148
7148
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7160,10 +7160,10 @@ var FitGuarantee = function (_a) {
|
|
|
7160
7160
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7161
7161
|
} }, { children: title }), void 0), jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7162
7162
|
};
|
|
7163
|
-
var templateObject_1
|
|
7163
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7164
7164
|
|
|
7165
|
-
var Container$K = newStyled.div(templateObject_1
|
|
7166
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7165
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7166
|
+
var P$2 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7167
7167
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7168
7168
|
border: 'none',
|
|
7169
7169
|
background: 'transparent',
|
|
@@ -7178,7 +7178,7 @@ var FitPredictor = function (_a) {
|
|
|
7178
7178
|
var theme = useTheme();
|
|
7179
7179
|
return (jsxs(Container$K, __assign$1({ theme: theme }, { children: [jsx(Container$K, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7180
7180
|
};
|
|
7181
|
-
var templateObject_1
|
|
7181
|
+
var templateObject_1$$, templateObject_2$F;
|
|
7182
7182
|
|
|
7183
7183
|
var Button$6 = newStyled.button(function () { return ({
|
|
7184
7184
|
background: 'transparent',
|
|
@@ -11422,14 +11422,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11422
11422
|
return Slider;
|
|
11423
11423
|
}(React__default.Component);
|
|
11424
11424
|
|
|
11425
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11425
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11426
11426
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11427
11427
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11428
11428
|
}, function (_a) {
|
|
11429
11429
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11430
11430
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11431
11431
|
});
|
|
11432
|
-
var templateObject_1$
|
|
11432
|
+
var templateObject_1$_;
|
|
11433
11433
|
|
|
11434
11434
|
var getStylesBySize$6 = function (size) {
|
|
11435
11435
|
// rem units
|
|
@@ -11488,7 +11488,7 @@ var SliderNavigation = function (_a) {
|
|
|
11488
11488
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11489
11489
|
};
|
|
11490
11490
|
|
|
11491
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11491
|
+
var Image$1 = newStyled.img(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11492
11492
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11493
11493
|
return borderRadiusVariant &&
|
|
11494
11494
|
"\nborder-radius: 20px;\n";
|
|
@@ -11503,10 +11503,10 @@ var ImageSmallPreview = function (_a) {
|
|
|
11503
11503
|
var theme = useTheme();
|
|
11504
11504
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11505
11505
|
};
|
|
11506
|
-
var templateObject_1$
|
|
11506
|
+
var templateObject_1$Z;
|
|
11507
11507
|
|
|
11508
|
-
var horizontalStyles = css(templateObject_1$
|
|
11509
|
-
var verticalStyles = css(templateObject_2$
|
|
11508
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11509
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11510
11510
|
var Container$J = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11511
11511
|
var position = _a.position;
|
|
11512
11512
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11517,8 +11517,8 @@ var Container$J = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11517
11517
|
});
|
|
11518
11518
|
var Button$5 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11519
11519
|
var ArrowsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11520
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11521
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11520
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11521
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11522
11522
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11523
11523
|
var ImagePreviewList = function (_a) {
|
|
11524
11524
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
@@ -11536,7 +11536,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11536
11536
|
arrowPadding: 1.625,
|
|
11537
11537
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11538
11538
|
};
|
|
11539
|
-
var templateObject_1$
|
|
11539
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11540
11540
|
|
|
11541
11541
|
var propTypes = {exports: {}};
|
|
11542
11542
|
|
|
@@ -13129,27 +13129,33 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13129
13129
|
afterZoomOut: PropTypes.func
|
|
13130
13130
|
} : {};
|
|
13131
13131
|
|
|
13132
|
-
var
|
|
13133
|
-
var
|
|
13134
|
-
var
|
|
13135
|
-
var HTMLVideo = newStyled.video(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13136
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13137
|
-
var PlayContainer = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13138
|
-
var PauseContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13139
|
-
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$b, templateObject_7$8;
|
|
13132
|
+
var ProgressContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13133
|
+
var ProgressFiller = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13134
|
+
var templateObject_1$X, templateObject_2$D;
|
|
13140
13135
|
|
|
13141
13136
|
var ProgressBar$1 = function (_a) {
|
|
13142
|
-
var
|
|
13143
|
-
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar" }, { children: jsx$1(ProgressFiller, { progress:
|
|
13144
|
-
};
|
|
13137
|
+
var progress = _a.progress, hide = _a.hide;
|
|
13138
|
+
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13139
|
+
};
|
|
13140
|
+
|
|
13141
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13142
|
+
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13143
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13144
|
+
var PlayContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13145
|
+
var PauseContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13146
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d;
|
|
13147
|
+
|
|
13145
13148
|
var Video$1 = function (_a) {
|
|
13149
|
+
var _b, _c, _d, _e;
|
|
13146
13150
|
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13147
13151
|
var videoRef = useRef(null);
|
|
13148
|
-
var
|
|
13149
|
-
var
|
|
13150
|
-
var
|
|
13151
|
-
var
|
|
13152
|
+
var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13153
|
+
var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
13154
|
+
var _h = useState(0), videoProgress = _h[0], setVideoProgress = _h[1];
|
|
13155
|
+
var _j = useState(false), debouncePlay = _j[0], setDebouncePlay = _j[1];
|
|
13152
13156
|
var isStarted = videoProgress > 0;
|
|
13157
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13158
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13153
13159
|
var handlePlayClick = function () {
|
|
13154
13160
|
if (videoRef.current && !debouncePlay) {
|
|
13155
13161
|
setDebouncePlay(true);
|
|
@@ -13171,20 +13177,12 @@ var Video$1 = function (_a) {
|
|
|
13171
13177
|
setIsPlaying(false);
|
|
13172
13178
|
}
|
|
13173
13179
|
};
|
|
13174
|
-
// useEffect(() => {
|
|
13175
|
-
// const interval = setInterval(() => {
|
|
13176
|
-
// if (videoRef.current) {
|
|
13177
|
-
// setVideoProgress(videoRef.current.currentTime / videoRef.current.duration);
|
|
13178
|
-
// }
|
|
13179
|
-
// }, 25);
|
|
13180
|
-
// return () => clearInterval(interval);
|
|
13181
|
-
// }, []);
|
|
13182
13180
|
var onTimeUpdate = function () {
|
|
13183
13181
|
if (videoRef.current) {
|
|
13184
|
-
setVideoProgress(videoRef.current.currentTime
|
|
13182
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
13185
13183
|
}
|
|
13186
13184
|
};
|
|
13187
|
-
return (jsxs$1(Container$I, { children: [!isLoading && jsx$1(ProgressBar$1, {
|
|
13185
|
+
return (jsxs$1(Container$I, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); } }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13188
13186
|
};
|
|
13189
13187
|
|
|
13190
13188
|
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|