@trafilea/afrodita-components 6.8.19 → 6.8.20
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 +1 -2
- package/build/index.d.ts +44 -55
- package/build/index.esm.css +1 -2
- package/build/index.esm.js +569 -679
- package/build/index.esm.js.map +1 -1
- package/build/index.js +568 -679
- 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$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,11 +3150,11 @@ var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
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$1b, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1W;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1V, templateObject_2$1g;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -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$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4105
|
+
hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
|
|
4106
|
+
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4107
4107
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4108
4108
|
display2: newStyled.h2(templateObject_5$u || (templateObject_5$u = __makeTemplateObject([""], [""]))),
|
|
4109
4109
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4237,17 +4237,17 @@ var DEFAULTS = {
|
|
|
4237
4237
|
size: 'regular',
|
|
4238
4238
|
},
|
|
4239
4239
|
};
|
|
4240
|
-
var templateObject_1$
|
|
4240
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$e, templateObject_9$7, templateObject_10$6, 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$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4243
|
+
var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4244
|
+
var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4245
4245
|
var Label$5 = 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$t || (templateObject_5$t = __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$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
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$1a, __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$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$t, templateObject_6$o;
|
|
4273
4273
|
|
|
4274
|
-
var Container$
|
|
4275
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4274
|
+
var Container$19 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4275
|
+
var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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$19, { 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$1S, templateObject_2$1d;
|
|
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$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4286
|
+
var Title$8 = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4287
|
+
var Description$3 = newStyled.p(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
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$18, { 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$1R, templateObject_2$1c, templateObject_3$W;
|
|
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$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
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$1Q;
|
|
4393
4393
|
|
|
4394
|
-
var Container$
|
|
4394
|
+
var Container$17 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
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$17, { 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$1P;
|
|
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$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4581
|
+
var ErrorContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
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$1O, templateObject_2$1b;
|
|
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$1N || (templateObject_1$1N = __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$1N;
|
|
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$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
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$1M;
|
|
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$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
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$1a || (templateObject_2$1a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
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$16, { 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$4, __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$1L, templateObject_2$1a;
|
|
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$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4917
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
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$15 : 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$1K, templateObject_2$19;
|
|
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$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5015
|
+
var Container$14 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5016
|
+
var Input$4 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
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$4)(templateObject_3$
|
|
5024
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$V || (templateObject_3$V = __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$14, __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$1J, templateObject_2$18, templateObject_3$V;
|
|
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$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
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$1K || (templateObject_1$1K = __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$17 || (templateObject_2$17 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
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$18 || (templateObject_2$18
|
|
|
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$U || (templateObject_3$U = __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$n || (templateObject_6$n = __makeTem
|
|
|
5144
5144
|
});
|
|
5145
5145
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5146
5146
|
var CloseToolTip = newStyled.button(templateObject_8$d || (templateObject_8$d = __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$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d;
|
|
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$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5290
5290
|
var backgroundColor = _a.backgroundColor;
|
|
5291
5291
|
return backgroundColor;
|
|
5292
5292
|
}, function (_a) {
|
|
@@ -5308,7 +5308,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
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$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) {
|
|
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$17 || (templateObject_2$17 = __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$13, __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$1H, templateObject_2$16;
|
|
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$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5360
5360
|
var backgroundColor = _a.backgroundColor;
|
|
5361
5361
|
return backgroundColor;
|
|
5362
5362
|
}, function (_a) {
|
|
@@ -5378,7 +5378,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
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$15 || (templateObject_2$15 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
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$16 || (templateObject_2$16 = __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$12, __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$1G, templateObject_2$15;
|
|
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$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5441
|
+
var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
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$15 || (templateObject_2$15 = __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$T || (templateObject_3$T = __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$11, __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$1F, templateObject_2$14, templateObject_3$T;
|
|
5499
5499
|
|
|
5500
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5500
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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$11, __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$1E;
|
|
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$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5574
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5575
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
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$11, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$11, { 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$1D, templateObject_2$13, templateObject_3$S;
|
|
5647
5647
|
|
|
5648
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5649
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5648
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5649
|
+
var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
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$13 || (templateObject_2$13 =
|
|
|
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$R || (templateObject_3$R = __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$10 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5686
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, 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$10, __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$1B || (templateObject_1$1B = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
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$1B;
|
|
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$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
5762
|
+
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5763
|
+
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
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$q || (templateObject_5$q = __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$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5767
|
-
var templateObject_1$
|
|
5767
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$q, templateObject_6$l;
|
|
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$$ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5786
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5787
|
+
var ImageCard = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
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$1z, templateObject_2$10, templateObject_3$P, 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$$, __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$1y || (templateObject_1$1y = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
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$1y;
|
|
5888
5888
|
|
|
5889
|
-
var Body = newStyled.div(templateObject_1$
|
|
5889
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
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$1x;
|
|
5895
5895
|
|
|
5896
|
-
var Container$
|
|
5896
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
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$10 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = _
|
|
|
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$1w;
|
|
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$1v || (templateObject_1$1v = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5921
|
+
var StyledContainer = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5922
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
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$1v, templateObject_2$$, templateObject_3$O, 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$Z = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
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$Z, { 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$1u, templateObject_2$_, templateObject_3$N, 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$Y = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
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$Z || (templateObject_2$Z = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
5956
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
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$Y, __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$1t, templateObject_2$Z, templateObject_3$M;
|
|
5969
5969
|
|
|
5970
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5970
|
+
var Text$6 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1s;
|
|
5977
5977
|
|
|
5978
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5978
|
+
var P$3 = newStyled.p(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1r;
|
|
5985
5985
|
|
|
5986
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
5986
|
+
var Text$5 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1q;
|
|
5993
5993
|
|
|
5994
|
-
var Container$
|
|
5994
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
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$X, __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$1p;
|
|
6001
6001
|
|
|
6002
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6002
|
+
var Text$4 = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
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$1o;
|
|
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$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6028
|
+
var MobileContainer = newStyled(Container$W)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6029
|
+
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
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$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6032
6032
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6035,9 +6035,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (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$W, { 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$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$p, templateObject_6$k, templateObject_7$e, templateObject_8$b;
|
|
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$V = newStyled('div')(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6049
|
+
var Content$2 = newStyled('div')(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6050
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
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$V, __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$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6063
6063
|
|
|
6064
|
-
var Container$
|
|
6065
|
-
var templateObject_1$
|
|
6064
|
+
var Container$U = 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"])));
|
|
6065
|
+
var templateObject_1$1l;
|
|
6066
6066
|
|
|
6067
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6067
|
+
var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
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$U, { 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$1k;
|
|
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$T = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6125
|
+
var templateObject_1$1j;
|
|
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$1i || (templateObject_1$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
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$T, __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$1i;
|
|
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$1h || (templateObject_1$1h = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6171
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6172
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
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$o || (templateObject_5$o = __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$11, __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$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
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$1g || (templateObject_1$1g = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6238
|
+
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"])));
|
|
6239
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
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$5 = newStyled.div(templateObject_5$n || (templateObject_5$n = __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$5 = newStyled.div(templateObject_6$j || (templateObject_6$j = __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$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __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$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$n, templateObject_6$j, templateObject_7$d;
|
|
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$1f || (templateObject_1$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6344
|
+
var Container$R = newStyled.a(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6345
|
+
var ProdCardContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
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$4 = 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) {
|
|
6373
6373
|
var style = _a.style;
|
|
6374
6374
|
return style.width;
|
|
6375
6375
|
});
|
|
6376
|
-
var BottomTagContainer$
|
|
6376
|
+
var BottomTagContainer$4 = 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) {
|
|
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$R, __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$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __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$R, __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$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6432
6432
|
|
|
6433
|
-
var Container$
|
|
6433
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6434
6434
|
function withProductGrid(ProductItemComponent, data) {
|
|
6435
6435
|
function WithProductGrid(props) {
|
|
6436
|
-
return (jsx$1(Container$
|
|
6436
|
+
return (jsx$1(Container$Q, __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$1e;
|
|
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$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6491
|
+
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6492
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
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$l || (templateObject_5$l = __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$3 = 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$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$l;
|
|
6513
6513
|
|
|
6514
|
-
var Container$
|
|
6514
|
+
var Container$P = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
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$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
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$P, __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$1c, templateObject_2$S;
|
|
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$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6588
|
+
var Col$1 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6589
|
+
var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
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$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$h;
|
|
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$1a || (templateObject_1$1a = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
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$1c || (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$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6652
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
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$O = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6720
|
+
var IconContainer$4 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6721
|
+
var Text$3 = newStyled.p(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
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$O, __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$19, templateObject_2$P, templateObject_3$E, templateObject_4$t;
|
|
6729
6729
|
|
|
6730
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6730
|
+
var Title$2 = newStyled.h1(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
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$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
6735
|
+
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
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$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$j, templateObject_6$g, templateObject_7$b, templateObject_8$a;
|
|
6774
6774
|
|
|
6775
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6775
|
+
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
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$N || (templateObject_2$N = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
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$17, templateObject_2$N;
|
|
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$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6837
|
+
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6838
|
+
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
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$i || (templateObject_5$i = __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$f || (templateObject_6$f = __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$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$i, templateObject_6$f;
|
|
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$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6856
|
+
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6857
|
+
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __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$h || (templateObject_5$h = __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$e || (templateObject_6$e = __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$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$e;
|
|
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$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6885
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6886
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
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$14, templateObject_2$K, templateObject_3$A, 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$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6930
|
+
var H3 = newStyled.h3(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6931
|
+
var ArrowContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6932
|
+
var Container$N = 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$N, __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$13, templateObject_2$J, templateObject_3$z, 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$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6942
|
+
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6943
|
+
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
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$g || (templateObject_5$g = __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$d || (templateObject_6$d = __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$a || (templateObject_7$a =
|
|
|
6948
6948
|
var ClearAll = newStyled.span(templateObject_8$9 || (templateObject_8$9 = __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$5 || (templateObject_9$5 = __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$4 || (templateObject_10$4 = __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$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$g, templateObject_6$d, templateObject_7$a, templateObject_8$9, templateObject_9$5, templateObject_10$4;
|
|
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$11 || (templateObject_1$11 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7017
|
+
var LI = newStyled.li(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7018
|
+
var CloseIconContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
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$11, templateObject_2$H, templateObject_3$x;
|
|
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$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7163
|
+
var Container$M = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
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$M, __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$M, __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$10, templateObject_2$G;
|
|
7182
7182
|
|
|
7183
|
-
var Container$
|
|
7184
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7183
|
+
var Container$L = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7184
|
+
var P$2 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
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$L, __assign$1({ theme: theme }, { children: [jsx(Container$L, { 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$$, templateObject_2$F;
|
|
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$_ || (templateObject_1$_ = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
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$_;
|
|
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$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
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$Z;
|
|
11525
11525
|
|
|
11526
|
-
var horizontalStyles = css(templateObject_1$
|
|
11527
|
-
var verticalStyles = css(templateObject_2$
|
|
11528
|
-
var Container$
|
|
11526
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11527
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11528
|
+
var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
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$K, __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$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8;
|
|
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$X || (templateObject_1$X = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13151
|
+
var ProgressFiller = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13152
|
+
var templateObject_1$X, templateObject_2$D;
|
|
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$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13160
|
+
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13161
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
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$e || (templateObject_5$e = __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$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$e;
|
|
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$J, { 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$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
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$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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$3 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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$I, __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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { 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$V, templateObject_2$B, templateObject_3$u, templateObject_4$k;
|
|
13225
13225
|
|
|
13226
|
-
var Container$
|
|
13226
|
+
var Container$H = newStyled.div(templateObject_1$U || (templateObject_1$U = __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$H, { 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$U;
|
|
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$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __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$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __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$G, __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$T;
|
|
13290
13290
|
|
|
13291
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13291
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$S || (templateObject_1$S = __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$S;
|
|
13301
13301
|
|
|
13302
|
-
var Container$
|
|
13302
|
+
var Container$F = 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$F, __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$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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$A || (templateObject_2$A = __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$t || (templateObject_3$t = __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$u || (templateObject_3$u = __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$E, __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$R, templateObject_2$A, templateObject_3$t;
|
|
13368
13368
|
|
|
13369
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13369
|
+
var Label$2 = newStyled.span(templateObject_1$Q || (templateObject_1$Q = __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$z || (templateObject_2$z = __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$2, __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$Q, templateObject_2$z;
|
|
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$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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$y || (templateObject_2$y = __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$s || (templateObject_3$s = __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$d || (templateObject_5
|
|
|
13466
13466
|
return theme.component.input.lineHeight;
|
|
13467
13467
|
});
|
|
13468
13468
|
var ClearInput = newStyled.div(templateObject_6$b || (templateObject_6$b = __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$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$d, templateObject_6$b;
|
|
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$D, __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$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __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$x || (templateObject_2$x = __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$C, __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$O, templateObject_2$x;
|
|
13535
13535
|
|
|
13536
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13536
|
+
var SuccessContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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$w || (templateObject_2$w = __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$r || (templateObject_3$r = __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$N, templateObject_2$w, templateObject_3$r;
|
|
13547
13547
|
|
|
13548
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13548
|
+
var ButtonContainer = newStyled.div(templateObject_1$M || (templateObject_1$M = __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$M;
|
|
13566
13566
|
|
|
13567
|
-
var Container$
|
|
13568
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13567
|
+
var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __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$v || (templateObject_2$v = __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$B, { 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$L, templateObject_2$v;
|
|
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$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __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$C = newStyled.div(templateObject_1$M || (templateObject_1$M = __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$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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$2 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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$c || (templateObject_5$c = __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$1 = {
|
|
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$1(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$A, __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$1, { 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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __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$1(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$2(ref, dragThreshold) {
|
|
|
13685
13685
|
};
|
|
13686
13686
|
}, [preventTouch, ref, touchStart]);
|
|
13687
13687
|
}
|
|
13688
|
-
var templateObject_1$
|
|
13688
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c;
|
|
13689
13689
|
|
|
13690
|
-
var Container$
|
|
13690
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __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$z, __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$J;
|
|
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$I || (templateObject_1$I = __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$I;
|
|
13968
13968
|
|
|
13969
|
-
var Container$
|
|
13969
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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$y, __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$H;
|
|
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$G || (templateObject_1$G = __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$t || (templateObject_2$t = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13982
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$p || (templateObject_3$p = __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$G, templateObject_2$t, templateObject_3$p;
|
|
13995
13995
|
|
|
13996
|
-
var Container$
|
|
13996
|
+
var Container$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __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$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'); });
|
|
14002
|
+
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"])));
|
|
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$x, __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$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { 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$F, templateObject_2$s, templateObject_3$o;
|
|
14009
14009
|
|
|
14010
|
-
var Container$
|
|
14010
|
+
var Container$w = 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"])));
|
|
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$w, __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$E;
|
|
14035
14035
|
|
|
14036
|
-
var Container$
|
|
14036
|
+
var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __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$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14042
14042
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14043
14043
|
});
|
|
14044
14044
|
// max-height: 31.875rem;
|
|
14045
|
-
var TopTagContainer
|
|
14046
|
-
var BottomTagContainer
|
|
14045
|
+
var TopTagContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __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 = newStyled.div(templateObject_3$n || (templateObject_3$n = __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$b || (templateObject_5$b = __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$a || (templateObject_6$a = __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$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14051
14051
|
var NavButtonContainer = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14052
14052
|
var Button$1 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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 = {
|
|
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
|
|
14067
|
+
usePreventVerticalScroll(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$v, __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
|
|
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) {
|
|
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
|
|
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 () {
|
|
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
|
|
14110
|
+
function usePreventVerticalScroll(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$1(ref, dragThreshold) {
|
|
|
14142
14142
|
};
|
|
14143
14143
|
}, [preventTouch, ref, touchStart]);
|
|
14144
14144
|
}
|
|
14145
|
-
var templateObject_1$
|
|
14145
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$4;
|
|
14146
14146
|
|
|
14147
|
-
var Container$
|
|
14147
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __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$u, __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$C;
|
|
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$B || (templateObject_1$B = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$q || (templateObject_2$q = __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$m || (templateObject_3$m = __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$t = newStyled.div(templateObject_5$a || (templateObject_5$a = __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$9 || (templateObject_6$9 = __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$t, __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,220 +14330,9 @@ var useModal = function (id) {
|
|
|
14330
14330
|
close: close,
|
|
14331
14331
|
}); }, [close, open, opened]);
|
|
14332
14332
|
};
|
|
14333
|
-
var templateObject_1$
|
|
14333
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9;
|
|
14334
14334
|
|
|
14335
|
-
var
|
|
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$u = 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$u, __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$t = 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$t, __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$s = 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$s, __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) {
|
|
14335
|
+
var Bar$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
14547
14336
|
var height = _a.height;
|
|
14548
14337
|
return height || '0.5rem';
|
|
14549
14338
|
}, function (_a) {
|
|
@@ -14582,7 +14371,7 @@ var BarContainer = newStyled.div({
|
|
|
14582
14371
|
padding: '0 16px',
|
|
14583
14372
|
position: 'relative',
|
|
14584
14373
|
});
|
|
14585
|
-
var Container$
|
|
14374
|
+
var Container$s = newStyled.div(function (_a) {
|
|
14586
14375
|
var backgroundColor = _a.backgroundColor;
|
|
14587
14376
|
return ({
|
|
14588
14377
|
width: '475px',
|
|
@@ -14613,21 +14402,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14613
14402
|
var theme = useTheme();
|
|
14614
14403
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14615
14404
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14616
|
-
return (jsxs$1(Container$
|
|
14405
|
+
return (jsxs$1(Container$s, __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));
|
|
14617
14406
|
};
|
|
14618
|
-
var templateObject_1$
|
|
14407
|
+
var templateObject_1$A;
|
|
14619
14408
|
|
|
14620
|
-
var Container$
|
|
14409
|
+
var Container$r = newStyled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
14621
14410
|
var theme = _a.theme;
|
|
14622
14411
|
return theme.component.orderBar.backgroundColor;
|
|
14623
14412
|
});
|
|
14624
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14413
|
+
var H1 = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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; });
|
|
14625
14414
|
var OrderBar = function (_a) {
|
|
14626
14415
|
var message = _a.message, color = _a.color;
|
|
14627
14416
|
var theme = useTheme();
|
|
14628
|
-
return (jsxs$1(Container$
|
|
14417
|
+
return (jsxs$1(Container$r, __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));
|
|
14629
14418
|
};
|
|
14630
|
-
var templateObject_1$
|
|
14419
|
+
var templateObject_1$z, templateObject_2$p;
|
|
14631
14420
|
|
|
14632
14421
|
var htmlReactParser = {exports: {}};
|
|
14633
14422
|
|
|
@@ -18408,8 +18197,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18408
18197
|
HTMLReactParser$1.attributesToProps;
|
|
18409
18198
|
HTMLReactParser$1.Element;
|
|
18410
18199
|
|
|
18411
|
-
var Container$
|
|
18412
|
-
var Card = newStyled.div(templateObject_2$
|
|
18200
|
+
var Container$q = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
18201
|
+
var Card = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
18413
18202
|
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"])));
|
|
18414
18203
|
var Label$1 = 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"])));
|
|
18415
18204
|
var Check = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
@@ -18418,7 +18207,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$7 || (templateObject_7$7 =
|
|
|
18418
18207
|
var DiscountContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __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"])));
|
|
18419
18208
|
var PackSelector = function (_a) {
|
|
18420
18209
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18421
|
-
return (jsx$1(Container$
|
|
18210
|
+
return (jsx$1(Container$q, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18422
18211
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18423
18212
|
}) }), void 0));
|
|
18424
18213
|
};
|
|
@@ -18445,10 +18234,10 @@ var PackCard = function (_a) {
|
|
|
18445
18234
|
currency: currencyCode || 'USD',
|
|
18446
18235
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18447
18236
|
};
|
|
18448
|
-
var templateObject_1$
|
|
18237
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$7, templateObject_8$6;
|
|
18449
18238
|
|
|
18450
|
-
var Container$
|
|
18451
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18239
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
18240
|
+
var IconContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
18452
18241
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18453
18242
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18454
18243
|
}));
|
|
@@ -18469,7 +18258,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18469
18258
|
var background = _a.background;
|
|
18470
18259
|
return background || 'unset';
|
|
18471
18260
|
});
|
|
18472
|
-
var templateObject_1$
|
|
18261
|
+
var templateObject_1$x, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18473
18262
|
|
|
18474
18263
|
var Pagination = function (_a) {
|
|
18475
18264
|
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;
|
|
@@ -18515,7 +18304,7 @@ var Pagination = function (_a) {
|
|
|
18515
18304
|
}
|
|
18516
18305
|
return pages;
|
|
18517
18306
|
}, [from, page, showReducedPages, to]);
|
|
18518
|
-
return (jsxs$1(Container$
|
|
18307
|
+
return (jsxs$1(Container$p, __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));
|
|
18519
18308
|
};
|
|
18520
18309
|
|
|
18521
18310
|
var PaginatorBlog = function (_a) {
|
|
@@ -18529,12 +18318,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18529
18318
|
setPage(page);
|
|
18530
18319
|
onChange(page);
|
|
18531
18320
|
};
|
|
18532
|
-
return (jsxs$1(Container$
|
|
18321
|
+
return (jsxs$1(Container$p, __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
|
|
18533
18322
|
? theme.colors.shades['white'].color
|
|
18534
18323
|
: 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));
|
|
18535
18324
|
};
|
|
18536
18325
|
|
|
18537
|
-
var Container$
|
|
18326
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
18538
18327
|
var width = _a.width;
|
|
18539
18328
|
return width;
|
|
18540
18329
|
}, function (_a) {
|
|
@@ -18550,13 +18339,13 @@ var Container$n = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
18550
18339
|
var PaymentMethod = function (_a) {
|
|
18551
18340
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18552
18341
|
var theme = useTheme();
|
|
18553
|
-
return (jsx$1(Container$
|
|
18342
|
+
return (jsx$1(Container$o, __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));
|
|
18554
18343
|
};
|
|
18555
|
-
var templateObject_1$
|
|
18344
|
+
var templateObject_1$w;
|
|
18556
18345
|
|
|
18557
|
-
var Container$
|
|
18346
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
18558
18347
|
var IMAGE_WIDTH = '63px';
|
|
18559
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18348
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __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);
|
|
18560
18349
|
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({
|
|
18561
18350
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18562
18351
|
}), IMAGE_WIDTH);
|
|
@@ -18594,9 +18383,9 @@ var StyledSpan = newStyled.span(templateObject_6$7 || (templateObject_6$7 = __ma
|
|
|
18594
18383
|
var SimpleOrderItem = function (_a) {
|
|
18595
18384
|
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;
|
|
18596
18385
|
var theme = useTheme();
|
|
18597
|
-
return (jsxs$1(Container$
|
|
18386
|
+
return (jsxs$1(Container$n, __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));
|
|
18598
18387
|
};
|
|
18599
|
-
var templateObject_1$
|
|
18388
|
+
var templateObject_1$v, templateObject_2$m, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
18600
18389
|
|
|
18601
18390
|
var P$1 = newStyled.p(function (_a) {
|
|
18602
18391
|
var color = _a.color;
|
|
@@ -18610,7 +18399,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18610
18399
|
margin: '0.938rem 4.188rem',
|
|
18611
18400
|
});
|
|
18612
18401
|
});
|
|
18613
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18402
|
+
var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
18614
18403
|
var height = _a.height;
|
|
18615
18404
|
return height || '0.5rem';
|
|
18616
18405
|
}, function (_a) {
|
|
@@ -18639,7 +18428,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18639
18428
|
position: 'absolute',
|
|
18640
18429
|
});
|
|
18641
18430
|
});
|
|
18642
|
-
var Container$
|
|
18431
|
+
var Container$m = newStyled.div(function (_a) {
|
|
18643
18432
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18644
18433
|
return ({
|
|
18645
18434
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18653,12 +18442,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18653
18442
|
var ProgressBar = function (_a) {
|
|
18654
18443
|
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;
|
|
18655
18444
|
var theme = useTheme();
|
|
18656
|
-
return (jsxs$1(Container$
|
|
18445
|
+
return (jsxs$1(Container$m, __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));
|
|
18657
18446
|
};
|
|
18658
|
-
var templateObject_1$
|
|
18447
|
+
var templateObject_1$u;
|
|
18659
18448
|
|
|
18660
|
-
var Container$
|
|
18661
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18449
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __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; });
|
|
18450
|
+
var Item$1 = newStyled.span(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
18662
18451
|
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"])));
|
|
18663
18452
|
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)'; });
|
|
18664
18453
|
var QuantityPicker = function (_a) {
|
|
@@ -18683,9 +18472,9 @@ var QuantityPicker = function (_a) {
|
|
|
18683
18472
|
return clamp(value);
|
|
18684
18473
|
});
|
|
18685
18474
|
}, [value, clamp]);
|
|
18686
|
-
return (jsxs$1(Container$
|
|
18475
|
+
return (jsxs$1(Container$l, __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));
|
|
18687
18476
|
};
|
|
18688
|
-
var templateObject_1$
|
|
18477
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
18689
18478
|
|
|
18690
18479
|
/* base styles & size variants */
|
|
18691
18480
|
var CustomRadioStyles$1 = {
|
|
@@ -18754,9 +18543,9 @@ var ContainerStyles$1 = {
|
|
|
18754
18543
|
},
|
|
18755
18544
|
};
|
|
18756
18545
|
|
|
18757
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18758
|
-
var Container$
|
|
18759
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18546
|
+
var Wrapper$3 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18547
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18548
|
+
var Input$2 = newStyled.input(templateObject_2$k || (templateObject_2$k = __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) {
|
|
18760
18549
|
var disabled = _a.disabled;
|
|
18761
18550
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18762
18551
|
});
|
|
@@ -18772,9 +18561,9 @@ var RadioPrimary = function (_a) {
|
|
|
18772
18561
|
var value = event.currentTarget.value;
|
|
18773
18562
|
onChange({ value: value, label: label });
|
|
18774
18563
|
};
|
|
18775
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18564
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$k, __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));
|
|
18776
18565
|
};
|
|
18777
|
-
var templateObject_1$
|
|
18566
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18778
18567
|
|
|
18779
18568
|
var RadioGroupInput = function (_a) {
|
|
18780
18569
|
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;
|
|
@@ -18853,9 +18642,9 @@ var ContainerStyles = {
|
|
|
18853
18642
|
},
|
|
18854
18643
|
};
|
|
18855
18644
|
|
|
18856
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18857
|
-
var Container$
|
|
18858
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18645
|
+
var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
18646
|
+
var Container$j = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18647
|
+
var Input$1 = 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) {
|
|
18859
18648
|
var disabled = _a.disabled;
|
|
18860
18649
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18861
18650
|
});
|
|
@@ -18877,9 +18666,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18877
18666
|
var value = event.currentTarget.value;
|
|
18878
18667
|
onChange({ value: value, label: label });
|
|
18879
18668
|
};
|
|
18880
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18669
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$j, __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));
|
|
18881
18670
|
};
|
|
18882
|
-
var templateObject_1$
|
|
18671
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g;
|
|
18883
18672
|
|
|
18884
18673
|
var ClubRadioGroupInput = function (_a) {
|
|
18885
18674
|
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;
|
|
@@ -18907,8 +18696,8 @@ function formatDate(date, format) {
|
|
|
18907
18696
|
}
|
|
18908
18697
|
}
|
|
18909
18698
|
|
|
18910
|
-
var Container$
|
|
18911
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18699
|
+
var Container$i = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
18700
|
+
var Content$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
18912
18701
|
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"])));
|
|
18913
18702
|
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"])));
|
|
18914
18703
|
var DateText$1 = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
@@ -18945,15 +18734,15 @@ var Review$1 = function (_a) {
|
|
|
18945
18734
|
}
|
|
18946
18735
|
}
|
|
18947
18736
|
}, [opened]);
|
|
18948
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18737
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$i, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18949
18738
|
(!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));
|
|
18950
18739
|
};
|
|
18951
|
-
var templateObject_1$
|
|
18740
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$3, 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;
|
|
18952
18741
|
|
|
18953
18742
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18954
18743
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18955
|
-
var Container$
|
|
18956
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18744
|
+
var Container$h = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
18745
|
+
var Heading = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
18957
18746
|
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"])));
|
|
18958
18747
|
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"])));
|
|
18959
18748
|
var DateText = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
@@ -18994,7 +18783,7 @@ var Review = function (_a) {
|
|
|
18994
18783
|
});
|
|
18995
18784
|
};
|
|
18996
18785
|
}, [randomId]);
|
|
18997
|
-
return (jsxs$1(Container$
|
|
18786
|
+
return (jsxs$1(Container$h, { 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: {
|
|
18998
18787
|
__html: showMoreMobile
|
|
18999
18788
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19000
18789
|
: description,
|
|
@@ -19004,10 +18793,10 @@ var Review = function (_a) {
|
|
|
19004
18793
|
: description,
|
|
19005
18794
|
} }, 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));
|
|
19006
18795
|
};
|
|
19007
|
-
var templateObject_1$
|
|
18796
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19008
18797
|
|
|
19009
|
-
var Container$
|
|
19010
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18798
|
+
var Container$g = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
18799
|
+
var ReviewsContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
19011
18800
|
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"])));
|
|
19012
18801
|
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"])));
|
|
19013
18802
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
@@ -19020,19 +18809,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19020
18809
|
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;
|
|
19021
18810
|
var starsNumber = 5;
|
|
19022
18811
|
var theme = useTheme();
|
|
19023
|
-
return (jsxs$1(Container$
|
|
18812
|
+
return (jsxs$1(Container$g, { 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));
|
|
19024
18813
|
};
|
|
19025
|
-
var templateObject_1$
|
|
18814
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$4;
|
|
19026
18815
|
|
|
19027
|
-
var Container$
|
|
19028
|
-
var Text = newStyled.p(templateObject_2$
|
|
18816
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
18817
|
+
var Text = newStyled.p(templateObject_2$f || (templateObject_2$f = __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; });
|
|
19029
18818
|
var ScrollToTop = function (_a) {
|
|
19030
18819
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19031
18820
|
var theme = useTheme();
|
|
19032
18821
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19033
|
-
return (jsxs$1(Container$
|
|
18822
|
+
return (jsxs$1(Container$f, __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));
|
|
19034
18823
|
};
|
|
19035
|
-
var templateObject_1$
|
|
18824
|
+
var templateObject_1$n, templateObject_2$f;
|
|
19036
18825
|
|
|
19037
18826
|
var Input = newStyled.input(function (props) { return ({
|
|
19038
18827
|
padding: props.theme.component.input.padding,
|
|
@@ -19063,7 +18852,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19063
18852
|
},
|
|
19064
18853
|
}); });
|
|
19065
18854
|
|
|
19066
|
-
var Container$
|
|
18855
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __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({
|
|
19067
18856
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19068
18857
|
}));
|
|
19069
18858
|
var Description = newStyled.div({
|
|
@@ -19080,25 +18869,25 @@ var Description = newStyled.div({
|
|
|
19080
18869
|
var ProductItem = function (_a) {
|
|
19081
18870
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19082
18871
|
var theme = useTheme();
|
|
19083
|
-
return (jsxs$1(Container$
|
|
18872
|
+
return (jsxs$1(Container$e, __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));
|
|
19084
18873
|
};
|
|
19085
|
-
var templateObject_1$
|
|
18874
|
+
var templateObject_1$m;
|
|
19086
18875
|
|
|
19087
|
-
var Container$
|
|
18876
|
+
var Container$d = newStyled.div({
|
|
19088
18877
|
display: 'flex',
|
|
19089
18878
|
justifyContent: 'center',
|
|
19090
18879
|
padding: '1rem',
|
|
19091
18880
|
});
|
|
19092
18881
|
var Footer = function (_a) {
|
|
19093
18882
|
var text = _a.text, onClick = _a.onClick;
|
|
19094
|
-
return (jsx$1(Container$
|
|
18883
|
+
return (jsx$1(Container$d, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19095
18884
|
};
|
|
19096
18885
|
|
|
19097
18886
|
var Ul = newStyled.ul({
|
|
19098
18887
|
margin: '0px',
|
|
19099
18888
|
padding: '0px',
|
|
19100
18889
|
});
|
|
19101
|
-
var Li = newStyled.li(templateObject_1$
|
|
18890
|
+
var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __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({
|
|
19102
18891
|
padding: [0, '0rem 1rem'],
|
|
19103
18892
|
borderRadius: [0, '0.5rem'],
|
|
19104
18893
|
}));
|
|
@@ -19110,7 +18899,7 @@ var Anchor = newStyled.a({
|
|
|
19110
18899
|
padding: 0,
|
|
19111
18900
|
textDecoration: 'none',
|
|
19112
18901
|
});
|
|
19113
|
-
var Container$
|
|
18902
|
+
var Container$c = newStyled.div(templateObject_2$e || (templateObject_2$e = __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({
|
|
19114
18903
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19115
18904
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19116
18905
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19121,11 +18910,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
19121
18910
|
var ResultsPanel = function (_a) {
|
|
19122
18911
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19123
18912
|
var theme = useTheme();
|
|
19124
|
-
return (jsxs$1(Container$
|
|
18913
|
+
return (jsxs$1(Container$c, __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));
|
|
19125
18914
|
};
|
|
19126
|
-
var templateObject_1$
|
|
18915
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
19127
18916
|
|
|
19128
|
-
var Button = newStyled.button(templateObject_1$
|
|
18917
|
+
var Button = newStyled.button(templateObject_1$k || (templateObject_1$k = __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({
|
|
19129
18918
|
right: ['1rem', '7.75rem'],
|
|
19130
18919
|
top: ['0.75rem', '0.75rem'],
|
|
19131
18920
|
}));
|
|
@@ -19134,7 +18923,7 @@ var ClearButton = function (_a) {
|
|
|
19134
18923
|
var theme = useTheme();
|
|
19135
18924
|
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));
|
|
19136
18925
|
};
|
|
19137
|
-
var templateObject_1$
|
|
18926
|
+
var templateObject_1$k;
|
|
19138
18927
|
|
|
19139
18928
|
var SearchIconContainer = newStyled.div({
|
|
19140
18929
|
display: 'flex',
|
|
@@ -19144,7 +18933,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19144
18933
|
background: 'white',
|
|
19145
18934
|
alignSelf: 'center',
|
|
19146
18935
|
});
|
|
19147
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
18936
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19148
18937
|
var SearchControl = function (_a) {
|
|
19149
18938
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19150
18939
|
var theme = useTheme();
|
|
@@ -19160,7 +18949,7 @@ var SearchControl = function (_a) {
|
|
|
19160
18949
|
}
|
|
19161
18950
|
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));
|
|
19162
18951
|
};
|
|
19163
|
-
var templateObject_1$
|
|
18952
|
+
var templateObject_1$j;
|
|
19164
18953
|
|
|
19165
18954
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19166
18955
|
var reducer = function (state, action) {
|
|
@@ -19176,7 +18965,7 @@ var reducer = function (state, action) {
|
|
|
19176
18965
|
}
|
|
19177
18966
|
}
|
|
19178
18967
|
};
|
|
19179
|
-
var Container$
|
|
18968
|
+
var Container$b = newStyled.div({
|
|
19180
18969
|
position: 'relative',
|
|
19181
18970
|
display: 'flex',
|
|
19182
18971
|
});
|
|
@@ -19216,7 +19005,7 @@ var SearchBar = function (_a) {
|
|
|
19216
19005
|
if (e.cancelable) {
|
|
19217
19006
|
e.preventDefault();
|
|
19218
19007
|
}
|
|
19219
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19008
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$b, __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) {
|
|
19220
19009
|
if (e.key === 'Enter') {
|
|
19221
19010
|
if (e.cancelable) {
|
|
19222
19011
|
e.preventDefault();
|
|
@@ -19227,20 +19016,20 @@ var SearchBar = function (_a) {
|
|
|
19227
19016
|
} }, 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));
|
|
19228
19017
|
};
|
|
19229
19018
|
|
|
19230
|
-
var Container$
|
|
19231
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19019
|
+
var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
19020
|
+
var BackArrow = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19232
19021
|
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"])));
|
|
19233
19022
|
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"])));
|
|
19234
19023
|
var SearchNavigationParents = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
19235
19024
|
var SearchNavigation = function (_a) {
|
|
19236
19025
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19237
|
-
return (jsxs$1(Container$
|
|
19026
|
+
return (jsxs$1(Container$a, { 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) {
|
|
19238
19027
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19239
19028
|
}) }, void 0)] }, void 0));
|
|
19240
19029
|
};
|
|
19241
|
-
var templateObject_1$
|
|
19030
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
19242
19031
|
|
|
19243
|
-
var Container$
|
|
19032
|
+
var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
19244
19033
|
var alignCenter = _a.alignCenter;
|
|
19245
19034
|
return alignCenter &&
|
|
19246
19035
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19250,26 +19039,26 @@ var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __ma
|
|
|
19250
19039
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19251
19040
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19252
19041
|
});
|
|
19253
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19042
|
+
var TitleText = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
19254
19043
|
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"])));
|
|
19255
19044
|
var ShortBanner = function (_a) {
|
|
19256
19045
|
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;
|
|
19257
19046
|
var theme = useTheme();
|
|
19258
|
-
return (jsxs$1(Container$
|
|
19047
|
+
return (jsxs$1(Container$9, __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));
|
|
19259
19048
|
};
|
|
19260
|
-
var templateObject_1$
|
|
19049
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a;
|
|
19261
19050
|
|
|
19262
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19263
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19051
|
+
var TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: relative;\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 position: relative;\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; });
|
|
19052
|
+
var TableCell$1 = newStyled.td(templateObject_2$b || (templateObject_2$b = __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; });
|
|
19264
19053
|
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; });
|
|
19265
19054
|
var Label = newStyled('div')(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19266
19055
|
var TopLabel = newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19267
19056
|
var LeftLabel = newStyled(Label)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19268
|
-
var Container$
|
|
19057
|
+
var Container$8 = newStyled('div')(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19269
19058
|
var LabelText = newStyled('span')(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19270
19059
|
var Column = newStyled('div')(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19271
19060
|
var TableRow$1 = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __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; });
|
|
19272
|
-
var templateObject_1$
|
|
19061
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$1, templateObject_10$1;
|
|
19273
19062
|
|
|
19274
19063
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19275
19064
|
var getCellColor = function (index, cell) {
|
|
@@ -19305,13 +19094,13 @@ var SizeChartTable = function (_a) {
|
|
|
19305
19094
|
var theme = useTheme();
|
|
19306
19095
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19307
19096
|
var isMultilabel = xLabel && yLabel;
|
|
19308
|
-
return (jsxs$1(Container$
|
|
19097
|
+
return (jsxs$1(Container$8, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ style: {
|
|
19309
19098
|
backgroundColor: getCellColor(index, cell),
|
|
19310
19099
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: getIsOdd(index) ? '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)] }, void 0)] }, void 0));
|
|
19311
19100
|
};
|
|
19312
19101
|
|
|
19313
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19314
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19102
|
+
var TableElement = newStyled.table(templateObject_1$f || (templateObject_1$f = __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; });
|
|
19103
|
+
var TableCell = newStyled.td(templateObject_2$a || (templateObject_2$a = __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; });
|
|
19315
19104
|
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; });
|
|
19316
19105
|
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; });
|
|
19317
19106
|
var SizeTable = function (_a) {
|
|
@@ -19319,7 +19108,7 @@ var SizeTable = function (_a) {
|
|
|
19319
19108
|
var theme = useTheme();
|
|
19320
19109
|
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));
|
|
19321
19110
|
};
|
|
19322
|
-
var templateObject_1$
|
|
19111
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
19323
19112
|
|
|
19324
19113
|
var getStylesBySize$4 = function (size) {
|
|
19325
19114
|
switch (size) {
|
|
@@ -19346,7 +19135,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19346
19135
|
} });
|
|
19347
19136
|
};
|
|
19348
19137
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19349
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19138
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$e || (templateObject_1$e = __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));
|
|
19350
19139
|
};
|
|
19351
19140
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19352
19141
|
if (disabled)
|
|
@@ -19362,23 +19151,23 @@ var TextButton = function (_a) {
|
|
|
19362
19151
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19363
19152
|
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));
|
|
19364
19153
|
};
|
|
19365
|
-
var templateObject_1$
|
|
19154
|
+
var templateObject_1$e;
|
|
19366
19155
|
|
|
19367
|
-
var Container$
|
|
19368
|
-
var P = newStyled.p(templateObject_2$
|
|
19156
|
+
var Container$7 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
19157
|
+
var P = newStyled.p(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19369
19158
|
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"])));
|
|
19370
19159
|
var SizeFitGuide = function (_a) {
|
|
19371
19160
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19372
|
-
return (jsxs$1(Container$
|
|
19161
|
+
return (jsxs$1(Container$7, { 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));
|
|
19373
19162
|
};
|
|
19374
|
-
var templateObject_1$
|
|
19163
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7;
|
|
19375
19164
|
|
|
19376
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19165
|
+
var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
19377
19166
|
var inline = _a.inline;
|
|
19378
19167
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19379
19168
|
});
|
|
19380
|
-
var Row = newStyled.div(templateObject_2$
|
|
19381
|
-
var templateObject_1$
|
|
19169
|
+
var Row = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
19170
|
+
var templateObject_1$c, templateObject_2$8;
|
|
19382
19171
|
|
|
19383
19172
|
var SizeSelector = function (_a) {
|
|
19384
19173
|
var _b;
|
|
@@ -19397,7 +19186,7 @@ var SizeSelector = function (_a) {
|
|
|
19397
19186
|
}) }), void 0)] }), void 0));
|
|
19398
19187
|
};
|
|
19399
19188
|
|
|
19400
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19189
|
+
var TabContainer = newStyled.div(templateObject_1$b || (templateObject_1$b = __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) {
|
|
19401
19190
|
var titleSize = _a.titleSize;
|
|
19402
19191
|
return titleSize;
|
|
19403
19192
|
}, function (_a) {
|
|
@@ -19414,10 +19203,10 @@ var Tab = function (_a) {
|
|
|
19414
19203
|
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;
|
|
19415
19204
|
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));
|
|
19416
19205
|
};
|
|
19417
|
-
var templateObject_1$
|
|
19206
|
+
var templateObject_1$b;
|
|
19418
19207
|
|
|
19419
|
-
var Container$
|
|
19420
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19208
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19209
|
+
var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
19421
19210
|
var backgroundColor = _a.backgroundColor;
|
|
19422
19211
|
return backgroundColor;
|
|
19423
19212
|
}, function (_a) {
|
|
@@ -19434,16 +19223,16 @@ var Tabs = function (_a) {
|
|
|
19434
19223
|
return null;
|
|
19435
19224
|
}
|
|
19436
19225
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19437
|
-
return (jsxs$1(Container$
|
|
19226
|
+
return (jsxs$1(Container$6, __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));
|
|
19438
19227
|
};
|
|
19439
|
-
var templateObject_1$
|
|
19228
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
19440
19229
|
|
|
19441
|
-
var Container$
|
|
19230
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
19442
19231
|
var Tag = function (_a) {
|
|
19443
19232
|
var text = _a.text, className = _a.className;
|
|
19444
|
-
return jsx$1(Container$
|
|
19233
|
+
return jsx$1(Container$5, __assign$1({ className: className }, { children: text }), void 0);
|
|
19445
19234
|
};
|
|
19446
|
-
var templateObject_1$
|
|
19235
|
+
var templateObject_1$9;
|
|
19447
19236
|
|
|
19448
19237
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19449
19238
|
switch (size) {
|
|
@@ -19554,8 +19343,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19554
19343
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19555
19344
|
};
|
|
19556
19345
|
|
|
19557
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19558
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19346
|
+
var ImageWrapper = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
19347
|
+
var VideoOverlay = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
19559
19348
|
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"])));
|
|
19560
19349
|
var ImageVideo = function (_a) {
|
|
19561
19350
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19576,11 +19365,11 @@ var ImageVideo = function (_a) {
|
|
|
19576
19365
|
height: '100%',
|
|
19577
19366
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19578
19367
|
};
|
|
19579
|
-
var templateObject_1$
|
|
19368
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5;
|
|
19580
19369
|
|
|
19581
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19582
|
-
var ContainerMobile = css(templateObject_2$
|
|
19583
|
-
var Container$
|
|
19370
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
19371
|
+
var ContainerMobile = css(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
19372
|
+
var Container$4 = 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);
|
|
19584
19373
|
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"])));
|
|
19585
19374
|
var TextWithImage = function (_a) {
|
|
19586
19375
|
var _b, _c, _d, _e;
|
|
@@ -19601,7 +19390,7 @@ var TextWithImage = function (_a) {
|
|
|
19601
19390
|
// @ts-ignore
|
|
19602
19391
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19603
19392
|
};
|
|
19604
|
-
return (jsxs(Container$
|
|
19393
|
+
return (jsxs(Container$4, __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: {
|
|
19605
19394
|
backgroundColor: props.btnBGColor,
|
|
19606
19395
|
color: '#ffffff',
|
|
19607
19396
|
border: props.btnBGColor,
|
|
@@ -19611,10 +19400,48 @@ var TextWithImage = function (_a) {
|
|
|
19611
19400
|
},
|
|
19612
19401
|
} }, 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));
|
|
19613
19402
|
};
|
|
19614
|
-
var templateObject_1$
|
|
19403
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19404
|
+
|
|
19405
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19406
|
+
var timerColor = _a.timerColor;
|
|
19407
|
+
return timerColor || '';
|
|
19408
|
+
});
|
|
19409
|
+
var timeToSeconds = function (_a) {
|
|
19410
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19411
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
19412
|
+
};
|
|
19413
|
+
var secondsToTime = function (secs) {
|
|
19414
|
+
var hours = Math.floor(secs / 3600);
|
|
19415
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19416
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19417
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19418
|
+
};
|
|
19419
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19420
|
+
var Timer = function (_a) {
|
|
19421
|
+
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"]);
|
|
19422
|
+
var _f = useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19423
|
+
useEffect(function () {
|
|
19424
|
+
var timer = setInterval(function () {
|
|
19425
|
+
setSecs(function (seconds) {
|
|
19426
|
+
if (seconds === 1) {
|
|
19427
|
+
clearInterval(timer);
|
|
19428
|
+
onTimeUp();
|
|
19429
|
+
return 0;
|
|
19430
|
+
}
|
|
19431
|
+
return seconds - 1;
|
|
19432
|
+
});
|
|
19433
|
+
}, 1000);
|
|
19434
|
+
if (secs <= 0)
|
|
19435
|
+
clearInterval(timer);
|
|
19436
|
+
return function () { return clearInterval(timer); };
|
|
19437
|
+
}, [onTimeUp, secs]);
|
|
19438
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19439
|
+
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));
|
|
19440
|
+
};
|
|
19441
|
+
var templateObject_1$6;
|
|
19615
19442
|
|
|
19616
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19617
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19443
|
+
var Wrapper$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
19444
|
+
var GrandTotal = newStyled.h1(templateObject_2$4 || (templateObject_2$4 = __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; });
|
|
19618
19445
|
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) {
|
|
19619
19446
|
var theme = _a.theme;
|
|
19620
19447
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19628,11 +19455,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19628
19455
|
var theme = _a.theme;
|
|
19629
19456
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19630
19457
|
});
|
|
19631
|
-
var Container$
|
|
19458
|
+
var Container$3 = 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) {
|
|
19632
19459
|
var highlightColor = _a.highlightColor;
|
|
19633
19460
|
return highlightColor;
|
|
19634
19461
|
});
|
|
19635
|
-
var TotalContainer = newStyled(Container$
|
|
19462
|
+
var TotalContainer = newStyled(Container$3)(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) {
|
|
19636
19463
|
var showTotalLabel = _a.showTotalLabel;
|
|
19637
19464
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19638
19465
|
});
|
|
@@ -19642,19 +19469,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19642
19469
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19643
19470
|
});
|
|
19644
19471
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19645
|
-
var templateObject_1$
|
|
19472
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19646
19473
|
|
|
19647
19474
|
var Total = function (_a) {
|
|
19648
19475
|
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;
|
|
19649
19476
|
var theme = useTheme();
|
|
19650
|
-
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$
|
|
19477
|
+
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$3, __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));
|
|
19651
19478
|
};
|
|
19652
19479
|
|
|
19653
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19480
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19654
19481
|
var color = _a.color;
|
|
19655
19482
|
return color;
|
|
19656
19483
|
});
|
|
19657
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19484
|
+
var ItemContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
19658
19485
|
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) {
|
|
19659
19486
|
var theme = _a.theme;
|
|
19660
19487
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19675,15 +19502,15 @@ var Subtotal = function (_a) {
|
|
|
19675
19502
|
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));
|
|
19676
19503
|
})] }), void 0));
|
|
19677
19504
|
};
|
|
19678
|
-
var templateObject_1$
|
|
19505
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
19679
19506
|
|
|
19680
19507
|
var Totals = {
|
|
19681
19508
|
Total: Total,
|
|
19682
19509
|
Subtotal: Subtotal,
|
|
19683
19510
|
};
|
|
19684
19511
|
|
|
19685
|
-
var Container$
|
|
19686
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19512
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19513
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19687
19514
|
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; });
|
|
19688
19515
|
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'); });
|
|
19689
19516
|
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"])));
|
|
@@ -19723,7 +19550,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19723
19550
|
}
|
|
19724
19551
|
return '30px';
|
|
19725
19552
|
};
|
|
19726
|
-
return (jsxs$1(Container$
|
|
19553
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19727
19554
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19728
19555
|
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
|
|
19729
19556
|
? activeCheckpointColor
|
|
@@ -19734,10 +19561,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19734
19561
|
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));
|
|
19735
19562
|
})] }), void 0));
|
|
19736
19563
|
};
|
|
19737
|
-
var templateObject_1$
|
|
19564
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19738
19565
|
|
|
19739
|
-
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"])));
|
|
19740
|
-
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19566
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19567
|
+
var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19741
19568
|
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; });
|
|
19742
19569
|
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'); });
|
|
19743
19570
|
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'); });
|
|
@@ -19765,7 +19592,7 @@ var TrackingProgress = function (_a) {
|
|
|
19765
19592
|
}
|
|
19766
19593
|
return '30px';
|
|
19767
19594
|
};
|
|
19768
|
-
return (jsxs$1(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19595
|
+
return (jsxs$1(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19769
19596
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19770
19597
|
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
|
|
19771
19598
|
? theme.colors.semantic.informative.color
|
|
@@ -19774,7 +19601,70 @@ var TrackingProgress = function (_a) {
|
|
|
19774
19601
|
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));
|
|
19775
19602
|
})] }), void 0));
|
|
19776
19603
|
};
|
|
19777
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19604
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19605
|
+
|
|
19606
|
+
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) {
|
|
19607
|
+
var textPosition = _a.textPosition;
|
|
19608
|
+
return textPosition;
|
|
19609
|
+
}, function (_a) {
|
|
19610
|
+
var backgroundColor = _a.backgroundColor;
|
|
19611
|
+
return backgroundColor;
|
|
19612
|
+
}, function (_a) {
|
|
19613
|
+
var borderRadius = _a.borderRadius;
|
|
19614
|
+
return borderRadius || 'unset';
|
|
19615
|
+
}, function (_a) {
|
|
19616
|
+
var borderRadius = _a.borderRadius;
|
|
19617
|
+
return borderRadius || '8px';
|
|
19618
|
+
});
|
|
19619
|
+
var templateObject_1$1;
|
|
19620
|
+
|
|
19621
|
+
var getDefaultCountdown = function () {
|
|
19622
|
+
var tomorrowDate = new Date();
|
|
19623
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19624
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19625
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19626
|
+
return Number(totalSeconds.toFixed(0));
|
|
19627
|
+
};
|
|
19628
|
+
|
|
19629
|
+
var HurryUp = function (_a) {
|
|
19630
|
+
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"]);
|
|
19631
|
+
var theme = useTheme();
|
|
19632
|
+
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));
|
|
19633
|
+
};
|
|
19634
|
+
|
|
19635
|
+
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) {
|
|
19636
|
+
var size = _a.size;
|
|
19637
|
+
return (size ? size : '100%');
|
|
19638
|
+
}, function (_a) {
|
|
19639
|
+
var size = _a.size;
|
|
19640
|
+
return (size ? size : '100%');
|
|
19641
|
+
});
|
|
19642
|
+
var borderSize = {
|
|
19643
|
+
xsmall: '1px',
|
|
19644
|
+
small: '1.5px',
|
|
19645
|
+
medium: '2px',
|
|
19646
|
+
large: '3px',
|
|
19647
|
+
};
|
|
19648
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
19649
|
+
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) {
|
|
19650
|
+
var size = _a.size;
|
|
19651
|
+
return borderSize[size];
|
|
19652
|
+
}, function (_a) {
|
|
19653
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19654
|
+
return background;
|
|
19655
|
+
}, function (_a) {
|
|
19656
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19657
|
+
return color;
|
|
19658
|
+
}, function (_a) {
|
|
19659
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19660
|
+
return duration;
|
|
19661
|
+
});
|
|
19662
|
+
var templateObject_1, templateObject_2;
|
|
19663
|
+
|
|
19664
|
+
var Spinner = function (_a) {
|
|
19665
|
+
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;
|
|
19666
|
+
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));
|
|
19667
|
+
};
|
|
19778
19668
|
|
|
19779
|
-
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,
|
|
19669
|
+
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 };
|
|
19780
19670
|
//# sourceMappingURL=index.esm.js.map
|