@trafilea/afrodita-components 6.8.13 → 6.8.14
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.css +2 -1
- package/build/index.d.ts +55 -44
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +677 -567
- package/build/index.esm.js.map +1 -1
- package/build/index.js +677 -566
- 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$
|
|
3128
|
+
var Container$1c = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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) {
|
|
@@ -3150,11 +3150,11 @@ var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1Y;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X = __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$1V || (templateObject_1$1V
|
|
|
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$1h || (templateObject_2$1h = __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$1g || (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$1X, templateObject_2$1h;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -4101,9 +4101,9 @@ function jsxs(type, props, key) {
|
|
|
4101
4101
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4102
4102
|
// `variants` styles that are consistent through all themes.
|
|
4103
4103
|
var TAGS = {
|
|
4104
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4105
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4106
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4104
|
+
hero1: newStyled.h1(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""]))),
|
|
4105
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4106
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4107
4107
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4108
4108
|
display2: newStyled.h2(templateObject_5$t || (templateObject_5$t = __makeTemplateObject([""], [""]))),
|
|
4109
4109
|
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4237,17 +4237,17 @@ var DEFAULTS = {
|
|
|
4237
4237
|
size: 'regular',
|
|
4238
4238
|
},
|
|
4239
4239
|
};
|
|
4240
|
-
var templateObject_1$
|
|
4240
|
+
var templateObject_1$1W, templateObject_2$1g, templateObject_3$Z, templateObject_4$I, templateObject_5$t, 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;
|
|
4241
4241
|
|
|
4242
|
-
var Container$
|
|
4243
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4244
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4242
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
4243
|
+
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4244
|
+
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
4245
4245
|
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"])));
|
|
4246
4246
|
var Check$1 = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
4247
4247
|
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"])));
|
|
4248
4248
|
var PackSelectorV2 = function (_a) {
|
|
4249
4249
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4250
|
-
return (jsx$1(Container$
|
|
4250
|
+
return (jsx$1(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4251
4251
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4252
4252
|
}) }), void 0));
|
|
4253
4253
|
};
|
|
@@ -4269,27 +4269,27 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4269
|
currency: currencyCode || 'USD',
|
|
4270
4270
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4271
4271
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$s, templateObject_6$n;
|
|
4273
4273
|
|
|
4274
|
-
var Container$
|
|
4275
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4274
|
+
var Container$1a = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4275
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4276
4276
|
var DropList = function (_a) {
|
|
4277
4277
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4278
|
-
return (jsx$1(Container$
|
|
4278
|
+
return (jsx$1(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4279
4279
|
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));
|
|
4280
4280
|
}) }, void 0));
|
|
4281
4281
|
};
|
|
4282
|
-
var templateObject_1$
|
|
4282
|
+
var templateObject_1$1U, templateObject_2$1e;
|
|
4283
4283
|
|
|
4284
4284
|
var DROPS_TOTAL = 5;
|
|
4285
|
-
var Container$
|
|
4286
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4287
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4285
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4286
|
+
var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4287
|
+
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4288
4288
|
var AbsorbencyLevel = function (_a) {
|
|
4289
4289
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4290
|
-
return (jsxs$1(Container$
|
|
4290
|
+
return (jsxs$1(Container$19, { 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));
|
|
4291
4291
|
};
|
|
4292
|
-
var templateObject_1$
|
|
4292
|
+
var templateObject_1$1T, templateObject_2$1d, templateObject_3$X;
|
|
4293
4293
|
|
|
4294
4294
|
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(`
|
|
4295
4295
|
`),"","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(`
|
|
@@ -4365,7 +4365,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4365
4365
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4366
4366
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4367
4367
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4368
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4368
|
+
var StyledContent = newStyled.button(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
4369
4369
|
var Accordion$1 = function (_a) {
|
|
4370
4370
|
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;
|
|
4371
4371
|
var theme = useTheme();
|
|
@@ -4389,9 +4389,9 @@ var Accordion$1 = function (_a) {
|
|
|
4389
4389
|
} }, { 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));
|
|
4390
4390
|
} }), void 0));
|
|
4391
4391
|
};
|
|
4392
|
-
var templateObject_1$
|
|
4392
|
+
var templateObject_1$1S;
|
|
4393
4393
|
|
|
4394
|
-
var Container$
|
|
4394
|
+
var Container$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4395
4395
|
var AccordionOptions = function (_a) {
|
|
4396
4396
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4397
4397
|
var _b = useState({
|
|
@@ -4404,7 +4404,7 @@ var AccordionOptions = function (_a) {
|
|
|
4404
4404
|
}
|
|
4405
4405
|
return false;
|
|
4406
4406
|
};
|
|
4407
|
-
return (jsx$1(Container$
|
|
4407
|
+
return (jsx$1(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4408
4408
|
var forceOpenValue = getForceOpen(index);
|
|
4409
4409
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4410
4410
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4415,7 +4415,7 @@ var AccordionOptions = function (_a) {
|
|
|
4415
4415
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4416
4416
|
}) }, void 0));
|
|
4417
4417
|
};
|
|
4418
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1R;
|
|
4419
4419
|
|
|
4420
4420
|
var CardSectionType;
|
|
4421
4421
|
(function (CardSectionType) {
|
|
@@ -4577,14 +4577,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4577
4577
|
literal: true,
|
|
4578
4578
|
});
|
|
4579
4579
|
|
|
4580
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4581
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4580
|
+
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
4581
|
+
var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4582
4582
|
var Error$1 = function (_a) {
|
|
4583
4583
|
var error = _a.error;
|
|
4584
4584
|
var theme = useTheme();
|
|
4585
4585
|
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));
|
|
4586
4586
|
};
|
|
4587
|
-
var templateObject_1$
|
|
4587
|
+
var templateObject_1$1Q, templateObject_2$1c;
|
|
4588
4588
|
|
|
4589
4589
|
var BaseSelectButton = function (_a) {
|
|
4590
4590
|
var children = _a.children, as = _a.as;
|
|
@@ -4601,7 +4601,7 @@ function BaseSelectOption(_a) {
|
|
|
4601
4601
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4602
4602
|
}
|
|
4603
4603
|
|
|
4604
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4604
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4605
4605
|
function BaseSelect(_a) {
|
|
4606
4606
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4607
4607
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4611,7 +4611,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4611
4611
|
Options: BaseSelectOptions,
|
|
4612
4612
|
Option: BaseSelectOption,
|
|
4613
4613
|
});
|
|
4614
|
-
var templateObject_1$
|
|
4614
|
+
var templateObject_1$1P;
|
|
4615
4615
|
|
|
4616
4616
|
var CustomButton = newStyled.button(function (_a) {
|
|
4617
4617
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4650,7 +4650,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4650
4650
|
});
|
|
4651
4651
|
});
|
|
4652
4652
|
//TODO Remove this when we find the real solution
|
|
4653
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4653
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4654
4654
|
var open = _a.open;
|
|
4655
4655
|
return open &&
|
|
4656
4656
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4670,7 +4670,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4670
4670
|
} }), void 0));
|
|
4671
4671
|
};
|
|
4672
4672
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4673
|
-
var templateObject_1$
|
|
4673
|
+
var templateObject_1$1O;
|
|
4674
4674
|
|
|
4675
4675
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4676
4676
|
var theme = _a.theme;
|
|
@@ -4837,7 +4837,7 @@ var CustomCheckboxStyles = {
|
|
|
4837
4837
|
},
|
|
4838
4838
|
};
|
|
4839
4839
|
|
|
4840
|
-
var Container$
|
|
4840
|
+
var Container$17 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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"])));
|
|
4841
4841
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4842
4842
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4843
4843
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4848,7 +4848,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4848
4848
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4849
4849
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4850
4850
|
]; });
|
|
4851
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4851
|
+
var Input$5 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
4852
4852
|
var disabled = _a.disabled;
|
|
4853
4853
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4854
4854
|
});
|
|
@@ -4862,9 +4862,9 @@ var Checkbox = function (_a) {
|
|
|
4862
4862
|
}
|
|
4863
4863
|
onChange(e.target.checked);
|
|
4864
4864
|
};
|
|
4865
|
-
return (jsxs$1(Container$
|
|
4865
|
+
return (jsxs$1(Container$17, { 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));
|
|
4866
4866
|
};
|
|
4867
|
-
var templateObject_1$
|
|
4867
|
+
var templateObject_1$1N, templateObject_2$1b;
|
|
4868
4868
|
|
|
4869
4869
|
var CustomOption = newStyled.li(function (_a) {
|
|
4870
4870
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4913,8 +4913,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4913
4913
|
Option: BaseDropdownOption,
|
|
4914
4914
|
});
|
|
4915
4915
|
|
|
4916
|
-
var Container$
|
|
4917
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4916
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
4917
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4918
4918
|
function SimpleDropdown(_a) {
|
|
4919
4919
|
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;
|
|
4920
4920
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4943,10 +4943,10 @@ function SimpleDropdown(_a) {
|
|
|
4943
4943
|
}
|
|
4944
4944
|
setSelectedValue(value);
|
|
4945
4945
|
}, [value, options, initialValue]);
|
|
4946
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4946
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
|
|
4947
4947
|
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));
|
|
4948
4948
|
}
|
|
4949
|
-
var templateObject_1$
|
|
4949
|
+
var templateObject_1$1M, templateObject_2$1a;
|
|
4950
4950
|
|
|
4951
4951
|
/* base styles & size variants */
|
|
4952
4952
|
var CustomRadioStyles$2 = {
|
|
@@ -5011,9 +5011,9 @@ var ContainerStyles$2 = {
|
|
|
5011
5011
|
},
|
|
5012
5012
|
};
|
|
5013
5013
|
|
|
5014
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5015
|
-
var Container$
|
|
5016
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5014
|
+
var Wrapper$7 = 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"])));
|
|
5015
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5016
|
+
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5017
5017
|
var disabled = _a.disabled;
|
|
5018
5018
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5019
5019
|
});
|
|
@@ -5021,7 +5021,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5021
5021
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5022
5022
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5023
5023
|
]; });
|
|
5024
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5024
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5025
5025
|
var theme = _a.theme;
|
|
5026
5026
|
return theme.component.radio.textSize;
|
|
5027
5027
|
}, function (_a) {
|
|
@@ -5035,9 +5035,9 @@ var RadioInput = function (_a) {
|
|
|
5035
5035
|
var value = event.currentTarget.value;
|
|
5036
5036
|
onChange({ value: value, label: label });
|
|
5037
5037
|
};
|
|
5038
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5038
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$15, __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));
|
|
5039
5039
|
};
|
|
5040
|
-
var templateObject_1$
|
|
5040
|
+
var templateObject_1$1L, templateObject_2$19, templateObject_3$W;
|
|
5041
5041
|
|
|
5042
5042
|
var getWrapperFlexDirection = function (position) {
|
|
5043
5043
|
switch (position) {
|
|
@@ -5088,7 +5088,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5088
5088
|
}
|
|
5089
5089
|
};
|
|
5090
5090
|
|
|
5091
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5091
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5092
5092
|
var position = _a.position;
|
|
5093
5093
|
return getWrapperFlexDirection(position);
|
|
5094
5094
|
}, function (_a) {
|
|
@@ -5098,7 +5098,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5098
5098
|
var disableHover = _a.disableHover;
|
|
5099
5099
|
return (disableHover ? 0 : 1);
|
|
5100
5100
|
});
|
|
5101
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5101
|
+
var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5102
5102
|
var position = _a.position;
|
|
5103
5103
|
return getContainerFlexDirection(position);
|
|
5104
5104
|
}, function (_a) {
|
|
@@ -5126,7 +5126,7 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5126
5126
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5127
5127
|
return actual === expected ? margin : '0';
|
|
5128
5128
|
};
|
|
5129
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5129
|
+
var ContentWrapper = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5130
5130
|
var borderColor = _a.borderColor;
|
|
5131
5131
|
return borderColor;
|
|
5132
5132
|
}, function (_a) {
|
|
@@ -5144,7 +5144,7 @@ var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTem
|
|
|
5144
5144
|
});
|
|
5145
5145
|
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"])));
|
|
5146
5146
|
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"])));
|
|
5147
|
-
var templateObject_1$
|
|
5147
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$V, templateObject_4$G, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5148
5148
|
|
|
5149
5149
|
var useOnClickOutside = function (ref, handler) {
|
|
5150
5150
|
useEffect(function () {
|
|
@@ -5286,7 +5286,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5286
5286
|
};
|
|
5287
5287
|
}
|
|
5288
5288
|
};
|
|
5289
|
-
var Container$
|
|
5289
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5290
5290
|
var backgroundColor = _a.backgroundColor;
|
|
5291
5291
|
return backgroundColor;
|
|
5292
5292
|
}, function (_a) {
|
|
@@ -5308,7 +5308,7 @@ var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5308
5308
|
var size = _a.size;
|
|
5309
5309
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5310
5310
|
});
|
|
5311
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5311
|
+
var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5312
5312
|
var textColor = _a.textColor;
|
|
5313
5313
|
return textColor;
|
|
5314
5314
|
}, function (_a) {
|
|
@@ -5323,9 +5323,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5323
5323
|
var ClubOfferTag = function (_a) {
|
|
5324
5324
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5325
5325
|
var theme = useTheme();
|
|
5326
|
-
return (jsx$1(Container$
|
|
5326
|
+
return (jsx$1(Container$14, __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));
|
|
5327
5327
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
5329
5329
|
|
|
5330
5330
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5331
5331
|
var _a, _b, _c;
|
|
@@ -5356,7 +5356,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5356
5356
|
};
|
|
5357
5357
|
}
|
|
5358
5358
|
};
|
|
5359
|
-
var Container$
|
|
5359
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5360
5360
|
var backgroundColor = _a.backgroundColor;
|
|
5361
5361
|
return backgroundColor;
|
|
5362
5362
|
}, function (_a) {
|
|
@@ -5378,7 +5378,7 @@ var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5378
5378
|
var size = _a.size;
|
|
5379
5379
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5380
5380
|
});
|
|
5381
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5381
|
+
var H3$2 = 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) {
|
|
5382
5382
|
var textColor = _a.textColor;
|
|
5383
5383
|
return textColor;
|
|
5384
5384
|
}, function (_a) {
|
|
@@ -5393,9 +5393,9 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5393
5393
|
var DiscountTag = function (_a) {
|
|
5394
5394
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5395
5395
|
var theme = useTheme();
|
|
5396
|
-
return (jsx$1(Container$
|
|
5396
|
+
return (jsx$1(Container$13, __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));
|
|
5397
5397
|
};
|
|
5398
|
-
var templateObject_1$
|
|
5398
|
+
var templateObject_1$1I, templateObject_2$16;
|
|
5399
5399
|
|
|
5400
5400
|
var getStylesBySize$b = function (size, theme) {
|
|
5401
5401
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5437,8 +5437,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5437
5437
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5438
5438
|
}
|
|
5439
5439
|
};
|
|
5440
|
-
var Container$
|
|
5441
|
-
var Price = newStyled.p(templateObject_2$
|
|
5440
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5441
|
+
var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5442
5442
|
var weight = _a.weight;
|
|
5443
5443
|
return (weight ? weight : '400');
|
|
5444
5444
|
}, function (_a) {
|
|
@@ -5462,7 +5462,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5462
5462
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5463
5463
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5464
5464
|
});
|
|
5465
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5465
|
+
var TagContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5466
5466
|
var _b;
|
|
5467
5467
|
var size = _a.size;
|
|
5468
5468
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5493,11 +5493,11 @@ var PriceLabel = function (_a) {
|
|
|
5493
5493
|
: ComponentSize.XSmall;
|
|
5494
5494
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5495
5495
|
};
|
|
5496
|
-
return (jsxs$1(Container$
|
|
5496
|
+
return (jsxs$1(Container$12, __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));
|
|
5497
5497
|
};
|
|
5498
|
-
var templateObject_1$
|
|
5498
|
+
var templateObject_1$1H, templateObject_2$15, templateObject_3$U;
|
|
5499
5499
|
|
|
5500
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5500
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5501
5501
|
var PriceLabelV2 = function (_a) {
|
|
5502
5502
|
var _b;
|
|
5503
5503
|
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, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5550,7 +5550,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5550
5550
|
var savetoString = saveto.toFixed(2);
|
|
5551
5551
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5552
5552
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5553
|
-
return (jsxs$1(Container$
|
|
5553
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5554
5554
|
marginTop: '-5px',
|
|
5555
5555
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5556
5556
|
? finalPriceArray[0]
|
|
@@ -5568,11 +5568,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5568
5568
|
lineHeight: '22px',
|
|
5569
5569
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5570
5570
|
};
|
|
5571
|
-
var templateObject_1$
|
|
5571
|
+
var templateObject_1$1G;
|
|
5572
5572
|
|
|
5573
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5574
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5575
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5573
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5574
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5575
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5576
5576
|
var PriceLabelV3 = function (_a) {
|
|
5577
5577
|
var _b;
|
|
5578
5578
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5627,7 +5627,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5627
5627
|
return null;
|
|
5628
5628
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5629
5629
|
};
|
|
5630
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5630
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$12, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5631
5631
|
marginTop: '-5px',
|
|
5632
5632
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5633
5633
|
marginTop: '-6px',
|
|
@@ -5643,10 +5643,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5643
5643
|
lineHeight: '22px',
|
|
5644
5644
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5645
5645
|
};
|
|
5646
|
-
var templateObject_1$
|
|
5646
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5647
5647
|
|
|
5648
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5649
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5648
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5649
|
+
var ContainerBase = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
5650
5650
|
var selected = _a.selected, theme = _a.theme;
|
|
5651
5651
|
return selected
|
|
5652
5652
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5660,7 +5660,7 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5660
5660
|
var theme = _a.theme;
|
|
5661
5661
|
return theme.colors.pallete.primary.color;
|
|
5662
5662
|
});
|
|
5663
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5663
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5664
5664
|
var onClick = _a.onClick;
|
|
5665
5665
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5666
5666
|
});
|
|
@@ -5682,8 +5682,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5682
5682
|
var selected = _a.selected, theme = _a.theme;
|
|
5683
5683
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5684
5684
|
});
|
|
5685
|
-
var Container
|
|
5686
|
-
var templateObject_1$
|
|
5685
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5686
|
+
var templateObject_1$1E, templateObject_2$13, templateObject_3$S, templateObject_4$F, templateObject_5$q, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5687
5687
|
|
|
5688
5688
|
var radioIds = {
|
|
5689
5689
|
oneTime: {
|
|
@@ -5733,17 +5733,17 @@ var Autoship = function (_a) {
|
|
|
5733
5733
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5734
5734
|
};
|
|
5735
5735
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5736
|
-
return (jsxs$1(Container
|
|
5736
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5737
5737
|
? benefitsColor.selected
|
|
5738
5738
|
: 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));
|
|
5739
5739
|
};
|
|
5740
5740
|
|
|
5741
|
-
var Img = newStyled.img(templateObject_1$
|
|
5741
|
+
var Img = newStyled.img(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
5742
5742
|
var Image$3 = function (_a) {
|
|
5743
5743
|
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;
|
|
5744
5744
|
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));
|
|
5745
5745
|
};
|
|
5746
|
-
var templateObject_1$
|
|
5746
|
+
var templateObject_1$1D;
|
|
5747
5747
|
|
|
5748
5748
|
var _a$2;
|
|
5749
5749
|
var BeforeAfterVariant;
|
|
@@ -5758,13 +5758,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5758
5758
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5759
5759
|
_a$2);
|
|
5760
5760
|
|
|
5761
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5762
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5763
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5761
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
5762
|
+
var CustomerInfo = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
5763
|
+
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
5764
5764
|
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"])));
|
|
5765
5765
|
var Description$2 = newStyled.p(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
5766
5766
|
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"])));
|
|
5767
|
-
var templateObject_1$
|
|
5767
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$p, templateObject_6$k;
|
|
5768
5768
|
|
|
5769
5769
|
var NameWithStars = function (_a) {
|
|
5770
5770
|
var name = _a.name, size = _a.size;
|
|
@@ -5782,9 +5782,9 @@ var ResultFeedback = function (_a) {
|
|
|
5782
5782
|
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));
|
|
5783
5783
|
};
|
|
5784
5784
|
|
|
5785
|
-
var Container$
|
|
5786
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5787
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5785
|
+
var Container$10 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
5786
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5787
|
+
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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; });
|
|
5788
5788
|
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) {
|
|
5789
5789
|
var theme = _a.theme;
|
|
5790
5790
|
return theme.colors.pallete.secondary.color;
|
|
@@ -5795,7 +5795,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5795
5795
|
var theme = _a.theme, size = _a.size;
|
|
5796
5796
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5797
5797
|
});
|
|
5798
|
-
var templateObject_1$
|
|
5798
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D;
|
|
5799
5799
|
|
|
5800
5800
|
/* base styles & size variants */
|
|
5801
5801
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5870,10 +5870,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5870
5870
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5871
5871
|
var infoText = buildInfoText(name, age, months);
|
|
5872
5872
|
var Component = componentByVariant[variant];
|
|
5873
|
-
return (jsxs$1(Container$
|
|
5873
|
+
return (jsxs$1(Container$10, __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));
|
|
5874
5874
|
};
|
|
5875
5875
|
|
|
5876
|
-
var Section = newStyled.div(templateObject_1$
|
|
5876
|
+
var Section = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
5877
5877
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5878
5878
|
});
|
|
5879
5879
|
var CardHeader = function (_a) {
|
|
@@ -5884,16 +5884,16 @@ var CardFooter = function (_a) {
|
|
|
5884
5884
|
var children = _a.children;
|
|
5885
5885
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5886
5886
|
};
|
|
5887
|
-
var templateObject_1$
|
|
5887
|
+
var templateObject_1$1A;
|
|
5888
5888
|
|
|
5889
|
-
var Body = newStyled.div(templateObject_1$
|
|
5889
|
+
var Body = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
5890
5890
|
var CardBody = function (_a) {
|
|
5891
5891
|
var children = _a.children;
|
|
5892
5892
|
return jsx$1(Body, { children: children }, void 0);
|
|
5893
5893
|
};
|
|
5894
|
-
var templateObject_1$
|
|
5894
|
+
var templateObject_1$1z;
|
|
5895
5895
|
|
|
5896
|
-
var Container
|
|
5896
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5897
5897
|
var flex = _a.flex;
|
|
5898
5898
|
return flex &&
|
|
5899
5899
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5908,23 +5908,23 @@ var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5908
5908
|
var Card$1 = function (_a) {
|
|
5909
5909
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
5910
5910
|
var theme = useTheme();
|
|
5911
|
-
return (jsx$1(Container
|
|
5911
|
+
return (jsx$1(Container$$, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5912
5912
|
};
|
|
5913
5913
|
var Card$2 = Object.assign(Card$1, {
|
|
5914
5914
|
Header: CardHeader,
|
|
5915
5915
|
Footer: CardFooter,
|
|
5916
5916
|
Body: CardBody,
|
|
5917
5917
|
});
|
|
5918
|
-
var templateObject_1$
|
|
5918
|
+
var templateObject_1$1y;
|
|
5919
5919
|
|
|
5920
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5921
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5922
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
5920
|
+
var StyledWrapper = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5921
|
+
var StyledContainer = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5922
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __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) {
|
|
5923
5923
|
var color = _a.color;
|
|
5924
5924
|
return color;
|
|
5925
5925
|
});
|
|
5926
5926
|
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"])));
|
|
5927
|
-
var templateObject_1$
|
|
5927
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$P, templateObject_4$C;
|
|
5928
5928
|
|
|
5929
5929
|
var Minimalistic = function (_a) {
|
|
5930
5930
|
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;
|
|
@@ -5932,28 +5932,28 @@ var Minimalistic = function (_a) {
|
|
|
5932
5932
|
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));
|
|
5933
5933
|
};
|
|
5934
5934
|
|
|
5935
|
-
var Container$
|
|
5936
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
5937
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5935
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5936
|
+
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; });
|
|
5937
|
+
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __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; });
|
|
5938
5938
|
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"])));
|
|
5939
5939
|
var Simple = function (_a) {
|
|
5940
5940
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5941
5941
|
var theme = useTheme();
|
|
5942
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5942
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$_, { 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));
|
|
5943
5943
|
};
|
|
5944
|
-
var templateObject_1$
|
|
5944
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$B;
|
|
5945
5945
|
|
|
5946
5946
|
var Bundle = {
|
|
5947
5947
|
Minimalistic: Minimalistic,
|
|
5948
5948
|
Simple: Simple,
|
|
5949
5949
|
};
|
|
5950
5950
|
|
|
5951
|
-
var Container$
|
|
5951
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
5952
5952
|
var displayBNPL = _a.displayBNPL;
|
|
5953
5953
|
return (displayBNPL ? 'flex' : 'none');
|
|
5954
5954
|
});
|
|
5955
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5956
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5955
|
+
var TextContainer$1 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5956
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
5957
5957
|
var BuyNowPayLater = function (_a) {
|
|
5958
5958
|
var _b;
|
|
5959
5959
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -5963,43 +5963,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5963
5963
|
console.error('Icon', iconName, 'not found');
|
|
5964
5964
|
return null;
|
|
5965
5965
|
}
|
|
5966
|
-
return (jsx$1(Container$
|
|
5966
|
+
return (jsx$1(Container$Z, __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));
|
|
5967
5967
|
};
|
|
5968
|
-
var templateObject_1$
|
|
5968
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N;
|
|
5969
5969
|
|
|
5970
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5970
|
+
var Text$6 = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
5971
5971
|
var Title$5 = function (_a) {
|
|
5972
5972
|
var title = _a.title;
|
|
5973
5973
|
var theme = useTheme();
|
|
5974
5974
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5975
5975
|
};
|
|
5976
|
-
var templateObject_1$
|
|
5976
|
+
var templateObject_1$1u;
|
|
5977
5977
|
|
|
5978
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5978
|
+
var P$3 = newStyled.p(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
5979
5979
|
var Promo = function (_a) {
|
|
5980
5980
|
var text = _a.text;
|
|
5981
5981
|
var theme = useTheme();
|
|
5982
5982
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5983
5983
|
};
|
|
5984
|
-
var templateObject_1$
|
|
5984
|
+
var templateObject_1$1t;
|
|
5985
5985
|
|
|
5986
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
5986
|
+
var Text$5 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5987
5987
|
var Description$1 = function (_a) {
|
|
5988
5988
|
var text = _a.text;
|
|
5989
5989
|
var theme = useTheme();
|
|
5990
5990
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5991
5991
|
};
|
|
5992
|
-
var templateObject_1$
|
|
5992
|
+
var templateObject_1$1s;
|
|
5993
5993
|
|
|
5994
|
-
var Container$
|
|
5994
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"); });
|
|
5995
5995
|
var CloseButton$1 = function (_a) {
|
|
5996
5996
|
var onClick = _a.onClick, size = _a.size;
|
|
5997
5997
|
var theme = useTheme();
|
|
5998
|
-
return (jsx$1(Container$
|
|
5998
|
+
return (jsx$1(Container$Y, __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));
|
|
5999
5999
|
};
|
|
6000
|
-
var templateObject_1$
|
|
6000
|
+
var templateObject_1$1r;
|
|
6001
6001
|
|
|
6002
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6002
|
+
var Text$4 = newStyled.h3(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
6003
6003
|
var backgroundColor = _a.backgroundColor;
|
|
6004
6004
|
return backgroundColor;
|
|
6005
6005
|
}, function (_a) {
|
|
@@ -6014,7 +6014,7 @@ var OfferBanner = function (_a) {
|
|
|
6014
6014
|
var theme = useTheme();
|
|
6015
6015
|
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));
|
|
6016
6016
|
};
|
|
6017
|
-
var templateObject_1$
|
|
6017
|
+
var templateObject_1$1q;
|
|
6018
6018
|
|
|
6019
6019
|
var CartProductItem = {
|
|
6020
6020
|
Title: Title$5,
|
|
@@ -6024,9 +6024,9 @@ var CartProductItem = {
|
|
|
6024
6024
|
CloseButton: CloseButton$1,
|
|
6025
6025
|
};
|
|
6026
6026
|
|
|
6027
|
-
var Container$
|
|
6028
|
-
var MobileContainer = newStyled(Container$
|
|
6029
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6027
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6028
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6029
|
+
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6030
6030
|
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"])));
|
|
6031
6031
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6032
6032
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6035,9 +6035,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (t
|
|
|
6035
6035
|
var ClubPriceLabel = function (_a) {
|
|
6036
6036
|
var clubPrice = _a.clubPrice;
|
|
6037
6037
|
var isMobile = useWindowDimensions().isMobile;
|
|
6038
|
-
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$
|
|
6038
|
+
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$X, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6039
6039
|
};
|
|
6040
|
-
var templateObject_1$
|
|
6040
|
+
var templateObject_1$1p, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$o, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6041
6041
|
|
|
6042
6042
|
var Spacing = function (_a) {
|
|
6043
6043
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6045,9 +6045,9 @@ var Spacing = function (_a) {
|
|
|
6045
6045
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6046
6046
|
};
|
|
6047
6047
|
|
|
6048
|
-
var Container$
|
|
6049
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6050
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6048
|
+
var Container$W = newStyled('div')(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6049
|
+
var Content$2 = newStyled('div')(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6050
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6051
6051
|
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) {
|
|
6052
6052
|
var index = _a.index;
|
|
6053
6053
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6057,14 +6057,14 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6057
6057
|
});
|
|
6058
6058
|
var StrengthBars = function (_a) {
|
|
6059
6059
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6060
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$W, __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));
|
|
6061
6061
|
};
|
|
6062
|
-
var templateObject_1$
|
|
6062
|
+
var templateObject_1$1o, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
6063
6063
|
|
|
6064
|
-
var Container$
|
|
6065
|
-
var templateObject_1$
|
|
6064
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6065
|
+
var templateObject_1$1n;
|
|
6066
6066
|
|
|
6067
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6067
|
+
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6068
6068
|
var marginRight = _a.marginRight;
|
|
6069
6069
|
return marginRight;
|
|
6070
6070
|
});
|
|
@@ -6076,11 +6076,11 @@ var StarList = function (_a) {
|
|
|
6076
6076
|
width: theme.component.stars.element[size].width,
|
|
6077
6077
|
height: theme.component.stars.element[size].height,
|
|
6078
6078
|
};
|
|
6079
|
-
return (jsx$1(Container$
|
|
6079
|
+
return (jsx$1(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6080
6080
|
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)));
|
|
6081
6081
|
}) }, void 0));
|
|
6082
6082
|
};
|
|
6083
|
-
var templateObject_1$
|
|
6083
|
+
var templateObject_1$1m;
|
|
6084
6084
|
|
|
6085
6085
|
/* base styles & size variants */
|
|
6086
6086
|
var LabelStyles = {
|
|
@@ -6121,8 +6121,8 @@ var LabelStyles = {
|
|
|
6121
6121
|
});
|
|
6122
6122
|
},
|
|
6123
6123
|
};
|
|
6124
|
-
var Container$
|
|
6125
|
-
var templateObject_1$
|
|
6124
|
+
var Container$U = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6125
|
+
var templateObject_1$1l;
|
|
6126
6126
|
|
|
6127
6127
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6128
6128
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6142,7 +6142,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6142
6142
|
}),
|
|
6143
6143
|
];
|
|
6144
6144
|
});
|
|
6145
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6145
|
+
var RatingLabel = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
6146
6146
|
var starsNumber = 5;
|
|
6147
6147
|
var Rating = function (_a) {
|
|
6148
6148
|
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;
|
|
@@ -6163,13 +6163,13 @@ var Rating = function (_a) {
|
|
|
6163
6163
|
href: reviewsContainerId,
|
|
6164
6164
|
}
|
|
6165
6165
|
: {};
|
|
6166
|
-
return (jsxs$1(Container$
|
|
6166
|
+
return (jsxs$1(Container$U, __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));
|
|
6167
6167
|
};
|
|
6168
|
-
var templateObject_1$
|
|
6168
|
+
var templateObject_1$1k;
|
|
6169
6169
|
|
|
6170
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6171
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6172
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6170
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
6171
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6172
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6173
6173
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6174
6174
|
var PriceWithTagContainer = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6175
6175
|
var RegularPriceTag = function () {
|
|
@@ -6220,11 +6220,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6220
6220
|
: ComponentSize.XSmall;
|
|
6221
6221
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6222
6222
|
};
|
|
6223
|
-
return (jsxs$1(Container$
|
|
6223
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6224
6224
|
? finalPriceArray[0]
|
|
6225
6225
|
: (_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)] }, 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));
|
|
6226
6226
|
};
|
|
6227
|
-
var templateObject_1$
|
|
6227
|
+
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$n;
|
|
6228
6228
|
|
|
6229
6229
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6230
6230
|
var width = _a.width, height = _a.height;
|
|
@@ -6234,9 +6234,9 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6234
6234
|
height: height,
|
|
6235
6235
|
});
|
|
6236
6236
|
});
|
|
6237
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6238
|
-
var Container$
|
|
6239
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6237
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6238
|
+
var Container$T = newStyled.a(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6239
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6240
6240
|
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; });
|
|
6241
6241
|
var getStylesBySize$9 = function (size) {
|
|
6242
6242
|
switch (size) {
|
|
@@ -6263,11 +6263,11 @@ var getStylesBySize$9 = function (size) {
|
|
|
6263
6263
|
};
|
|
6264
6264
|
}
|
|
6265
6265
|
};
|
|
6266
|
-
var TopTagContainer$
|
|
6266
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6267
6267
|
var style = _a.style;
|
|
6268
6268
|
return style.width;
|
|
6269
6269
|
});
|
|
6270
|
-
var BottomTagContainer$
|
|
6270
|
+
var BottomTagContainer$6 = 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) {
|
|
6271
6271
|
var style = _a.style;
|
|
6272
6272
|
return style.width;
|
|
6273
6273
|
});
|
|
@@ -6328,9 +6328,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6328
6328
|
return jsx(Fragment, {}, void 0);
|
|
6329
6329
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6330
6330
|
};
|
|
6331
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6331
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __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$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __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$T, __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));
|
|
6332
6332
|
};
|
|
6333
|
-
var templateObject_1$
|
|
6333
|
+
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6334
6334
|
|
|
6335
6335
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6336
6336
|
var width = _a.width, height = _a.height;
|
|
@@ -6340,9 +6340,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6340
6340
|
height: height,
|
|
6341
6341
|
});
|
|
6342
6342
|
});
|
|
6343
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6344
|
-
var Container$
|
|
6345
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6343
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6344
|
+
var Container$S = 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"])));
|
|
6345
|
+
var ProdCardContainer = 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"])));
|
|
6346
6346
|
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; });
|
|
6347
6347
|
var getStylesBySize$8 = function (size) {
|
|
6348
6348
|
switch (size) {
|
|
@@ -6369,11 +6369,11 @@ var getStylesBySize$8 = function (size) {
|
|
|
6369
6369
|
};
|
|
6370
6370
|
}
|
|
6371
6371
|
};
|
|
6372
|
-
var TopTagContainer$
|
|
6372
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6373
6373
|
var style = _a.style;
|
|
6374
6374
|
return style.width;
|
|
6375
6375
|
});
|
|
6376
|
-
var BottomTagContainer$
|
|
6376
|
+
var BottomTagContainer$5 = 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) {
|
|
6377
6377
|
var style = _a.style;
|
|
6378
6378
|
return style.width;
|
|
6379
6379
|
});
|
|
@@ -6421,26 +6421,26 @@ var ProductItemTK = function (_a) {
|
|
|
6421
6421
|
: undefined }, void 0));
|
|
6422
6422
|
};
|
|
6423
6423
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6424
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6424
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __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, borderRadius: ImageBorderRadius, 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, borderRadius: ImageBorderRadius, 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, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, 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: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6425
6425
|
// @ts-ignore
|
|
6426
6426
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6427
6427
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6428
6428
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6429
6429
|
} }, { 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));
|
|
6430
6430
|
};
|
|
6431
|
-
var templateObject_1$
|
|
6431
|
+
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6432
6432
|
|
|
6433
|
-
var Container$
|
|
6433
|
+
var Container$R = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6434
6434
|
function withProductGrid(ProductItemComponent, data) {
|
|
6435
6435
|
function WithProductGrid(props) {
|
|
6436
|
-
return (jsx$1(Container$
|
|
6436
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6437
6437
|
}
|
|
6438
6438
|
/* istanbul ignore next */
|
|
6439
6439
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6440
6440
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6441
6441
|
return WithProductGrid;
|
|
6442
6442
|
}
|
|
6443
|
-
var templateObject_1$
|
|
6443
|
+
var templateObject_1$1g;
|
|
6444
6444
|
|
|
6445
6445
|
var Collection = {
|
|
6446
6446
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6487,9 +6487,9 @@ var OutOfStock = function (_a) {
|
|
|
6487
6487
|
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));
|
|
6488
6488
|
};
|
|
6489
6489
|
|
|
6490
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6491
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6492
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6490
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6491
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6492
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6493
6493
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6494
6494
|
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"])));
|
|
6495
6495
|
var Label$2 = function (_a) {
|
|
@@ -6509,23 +6509,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6509
6509
|
Option: Option,
|
|
6510
6510
|
OptionsContainer: OptionsContainer,
|
|
6511
6511
|
});
|
|
6512
|
-
var templateObject_1$
|
|
6512
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$k;
|
|
6513
6513
|
|
|
6514
|
-
var Container$
|
|
6514
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
6515
6515
|
var borderColor = _a.borderColor;
|
|
6516
6516
|
return borderColor;
|
|
6517
6517
|
}, function (_a) {
|
|
6518
6518
|
var noStock = _a.noStock;
|
|
6519
6519
|
return (noStock ? '0.4' : '1');
|
|
6520
6520
|
});
|
|
6521
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6521
|
+
var Image$2 = newStyled.img(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6522
6522
|
var PatternSelector = function (_a) {
|
|
6523
6523
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6524
6524
|
var theme = useTheme();
|
|
6525
6525
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6526
|
-
return (jsx$1(Container$
|
|
6526
|
+
return (jsx$1(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6527
6527
|
};
|
|
6528
|
-
var templateObject_1$
|
|
6528
|
+
var templateObject_1$1e, templateObject_2$T;
|
|
6529
6529
|
|
|
6530
6530
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6531
6531
|
if (options == null || options.length === 0) {
|
|
@@ -6584,9 +6584,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6584
6584
|
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));
|
|
6585
6585
|
};
|
|
6586
6586
|
|
|
6587
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6588
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6589
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6587
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
6588
|
+
var Col$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6589
|
+
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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) {
|
|
6590
6590
|
return props.rightToLeft &&
|
|
6591
6591
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6592
6592
|
});
|
|
@@ -6598,7 +6598,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6598
6598
|
var theme = useTheme();
|
|
6599
6599
|
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));
|
|
6600
6600
|
};
|
|
6601
|
-
var templateObject_1$
|
|
6601
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6602
6602
|
|
|
6603
6603
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6604
6604
|
__proto__: null,
|
|
@@ -6626,7 +6626,7 @@ var sizeMapper = (_a = {},
|
|
|
6626
6626
|
_a[ComponentSize.Large] = 'large',
|
|
6627
6627
|
_a[ComponentSize.XSmall] = 'small',
|
|
6628
6628
|
_a);
|
|
6629
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6629
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6630
6630
|
var wide = _a.wide;
|
|
6631
6631
|
return (wide ? '100%' : 'fit-content');
|
|
6632
6632
|
}, function (_a) {
|
|
@@ -6648,8 +6648,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6648
6648
|
var theme = _a.theme;
|
|
6649
6649
|
return theme.colors.text.disabled;
|
|
6650
6650
|
});
|
|
6651
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6652
|
-
var templateObject_1$
|
|
6651
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6652
|
+
var templateObject_1$1c, templateObject_2$R;
|
|
6653
6653
|
|
|
6654
6654
|
var BaseCTA = function (_a) {
|
|
6655
6655
|
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"]);
|
|
@@ -6716,23 +6716,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6716
6716
|
} }), void 0));
|
|
6717
6717
|
};
|
|
6718
6718
|
|
|
6719
|
-
var Container$
|
|
6720
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6721
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6719
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
6720
|
+
var IconContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
6721
|
+
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __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; });
|
|
6722
6722
|
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; });
|
|
6723
6723
|
var Note = function (_a) {
|
|
6724
6724
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6725
6725
|
var theme = useTheme();
|
|
6726
|
-
return (jsxs$1(Container$
|
|
6726
|
+
return (jsxs$1(Container$P, __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));
|
|
6727
6727
|
};
|
|
6728
|
-
var templateObject_1$
|
|
6728
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$t;
|
|
6729
6729
|
|
|
6730
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6730
|
+
var Title$2 = newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6731
6731
|
var theme = _a.theme;
|
|
6732
6732
|
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 ");
|
|
6733
6733
|
});
|
|
6734
|
-
var Line = newStyled.div(templateObject_2$
|
|
6735
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6734
|
+
var Line = newStyled.div(templateObject_2$P || (templateObject_2$P = __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; });
|
|
6735
|
+
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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({
|
|
6736
6736
|
flexDirection: ['column', 'row'],
|
|
6737
6737
|
}));
|
|
6738
6738
|
var Col = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -6770,16 +6770,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6770
6770
|
var theme = useTheme();
|
|
6771
6771
|
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));
|
|
6772
6772
|
};
|
|
6773
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$1a, templateObject_2$P, templateObject_3$E, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6774
6774
|
|
|
6775
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6775
|
+
var Backdrop = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6776
6776
|
var top = _a.top;
|
|
6777
6777
|
return top;
|
|
6778
6778
|
}, function (_a) {
|
|
6779
6779
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6780
6780
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6781
6781
|
});
|
|
6782
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6782
|
+
var Sidebar = newStyled.div(templateObject_2$O || (templateObject_2$O = __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) {
|
|
6783
6783
|
var height = _a.height;
|
|
6784
6784
|
return height;
|
|
6785
6785
|
}, function (_a) {
|
|
@@ -6826,20 +6826,20 @@ var Drawer = function (_a) {
|
|
|
6826
6826
|
}, [isOpen, onClose, onOpen]);
|
|
6827
6827
|
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;
|
|
6828
6828
|
};
|
|
6829
|
-
var templateObject_1$
|
|
6829
|
+
var templateObject_1$19, templateObject_2$O;
|
|
6830
6830
|
|
|
6831
6831
|
var TooltipArrow = function (_a) {
|
|
6832
6832
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6833
6833
|
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));
|
|
6834
6834
|
};
|
|
6835
6835
|
|
|
6836
|
-
var List = newStyled.ul(templateObject_1$
|
|
6837
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6838
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6836
|
+
var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6837
|
+
var Item$2 = newStyled.li(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
6838
|
+
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
6839
6839
|
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"])));
|
|
6840
6840
|
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; });
|
|
6841
6841
|
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; });
|
|
6842
|
-
var templateObject_1$
|
|
6842
|
+
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6843
6843
|
|
|
6844
6844
|
var DropdownListIcons = function (_a) {
|
|
6845
6845
|
var items = _a.items;
|
|
@@ -6852,13 +6852,13 @@ var Dropdown = function (_a) {
|
|
|
6852
6852
|
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));
|
|
6853
6853
|
};
|
|
6854
6854
|
|
|
6855
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6856
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6857
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6855
|
+
var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
6856
|
+
var DropdownLabel = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
6857
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6858
6858
|
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"])));
|
|
6859
6859
|
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"])));
|
|
6860
6860
|
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"])));
|
|
6861
|
-
var templateObject_1$
|
|
6861
|
+
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6862
6862
|
|
|
6863
6863
|
var SizeDropdown = function (_a) {
|
|
6864
6864
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6881,9 +6881,9 @@ var SizeDropdown = function (_a) {
|
|
|
6881
6881
|
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));
|
|
6882
6882
|
};
|
|
6883
6883
|
|
|
6884
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6885
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6886
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6884
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
6885
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$L || (templateObject_2$L = __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; });
|
|
6886
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
6887
6887
|
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"])));
|
|
6888
6888
|
var DropdownDialog = function (_a) {
|
|
6889
6889
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -6893,7 +6893,7 @@ var DropdownDialog = function (_a) {
|
|
|
6893
6893
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6894
6894
|
}) }), void 0) }), void 0));
|
|
6895
6895
|
};
|
|
6896
|
-
var templateObject_1$
|
|
6896
|
+
var templateObject_1$16, templateObject_2$L, templateObject_3$B, templateObject_4$p;
|
|
6897
6897
|
|
|
6898
6898
|
function FilteringDropdown(_a) {
|
|
6899
6899
|
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;
|
|
@@ -6926,21 +6926,21 @@ function FilteringDropdown(_a) {
|
|
|
6926
6926
|
}) }, void 0)] }), void 0));
|
|
6927
6927
|
}
|
|
6928
6928
|
|
|
6929
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6930
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6931
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6932
|
-
var Container$
|
|
6929
|
+
var Title$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
6930
|
+
var H3 = newStyled.h3(templateObject_2$K || (templateObject_2$K = __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; });
|
|
6931
|
+
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6932
|
+
var Container$O = 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'); });
|
|
6933
6933
|
var Accordion = function (_a) {
|
|
6934
6934
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
6935
6935
|
var theme = useTheme();
|
|
6936
6936
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6937
|
-
return (jsxs$1(Container$
|
|
6937
|
+
return (jsxs$1(Container$O, __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));
|
|
6938
6938
|
};
|
|
6939
|
-
var templateObject_1$
|
|
6939
|
+
var templateObject_1$15, templateObject_2$K, templateObject_3$A, templateObject_4$o;
|
|
6940
6940
|
|
|
6941
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6942
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6943
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6941
|
+
var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
6942
|
+
var Header$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
6943
|
+
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
6944
6944
|
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"])));
|
|
6945
6945
|
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; });
|
|
6946
6946
|
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; });
|
|
@@ -6948,7 +6948,7 @@ var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 =
|
|
|
6948
6948
|
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; });
|
|
6949
6949
|
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"])));
|
|
6950
6950
|
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"])));
|
|
6951
|
-
var templateObject_1$
|
|
6951
|
+
var templateObject_1$14, templateObject_2$J, templateObject_3$z, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6952
6952
|
|
|
6953
6953
|
var getStylesBySize$7 = function (size, theme) {
|
|
6954
6954
|
switch (size) {
|
|
@@ -7013,9 +7013,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7013
7013
|
} }), id: id }, void 0));
|
|
7014
7014
|
};
|
|
7015
7015
|
|
|
7016
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7017
|
-
var LI = newStyled.li(templateObject_2$
|
|
7018
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7016
|
+
var UL = newStyled.ul(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7017
|
+
var LI = newStyled.li(templateObject_2$I || (templateObject_2$I = __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; });
|
|
7018
|
+
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
7019
7019
|
var Tags = function (_a) {
|
|
7020
7020
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7021
7021
|
var theme = useTheme();
|
|
@@ -7023,7 +7023,7 @@ var Tags = function (_a) {
|
|
|
7023
7023
|
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));
|
|
7024
7024
|
}) }), void 0));
|
|
7025
7025
|
};
|
|
7026
|
-
var templateObject_1$
|
|
7026
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y;
|
|
7027
7027
|
|
|
7028
7028
|
var Filters = function (_a) {
|
|
7029
7029
|
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;
|
|
@@ -7159,8 +7159,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7159
7159
|
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));
|
|
7160
7160
|
};
|
|
7161
7161
|
|
|
7162
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7163
|
-
var Container$
|
|
7162
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7163
|
+
var Container$N = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
7164
7164
|
var FitGuarantee = function (_a) {
|
|
7165
7165
|
var _b;
|
|
7166
7166
|
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;
|
|
@@ -7171,17 +7171,17 @@ var FitGuarantee = function (_a) {
|
|
|
7171
7171
|
console.error('Icon', iconName, 'not found');
|
|
7172
7172
|
return null;
|
|
7173
7173
|
}
|
|
7174
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7174
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7175
7175
|
margin: '0.1rem 0',
|
|
7176
7176
|
width: '100%',
|
|
7177
7177
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7178
7178
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7179
7179
|
} }, { 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));
|
|
7180
7180
|
};
|
|
7181
|
-
var templateObject_1$
|
|
7181
|
+
var templateObject_1$12, templateObject_2$H;
|
|
7182
7182
|
|
|
7183
|
-
var Container$
|
|
7184
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7183
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7184
|
+
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __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; });
|
|
7185
7185
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7186
7186
|
border: 'none',
|
|
7187
7187
|
background: 'transparent',
|
|
@@ -7194,9 +7194,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7194
7194
|
var FitPredictor = function (_a) {
|
|
7195
7195
|
var onClick = _a.onClick;
|
|
7196
7196
|
var theme = useTheme();
|
|
7197
|
-
return (jsxs(Container$
|
|
7197
|
+
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { 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));
|
|
7198
7198
|
};
|
|
7199
|
-
var templateObject_1
|
|
7199
|
+
var templateObject_1$11, templateObject_2$G;
|
|
7200
7200
|
|
|
7201
7201
|
var Button$6 = newStyled.button(function () { return ({
|
|
7202
7202
|
background: 'transparent',
|
|
@@ -11440,14 +11440,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11440
11440
|
return Slider;
|
|
11441
11441
|
}(React__default.Component);
|
|
11442
11442
|
|
|
11443
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11443
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
11444
11444
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11445
11445
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11446
11446
|
}, function (_a) {
|
|
11447
11447
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11448
11448
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11449
11449
|
});
|
|
11450
|
-
var templateObject_1$
|
|
11450
|
+
var templateObject_1$10;
|
|
11451
11451
|
|
|
11452
11452
|
var getStylesBySize$6 = function (size) {
|
|
11453
11453
|
// rem units
|
|
@@ -11506,7 +11506,7 @@ var SliderNavigation = function (_a) {
|
|
|
11506
11506
|
} }, { 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));
|
|
11507
11507
|
};
|
|
11508
11508
|
|
|
11509
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11509
|
+
var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
11510
11510
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11511
11511
|
return borderRadiusVariant &&
|
|
11512
11512
|
"\nborder-radius: 20px;\n";
|
|
@@ -11521,11 +11521,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11521
11521
|
var theme = useTheme();
|
|
11522
11522
|
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));
|
|
11523
11523
|
};
|
|
11524
|
-
var templateObject_1
|
|
11524
|
+
var templateObject_1$$;
|
|
11525
11525
|
|
|
11526
|
-
var horizontalStyles = css(templateObject_1$
|
|
11527
|
-
var verticalStyles = css(templateObject_2$
|
|
11528
|
-
var Container$
|
|
11526
|
+
var horizontalStyles = css(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
11527
|
+
var verticalStyles = css(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
11528
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __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) {
|
|
11529
11529
|
var position = _a.position;
|
|
11530
11530
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11531
11531
|
}, function (_a) {
|
|
@@ -11548,13 +11548,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11548
11548
|
var element = document.querySelector(".imageListContainer");
|
|
11549
11549
|
element.scrollBy(0, 200);
|
|
11550
11550
|
};
|
|
11551
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11551
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11552
11552
|
arrowWidth: 0.75,
|
|
11553
11553
|
arrowHeight: 1.25,
|
|
11554
11554
|
arrowPadding: 1.625,
|
|
11555
11555
|
}, 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));
|
|
11556
11556
|
};
|
|
11557
|
-
var templateObject_1$
|
|
11557
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11558
11558
|
|
|
11559
11559
|
var propTypes = {exports: {}};
|
|
11560
11560
|
|
|
@@ -13147,21 +13147,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13147
13147
|
afterZoomOut: PropTypes.func
|
|
13148
13148
|
} : {};
|
|
13149
13149
|
|
|
13150
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13151
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13152
|
-
var templateObject_1$
|
|
13150
|
+
var ProgressContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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); });
|
|
13151
|
+
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __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; });
|
|
13152
|
+
var templateObject_1$Z, templateObject_2$E;
|
|
13153
13153
|
|
|
13154
13154
|
var ProgressBar$1 = function (_a) {
|
|
13155
13155
|
var progress = _a.progress, hide = _a.hide;
|
|
13156
13156
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13157
13157
|
};
|
|
13158
13158
|
|
|
13159
|
-
var Container$
|
|
13160
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13161
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13159
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13160
|
+
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13161
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
13162
13162
|
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"])));
|
|
13163
13163
|
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"])));
|
|
13164
|
-
var templateObject_1$
|
|
13164
|
+
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$d;
|
|
13165
13165
|
|
|
13166
13166
|
var Video$1 = function (_a) {
|
|
13167
13167
|
var _b, _c, _d, _e;
|
|
@@ -13200,30 +13200,30 @@ var Video$1 = function (_a) {
|
|
|
13200
13200
|
setVideoProgress(videoRef.current.currentTime);
|
|
13201
13201
|
}
|
|
13202
13202
|
};
|
|
13203
|
-
return (jsxs$1(Container$
|
|
13203
|
+
return (jsxs$1(Container$K, { 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));
|
|
13204
13204
|
};
|
|
13205
13205
|
|
|
13206
|
-
var Container$
|
|
13206
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
13207
13207
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13208
13208
|
return borderRadiusVariant &&
|
|
13209
13209
|
"\n border-radius: 40px;\n ";
|
|
13210
13210
|
});
|
|
13211
|
-
var TopTagContainer$
|
|
13212
|
-
var BottomTagContainer$
|
|
13211
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13212
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13213
13213
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13214
13214
|
var ImageProductWithTags$1 = function (_a) {
|
|
13215
13215
|
var _b;
|
|
13216
13216
|
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13217
13217
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13218
13218
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13219
|
-
return (jsxs$1(Container$
|
|
13219
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13220
13220
|
alt: content.alt,
|
|
13221
13221
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13222
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
13222
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13223
13223
|
};
|
|
13224
|
-
var templateObject_1$
|
|
13224
|
+
var templateObject_1$X, templateObject_2$C, templateObject_3$v, templateObject_4$k;
|
|
13225
13225
|
|
|
13226
|
-
var Container$
|
|
13226
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13227
13227
|
var ProductGallery = function (_a) {
|
|
13228
13228
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13229
13229
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13231,11 +13231,11 @@ var ProductGallery = function (_a) {
|
|
|
13231
13231
|
useEffect(function () {
|
|
13232
13232
|
setSelectedImage(initialValue);
|
|
13233
13233
|
}, [initialValue]);
|
|
13234
|
-
return (jsxs$1(Container$
|
|
13234
|
+
return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13235
13235
|
setSelectedImage(value);
|
|
13236
13236
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13237
13237
|
};
|
|
13238
|
-
var templateObject_1$
|
|
13238
|
+
var templateObject_1$W;
|
|
13239
13239
|
|
|
13240
13240
|
var getStylesBySize$5 = function (size) {
|
|
13241
13241
|
switch (size) {
|
|
@@ -13256,7 +13256,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13256
13256
|
};
|
|
13257
13257
|
}
|
|
13258
13258
|
};
|
|
13259
|
-
var Container$
|
|
13259
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13260
13260
|
var backgroundColor = _a.backgroundColor;
|
|
13261
13261
|
return backgroundColor;
|
|
13262
13262
|
}, function (_a) {
|
|
@@ -13284,11 +13284,11 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13284
13284
|
var IconButton = function (_a) {
|
|
13285
13285
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13286
13286
|
var theme = useTheme();
|
|
13287
|
-
return (jsx$1(Container$
|
|
13287
|
+
return (jsx$1(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13288
13288
|
};
|
|
13289
|
-
var templateObject_1$
|
|
13289
|
+
var templateObject_1$V;
|
|
13290
13290
|
|
|
13291
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13291
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13292
13292
|
var AmazonButton = function (_a) {
|
|
13293
13293
|
var onClick = _a.onClick;
|
|
13294
13294
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13297,9 +13297,9 @@ var PaypalButton = function (_a) {
|
|
|
13297
13297
|
var onClick = _a.onClick;
|
|
13298
13298
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13299
13299
|
};
|
|
13300
|
-
var templateObject_1$
|
|
13300
|
+
var templateObject_1$U;
|
|
13301
13301
|
|
|
13302
|
-
var Container$
|
|
13302
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13303
13303
|
height: 'auto',
|
|
13304
13304
|
textAlign: 'center',
|
|
13305
13305
|
justifyContent: 'center',
|
|
@@ -13349,12 +13349,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13349
13349
|
textAlign: 'center',
|
|
13350
13350
|
lineHeight: '18px',
|
|
13351
13351
|
};
|
|
13352
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13352
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13353
13353
|
};
|
|
13354
13354
|
|
|
13355
|
-
var Container$
|
|
13356
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13357
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13355
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13356
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13357
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13358
13358
|
var titlePosition = _a.titlePosition;
|
|
13359
13359
|
return titlePosition == 'center' &&
|
|
13360
13360
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13362,15 +13362,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13362
13362
|
var ImageCardWithDescription = function (_a) {
|
|
13363
13363
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13364
13364
|
var isMobile = useWindowDimensions().isMobile;
|
|
13365
|
-
return (jsxs$1(Container$
|
|
13365
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13366
13366
|
};
|
|
13367
|
-
var templateObject_1$
|
|
13367
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$u;
|
|
13368
13368
|
|
|
13369
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13369
|
+
var Label$1 = newStyled.span(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13370
13370
|
var color = _a.color;
|
|
13371
13371
|
return color;
|
|
13372
13372
|
});
|
|
13373
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13373
|
+
var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13374
13374
|
var color = _a.color;
|
|
13375
13375
|
return color;
|
|
13376
13376
|
});
|
|
@@ -13379,7 +13379,7 @@ var InputLabel = function (_a) {
|
|
|
13379
13379
|
var theme = useTheme();
|
|
13380
13380
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13381
13381
|
};
|
|
13382
|
-
var templateObject_1$
|
|
13382
|
+
var templateObject_1$S, templateObject_2$A;
|
|
13383
13383
|
|
|
13384
13384
|
var containerByStatus = function (theme, status) {
|
|
13385
13385
|
if (status === InputValidationType.Valid)
|
|
@@ -13388,12 +13388,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13388
13388
|
return theme.colors.semantic.urgent.color;
|
|
13389
13389
|
return '';
|
|
13390
13390
|
};
|
|
13391
|
-
var Container$
|
|
13391
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13392
13392
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13393
13393
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13394
13394
|
});
|
|
13395
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13396
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13395
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13396
|
+
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13397
13397
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13398
13398
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13399
13399
|
}, function (_a) {
|
|
@@ -13466,7 +13466,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13466
13466
|
return theme.component.input.lineHeight;
|
|
13467
13467
|
});
|
|
13468
13468
|
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13469
|
-
var templateObject_1$
|
|
13469
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13470
13470
|
|
|
13471
13471
|
var BaseInput = function (_a) {
|
|
13472
13472
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13489,7 +13489,7 @@ var BaseInput = function (_a) {
|
|
|
13489
13489
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13490
13490
|
}, [status]);
|
|
13491
13491
|
var hasValue = Boolean(value);
|
|
13492
|
-
return (jsxs$1(Container$
|
|
13492
|
+
return (jsxs$1(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13493
13493
|
onChange(event.target.value, event);
|
|
13494
13494
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13495
13495
|
onChange('', { target: { value: '' } });
|
|
@@ -13510,11 +13510,11 @@ var Button$4 = function (_a) {
|
|
|
13510
13510
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13511
13511
|
};
|
|
13512
13512
|
|
|
13513
|
-
var Container$
|
|
13513
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13514
13514
|
var theme = _a.theme;
|
|
13515
13515
|
return theme.component.inputCustom.input.borderRadius;
|
|
13516
13516
|
});
|
|
13517
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13517
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13518
13518
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13519
13519
|
return defaultRounded
|
|
13520
13520
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13529,23 +13529,23 @@ var Custom = function (_a) {
|
|
|
13529
13529
|
text: text,
|
|
13530
13530
|
disabled: rest.disabled,
|
|
13531
13531
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13532
|
-
return (jsx$1(Container$
|
|
13532
|
+
return (jsx$1(Container$D, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13533
13533
|
};
|
|
13534
|
-
var templateObject_1$
|
|
13534
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
13535
13535
|
|
|
13536
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13536
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13537
13537
|
var size = _a.size;
|
|
13538
13538
|
return (size === 'small' ? '36px' : '');
|
|
13539
13539
|
});
|
|
13540
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13541
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13540
|
+
var SuccessMessage = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
13541
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13542
13542
|
var Success = function (_a) {
|
|
13543
13543
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13544
13544
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13545
13545
|
};
|
|
13546
|
-
var templateObject_1$
|
|
13546
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
13547
13547
|
|
|
13548
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13548
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13549
13549
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13550
13550
|
return status === InputValidationType.Empty &&
|
|
13551
13551
|
type === 'primary' &&
|
|
@@ -13562,16 +13562,16 @@ var BasePlusButton = function (_a) {
|
|
|
13562
13562
|
}
|
|
13563
13563
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13564
13564
|
};
|
|
13565
|
-
var templateObject_1$
|
|
13565
|
+
var templateObject_1$O;
|
|
13566
13566
|
|
|
13567
|
-
var Container$
|
|
13568
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13567
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13568
|
+
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13569
13569
|
var BasePlusIcon = function (_a) {
|
|
13570
13570
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13571
13571
|
var theme = useTheme();
|
|
13572
|
-
return (jsx$1(Container$
|
|
13572
|
+
return (jsx$1(Container$C, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13573
13573
|
};
|
|
13574
|
-
var templateObject_1$
|
|
13574
|
+
var templateObject_1$N, templateObject_2$w;
|
|
13575
13575
|
|
|
13576
13576
|
var Input$3 = {
|
|
13577
13577
|
Simple: BaseInput,
|
|
@@ -13580,7 +13580,7 @@ var Input$3 = {
|
|
|
13580
13580
|
SimplePlusIcon: BasePlusIcon,
|
|
13581
13581
|
};
|
|
13582
13582
|
|
|
13583
|
-
var Container$
|
|
13583
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13584
13584
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13585
13585
|
return borderRadiusVariant &&
|
|
13586
13586
|
"\n border-radius: 40px;\n ";
|
|
@@ -13589,11 +13589,11 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13589
13589
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13590
13590
|
});
|
|
13591
13591
|
// max-height: 31.875rem;
|
|
13592
|
-
var TopTagContainer$
|
|
13593
|
-
var BottomTagContainer$
|
|
13592
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13593
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13594
13594
|
var NavButtonContainer$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13595
13595
|
var Button$3 = newStyled.button(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13596
|
-
var settings$
|
|
13596
|
+
var settings$2 = {
|
|
13597
13597
|
dots: true,
|
|
13598
13598
|
infinite: false,
|
|
13599
13599
|
speed: 200,
|
|
@@ -13607,7 +13607,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13607
13607
|
var sliderWrapper = useRef(null);
|
|
13608
13608
|
useRef(null);
|
|
13609
13609
|
var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13610
|
-
usePreventVerticalScroll$
|
|
13610
|
+
usePreventVerticalScroll$2(sliderWrapper);
|
|
13611
13611
|
var onButtonClick = useCallback(function (i) {
|
|
13612
13612
|
var _a;
|
|
13613
13613
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13637,20 +13637,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13637
13637
|
}
|
|
13638
13638
|
}
|
|
13639
13639
|
}, [contents, selectedValue]);
|
|
13640
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13640
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13641
13641
|
var _a;
|
|
13642
13642
|
var activeSlide = contents[e];
|
|
13643
13643
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13644
13644
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13645
13645
|
autoplay ? _playVideo() : _stopVideo();
|
|
13646
|
-
} }, settings$
|
|
13646
|
+
} }, settings$2, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13647
13647
|
var _a;
|
|
13648
13648
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13649
13649
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13650
|
-
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$
|
|
13650
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13651
13651
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13652
13652
|
};
|
|
13653
|
-
function usePreventVerticalScroll$
|
|
13653
|
+
function usePreventVerticalScroll$2(ref, dragThreshold) {
|
|
13654
13654
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13655
13655
|
var firstClientX = useRef(0);
|
|
13656
13656
|
var clientX = useRef(0);
|
|
@@ -13685,14 +13685,14 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13685
13685
|
};
|
|
13686
13686
|
}, [preventTouch, ref, touchStart]);
|
|
13687
13687
|
}
|
|
13688
|
-
var templateObject_1$
|
|
13688
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
13689
13689
|
|
|
13690
|
-
var Container$
|
|
13690
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13691
13691
|
var ProductGalleryMobile = function (_a) {
|
|
13692
13692
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13693
|
-
return (jsx$1(Container$
|
|
13693
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13694
13694
|
};
|
|
13695
|
-
var templateObject_1$
|
|
13695
|
+
var templateObject_1$L;
|
|
13696
13696
|
|
|
13697
13697
|
function _extends() {
|
|
13698
13698
|
_extends = Object.assign || function (target) {
|
|
@@ -13959,27 +13959,27 @@ function useSwipeable(options) {
|
|
|
13959
13959
|
return handlers;
|
|
13960
13960
|
}
|
|
13961
13961
|
|
|
13962
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13962
|
+
var Button$2 = newStyled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13963
13963
|
var ArrowButton = function (_a) {
|
|
13964
13964
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13965
13965
|
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13966
13966
|
};
|
|
13967
|
-
var templateObject_1$
|
|
13967
|
+
var templateObject_1$K;
|
|
13968
13968
|
|
|
13969
|
-
var Container$
|
|
13969
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13970
13970
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13971
13971
|
var SlideDots = function (_a) {
|
|
13972
13972
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13973
13973
|
var theme = useTheme();
|
|
13974
|
-
return (jsx$1(Container$
|
|
13974
|
+
return (jsx$1(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13975
13975
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13976
13976
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
13977
13977
|
};
|
|
13978
|
-
var templateObject_1$
|
|
13978
|
+
var templateObject_1$J;
|
|
13979
13979
|
|
|
13980
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13981
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13982
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13980
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13981
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13982
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13983
13983
|
var SlideNavigation = function (_a) {
|
|
13984
13984
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13985
13985
|
var theme = useTheme();
|
|
@@ -13991,23 +13991,23 @@ var SlideNavigation = function (_a) {
|
|
|
13991
13991
|
onNavigate(selectedIndex + 1);
|
|
13992
13992
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13993
13993
|
};
|
|
13994
|
-
var templateObject_1$
|
|
13994
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q;
|
|
13995
13995
|
|
|
13996
|
-
var Container$
|
|
13996
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13997
13997
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13998
13998
|
return borderRadiusVariant &&
|
|
13999
13999
|
"\n border-radius: 40px;\n ";
|
|
14000
14000
|
});
|
|
14001
|
-
var TopTagContainer$
|
|
14002
|
-
var BottomTagContainer$
|
|
14001
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14002
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14003
14003
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14004
14004
|
var _b, _c;
|
|
14005
14005
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14006
|
-
return (jsxs$1(Container$
|
|
14006
|
+
return (jsxs$1(Container$y, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14007
14007
|
});
|
|
14008
|
-
var templateObject_1$
|
|
14008
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p;
|
|
14009
14009
|
|
|
14010
|
-
var Container$
|
|
14010
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14011
14011
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14012
14012
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14013
14013
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14029,11 +14029,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14029
14029
|
useEffect(function () {
|
|
14030
14030
|
setSelectedImage(images[index]);
|
|
14031
14031
|
}, [index, images]);
|
|
14032
|
-
return (jsxs$1(Container$
|
|
14032
|
+
return (jsxs$1(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14033
14033
|
};
|
|
14034
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$G;
|
|
14035
14035
|
|
|
14036
|
-
var Container$
|
|
14036
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14037
14037
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14038
14038
|
return borderRadiusVariant &&
|
|
14039
14039
|
"\n border-radius: 40px;\n ";
|
|
@@ -14042,15 +14042,15 @@ var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14042
14042
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14043
14043
|
});
|
|
14044
14044
|
// max-height: 31.875rem;
|
|
14045
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14046
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14045
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14046
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14047
14047
|
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14048
14048
|
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14049
14049
|
var VideoTag = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14050
14050
|
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14051
14051
|
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14052
14052
|
var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14053
|
-
var settings = {
|
|
14053
|
+
var settings$1 = {
|
|
14054
14054
|
dots: true,
|
|
14055
14055
|
infinite: false,
|
|
14056
14056
|
speed: 200,
|
|
@@ -14064,7 +14064,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14064
14064
|
var sliderWrapper = useRef(null);
|
|
14065
14065
|
var iframeRef = useRef(null);
|
|
14066
14066
|
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
14067
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
14067
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
14068
14068
|
var onButtonClick = useCallback(function (i) {
|
|
14069
14069
|
var _a;
|
|
14070
14070
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -14094,20 +14094,20 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14094
14094
|
}
|
|
14095
14095
|
}
|
|
14096
14096
|
}, [images, selectedValue]);
|
|
14097
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14097
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14098
14098
|
var _a;
|
|
14099
14099
|
var activeSlide = images[e];
|
|
14100
14100
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14101
14101
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14102
14102
|
autoplay ? _playVideo() : _stopVideo();
|
|
14103
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14103
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14104
14104
|
var _a, _b;
|
|
14105
|
-
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14105
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14106
14106
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14107
14107
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14108
14108
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14109
14109
|
};
|
|
14110
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14110
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
14111
14111
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14112
14112
|
var firstClientX = useRef(0);
|
|
14113
14113
|
var clientX = useRef(0);
|
|
@@ -14142,14 +14142,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14142
14142
|
};
|
|
14143
14143
|
}, [preventTouch, ref, touchStart]);
|
|
14144
14144
|
}
|
|
14145
|
-
var templateObject_1$
|
|
14145
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
14146
14146
|
|
|
14147
|
-
var Container$
|
|
14147
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14148
14148
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14149
14149
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14150
|
-
return (jsx$1(Container$
|
|
14150
|
+
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14151
14151
|
};
|
|
14152
|
-
var templateObject_1$
|
|
14152
|
+
var templateObject_1$E;
|
|
14153
14153
|
|
|
14154
14154
|
var __defProp$1 = Object.defineProperty;
|
|
14155
14155
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14282,14 +14282,14 @@ var Portal = function (_a) {
|
|
|
14282
14282
|
var visibleStyle = function (_a) {
|
|
14283
14283
|
var opened = _a.opened;
|
|
14284
14284
|
return opened
|
|
14285
|
-
? css(templateObject_1$
|
|
14285
|
+
? css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14286
14286
|
};
|
|
14287
14287
|
var transformStyle = function (_a) {
|
|
14288
14288
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14289
14289
|
return opened
|
|
14290
|
-
? css(templateObject_3$
|
|
14290
|
+
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14291
14291
|
};
|
|
14292
|
-
var Container$
|
|
14292
|
+
var Container$u = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14293
14293
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14294
14294
|
}), visibleStyle, transformStyle);
|
|
14295
14295
|
var Overlay = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -14302,7 +14302,7 @@ var Modal = function (_a) {
|
|
|
14302
14302
|
}
|
|
14303
14303
|
close();
|
|
14304
14304
|
};
|
|
14305
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14305
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$u, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14306
14306
|
};
|
|
14307
14307
|
var modalEvent = function (id, detail) {
|
|
14308
14308
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14330,9 +14330,220 @@ var useModal = function (id) {
|
|
|
14330
14330
|
close: close,
|
|
14331
14331
|
}); }, [close, open, opened]);
|
|
14332
14332
|
};
|
|
14333
|
-
var templateObject_1$
|
|
14333
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14334
14334
|
|
|
14335
|
-
var
|
|
14335
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
14336
|
+
var timerColor = _a.timerColor;
|
|
14337
|
+
return timerColor || '';
|
|
14338
|
+
});
|
|
14339
|
+
var timeToSeconds = function (_a) {
|
|
14340
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
14341
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
14342
|
+
};
|
|
14343
|
+
var secondsToTime = function (secs) {
|
|
14344
|
+
var hours = Math.floor(secs / 3600);
|
|
14345
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
14346
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
14347
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
14348
|
+
};
|
|
14349
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
14350
|
+
var Timer = function (_a) {
|
|
14351
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
14352
|
+
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
14353
|
+
useEffect(function () {
|
|
14354
|
+
var timer = setInterval(function () {
|
|
14355
|
+
setSecs(function (seconds) {
|
|
14356
|
+
if (seconds === 1) {
|
|
14357
|
+
clearInterval(timer);
|
|
14358
|
+
onTimeUp();
|
|
14359
|
+
return 0;
|
|
14360
|
+
}
|
|
14361
|
+
return seconds - 1;
|
|
14362
|
+
});
|
|
14363
|
+
}, 1000);
|
|
14364
|
+
if (secs <= 0)
|
|
14365
|
+
clearInterval(timer);
|
|
14366
|
+
return function () { return clearInterval(timer); };
|
|
14367
|
+
}, [onTimeUp, secs]);
|
|
14368
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
14369
|
+
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
14370
|
+
};
|
|
14371
|
+
var templateObject_1$C;
|
|
14372
|
+
|
|
14373
|
+
var TimerContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
14374
|
+
var textPosition = _a.textPosition;
|
|
14375
|
+
return textPosition;
|
|
14376
|
+
}, function (_a) {
|
|
14377
|
+
var backgroundColor = _a.backgroundColor;
|
|
14378
|
+
return backgroundColor;
|
|
14379
|
+
}, function (_a) {
|
|
14380
|
+
var borderRadius = _a.borderRadius;
|
|
14381
|
+
return borderRadius || 'unset';
|
|
14382
|
+
}, function (_a) {
|
|
14383
|
+
var borderRadius = _a.borderRadius;
|
|
14384
|
+
return borderRadius || '8px';
|
|
14385
|
+
});
|
|
14386
|
+
var templateObject_1$B;
|
|
14387
|
+
|
|
14388
|
+
var getDefaultCountdown = function () {
|
|
14389
|
+
var tomorrowDate = new Date();
|
|
14390
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
14391
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
14392
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
14393
|
+
return Number(totalSeconds.toFixed(0));
|
|
14394
|
+
};
|
|
14395
|
+
|
|
14396
|
+
var HurryUp = function (_a) {
|
|
14397
|
+
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
14398
|
+
var theme = useTheme();
|
|
14399
|
+
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
14400
|
+
};
|
|
14401
|
+
|
|
14402
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14403
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14404
|
+
return borderRadiusVariant &&
|
|
14405
|
+
"\n border-radius: 40px;\n ";
|
|
14406
|
+
}, function (_a) {
|
|
14407
|
+
var theme = _a.theme;
|
|
14408
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14409
|
+
});
|
|
14410
|
+
// max-height: 31.875rem;
|
|
14411
|
+
var TopTagContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14412
|
+
var BottomTagContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"], ["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"])));
|
|
14413
|
+
var settings = {
|
|
14414
|
+
dots: true,
|
|
14415
|
+
infinite: false,
|
|
14416
|
+
speed: 200,
|
|
14417
|
+
slidesToShow: 1,
|
|
14418
|
+
slidesToScroll: 1,
|
|
14419
|
+
initialSlide: 0,
|
|
14420
|
+
centerMode: true,
|
|
14421
|
+
centerPadding: '22',
|
|
14422
|
+
};
|
|
14423
|
+
var ImageProductWithTagsV4 = function (_a) {
|
|
14424
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
14425
|
+
var slick = useRef(null);
|
|
14426
|
+
var sliderWrapper = useRef(null);
|
|
14427
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14428
|
+
var onButtonClick = useCallback(function (i) {
|
|
14429
|
+
var _a;
|
|
14430
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
14431
|
+
}, [slick]);
|
|
14432
|
+
var _sendCommandToIframe = function (command) {
|
|
14433
|
+
var iframe = document.getElementById('vwo-video');
|
|
14434
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14435
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14436
|
+
event: 'command',
|
|
14437
|
+
func: command,
|
|
14438
|
+
}), '*');
|
|
14439
|
+
};
|
|
14440
|
+
var _stopVideo = function () {
|
|
14441
|
+
_sendCommandToIframe('stopVideo');
|
|
14442
|
+
};
|
|
14443
|
+
var _playVideo = function () {
|
|
14444
|
+
_sendCommandToIframe('playVideo');
|
|
14445
|
+
};
|
|
14446
|
+
useEffect(function () {
|
|
14447
|
+
var _a;
|
|
14448
|
+
if (selectedValue) {
|
|
14449
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14450
|
+
if (matchingIndex !== -1) {
|
|
14451
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14452
|
+
}
|
|
14453
|
+
}
|
|
14454
|
+
}, [contents, selectedValue]);
|
|
14455
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$t, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14456
|
+
var _a;
|
|
14457
|
+
var activeSlide = contents[e];
|
|
14458
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14459
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14460
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14461
|
+
} }, settings, { ref: slick }, { children: contents.map(function (content) {
|
|
14462
|
+
var _a;
|
|
14463
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14464
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14465
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14466
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14467
|
+
};
|
|
14468
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14469
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14470
|
+
var firstClientX = useRef(0);
|
|
14471
|
+
var clientX = useRef(0);
|
|
14472
|
+
var preventTouch = useCallback(function (e) {
|
|
14473
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14474
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14475
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14476
|
+
if (e.cancelable) {
|
|
14477
|
+
e.preventDefault();
|
|
14478
|
+
e.returnValue = false;
|
|
14479
|
+
}
|
|
14480
|
+
return false;
|
|
14481
|
+
}
|
|
14482
|
+
return true;
|
|
14483
|
+
}, [dragThreshold]);
|
|
14484
|
+
var touchStart = useCallback(function (e) {
|
|
14485
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14486
|
+
}, []);
|
|
14487
|
+
useEffect(function () {
|
|
14488
|
+
var current = ref.current;
|
|
14489
|
+
if (current) {
|
|
14490
|
+
current.addEventListener('touchstart', touchStart);
|
|
14491
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14492
|
+
}
|
|
14493
|
+
return function () {
|
|
14494
|
+
if (current) {
|
|
14495
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14496
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14497
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14498
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14499
|
+
}
|
|
14500
|
+
};
|
|
14501
|
+
}, [preventTouch, ref, touchStart]);
|
|
14502
|
+
}
|
|
14503
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m;
|
|
14504
|
+
|
|
14505
|
+
var Container$s = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14506
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
14507
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14508
|
+
return (jsx$1(Container$s, __assign$1({ "data-testid": "product-gallery-mobile-v4" }, { children: jsx$1(ImageProductWithTagsV4, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14509
|
+
};
|
|
14510
|
+
var templateObject_1$z;
|
|
14511
|
+
|
|
14512
|
+
var Container$r = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
14513
|
+
var size = _a.size;
|
|
14514
|
+
return (size ? size : '100%');
|
|
14515
|
+
}, function (_a) {
|
|
14516
|
+
var size = _a.size;
|
|
14517
|
+
return (size ? size : '100%');
|
|
14518
|
+
});
|
|
14519
|
+
var borderSize = {
|
|
14520
|
+
xsmall: '1px',
|
|
14521
|
+
small: '1.5px',
|
|
14522
|
+
medium: '2px',
|
|
14523
|
+
large: '3px',
|
|
14524
|
+
};
|
|
14525
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
14526
|
+
var StyledSpinner = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
14527
|
+
var size = _a.size;
|
|
14528
|
+
return borderSize[size];
|
|
14529
|
+
}, function (_a) {
|
|
14530
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
14531
|
+
return background;
|
|
14532
|
+
}, function (_a) {
|
|
14533
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
14534
|
+
return color;
|
|
14535
|
+
}, function (_a) {
|
|
14536
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
14537
|
+
return duration;
|
|
14538
|
+
});
|
|
14539
|
+
var templateObject_1$y, templateObject_2$p;
|
|
14540
|
+
|
|
14541
|
+
var Spinner = function (_a) {
|
|
14542
|
+
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
14543
|
+
return (jsx$1(Container$r, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
14544
|
+
};
|
|
14545
|
+
|
|
14546
|
+
var Bar$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14336
14547
|
var height = _a.height;
|
|
14337
14548
|
return height || '0.5rem';
|
|
14338
14549
|
}, function (_a) {
|
|
@@ -14371,7 +14582,7 @@ var BarContainer = newStyled.div({
|
|
|
14371
14582
|
padding: '0 16px',
|
|
14372
14583
|
position: 'relative',
|
|
14373
14584
|
});
|
|
14374
|
-
var Container$
|
|
14585
|
+
var Container$q = newStyled.div(function (_a) {
|
|
14375
14586
|
var backgroundColor = _a.backgroundColor;
|
|
14376
14587
|
return ({
|
|
14377
14588
|
width: '475px',
|
|
@@ -14402,21 +14613,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14402
14613
|
var theme = useTheme();
|
|
14403
14614
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14404
14615
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14405
|
-
return (jsxs$1(Container$
|
|
14616
|
+
return (jsxs$1(Container$q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14406
14617
|
};
|
|
14407
|
-
var templateObject_1$
|
|
14618
|
+
var templateObject_1$x;
|
|
14408
14619
|
|
|
14409
|
-
var Container$
|
|
14620
|
+
var Container$p = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14410
14621
|
var theme = _a.theme;
|
|
14411
14622
|
return theme.component.orderBar.backgroundColor;
|
|
14412
14623
|
});
|
|
14413
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14624
|
+
var H1 = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14414
14625
|
var OrderBar = function (_a) {
|
|
14415
14626
|
var message = _a.message, color = _a.color;
|
|
14416
14627
|
var theme = useTheme();
|
|
14417
|
-
return (jsxs$1(Container$
|
|
14628
|
+
return (jsxs$1(Container$p, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14418
14629
|
};
|
|
14419
|
-
var templateObject_1$
|
|
14630
|
+
var templateObject_1$w, templateObject_2$o;
|
|
14420
14631
|
|
|
14421
14632
|
var htmlReactParser = {exports: {}};
|
|
14422
14633
|
|
|
@@ -18197,8 +18408,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18197
18408
|
HTMLReactParser$1.attributesToProps;
|
|
18198
18409
|
HTMLReactParser$1.Element;
|
|
18199
18410
|
|
|
18200
|
-
var Container$
|
|
18201
|
-
var Card = newStyled.div(templateObject_2$
|
|
18411
|
+
var Container$o = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
18412
|
+
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __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: 20px 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: 20px 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"])));
|
|
18202
18413
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
18203
18414
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18204
18415
|
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
@@ -18207,7 +18418,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 =
|
|
|
18207
18418
|
var DiscountContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18208
18419
|
var PackSelector = function (_a) {
|
|
18209
18420
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18210
|
-
return (jsx$1(Container$
|
|
18421
|
+
return (jsx$1(Container$o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18211
18422
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18212
18423
|
}) }), void 0));
|
|
18213
18424
|
};
|
|
@@ -18234,10 +18445,10 @@ var PackCard = function (_a) {
|
|
|
18234
18445
|
currency: currencyCode || 'USD',
|
|
18235
18446
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18236
18447
|
};
|
|
18237
|
-
var templateObject_1$
|
|
18448
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
18238
18449
|
|
|
18239
|
-
var Container$
|
|
18240
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18450
|
+
var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18451
|
+
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18241
18452
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18242
18453
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18243
18454
|
}));
|
|
@@ -18258,7 +18469,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18258
18469
|
var background = _a.background;
|
|
18259
18470
|
return background || 'unset';
|
|
18260
18471
|
});
|
|
18261
|
-
var templateObject_1$
|
|
18472
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
18262
18473
|
|
|
18263
18474
|
var Pagination = function (_a) {
|
|
18264
18475
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18304,7 +18515,7 @@ var Pagination = function (_a) {
|
|
|
18304
18515
|
}
|
|
18305
18516
|
return pages;
|
|
18306
18517
|
}, [from, page, showReducedPages, to]);
|
|
18307
|
-
return (jsxs$1(Container$
|
|
18518
|
+
return (jsxs$1(Container$n, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18308
18519
|
};
|
|
18309
18520
|
|
|
18310
18521
|
var PaginatorBlog = function (_a) {
|
|
@@ -18318,12 +18529,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18318
18529
|
setPage(page);
|
|
18319
18530
|
onChange(page);
|
|
18320
18531
|
};
|
|
18321
|
-
return (jsxs$1(Container$
|
|
18532
|
+
return (jsxs$1(Container$n, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18322
18533
|
? theme.colors.shades['white'].color
|
|
18323
18534
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18324
18535
|
};
|
|
18325
18536
|
|
|
18326
|
-
var Container$
|
|
18537
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18327
18538
|
var width = _a.width;
|
|
18328
18539
|
return width;
|
|
18329
18540
|
}, function (_a) {
|
|
@@ -18339,13 +18550,13 @@ var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18339
18550
|
var PaymentMethod = function (_a) {
|
|
18340
18551
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18341
18552
|
var theme = useTheme();
|
|
18342
|
-
return (jsx$1(Container$
|
|
18553
|
+
return (jsx$1(Container$m, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
18343
18554
|
};
|
|
18344
|
-
var templateObject_1$
|
|
18555
|
+
var templateObject_1$t;
|
|
18345
18556
|
|
|
18346
|
-
var Container$
|
|
18557
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18347
18558
|
var IMAGE_WIDTH = '63px';
|
|
18348
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18559
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18349
18560
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18350
18561
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18351
18562
|
}), IMAGE_WIDTH);
|
|
@@ -18383,9 +18594,9 @@ var StyledSpan = newStyled.span(templateObject_6$6 || (templateObject_6$6 = __ma
|
|
|
18383
18594
|
var SimpleOrderItem = function (_a) {
|
|
18384
18595
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18385
18596
|
var theme = useTheme();
|
|
18386
|
-
return (jsxs$1(Container$
|
|
18597
|
+
return (jsxs$1(Container$l, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18387
18598
|
};
|
|
18388
|
-
var templateObject_1$
|
|
18599
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18389
18600
|
|
|
18390
18601
|
var P$1 = newStyled.p(function (_a) {
|
|
18391
18602
|
var color = _a.color;
|
|
@@ -18399,7 +18610,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18399
18610
|
margin: '0.938rem 4.188rem',
|
|
18400
18611
|
});
|
|
18401
18612
|
});
|
|
18402
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18613
|
+
var Bar = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18403
18614
|
var height = _a.height;
|
|
18404
18615
|
return height || '0.5rem';
|
|
18405
18616
|
}, function (_a) {
|
|
@@ -18428,7 +18639,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18428
18639
|
position: 'absolute',
|
|
18429
18640
|
});
|
|
18430
18641
|
});
|
|
18431
|
-
var Container$
|
|
18642
|
+
var Container$k = newStyled.div(function (_a) {
|
|
18432
18643
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18433
18644
|
return ({
|
|
18434
18645
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18442,12 +18653,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18442
18653
|
var ProgressBar = function (_a) {
|
|
18443
18654
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18444
18655
|
var theme = useTheme();
|
|
18445
|
-
return (jsxs$1(Container$
|
|
18656
|
+
return (jsxs$1(Container$k, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18446
18657
|
};
|
|
18447
|
-
var templateObject_1$
|
|
18658
|
+
var templateObject_1$r;
|
|
18448
18659
|
|
|
18449
|
-
var Container$
|
|
18450
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18660
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18661
|
+
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18451
18662
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18452
18663
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18453
18664
|
var QuantityPicker = function (_a) {
|
|
@@ -18472,9 +18683,9 @@ var QuantityPicker = function (_a) {
|
|
|
18472
18683
|
return clamp(value);
|
|
18473
18684
|
});
|
|
18474
18685
|
}, [value, clamp]);
|
|
18475
|
-
return (jsxs$1(Container$
|
|
18686
|
+
return (jsxs$1(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18476
18687
|
};
|
|
18477
|
-
var templateObject_1$
|
|
18688
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18478
18689
|
|
|
18479
18690
|
/* base styles & size variants */
|
|
18480
18691
|
var CustomRadioStyles$1 = {
|
|
@@ -18543,9 +18754,9 @@ var ContainerStyles$1 = {
|
|
|
18543
18754
|
},
|
|
18544
18755
|
};
|
|
18545
18756
|
|
|
18546
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18547
|
-
var Container$
|
|
18548
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18757
|
+
var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18758
|
+
var Container$i = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18759
|
+
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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) {
|
|
18549
18760
|
var disabled = _a.disabled;
|
|
18550
18761
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18551
18762
|
});
|
|
@@ -18561,9 +18772,9 @@ var RadioPrimary = function (_a) {
|
|
|
18561
18772
|
var value = event.currentTarget.value;
|
|
18562
18773
|
onChange({ value: value, label: label });
|
|
18563
18774
|
};
|
|
18564
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18775
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { 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$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18565
18776
|
};
|
|
18566
|
-
var templateObject_1$
|
|
18777
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$h;
|
|
18567
18778
|
|
|
18568
18779
|
var RadioGroupInput = function (_a) {
|
|
18569
18780
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18642,9 +18853,9 @@ var ContainerStyles = {
|
|
|
18642
18853
|
},
|
|
18643
18854
|
};
|
|
18644
18855
|
|
|
18645
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18646
|
-
var Container$
|
|
18647
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18856
|
+
var Wrapper$2 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18857
|
+
var Container$h = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18858
|
+
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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) {
|
|
18648
18859
|
var disabled = _a.disabled;
|
|
18649
18860
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18650
18861
|
});
|
|
@@ -18666,9 +18877,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18666
18877
|
var value = event.currentTarget.value;
|
|
18667
18878
|
onChange({ value: value, label: label });
|
|
18668
18879
|
};
|
|
18669
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18880
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$h, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { 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, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18670
18881
|
};
|
|
18671
|
-
var templateObject_1$
|
|
18882
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$g;
|
|
18672
18883
|
|
|
18673
18884
|
var ClubRadioGroupInput = function (_a) {
|
|
18674
18885
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18696,8 +18907,8 @@ function formatDate(date, format) {
|
|
|
18696
18907
|
}
|
|
18697
18908
|
}
|
|
18698
18909
|
|
|
18699
|
-
var Container$
|
|
18700
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18910
|
+
var Container$g = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18911
|
+
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18701
18912
|
var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18702
18913
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18703
18914
|
var DateText$1 = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
@@ -18734,15 +18945,15 @@ var Review$1 = function (_a) {
|
|
|
18734
18945
|
}
|
|
18735
18946
|
}
|
|
18736
18947
|
}, [opened]);
|
|
18737
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18948
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$g, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18738
18949
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18739
18950
|
};
|
|
18740
|
-
var templateObject_1$
|
|
18951
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18741
18952
|
|
|
18742
18953
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18743
18954
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18744
|
-
var Container$
|
|
18745
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18955
|
+
var Container$f = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18956
|
+
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18746
18957
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18747
18958
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18748
18959
|
var DateText = newStyled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -18783,7 +18994,7 @@ var Review = function (_a) {
|
|
|
18783
18994
|
});
|
|
18784
18995
|
};
|
|
18785
18996
|
}, [randomId]);
|
|
18786
|
-
return (jsxs$1(Container$
|
|
18997
|
+
return (jsxs$1(Container$f, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18787
18998
|
__html: showMoreMobile
|
|
18788
18999
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18789
19000
|
: description,
|
|
@@ -18793,10 +19004,10 @@ var Review = function (_a) {
|
|
|
18793
19004
|
: description,
|
|
18794
19005
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18795
19006
|
};
|
|
18796
|
-
var templateObject_1$
|
|
19007
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18797
19008
|
|
|
18798
|
-
var Container$
|
|
18799
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19009
|
+
var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19010
|
+
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18800
19011
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18801
19012
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18802
19013
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
@@ -18809,19 +19020,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18809
19020
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
18810
19021
|
var starsNumber = 5;
|
|
18811
19022
|
var theme = useTheme();
|
|
18812
|
-
return (jsxs$1(Container$
|
|
19023
|
+
return (jsxs$1(Container$e, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18813
19024
|
};
|
|
18814
|
-
var templateObject_1$
|
|
19025
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18815
19026
|
|
|
18816
|
-
var Container$
|
|
18817
|
-
var Text = newStyled.p(templateObject_2$
|
|
19027
|
+
var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19028
|
+
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18818
19029
|
var ScrollToTop = function (_a) {
|
|
18819
19030
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18820
19031
|
var theme = useTheme();
|
|
18821
19032
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18822
|
-
return (jsxs$1(Container$
|
|
19033
|
+
return (jsxs$1(Container$d, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18823
19034
|
};
|
|
18824
|
-
var templateObject_1$
|
|
19035
|
+
var templateObject_1$k, templateObject_2$e;
|
|
18825
19036
|
|
|
18826
19037
|
var Input = newStyled.input(function (props) { return ({
|
|
18827
19038
|
padding: props.theme.component.input.padding,
|
|
@@ -18852,7 +19063,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18852
19063
|
},
|
|
18853
19064
|
}); });
|
|
18854
19065
|
|
|
18855
|
-
var Container$
|
|
19066
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18856
19067
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18857
19068
|
}));
|
|
18858
19069
|
var Description = newStyled.div({
|
|
@@ -18869,25 +19080,25 @@ var Description = newStyled.div({
|
|
|
18869
19080
|
var ProductItem = function (_a) {
|
|
18870
19081
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18871
19082
|
var theme = useTheme();
|
|
18872
|
-
return (jsxs$1(Container$
|
|
19083
|
+
return (jsxs$1(Container$c, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18873
19084
|
};
|
|
18874
|
-
var templateObject_1$
|
|
19085
|
+
var templateObject_1$j;
|
|
18875
19086
|
|
|
18876
|
-
var Container$
|
|
19087
|
+
var Container$b = newStyled.div({
|
|
18877
19088
|
display: 'flex',
|
|
18878
19089
|
justifyContent: 'center',
|
|
18879
19090
|
padding: '1rem',
|
|
18880
19091
|
});
|
|
18881
19092
|
var Footer = function (_a) {
|
|
18882
19093
|
var text = _a.text, onClick = _a.onClick;
|
|
18883
|
-
return (jsx$1(Container$
|
|
19094
|
+
return (jsx$1(Container$b, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18884
19095
|
};
|
|
18885
19096
|
|
|
18886
19097
|
var Ul = newStyled.ul({
|
|
18887
19098
|
margin: '0px',
|
|
18888
19099
|
padding: '0px',
|
|
18889
19100
|
});
|
|
18890
|
-
var Li = newStyled.li(templateObject_1$
|
|
19101
|
+
var Li = newStyled.li(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18891
19102
|
padding: [0, '0rem 1rem'],
|
|
18892
19103
|
borderRadius: [0, '0.5rem'],
|
|
18893
19104
|
}));
|
|
@@ -18899,7 +19110,7 @@ var Anchor = newStyled.a({
|
|
|
18899
19110
|
padding: 0,
|
|
18900
19111
|
textDecoration: 'none',
|
|
18901
19112
|
});
|
|
18902
|
-
var Container$
|
|
19113
|
+
var Container$a = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
18903
19114
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18904
19115
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18905
19116
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18910,11 +19121,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18910
19121
|
var ResultsPanel = function (_a) {
|
|
18911
19122
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18912
19123
|
var theme = useTheme();
|
|
18913
|
-
return (jsxs$1(Container$
|
|
19124
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18914
19125
|
};
|
|
18915
|
-
var templateObject_1$
|
|
19126
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
18916
19127
|
|
|
18917
|
-
var Button = newStyled.button(templateObject_1$
|
|
19128
|
+
var Button = newStyled.button(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
18918
19129
|
right: ['1rem', '7.75rem'],
|
|
18919
19130
|
top: ['0.75rem', '0.75rem'],
|
|
18920
19131
|
}));
|
|
@@ -18923,7 +19134,7 @@ var ClearButton = function (_a) {
|
|
|
18923
19134
|
var theme = useTheme();
|
|
18924
19135
|
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18925
19136
|
};
|
|
18926
|
-
var templateObject_1$
|
|
19137
|
+
var templateObject_1$h;
|
|
18927
19138
|
|
|
18928
19139
|
var SearchIconContainer = newStyled.div({
|
|
18929
19140
|
display: 'flex',
|
|
@@ -18933,7 +19144,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18933
19144
|
background: 'white',
|
|
18934
19145
|
alignSelf: 'center',
|
|
18935
19146
|
});
|
|
18936
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19147
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
18937
19148
|
var SearchControl = function (_a) {
|
|
18938
19149
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18939
19150
|
var theme = useTheme();
|
|
@@ -18949,7 +19160,7 @@ var SearchControl = function (_a) {
|
|
|
18949
19160
|
}
|
|
18950
19161
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18951
19162
|
};
|
|
18952
|
-
var templateObject_1$
|
|
19163
|
+
var templateObject_1$g;
|
|
18953
19164
|
|
|
18954
19165
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18955
19166
|
var reducer = function (state, action) {
|
|
@@ -18965,7 +19176,7 @@ var reducer = function (state, action) {
|
|
|
18965
19176
|
}
|
|
18966
19177
|
}
|
|
18967
19178
|
};
|
|
18968
|
-
var Container$
|
|
19179
|
+
var Container$9 = newStyled.div({
|
|
18969
19180
|
position: 'relative',
|
|
18970
19181
|
display: 'flex',
|
|
18971
19182
|
});
|
|
@@ -19005,7 +19216,7 @@ var SearchBar = function (_a) {
|
|
|
19005
19216
|
if (e.cancelable) {
|
|
19006
19217
|
e.preventDefault();
|
|
19007
19218
|
}
|
|
19008
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19219
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$9, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19009
19220
|
if (e.key === 'Enter') {
|
|
19010
19221
|
if (e.cancelable) {
|
|
19011
19222
|
e.preventDefault();
|
|
@@ -19016,20 +19227,20 @@ var SearchBar = function (_a) {
|
|
|
19016
19227
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19017
19228
|
};
|
|
19018
19229
|
|
|
19019
|
-
var Container$
|
|
19020
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19230
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19231
|
+
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19021
19232
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19022
19233
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19023
19234
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19024
19235
|
var SearchNavigation = function (_a) {
|
|
19025
19236
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19026
|
-
return (jsxs$1(Container$
|
|
19237
|
+
return (jsxs$1(Container$8, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19027
19238
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19028
19239
|
}) }, void 0)] }, void 0));
|
|
19029
19240
|
};
|
|
19030
|
-
var templateObject_1$
|
|
19241
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
19031
19242
|
|
|
19032
|
-
var Container$
|
|
19243
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19033
19244
|
var alignCenter = _a.alignCenter;
|
|
19034
19245
|
return alignCenter &&
|
|
19035
19246
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19039,17 +19250,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19039
19250
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19040
19251
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19041
19252
|
});
|
|
19042
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19253
|
+
var TitleText = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19043
19254
|
var BannerText = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19044
19255
|
var ShortBanner = function (_a) {
|
|
19045
19256
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19046
19257
|
var theme = useTheme();
|
|
19047
|
-
return (jsxs$1(Container$
|
|
19258
|
+
return (jsxs$1(Container$7, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19048
19259
|
};
|
|
19049
|
-
var templateObject_1$
|
|
19260
|
+
var templateObject_1$e, templateObject_2$b, templateObject_3$a;
|
|
19050
19261
|
|
|
19051
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19052
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19262
|
+
var TableElement$1 = newStyled.table(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19263
|
+
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19053
19264
|
var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19054
19265
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19055
19266
|
var SizeChartTable = function (_a) {
|
|
@@ -19084,10 +19295,10 @@ var SizeChartTable = function (_a) {
|
|
|
19084
19295
|
backgroundColor: getCellColor(index, cell),
|
|
19085
19296
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
19086
19297
|
};
|
|
19087
|
-
var templateObject_1$
|
|
19298
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
19088
19299
|
|
|
19089
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19090
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19300
|
+
var TableElement = newStyled.table(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19301
|
+
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19091
19302
|
var TableHead = newStyled.th(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19092
19303
|
var TableRow = newStyled.tr(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19093
19304
|
var SizeTable = function (_a) {
|
|
@@ -19095,7 +19306,7 @@ var SizeTable = function (_a) {
|
|
|
19095
19306
|
var theme = useTheme();
|
|
19096
19307
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19097
19308
|
};
|
|
19098
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
19099
19310
|
|
|
19100
19311
|
var getStylesBySize$4 = function (size) {
|
|
19101
19312
|
switch (size) {
|
|
@@ -19122,7 +19333,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19122
19333
|
} });
|
|
19123
19334
|
};
|
|
19124
19335
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19125
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19336
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19126
19337
|
};
|
|
19127
19338
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19128
19339
|
if (disabled)
|
|
@@ -19138,23 +19349,23 @@ var TextButton = function (_a) {
|
|
|
19138
19349
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19139
19350
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19140
19351
|
};
|
|
19141
|
-
var templateObject_1$
|
|
19352
|
+
var templateObject_1$b;
|
|
19142
19353
|
|
|
19143
|
-
var Container$
|
|
19144
|
-
var P = newStyled.p(templateObject_2$
|
|
19354
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19355
|
+
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19145
19356
|
var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19146
19357
|
var SizeFitGuide = function (_a) {
|
|
19147
19358
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19148
|
-
return (jsxs$1(Container$
|
|
19359
|
+
return (jsxs$1(Container$6, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19149
19360
|
};
|
|
19150
|
-
var templateObject_1$
|
|
19361
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19151
19362
|
|
|
19152
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19363
|
+
var ButtonsContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19153
19364
|
var inline = _a.inline;
|
|
19154
19365
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19155
19366
|
});
|
|
19156
|
-
var Row = newStyled.div(templateObject_2$
|
|
19157
|
-
var templateObject_1$
|
|
19367
|
+
var Row = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19368
|
+
var templateObject_1$9, templateObject_2$7;
|
|
19158
19369
|
|
|
19159
19370
|
var SizeSelector = function (_a) {
|
|
19160
19371
|
var _b;
|
|
@@ -19173,7 +19384,7 @@ var SizeSelector = function (_a) {
|
|
|
19173
19384
|
}) }), void 0)] }), void 0));
|
|
19174
19385
|
};
|
|
19175
19386
|
|
|
19176
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19387
|
+
var TabContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19177
19388
|
var titleSize = _a.titleSize;
|
|
19178
19389
|
return titleSize;
|
|
19179
19390
|
}, function (_a) {
|
|
@@ -19190,10 +19401,10 @@ var Tab = function (_a) {
|
|
|
19190
19401
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19191
19402
|
return (jsx$1(Fragment$2, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19192
19403
|
};
|
|
19193
|
-
var templateObject_1$
|
|
19404
|
+
var templateObject_1$8;
|
|
19194
19405
|
|
|
19195
|
-
var Container$
|
|
19196
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19406
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19407
|
+
var TabList = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19197
19408
|
var backgroundColor = _a.backgroundColor;
|
|
19198
19409
|
return backgroundColor;
|
|
19199
19410
|
}, function (_a) {
|
|
@@ -19210,16 +19421,16 @@ var Tabs = function (_a) {
|
|
|
19210
19421
|
return null;
|
|
19211
19422
|
}
|
|
19212
19423
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19213
|
-
return (jsxs$1(Container$
|
|
19424
|
+
return (jsxs$1(Container$5, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19214
19425
|
};
|
|
19215
|
-
var templateObject_1$
|
|
19426
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
19216
19427
|
|
|
19217
|
-
var Container$
|
|
19428
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19218
19429
|
var Tag = function (_a) {
|
|
19219
19430
|
var text = _a.text, className = _a.className;
|
|
19220
|
-
return jsx$1(Container$
|
|
19431
|
+
return jsx$1(Container$4, __assign$1({ className: className }, { children: text }), void 0);
|
|
19221
19432
|
};
|
|
19222
|
-
var templateObject_1$
|
|
19433
|
+
var templateObject_1$6;
|
|
19223
19434
|
|
|
19224
19435
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19225
19436
|
switch (size) {
|
|
@@ -19330,8 +19541,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19330
19541
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19331
19542
|
};
|
|
19332
19543
|
|
|
19333
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19334
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19544
|
+
var ImageWrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19545
|
+
var VideoOverlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19335
19546
|
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19336
19547
|
var ImageVideo = function (_a) {
|
|
19337
19548
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19352,11 +19563,11 @@ var ImageVideo = function (_a) {
|
|
|
19352
19563
|
height: '100%',
|
|
19353
19564
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19354
19565
|
};
|
|
19355
|
-
var templateObject_1$
|
|
19566
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
19356
19567
|
|
|
19357
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19358
|
-
var ContainerMobile = css(templateObject_2$
|
|
19359
|
-
var Container$
|
|
19568
|
+
var ContainerDesktop = css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19569
|
+
var ContainerMobile = css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19570
|
+
var Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19360
19571
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19361
19572
|
var TextWithImage = function (_a) {
|
|
19362
19573
|
var _b, _c, _d, _e;
|
|
@@ -19377,7 +19588,7 @@ var TextWithImage = function (_a) {
|
|
|
19377
19588
|
// @ts-ignore
|
|
19378
19589
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19379
19590
|
};
|
|
19380
|
-
return (jsxs(Container$
|
|
19591
|
+
return (jsxs(Container$3, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19381
19592
|
backgroundColor: props.btnBGColor,
|
|
19382
19593
|
color: '#ffffff',
|
|
19383
19594
|
border: props.btnBGColor,
|
|
@@ -19387,48 +19598,10 @@ var TextWithImage = function (_a) {
|
|
|
19387
19598
|
},
|
|
19388
19599
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19389
19600
|
};
|
|
19390
|
-
var templateObject_1$
|
|
19391
|
-
|
|
19392
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19393
|
-
var timerColor = _a.timerColor;
|
|
19394
|
-
return timerColor || '';
|
|
19395
|
-
});
|
|
19396
|
-
var timeToSeconds = function (_a) {
|
|
19397
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19398
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
19399
|
-
};
|
|
19400
|
-
var secondsToTime = function (secs) {
|
|
19401
|
-
var hours = Math.floor(secs / 3600);
|
|
19402
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19403
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19404
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19405
|
-
};
|
|
19406
|
-
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19407
|
-
var Timer = function (_a) {
|
|
19408
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
19409
|
-
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19410
|
-
useEffect(function () {
|
|
19411
|
-
var timer = setInterval(function () {
|
|
19412
|
-
setSecs(function (seconds) {
|
|
19413
|
-
if (seconds === 1) {
|
|
19414
|
-
clearInterval(timer);
|
|
19415
|
-
onTimeUp();
|
|
19416
|
-
return 0;
|
|
19417
|
-
}
|
|
19418
|
-
return seconds - 1;
|
|
19419
|
-
});
|
|
19420
|
-
}, 1000);
|
|
19421
|
-
if (secs <= 0)
|
|
19422
|
-
clearInterval(timer);
|
|
19423
|
-
return function () { return clearInterval(timer); };
|
|
19424
|
-
}, [onTimeUp, secs]);
|
|
19425
|
-
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19426
|
-
return (jsxs$1(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19427
|
-
};
|
|
19428
|
-
var templateObject_1$6;
|
|
19601
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4;
|
|
19429
19602
|
|
|
19430
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19431
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19603
|
+
var Wrapper$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19604
|
+
var GrandTotal = newStyled.h1(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19432
19605
|
var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19433
19606
|
var theme = _a.theme;
|
|
19434
19607
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19442,11 +19615,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19442
19615
|
var theme = _a.theme;
|
|
19443
19616
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19444
19617
|
});
|
|
19445
|
-
var Container$
|
|
19618
|
+
var Container$2 = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19446
19619
|
var highlightColor = _a.highlightColor;
|
|
19447
19620
|
return highlightColor;
|
|
19448
19621
|
});
|
|
19449
|
-
var TotalContainer = newStyled(Container$
|
|
19622
|
+
var TotalContainer = newStyled(Container$2)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19450
19623
|
var showTotalLabel = _a.showTotalLabel;
|
|
19451
19624
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19452
19625
|
});
|
|
@@ -19456,19 +19629,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19456
19629
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19457
19630
|
});
|
|
19458
19631
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19459
|
-
var templateObject_1$
|
|
19632
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19460
19633
|
|
|
19461
19634
|
var Total = function (_a) {
|
|
19462
19635
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19463
19636
|
var theme = useTheme();
|
|
19464
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19637
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$2, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19465
19638
|
};
|
|
19466
19639
|
|
|
19467
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19640
|
+
var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19468
19641
|
var color = _a.color;
|
|
19469
19642
|
return color;
|
|
19470
19643
|
});
|
|
19471
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19644
|
+
var ItemContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19472
19645
|
var Item = newStyled.h4(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19473
19646
|
var theme = _a.theme;
|
|
19474
19647
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19489,15 +19662,15 @@ var Subtotal = function (_a) {
|
|
|
19489
19662
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19490
19663
|
})] }), void 0));
|
|
19491
19664
|
};
|
|
19492
|
-
var templateObject_1$
|
|
19665
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
19493
19666
|
|
|
19494
19667
|
var Totals = {
|
|
19495
19668
|
Total: Total,
|
|
19496
19669
|
Subtotal: Subtotal,
|
|
19497
19670
|
};
|
|
19498
19671
|
|
|
19499
|
-
var Container$
|
|
19500
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19672
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19673
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19501
19674
|
var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19502
19675
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19503
19676
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
@@ -19537,7 +19710,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19537
19710
|
}
|
|
19538
19711
|
return '30px';
|
|
19539
19712
|
};
|
|
19540
|
-
return (jsxs$1(Container$
|
|
19713
|
+
return (jsxs$1(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19541
19714
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19542
19715
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19543
19716
|
? activeCheckpointColor
|
|
@@ -19548,10 +19721,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19548
19721
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19549
19722
|
})] }), void 0));
|
|
19550
19723
|
};
|
|
19551
|
-
var templateObject_1$
|
|
19724
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19552
19725
|
|
|
19553
|
-
var Container
|
|
19554
|
-
var CheckpointContainer = newStyled.div(templateObject_2
|
|
19726
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19727
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19555
19728
|
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19556
19729
|
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19557
19730
|
var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
@@ -19579,7 +19752,7 @@ var TrackingProgress = function (_a) {
|
|
|
19579
19752
|
}
|
|
19580
19753
|
return '30px';
|
|
19581
19754
|
};
|
|
19582
|
-
return (jsxs$1(Container
|
|
19755
|
+
return (jsxs$1(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19583
19756
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19584
19757
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19585
19758
|
? theme.colors.semantic.informative.color
|
|
@@ -19588,70 +19761,7 @@ var TrackingProgress = function (_a) {
|
|
|
19588
19761
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19589
19762
|
})] }), void 0));
|
|
19590
19763
|
};
|
|
19591
|
-
var templateObject_1
|
|
19592
|
-
|
|
19593
|
-
var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
19594
|
-
var textPosition = _a.textPosition;
|
|
19595
|
-
return textPosition;
|
|
19596
|
-
}, function (_a) {
|
|
19597
|
-
var backgroundColor = _a.backgroundColor;
|
|
19598
|
-
return backgroundColor;
|
|
19599
|
-
}, function (_a) {
|
|
19600
|
-
var borderRadius = _a.borderRadius;
|
|
19601
|
-
return borderRadius || 'unset';
|
|
19602
|
-
}, function (_a) {
|
|
19603
|
-
var borderRadius = _a.borderRadius;
|
|
19604
|
-
return borderRadius || '8px';
|
|
19605
|
-
});
|
|
19606
|
-
var templateObject_1$1;
|
|
19607
|
-
|
|
19608
|
-
var getDefaultCountdown = function () {
|
|
19609
|
-
var tomorrowDate = new Date();
|
|
19610
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19611
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19612
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19613
|
-
return Number(totalSeconds.toFixed(0));
|
|
19614
|
-
};
|
|
19615
|
-
|
|
19616
|
-
var HurryUp = function (_a) {
|
|
19617
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
19618
|
-
var theme = useTheme();
|
|
19619
|
-
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19620
|
-
};
|
|
19621
|
-
|
|
19622
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19623
|
-
var size = _a.size;
|
|
19624
|
-
return (size ? size : '100%');
|
|
19625
|
-
}, function (_a) {
|
|
19626
|
-
var size = _a.size;
|
|
19627
|
-
return (size ? size : '100%');
|
|
19628
|
-
});
|
|
19629
|
-
var borderSize = {
|
|
19630
|
-
xsmall: '1px',
|
|
19631
|
-
small: '1.5px',
|
|
19632
|
-
medium: '2px',
|
|
19633
|
-
large: '3px',
|
|
19634
|
-
};
|
|
19635
|
-
var DEFAULT_COLOR = '#5EAD9B';
|
|
19636
|
-
var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
19637
|
-
var size = _a.size;
|
|
19638
|
-
return borderSize[size];
|
|
19639
|
-
}, function (_a) {
|
|
19640
|
-
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19641
|
-
return background;
|
|
19642
|
-
}, function (_a) {
|
|
19643
|
-
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19644
|
-
return color;
|
|
19645
|
-
}, function (_a) {
|
|
19646
|
-
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19647
|
-
return duration;
|
|
19648
|
-
});
|
|
19649
|
-
var templateObject_1, templateObject_2;
|
|
19650
|
-
|
|
19651
|
-
var Spinner = function (_a) {
|
|
19652
|
-
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
19653
|
-
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19654
|
-
};
|
|
19764
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19655
19765
|
|
|
19656
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19766
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19657
19767
|
//# sourceMappingURL=index.esm.js.map
|