@trafilea/afrodita-components 6.3.0 → 6.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +24 -7
- package/build/index.esm.js +292 -295
- package/build/index.esm.js.map +1 -1
- package/build/index.js +292 -295
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +5 -1
- package/build/theme/revel.theme.js +8 -4
- package/build/theme/shapermint.theme.d.ts +5 -1
- package/build/theme/shapermint.theme.js +8 -4
- package/build/theme/thespadr.theme.d.ts +5 -1
- package/build/theme/thespadr.theme.js +13 -6
- package/build/theme/truekind.theme.d.ts +5 -1
- package/build/theme/truekind.theme.js +8 -4
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3107,6 +3107,20 @@ var formatPrice = function (value, _a) {
|
|
|
3107
3107
|
}).format(valueToFormat);
|
|
3108
3108
|
};
|
|
3109
3109
|
|
|
3110
|
+
var Viewports = {
|
|
3111
|
+
mobile: 'mobile',
|
|
3112
|
+
tablet: 'tablet',
|
|
3113
|
+
desktop: 'desktop',
|
|
3114
|
+
desktopLarge: 'desktopLarge',
|
|
3115
|
+
};
|
|
3116
|
+
|
|
3117
|
+
//ANNOTATION: Those values are up to.
|
|
3118
|
+
var DEFAULT_BREAKPOINTS = {
|
|
3119
|
+
mobile: 640,
|
|
3120
|
+
tablet: 1024,
|
|
3121
|
+
desktop: 1280,
|
|
3122
|
+
};
|
|
3123
|
+
|
|
3110
3124
|
var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __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) {
|
|
3111
3125
|
var height = _a.height;
|
|
3112
3126
|
return (height ? height : '1.5em');
|
|
@@ -3152,7 +3166,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N
|
|
|
3152
3166
|
var opacity = _a.opacity;
|
|
3153
3167
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3154
3168
|
});
|
|
3155
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3169
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
3156
3170
|
var width = _a.width;
|
|
3157
3171
|
return width;
|
|
3158
3172
|
}, function (_a) {
|
|
@@ -3165,7 +3179,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3165
3179
|
var opacity = _a.opacity;
|
|
3166
3180
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3167
3181
|
});
|
|
3168
|
-
var templateObject_1$1N, templateObject_2$
|
|
3182
|
+
var templateObject_1$1N, templateObject_2$1b;
|
|
3169
3183
|
|
|
3170
3184
|
/* eslint-disable no-undef */
|
|
3171
3185
|
var cache = new Map();
|
|
@@ -4041,13 +4055,13 @@ function jsxs(type, props, key) {
|
|
|
4041
4055
|
// `variants` styles that are consistent through all themes.
|
|
4042
4056
|
var TAGS = {
|
|
4043
4057
|
hero1: newStyled.h1(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""]))),
|
|
4044
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4058
|
+
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4045
4059
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4046
4060
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4047
4061
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4048
4062
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4049
4063
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4050
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4064
|
+
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4051
4065
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4052
4066
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4053
4067
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4176,10 +4190,10 @@ var DEFAULTS = {
|
|
|
4176
4190
|
size: 'regular',
|
|
4177
4191
|
},
|
|
4178
4192
|
};
|
|
4179
|
-
var templateObject_1$1M, templateObject_2$
|
|
4193
|
+
var templateObject_1$1M, templateObject_2$1a, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4180
4194
|
|
|
4181
4195
|
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
4182
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4196
|
+
var Card$3 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
4183
4197
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
4184
4198
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
4185
4199
|
var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
@@ -4208,27 +4222,27 @@ var PackCard$1 = function (_a) {
|
|
|
4208
4222
|
currency: currencyCode || 'USD',
|
|
4209
4223
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4210
4224
|
};
|
|
4211
|
-
var templateObject_1$1L, templateObject_2$
|
|
4225
|
+
var templateObject_1$1L, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4212
4226
|
|
|
4213
4227
|
var Container$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4214
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4228
|
+
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4215
4229
|
var DropList = function (_a) {
|
|
4216
4230
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4217
4231
|
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4218
4232
|
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));
|
|
4219
4233
|
}) }, void 0));
|
|
4220
4234
|
};
|
|
4221
|
-
var templateObject_1$1K, templateObject_2$
|
|
4235
|
+
var templateObject_1$1K, templateObject_2$18;
|
|
4222
4236
|
|
|
4223
4237
|
var DROPS_TOTAL = 5;
|
|
4224
4238
|
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4225
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4239
|
+
var Title$8 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
4226
4240
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __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"])));
|
|
4227
4241
|
var AbsorbencyLevel = function (_a) {
|
|
4228
4242
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4229
4243
|
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4230
4244
|
};
|
|
4231
|
-
var templateObject_1$1J, templateObject_2$
|
|
4245
|
+
var templateObject_1$1J, templateObject_2$17, templateObject_3$S;
|
|
4232
4246
|
|
|
4233
4247
|
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(`
|
|
4234
4248
|
`),"","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(`
|
|
@@ -4517,13 +4531,13 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4517
4531
|
});
|
|
4518
4532
|
|
|
4519
4533
|
var ErrorText = newStyled.h3(templateObject_1$1G || (templateObject_1$1G = __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; });
|
|
4520
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4534
|
+
var ErrorContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
4521
4535
|
var Error$1 = function (_a) {
|
|
4522
4536
|
var error = _a.error;
|
|
4523
4537
|
var theme = useTheme();
|
|
4524
4538
|
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));
|
|
4525
4539
|
};
|
|
4526
|
-
var templateObject_1$1G, templateObject_2$
|
|
4540
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4527
4541
|
|
|
4528
4542
|
var BaseSelectButton = function (_a) {
|
|
4529
4543
|
var children = _a.children, as = _a.as;
|
|
@@ -4785,7 +4799,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4785
4799
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4786
4800
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4787
4801
|
]; });
|
|
4788
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4802
|
+
var Input$5 = newStyled.input(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
4789
4803
|
var disabled = _a.disabled;
|
|
4790
4804
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4791
4805
|
});
|
|
@@ -4801,7 +4815,7 @@ var Checkbox = function (_a) {
|
|
|
4801
4815
|
};
|
|
4802
4816
|
return (jsxs$1(Container$12, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4803
4817
|
};
|
|
4804
|
-
var templateObject_1$1E, templateObject_2$
|
|
4818
|
+
var templateObject_1$1E, templateObject_2$15;
|
|
4805
4819
|
|
|
4806
4820
|
var CustomOption = newStyled.li(function (_a) {
|
|
4807
4821
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4851,7 +4865,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4851
4865
|
});
|
|
4852
4866
|
|
|
4853
4867
|
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4854
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4868
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
4855
4869
|
function SimpleDropdown(_a) {
|
|
4856
4870
|
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;
|
|
4857
4871
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4884,7 +4898,7 @@ function SimpleDropdown(_a) {
|
|
|
4884
4898
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4885
4899
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ 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));
|
|
4886
4900
|
}
|
|
4887
|
-
var templateObject_1$1D, templateObject_2$
|
|
4901
|
+
var templateObject_1$1D, templateObject_2$14;
|
|
4888
4902
|
|
|
4889
4903
|
/* base styles & size variants */
|
|
4890
4904
|
var CustomRadioStyles$2 = {
|
|
@@ -4951,7 +4965,7 @@ var ContainerStyles$2 = {
|
|
|
4951
4965
|
|
|
4952
4966
|
var Wrapper$7 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4953
4967
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4954
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4968
|
+
var Input$4 = newStyled.input(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
4955
4969
|
var disabled = _a.disabled;
|
|
4956
4970
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4957
4971
|
});
|
|
@@ -4975,12 +4989,7 @@ var RadioInput = function (_a) {
|
|
|
4975
4989
|
};
|
|
4976
4990
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
4977
4991
|
};
|
|
4978
|
-
var templateObject_1$1C, templateObject_2$
|
|
4979
|
-
|
|
4980
|
-
var TooltipArrow = function (_a) {
|
|
4981
|
-
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
4982
|
-
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));
|
|
4983
|
-
};
|
|
4992
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R;
|
|
4984
4993
|
|
|
4985
4994
|
var getWrapperFlexDirection = function (position) {
|
|
4986
4995
|
switch (position) {
|
|
@@ -5006,40 +5015,16 @@ var getContainerFlexDirection = function (position) {
|
|
|
5006
5015
|
return 'row-reverse';
|
|
5007
5016
|
}
|
|
5008
5017
|
};
|
|
5009
|
-
var
|
|
5010
|
-
switch (position) {
|
|
5011
|
-
case ComponentPosition.Top:
|
|
5012
|
-
return '0deg';
|
|
5013
|
-
case ComponentPosition.Bottom:
|
|
5014
|
-
return '180deg';
|
|
5015
|
-
case ComponentPosition.Left:
|
|
5016
|
-
return '270deg';
|
|
5017
|
-
case ComponentPosition.Right:
|
|
5018
|
-
return '90deg';
|
|
5019
|
-
}
|
|
5020
|
-
};
|
|
5021
|
-
var getArrowContainerPadding = function (position) {
|
|
5018
|
+
var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
5022
5019
|
switch (position) {
|
|
5023
5020
|
case ComponentPosition.Top:
|
|
5024
|
-
return '
|
|
5021
|
+
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n top: 100%;\n left: 50%;\n margin-left: -10px;\n }\n \n \n &::before {\n border-top: 10px solid ".concat(borderColor, ";\n margin-top: 0px;\n }\n &::after {\n border-top: 10px solid ").concat(backgroundColor, ";\n margin-top: -1px;\n z-index: 999;\n }");
|
|
5025
5022
|
case ComponentPosition.Bottom:
|
|
5026
|
-
return '0
|
|
5023
|
+
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 0%;\n left: 50%;\n margin-left: -10px;\n margin-top: -9px;\n border: 10px solid transparent;\n border-top: 0;\n }\n \n &::before {\n border-bottom: 10px solid ".concat(borderColor, ";\n margin-top: -10px;\n }\n &::after {\n border-bottom: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
5027
5024
|
case ComponentPosition.Left:
|
|
5028
|
-
return '
|
|
5025
|
+
return "\n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 50%;\n left: 100%;\n margin-top: -10px;\n border: 10px solid transparent;\n border-right: 0;s\n border-left: 10px solid transparent;\n margin-left: -1px;\n }\n \n &::before {\n border-left: 10px solid ".concat(borderColor, ";\n \n }\n &::after {\n border-left: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
5029
5026
|
case ComponentPosition.Right:
|
|
5030
|
-
return '
|
|
5031
|
-
}
|
|
5032
|
-
};
|
|
5033
|
-
var getArrowContainerMargin = function (position) {
|
|
5034
|
-
switch (position) {
|
|
5035
|
-
case ComponentPosition.Top:
|
|
5036
|
-
return '-1px 0 0 0';
|
|
5037
|
-
case ComponentPosition.Bottom:
|
|
5038
|
-
return '0 0 -1px 0';
|
|
5039
|
-
case ComponentPosition.Left:
|
|
5040
|
-
return '0';
|
|
5041
|
-
case ComponentPosition.Right:
|
|
5042
|
-
return '0';
|
|
5027
|
+
return " \n &::before,&::after\n {\n content: '';\n position: absolute;\n top: 50%;\n left: -10px;\n margin-top: -10px;\n border: 10px solid transparent;\n border-right: 10px solid transparent;\n margin-left: -9px;\n }\n \n &::before {\n border-right: 10px solid ".concat(borderColor, " ;\n margin-left: -10px;\n \n }\n &::after {\n border-right: 10px solid ").concat(backgroundColor, ";\n z-index: 999;\n }");
|
|
5043
5028
|
}
|
|
5044
5029
|
};
|
|
5045
5030
|
var getTooltipAlignItems = function (position, align) {
|
|
@@ -5055,48 +5040,51 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5055
5040
|
}
|
|
5056
5041
|
};
|
|
5057
5042
|
|
|
5058
|
-
var Wrapper$6 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility:
|
|
5043
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
5059
5044
|
var position = _a.position;
|
|
5060
5045
|
return getWrapperFlexDirection(position);
|
|
5046
|
+
}, function (_a) {
|
|
5047
|
+
var disableHover = _a.disableHover;
|
|
5048
|
+
return (disableHover ? 'hidden' : 'visible');
|
|
5049
|
+
}, function (_a) {
|
|
5050
|
+
var disableHover = _a.disableHover;
|
|
5051
|
+
return (disableHover ? 0 : 1);
|
|
5061
5052
|
});
|
|
5062
|
-
var TooltipContainer = newStyled.div(function (_a) {
|
|
5063
|
-
var position = _a.position
|
|
5064
|
-
return (
|
|
5065
|
-
|
|
5066
|
-
|
|
5067
|
-
|
|
5068
|
-
|
|
5069
|
-
|
|
5070
|
-
|
|
5071
|
-
|
|
5072
|
-
|
|
5073
|
-
|
|
5074
|
-
|
|
5075
|
-
|
|
5076
|
-
|
|
5077
|
-
|
|
5078
|
-
|
|
5053
|
+
var TooltipContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5054
|
+
var position = _a.position;
|
|
5055
|
+
return getContainerFlexDirection(position);
|
|
5056
|
+
}, function (_a) {
|
|
5057
|
+
var position = _a.position, align = _a.align;
|
|
5058
|
+
return getTooltipAlignItems(position, align);
|
|
5059
|
+
}, function (_a) {
|
|
5060
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5061
|
+
return getTooltipMargin(position, ComponentPosition.Right, "".concat(childrenWidth, "px"));
|
|
5062
|
+
}, function (_a) {
|
|
5063
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5064
|
+
return getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px"));
|
|
5065
|
+
}, function (_a) {
|
|
5066
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5067
|
+
return getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px"));
|
|
5068
|
+
}, function (_a) {
|
|
5069
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5070
|
+
return getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px"));
|
|
5071
|
+
}, function (_a) {
|
|
5072
|
+
var maxWidth = _a.maxWidth;
|
|
5073
|
+
return (maxWidth ? maxWidth : 'none');
|
|
5074
|
+
}, function (_a) {
|
|
5075
|
+
var position = _a.position, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, withArrow = _a.withArrow;
|
|
5076
|
+
return withArrow && getArrowStyles(position, borderColor, backgroundColor);
|
|
5079
5077
|
});
|
|
5080
5078
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5081
5079
|
return actual === expected ? margin : '0';
|
|
5082
5080
|
};
|
|
5083
|
-
var ContentWrapper = newStyled.div(
|
|
5081
|
+
var ContentWrapper = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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) {
|
|
5084
5082
|
var borderColor = _a.borderColor;
|
|
5085
5083
|
return borderColor;
|
|
5086
5084
|
}, function (_a) {
|
|
5087
5085
|
var backgroundColor = _a.backgroundColor;
|
|
5088
5086
|
return backgroundColor;
|
|
5089
5087
|
});
|
|
5090
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
5091
|
-
var position = _a.position;
|
|
5092
|
-
return getArrowRotation(position);
|
|
5093
|
-
}, function (_a) {
|
|
5094
|
-
var position = _a.position;
|
|
5095
|
-
return getArrowContainerPadding(position);
|
|
5096
|
-
}, function (_a) {
|
|
5097
|
-
var position = _a.position;
|
|
5098
|
-
return getArrowContainerMargin(position);
|
|
5099
|
-
});
|
|
5100
5088
|
var TooltipText = newStyled.div(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
|
|
5101
5089
|
var color = _a.color;
|
|
5102
5090
|
return color;
|
|
@@ -5107,15 +5095,91 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5107
5095
|
return color;
|
|
5108
5096
|
});
|
|
5109
5097
|
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"])));
|
|
5110
|
-
var
|
|
5098
|
+
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5099
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5100
|
+
|
|
5101
|
+
var useOnClickOutside = function (ref, handler) {
|
|
5102
|
+
useEffect(function () {
|
|
5103
|
+
var listener = function (event) {
|
|
5104
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
5105
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5106
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5107
|
+
return;
|
|
5108
|
+
}
|
|
5109
|
+
handler(event);
|
|
5110
|
+
};
|
|
5111
|
+
document.addEventListener('mousedown', listener);
|
|
5112
|
+
document.addEventListener('touchstart', listener);
|
|
5113
|
+
return function () {
|
|
5114
|
+
document.removeEventListener('mousedown', listener);
|
|
5115
|
+
document.removeEventListener('touchstart', listener);
|
|
5116
|
+
};
|
|
5117
|
+
}, [ref, handler]);
|
|
5118
|
+
};
|
|
5119
|
+
|
|
5120
|
+
function getWindowDimensions() {
|
|
5121
|
+
if (typeof window === 'undefined')
|
|
5122
|
+
return { width: 0, height: 0 };
|
|
5123
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
5124
|
+
return {
|
|
5125
|
+
width: width,
|
|
5126
|
+
height: height,
|
|
5127
|
+
};
|
|
5128
|
+
}
|
|
5129
|
+
var getViewport = function (breakpoints, width) {
|
|
5130
|
+
if (width <= breakpoints.mobile)
|
|
5131
|
+
return Viewports.mobile;
|
|
5132
|
+
if (width <= breakpoints.tablet)
|
|
5133
|
+
return Viewports.tablet;
|
|
5134
|
+
if (width <= breakpoints.desktop)
|
|
5135
|
+
return Viewports.desktop;
|
|
5136
|
+
return Viewports.desktopLarge;
|
|
5137
|
+
};
|
|
5138
|
+
var useWindowDimensions = function (breakpoints, _a) {
|
|
5139
|
+
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5140
|
+
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5141
|
+
var _c = useState(function () {
|
|
5142
|
+
var dimension = getWindowDimensions();
|
|
5143
|
+
return {
|
|
5144
|
+
windowDimensions: dimension,
|
|
5145
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5146
|
+
};
|
|
5147
|
+
}), state = _c[0], setState = _c[1];
|
|
5148
|
+
useEffect(function () {
|
|
5149
|
+
function handleResize() {
|
|
5150
|
+
var newDimension = getWindowDimensions();
|
|
5151
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5152
|
+
setState(function (oldState) {
|
|
5153
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5154
|
+
return {
|
|
5155
|
+
windowDimensions: newDimension,
|
|
5156
|
+
viewport: newViewport,
|
|
5157
|
+
};
|
|
5158
|
+
}
|
|
5159
|
+
return oldState;
|
|
5160
|
+
});
|
|
5161
|
+
}
|
|
5162
|
+
handleResize();
|
|
5163
|
+
window.addEventListener('resize', handleResize);
|
|
5164
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5165
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5166
|
+
}, [shouldListenChanges]);
|
|
5167
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5168
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5169
|
+
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5170
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5171
|
+
};
|
|
5111
5172
|
|
|
5112
5173
|
var Tooltip = function (_a) {
|
|
5113
|
-
var
|
|
5174
|
+
var _b;
|
|
5175
|
+
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d;
|
|
5114
5176
|
var theme = useTheme();
|
|
5115
|
-
var
|
|
5177
|
+
var _e = useState(0), childrenWidth = _e[0], setChildrenWidth = _e[1];
|
|
5116
5178
|
var childrenRef = createRef();
|
|
5117
|
-
var
|
|
5179
|
+
var _f = useState(0), tooltipHeight = _f[0], setTooltipHeight = _f[1];
|
|
5118
5180
|
var tooltipRef = createRef();
|
|
5181
|
+
var _g = useState(false), closeTooltip = _g[0], setCloseTooltip = _g[1];
|
|
5182
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
5119
5183
|
useLayoutEffect(function () {
|
|
5120
5184
|
var ref = childrenRef.current;
|
|
5121
5185
|
setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
|
|
@@ -5124,12 +5188,12 @@ var Tooltip = function (_a) {
|
|
|
5124
5188
|
var ref = tooltipRef.current;
|
|
5125
5189
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5126
5190
|
}, [tooltipRef]);
|
|
5127
|
-
return (jsxs$1(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
5191
|
+
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip === true && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: 0.5, height: 0.5, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
5128
5192
|
testId: 'HeaderIcon',
|
|
5129
5193
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5130
5194
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5131
5195
|
: theme.colors.pallete.secondary.color,
|
|
5132
|
-
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0)
|
|
5196
|
+
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
5133
5197
|
};
|
|
5134
5198
|
|
|
5135
5199
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5197,7 +5261,7 @@ var Container$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __
|
|
|
5197
5261
|
var size = _a.size;
|
|
5198
5262
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5199
5263
|
});
|
|
5200
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5264
|
+
var H3$3 = newStyled.h3(templateObject_2$11 || (templateObject_2$11 = __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) {
|
|
5201
5265
|
var textColor = _a.textColor;
|
|
5202
5266
|
return textColor;
|
|
5203
5267
|
}, function (_a) {
|
|
@@ -5214,63 +5278,7 @@ var DiscountTag = function (_a) {
|
|
|
5214
5278
|
var theme = useTheme();
|
|
5215
5279
|
return (jsx$1(Container$$, __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$3, __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));
|
|
5216
5280
|
};
|
|
5217
|
-
var templateObject_1$1A, templateObject_2$
|
|
5218
|
-
|
|
5219
|
-
//TODO Move this to types with ThemeBreakpoints
|
|
5220
|
-
var Viewports = {
|
|
5221
|
-
mobile: 'mobile',
|
|
5222
|
-
tablet: 'tablet',
|
|
5223
|
-
desktop: 'desktop',
|
|
5224
|
-
};
|
|
5225
|
-
function getWindowDimensions() {
|
|
5226
|
-
if (typeof window === 'undefined')
|
|
5227
|
-
return { width: 0, height: 0 };
|
|
5228
|
-
var width = window.innerWidth, height = window.innerHeight;
|
|
5229
|
-
return {
|
|
5230
|
-
width: width,
|
|
5231
|
-
height: height,
|
|
5232
|
-
};
|
|
5233
|
-
}
|
|
5234
|
-
var getViewport = function (breakpoints, width) {
|
|
5235
|
-
if (width <= breakpoints.mobile)
|
|
5236
|
-
return Viewports.mobile;
|
|
5237
|
-
if (breakpoints.tablet && width <= breakpoints.tablet) {
|
|
5238
|
-
return Viewports.tablet;
|
|
5239
|
-
}
|
|
5240
|
-
return Viewports.desktop;
|
|
5241
|
-
};
|
|
5242
|
-
var useWindowDimensions = function (breakpoints, shouldListenChanges) {
|
|
5243
|
-
var _a = useState(function () {
|
|
5244
|
-
var dimension = getWindowDimensions();
|
|
5245
|
-
return {
|
|
5246
|
-
windowDimensions: dimension,
|
|
5247
|
-
viewport: getViewport(breakpoints, dimension.width),
|
|
5248
|
-
};
|
|
5249
|
-
}), state = _a[0], setState = _a[1];
|
|
5250
|
-
useEffect(function () {
|
|
5251
|
-
function handleResize() {
|
|
5252
|
-
var newDimension = getWindowDimensions();
|
|
5253
|
-
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5254
|
-
setState(function (oldState) {
|
|
5255
|
-
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5256
|
-
return {
|
|
5257
|
-
windowDimensions: newDimension,
|
|
5258
|
-
viewport: newViewport,
|
|
5259
|
-
};
|
|
5260
|
-
}
|
|
5261
|
-
return oldState;
|
|
5262
|
-
});
|
|
5263
|
-
}
|
|
5264
|
-
handleResize();
|
|
5265
|
-
window.addEventListener('resize', handleResize);
|
|
5266
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5267
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5268
|
-
}, [shouldListenChanges]);
|
|
5269
|
-
var isMobile = state.viewport === Viewports.mobile;
|
|
5270
|
-
var isTablet = state.viewport === Viewports.tablet;
|
|
5271
|
-
var isDesktop = state.viewport === Viewports.desktop;
|
|
5272
|
-
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5273
|
-
};
|
|
5281
|
+
var templateObject_1$1A, templateObject_2$11;
|
|
5274
5282
|
|
|
5275
5283
|
var getStylesBySize$c = function (size, theme) {
|
|
5276
5284
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5313,7 +5321,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5313
5321
|
}
|
|
5314
5322
|
};
|
|
5315
5323
|
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5316
|
-
var Price = newStyled.p(templateObject_2
|
|
5324
|
+
var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __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) {
|
|
5317
5325
|
var weight = _a.weight;
|
|
5318
5326
|
return (weight ? weight : '400');
|
|
5319
5327
|
}, function (_a) {
|
|
@@ -5352,7 +5360,7 @@ function getTestId() {
|
|
|
5352
5360
|
var PriceLabel = function (_a) {
|
|
5353
5361
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _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.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
|
|
5354
5362
|
var theme = useTheme();
|
|
5355
|
-
var isMobile = useWindowDimensions(
|
|
5363
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
5356
5364
|
var priceCommonProps = {
|
|
5357
5365
|
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
5358
5366
|
color: color || theme.colors.pallete.secondary.color,
|
|
@@ -5370,7 +5378,7 @@ var PriceLabel = function (_a) {
|
|
|
5370
5378
|
};
|
|
5371
5379
|
return (jsxs$1(Container$_, __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(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(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));
|
|
5372
5380
|
};
|
|
5373
|
-
var templateObject_1$1z, templateObject_2
|
|
5381
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5374
5382
|
|
|
5375
5383
|
var getStylesBySize$b = function (size) {
|
|
5376
5384
|
switch (size) {
|
|
@@ -5422,7 +5430,7 @@ var Container$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
5422
5430
|
var size = _a.size;
|
|
5423
5431
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5424
5432
|
});
|
|
5425
|
-
var H3$2 = newStyled.h3(templateObject_2
|
|
5433
|
+
var H3$2 = newStyled.h3(templateObject_2$$ || (templateObject_2$$ = __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) {
|
|
5426
5434
|
var textColor = _a.textColor;
|
|
5427
5435
|
return textColor;
|
|
5428
5436
|
}, function (_a) {
|
|
@@ -5439,7 +5447,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5439
5447
|
var theme = useTheme();
|
|
5440
5448
|
return (jsx$1(Container$Z, __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$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5441
5449
|
};
|
|
5442
|
-
var templateObject_1$1y, templateObject_2
|
|
5450
|
+
var templateObject_1$1y, templateObject_2$$;
|
|
5443
5451
|
|
|
5444
5452
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5445
5453
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5510,7 +5518,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5510
5518
|
var templateObject_1$1x;
|
|
5511
5519
|
|
|
5512
5520
|
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5513
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5521
|
+
var ContainerBase = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5514
5522
|
var selected = _a.selected, theme = _a.theme;
|
|
5515
5523
|
return selected
|
|
5516
5524
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5547,7 +5555,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5547
5555
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5548
5556
|
});
|
|
5549
5557
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5550
|
-
var templateObject_1$1w, templateObject_2$
|
|
5558
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5551
5559
|
|
|
5552
5560
|
var radioIds = {
|
|
5553
5561
|
oneTime: {
|
|
@@ -5623,12 +5631,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5623
5631
|
_a$2);
|
|
5624
5632
|
|
|
5625
5633
|
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5626
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5634
|
+
var CustomerInfo = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
5627
5635
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
5628
5636
|
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5629
5637
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5630
5638
|
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"])));
|
|
5631
|
-
var templateObject_1$1u, templateObject_2$
|
|
5639
|
+
var templateObject_1$1u, templateObject_2$Z, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5632
5640
|
|
|
5633
5641
|
var NameWithStars = function (_a) {
|
|
5634
5642
|
var name = _a.name, size = _a.size;
|
|
@@ -5647,7 +5655,7 @@ var ResultFeedback = function (_a) {
|
|
|
5647
5655
|
};
|
|
5648
5656
|
|
|
5649
5657
|
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
5650
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5658
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
5651
5659
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __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; });
|
|
5652
5660
|
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __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) {
|
|
5653
5661
|
var theme = _a.theme;
|
|
@@ -5659,7 +5667,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5659
5667
|
var theme = _a.theme, size = _a.size;
|
|
5660
5668
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5661
5669
|
});
|
|
5662
|
-
var templateObject_1$1t, templateObject_2$
|
|
5670
|
+
var templateObject_1$1t, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5663
5671
|
|
|
5664
5672
|
/* base styles & size variants */
|
|
5665
5673
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5782,13 +5790,13 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5782
5790
|
var templateObject_1$1q;
|
|
5783
5791
|
|
|
5784
5792
|
var StyledWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
5785
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5793
|
+
var StyledContainer = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
5786
5794
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __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) {
|
|
5787
5795
|
var color = _a.color;
|
|
5788
5796
|
return color;
|
|
5789
5797
|
});
|
|
5790
5798
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
5791
|
-
var templateObject_1$1p, templateObject_2$
|
|
5799
|
+
var templateObject_1$1p, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5792
5800
|
|
|
5793
5801
|
var Minimalistic = function (_a) {
|
|
5794
5802
|
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;
|
|
@@ -5797,7 +5805,7 @@ var Minimalistic = function (_a) {
|
|
|
5797
5805
|
};
|
|
5798
5806
|
|
|
5799
5807
|
var Container$V = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5800
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5808
|
+
var Title$6 = newStyled.h1(templateObject_2$W || (templateObject_2$W = __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; });
|
|
5801
5809
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __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; });
|
|
5802
5810
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
5803
5811
|
var Simple = function (_a) {
|
|
@@ -5805,7 +5813,7 @@ var Simple = function (_a) {
|
|
|
5805
5813
|
var theme = useTheme();
|
|
5806
5814
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __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));
|
|
5807
5815
|
};
|
|
5808
|
-
var templateObject_1$1o, templateObject_2$
|
|
5816
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
5809
5817
|
|
|
5810
5818
|
var Bundle = {
|
|
5811
5819
|
Minimalistic: Minimalistic,
|
|
@@ -5816,7 +5824,7 @@ var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __
|
|
|
5816
5824
|
var displayBNPL = _a.displayBNPL;
|
|
5817
5825
|
return (displayBNPL ? 'flex' : 'none');
|
|
5818
5826
|
});
|
|
5819
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5827
|
+
var TextContainer$1 = newStyled.div(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
5820
5828
|
var IconWrapper$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
5821
5829
|
var BuyNowPayLater = function (_a) {
|
|
5822
5830
|
var _b;
|
|
@@ -5829,7 +5837,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5829
5837
|
}
|
|
5830
5838
|
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5831
5839
|
};
|
|
5832
|
-
var templateObject_1$1n, templateObject_2$
|
|
5840
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$J;
|
|
5833
5841
|
|
|
5834
5842
|
var Text$7 = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __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; });
|
|
5835
5843
|
var Title$5 = function (_a) {
|
|
@@ -5889,7 +5897,7 @@ var CartProductItem = {
|
|
|
5889
5897
|
};
|
|
5890
5898
|
|
|
5891
5899
|
var Container$S = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
5892
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5900
|
+
var MobileContainer = newStyled(Container$S)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
5893
5901
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
5894
5902
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
5895
5903
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -5898,10 +5906,10 @@ var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObj
|
|
|
5898
5906
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
5899
5907
|
var ClubPriceLabel = function (_a) {
|
|
5900
5908
|
var clubPrice = _a.clubPrice;
|
|
5901
|
-
var isMobile = useWindowDimensions(
|
|
5909
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
5902
5910
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5903
5911
|
};
|
|
5904
|
-
var templateObject_1$1h, templateObject_2$
|
|
5912
|
+
var templateObject_1$1h, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
5905
5913
|
|
|
5906
5914
|
var Spacing = function (_a) {
|
|
5907
5915
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5910,7 +5918,7 @@ var Spacing = function (_a) {
|
|
|
5910
5918
|
};
|
|
5911
5919
|
|
|
5912
5920
|
var Container$R = newStyled('div')(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
5913
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
5921
|
+
var Content$2 = newStyled('div')(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
5914
5922
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
5915
5923
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __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) {
|
|
5916
5924
|
var index = _a.index;
|
|
@@ -5923,7 +5931,7 @@ var StrengthBars = function (_a) {
|
|
|
5923
5931
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5924
5932
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5925
5933
|
};
|
|
5926
|
-
var templateObject_1$1g, templateObject_2$
|
|
5934
|
+
var templateObject_1$1g, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
5927
5935
|
|
|
5928
5936
|
var Container$Q = 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"])));
|
|
5929
5937
|
var templateObject_1$1f;
|
|
@@ -6038,7 +6046,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6038
6046
|
});
|
|
6039
6047
|
});
|
|
6040
6048
|
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
6041
|
-
var Container$O = newStyled.a(templateObject_2$
|
|
6049
|
+
var Container$O = newStyled.a(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
6042
6050
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
6043
6051
|
var Title$4 = newStyled.p(templateObject_4$v || (templateObject_4$v = __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; });
|
|
6044
6052
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6095,7 +6103,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6095
6103
|
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6096
6104
|
var theme = useTheme();
|
|
6097
6105
|
var styles = getStylesBySize$9(size);
|
|
6098
|
-
var isMobile = useWindowDimensions(
|
|
6106
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6099
6107
|
var space = useMemo(function () {
|
|
6100
6108
|
var _a;
|
|
6101
6109
|
return (_a = {},
|
|
@@ -6126,7 +6134,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6126
6134
|
};
|
|
6127
6135
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __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$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, 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$O, __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) : 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), 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));
|
|
6128
6136
|
};
|
|
6129
|
-
var templateObject_1$1c, templateObject_2$
|
|
6137
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6130
6138
|
|
|
6131
6139
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6132
6140
|
var width = _a.width, height = _a.height;
|
|
@@ -6137,7 +6145,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6137
6145
|
});
|
|
6138
6146
|
});
|
|
6139
6147
|
var ImageHoverContainer = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
6140
|
-
var Container$N = newStyled.a(templateObject_2$
|
|
6148
|
+
var Container$N = newStyled.a(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
6141
6149
|
var ProdCardContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
6142
6150
|
var Title$3 = newStyled.p(templateObject_4$u || (templateObject_4$u = __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; });
|
|
6143
6151
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6194,7 +6202,7 @@ var ProductItemTK = function (_a) {
|
|
|
6194
6202
|
} : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
|
|
6195
6203
|
var theme = useTheme();
|
|
6196
6204
|
var styles = getStylesBySize$8(size);
|
|
6197
|
-
var isMobile = useWindowDimensions(
|
|
6205
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6198
6206
|
var space = useMemo(function () {
|
|
6199
6207
|
var _a;
|
|
6200
6208
|
return (_a = {},
|
|
@@ -6224,7 +6232,7 @@ var ProductItemTK = function (_a) {
|
|
|
6224
6232
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6225
6233
|
} }, { 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));
|
|
6226
6234
|
};
|
|
6227
|
-
var templateObject_1$1b, templateObject_2$
|
|
6235
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6228
6236
|
|
|
6229
6237
|
var Container$M = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
6230
6238
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6284,7 +6292,7 @@ var OutOfStock = function (_a) {
|
|
|
6284
6292
|
};
|
|
6285
6293
|
|
|
6286
6294
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6287
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6295
|
+
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6288
6296
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
6289
6297
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6290
6298
|
var OptionsContainer = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
@@ -6305,7 +6313,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6305
6313
|
Option: Option,
|
|
6306
6314
|
OptionsContainer: OptionsContainer,
|
|
6307
6315
|
});
|
|
6308
|
-
var templateObject_1$19, templateObject_2$
|
|
6316
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6309
6317
|
|
|
6310
6318
|
var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
6311
6319
|
var borderColor = _a.borderColor;
|
|
@@ -6314,14 +6322,14 @@ var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __
|
|
|
6314
6322
|
var noStock = _a.noStock;
|
|
6315
6323
|
return (noStock ? '0.4' : '1');
|
|
6316
6324
|
});
|
|
6317
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6325
|
+
var Image$2 = newStyled.img(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6318
6326
|
var PatternSelector = function (_a) {
|
|
6319
6327
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6320
6328
|
var theme = useTheme();
|
|
6321
6329
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6322
6330
|
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6323
6331
|
};
|
|
6324
|
-
var templateObject_1$18, templateObject_2$
|
|
6332
|
+
var templateObject_1$18, templateObject_2$P;
|
|
6325
6333
|
|
|
6326
6334
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6327
6335
|
if (options == null || options.length === 0) {
|
|
@@ -6380,8 +6388,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6380
6388
|
};
|
|
6381
6389
|
|
|
6382
6390
|
var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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'); });
|
|
6383
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6384
|
-
var Row$
|
|
6391
|
+
var Col$1 = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6392
|
+
var Row$2 = newStyled.div(templateObject_3$D || (templateObject_3$D = __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) {
|
|
6385
6393
|
return props.rightToLeft &&
|
|
6386
6394
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6387
6395
|
});
|
|
@@ -6391,9 +6399,9 @@ var FreeShipping = newStyled.span(templateObject_6$h || (templateObject_6$h = __
|
|
|
6391
6399
|
var CrossSellCheckbox = function (_a) {
|
|
6392
6400
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6393
6401
|
var theme = useTheme();
|
|
6394
|
-
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$
|
|
6402
|
+
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));
|
|
6395
6403
|
};
|
|
6396
|
-
var templateObject_1$17, templateObject_2$
|
|
6404
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6397
6405
|
|
|
6398
6406
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6399
6407
|
__proto__: null,
|
|
@@ -6443,8 +6451,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObj
|
|
|
6443
6451
|
var theme = _a.theme;
|
|
6444
6452
|
return theme.colors.text.disabled;
|
|
6445
6453
|
});
|
|
6446
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6447
|
-
var templateObject_1$16, templateObject_2$
|
|
6454
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6455
|
+
var templateObject_1$16, templateObject_2$N;
|
|
6448
6456
|
|
|
6449
6457
|
var BaseCTA = function (_a) {
|
|
6450
6458
|
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"]);
|
|
@@ -6512,7 +6520,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6512
6520
|
};
|
|
6513
6521
|
|
|
6514
6522
|
var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
6515
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6523
|
+
var IconContainer$4 = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
6516
6524
|
var Text$4 = newStyled.p(templateObject_3$C || (templateObject_3$C = __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; });
|
|
6517
6525
|
var Details = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6518
6526
|
var Note = function (_a) {
|
|
@@ -6520,14 +6528,14 @@ var Note = function (_a) {
|
|
|
6520
6528
|
var theme = useTheme();
|
|
6521
6529
|
return (jsxs$1(Container$K, __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$4, __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));
|
|
6522
6530
|
};
|
|
6523
|
-
var templateObject_1$15, templateObject_2$
|
|
6531
|
+
var templateObject_1$15, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
6524
6532
|
|
|
6525
6533
|
var Title$2 = newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
6526
6534
|
var theme = _a.theme;
|
|
6527
6535
|
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 ");
|
|
6528
6536
|
});
|
|
6529
|
-
var Line = newStyled.div(templateObject_2$
|
|
6530
|
-
var Row = newStyled.div(templateObject_3$B || (templateObject_3$B = __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({
|
|
6537
|
+
var Line = newStyled.div(templateObject_2$L || (templateObject_2$L = __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; });
|
|
6538
|
+
var Row$1 = newStyled.div(templateObject_3$B || (templateObject_3$B = __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({
|
|
6531
6539
|
flexDirection: ['column', 'row'],
|
|
6532
6540
|
}));
|
|
6533
6541
|
var Col = newStyled.div(templateObject_4$q || (templateObject_4$q = __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({
|
|
@@ -6563,9 +6571,9 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __m
|
|
|
6563
6571
|
var DeliveryDetails = function (_a) {
|
|
6564
6572
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6565
6573
|
var theme = useTheme();
|
|
6566
|
-
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, __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));
|
|
6574
|
+
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));
|
|
6567
6575
|
};
|
|
6568
|
-
var templateObject_1$14, templateObject_2$
|
|
6576
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$b, templateObject_8$9;
|
|
6569
6577
|
|
|
6570
6578
|
var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
6571
6579
|
var top = _a.top;
|
|
@@ -6574,7 +6582,7 @@ var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __mak
|
|
|
6574
6582
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6575
6583
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6576
6584
|
});
|
|
6577
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6585
|
+
var Sidebar = newStyled.div(templateObject_2$K || (templateObject_2$K = __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) {
|
|
6578
6586
|
var height = _a.height;
|
|
6579
6587
|
return height;
|
|
6580
6588
|
}, function (_a) {
|
|
@@ -6621,15 +6629,20 @@ var Drawer = function (_a) {
|
|
|
6621
6629
|
}, [isOpen, onClose, onOpen]);
|
|
6622
6630
|
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;
|
|
6623
6631
|
};
|
|
6624
|
-
var templateObject_1$13, templateObject_2$
|
|
6632
|
+
var templateObject_1$13, templateObject_2$K;
|
|
6633
|
+
|
|
6634
|
+
var TooltipArrow = function (_a) {
|
|
6635
|
+
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6636
|
+
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));
|
|
6637
|
+
};
|
|
6625
6638
|
|
|
6626
6639
|
var List = newStyled.ul(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6627
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6640
|
+
var Item$2 = newStyled.li(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
6628
6641
|
var DropdownWrapper = newStyled.div(templateObject_3$A || (templateObject_3$A = __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"])));
|
|
6629
6642
|
var ArrowContainer$1 = newStyled.div(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
6630
6643
|
var StyledDropdown = newStyled.ul(templateObject_5$g || (templateObject_5$g = __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; });
|
|
6631
6644
|
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; });
|
|
6632
|
-
var templateObject_1$12, templateObject_2$
|
|
6645
|
+
var templateObject_1$12, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6633
6646
|
|
|
6634
6647
|
var DropdownListIcons = function (_a) {
|
|
6635
6648
|
var items = _a.items;
|
|
@@ -6643,12 +6656,12 @@ var Dropdown = function (_a) {
|
|
|
6643
6656
|
};
|
|
6644
6657
|
|
|
6645
6658
|
var DropdownContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
6646
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6659
|
+
var DropdownLabel = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
6647
6660
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6648
6661
|
var DetailLabel = newStyled.span(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
6649
6662
|
var DropdownOptions = newStyled.div(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
6650
6663
|
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"])));
|
|
6651
|
-
var templateObject_1$11, templateObject_2$
|
|
6664
|
+
var templateObject_1$11, templateObject_2$I, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6652
6665
|
|
|
6653
6666
|
var SizeDropdown = function (_a) {
|
|
6654
6667
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6672,7 +6685,7 @@ var SizeDropdown = function (_a) {
|
|
|
6672
6685
|
};
|
|
6673
6686
|
|
|
6674
6687
|
var DialogDropdownWrapper = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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; });
|
|
6675
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6688
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$H || (templateObject_2$H = __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; });
|
|
6676
6689
|
var DialogDropdownListItem = newStyled.li(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
6677
6690
|
var DialogDropdownLink = newStyled.a(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
6678
6691
|
var DropdownDialog = function (_a) {
|
|
@@ -6683,7 +6696,7 @@ var DropdownDialog = function (_a) {
|
|
|
6683
6696
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6684
6697
|
}) }), void 0) }), void 0));
|
|
6685
6698
|
};
|
|
6686
|
-
var templateObject_1$10, templateObject_2$
|
|
6699
|
+
var templateObject_1$10, templateObject_2$H, templateObject_3$y, templateObject_4$n;
|
|
6687
6700
|
|
|
6688
6701
|
function FilteringDropdown(_a) {
|
|
6689
6702
|
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;
|
|
@@ -6717,7 +6730,7 @@ function FilteringDropdown(_a) {
|
|
|
6717
6730
|
}
|
|
6718
6731
|
|
|
6719
6732
|
var Title$1 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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; });
|
|
6720
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6733
|
+
var H3 = newStyled.h3(templateObject_2$G || (templateObject_2$G = __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; });
|
|
6721
6734
|
var ArrowContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6722
6735
|
var Container$J = newStyled.div(templateObject_4$m || (templateObject_4$m = __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'); });
|
|
6723
6736
|
var Accordion = function (_a) {
|
|
@@ -6726,10 +6739,10 @@ var Accordion = function (_a) {
|
|
|
6726
6739
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6727
6740
|
return (jsxs$1(Container$J, __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));
|
|
6728
6741
|
};
|
|
6729
|
-
var templateObject_1$$, templateObject_2$
|
|
6742
|
+
var templateObject_1$$, templateObject_2$G, templateObject_3$x, templateObject_4$m;
|
|
6730
6743
|
|
|
6731
6744
|
var SectionContent = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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; });
|
|
6732
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6745
|
+
var Header$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
6733
6746
|
var MobileHeader = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
6734
6747
|
var MobileIconsContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
6735
6748
|
var H4 = newStyled.h4(templateObject_5$e || (templateObject_5$e = __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; });
|
|
@@ -6738,7 +6751,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6738
6751
|
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6739
6752
|
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6740
6753
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
6741
|
-
var templateObject_1$_, templateObject_2$
|
|
6754
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$w, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6742
6755
|
|
|
6743
6756
|
var getStylesBySize$7 = function (size, theme) {
|
|
6744
6757
|
switch (size) {
|
|
@@ -6804,7 +6817,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6804
6817
|
};
|
|
6805
6818
|
|
|
6806
6819
|
var UL = newStyled.ul(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
6807
|
-
var LI = newStyled.li(templateObject_2$
|
|
6820
|
+
var LI = newStyled.li(templateObject_2$E || (templateObject_2$E = __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; });
|
|
6808
6821
|
var CloseIconContainer = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
6809
6822
|
var Tags = function (_a) {
|
|
6810
6823
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -6813,7 +6826,7 @@ var Tags = function (_a) {
|
|
|
6813
6826
|
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));
|
|
6814
6827
|
}) }), void 0));
|
|
6815
6828
|
};
|
|
6816
|
-
var templateObject_1$Z, templateObject_2$
|
|
6829
|
+
var templateObject_1$Z, templateObject_2$E, templateObject_3$v;
|
|
6817
6830
|
|
|
6818
6831
|
var Filters = function (_a) {
|
|
6819
6832
|
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;
|
|
@@ -6950,7 +6963,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
6950
6963
|
};
|
|
6951
6964
|
|
|
6952
6965
|
var Wrapper$4 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
6953
|
-
var Container$I = newStyled.div(templateObject_2$
|
|
6966
|
+
var Container$I = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
6954
6967
|
var FitGuarantee = function (_a) {
|
|
6955
6968
|
var _b;
|
|
6956
6969
|
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;
|
|
@@ -6968,10 +6981,10 @@ var FitGuarantee = function (_a) {
|
|
|
6968
6981
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
6969
6982
|
} }, { children: title }), void 0), jsx$1(Text$8, __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));
|
|
6970
6983
|
};
|
|
6971
|
-
var templateObject_1$Y, templateObject_2$
|
|
6984
|
+
var templateObject_1$Y, templateObject_2$D;
|
|
6972
6985
|
|
|
6973
6986
|
var Container$H = newStyled.div(templateObject_1$X || (templateObject_1$X = __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"])));
|
|
6974
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6987
|
+
var P$2 = newStyled.p(templateObject_2$C || (templateObject_2$C = __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; });
|
|
6975
6988
|
var textButtonStyles$1 = function (theme) { return ({
|
|
6976
6989
|
border: 'none',
|
|
6977
6990
|
background: 'transparent',
|
|
@@ -6986,7 +6999,7 @@ var FitPredictor = function (_a) {
|
|
|
6986
6999
|
var theme = useTheme();
|
|
6987
7000
|
return (jsxs(Container$H, __assign$1({ theme: theme }, { children: [jsx(Container$H, { 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));
|
|
6988
7001
|
};
|
|
6989
|
-
var templateObject_1$X, templateObject_2$
|
|
7002
|
+
var templateObject_1$X, templateObject_2$C;
|
|
6990
7003
|
|
|
6991
7004
|
var Image$1 = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
6992
7005
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
@@ -11314,7 +11327,7 @@ var SliderNavigation = function (_a) {
|
|
|
11314
11327
|
};
|
|
11315
11328
|
|
|
11316
11329
|
var horizontalStyles = css(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
11317
|
-
var verticalStyles = css(templateObject_2$
|
|
11330
|
+
var verticalStyles = css(templateObject_2$B || (templateObject_2$B = __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"])));
|
|
11318
11331
|
var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __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) {
|
|
11319
11332
|
var position = _a.position;
|
|
11320
11333
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11344,7 +11357,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11344
11357
|
arrowPadding: 1.625,
|
|
11345
11358
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __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.imageUrl, 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$4, __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.imageUrl, 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));
|
|
11346
11359
|
};
|
|
11347
|
-
var templateObject_1$U, templateObject_2$
|
|
11360
|
+
var templateObject_1$U, templateObject_2$B, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9, templateObject_8$7;
|
|
11348
11361
|
|
|
11349
11362
|
var propTypes = {exports: {}};
|
|
11350
11363
|
|
|
@@ -12942,7 +12955,7 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
12942
12955
|
return borderRadiusVariant &&
|
|
12943
12956
|
"\n border-radius: 40px;\n ";
|
|
12944
12957
|
});
|
|
12945
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
12958
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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'); });
|
|
12946
12959
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12947
12960
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
12948
12961
|
var Video$1 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
@@ -12956,7 +12969,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12956
12969
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12957
12970
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, 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));
|
|
12958
12971
|
};
|
|
12959
|
-
var templateObject_1$T, templateObject_2$
|
|
12972
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12960
12973
|
|
|
12961
12974
|
var Container$E = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
12962
12975
|
var ProductGallery = function (_a) {
|
|
@@ -13034,25 +13047,6 @@ var PaypalButton = function (_a) {
|
|
|
13034
13047
|
};
|
|
13035
13048
|
var templateObject_1$Q;
|
|
13036
13049
|
|
|
13037
|
-
var useOnClickOutside = function (ref, handler) {
|
|
13038
|
-
useEffect(function () {
|
|
13039
|
-
var listener = function (event) {
|
|
13040
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
13041
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
13042
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
13043
|
-
return;
|
|
13044
|
-
}
|
|
13045
|
-
handler(event);
|
|
13046
|
-
};
|
|
13047
|
-
document.addEventListener('mousedown', listener);
|
|
13048
|
-
document.addEventListener('touchstart', listener);
|
|
13049
|
-
return function () {
|
|
13050
|
-
document.removeEventListener('mousedown', listener);
|
|
13051
|
-
document.removeEventListener('touchstart', listener);
|
|
13052
|
-
};
|
|
13053
|
-
}, [ref, handler]);
|
|
13054
|
-
};
|
|
13055
|
-
|
|
13056
13050
|
var Container$C = newStyled.div(function (props) { return ({
|
|
13057
13051
|
height: 'auto',
|
|
13058
13052
|
textAlign: 'center',
|
|
@@ -13080,7 +13074,7 @@ var IconWrapper = newStyled.div(function (props) { return ({
|
|
|
13080
13074
|
var IconsWithTitle = function (_a) {
|
|
13081
13075
|
var _b;
|
|
13082
13076
|
var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
|
|
13083
|
-
var isMobile = useWindowDimensions(
|
|
13077
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
13084
13078
|
// @ts-ignore
|
|
13085
13079
|
var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
|
|
13086
13080
|
if (IconComponent == null) {
|
|
@@ -13107,7 +13101,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13107
13101
|
};
|
|
13108
13102
|
|
|
13109
13103
|
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __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'); });
|
|
13110
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13104
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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'); });
|
|
13111
13105
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13112
13106
|
var titlePosition = _a.titlePosition;
|
|
13113
13107
|
return titlePosition == 'center' &&
|
|
@@ -13115,16 +13109,16 @@ var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __ma
|
|
|
13115
13109
|
});
|
|
13116
13110
|
var ImageCardWithDescription = function (_a) {
|
|
13117
13111
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13118
|
-
var isMobile = useWindowDimensions(
|
|
13112
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
13119
13113
|
return (jsxs$1(Container$B, __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$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13120
13114
|
};
|
|
13121
|
-
var templateObject_1$P, templateObject_2$
|
|
13115
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$s;
|
|
13122
13116
|
|
|
13123
13117
|
var Label$1 = newStyled.span(templateObject_1$O || (templateObject_1$O = __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) {
|
|
13124
13118
|
var color = _a.color;
|
|
13125
13119
|
return color;
|
|
13126
13120
|
});
|
|
13127
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13121
|
+
var MandatoryIcon = newStyled.span(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13128
13122
|
var color = _a.color;
|
|
13129
13123
|
return color;
|
|
13130
13124
|
});
|
|
@@ -13133,7 +13127,7 @@ var InputLabel = function (_a) {
|
|
|
13133
13127
|
var theme = useTheme();
|
|
13134
13128
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13135
13129
|
};
|
|
13136
|
-
var templateObject_1$O, templateObject_2$
|
|
13130
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13137
13131
|
|
|
13138
13132
|
var containerByStatus = function (theme, status) {
|
|
13139
13133
|
if (status === InputValidationType.Valid)
|
|
@@ -13146,7 +13140,7 @@ var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
13146
13140
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13147
13141
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13148
13142
|
});
|
|
13149
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13143
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
13150
13144
|
var StyledInput = newStyled.input(templateObject_3$r || (templateObject_3$r = __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) {
|
|
13151
13145
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13152
13146
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13220,7 +13214,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13220
13214
|
return theme.component.input.lineHeight;
|
|
13221
13215
|
});
|
|
13222
13216
|
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13223
|
-
var templateObject_1$N, templateObject_2$
|
|
13217
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13224
13218
|
|
|
13225
13219
|
var BaseInput = function (_a) {
|
|
13226
13220
|
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"]);
|
|
@@ -13268,7 +13262,7 @@ var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13268
13262
|
var theme = _a.theme;
|
|
13269
13263
|
return theme.component.inputCustom.input.borderRadius;
|
|
13270
13264
|
});
|
|
13271
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13265
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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) {
|
|
13272
13266
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13273
13267
|
return defaultRounded
|
|
13274
13268
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13285,19 +13279,19 @@ var Custom = function (_a) {
|
|
|
13285
13279
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13286
13280
|
return (jsx$1(Container$z, __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$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13287
13281
|
};
|
|
13288
|
-
var templateObject_1$M, templateObject_2$
|
|
13282
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13289
13283
|
|
|
13290
13284
|
var SuccessContainer = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13291
13285
|
var size = _a.size;
|
|
13292
13286
|
return (size === 'small' ? '36px' : '');
|
|
13293
13287
|
});
|
|
13294
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13288
|
+
var SuccessMessage = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
13295
13289
|
var SuccessText = newStyled.span(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
13296
13290
|
var Success = function (_a) {
|
|
13297
13291
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13298
13292
|
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));
|
|
13299
13293
|
};
|
|
13300
|
-
var templateObject_1$L, templateObject_2$
|
|
13294
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$q;
|
|
13301
13295
|
|
|
13302
13296
|
var ButtonContainer = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
13303
13297
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -13319,13 +13313,13 @@ var BasePlusButton = function (_a) {
|
|
|
13319
13313
|
var templateObject_1$K;
|
|
13320
13314
|
|
|
13321
13315
|
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13322
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13316
|
+
var IconContainer$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
13323
13317
|
var BasePlusIcon = function (_a) {
|
|
13324
13318
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13325
13319
|
var theme = useTheme();
|
|
13326
13320
|
return (jsx$1(Container$y, { 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));
|
|
13327
13321
|
};
|
|
13328
|
-
var templateObject_1$J, templateObject_2$
|
|
13322
|
+
var templateObject_1$J, templateObject_2$u;
|
|
13329
13323
|
|
|
13330
13324
|
var Input$3 = {
|
|
13331
13325
|
Simple: BaseInput,
|
|
@@ -13340,7 +13334,7 @@ var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
13340
13334
|
"\n border-radius: 40px;\n ";
|
|
13341
13335
|
});
|
|
13342
13336
|
// max-height: 31.875rem;
|
|
13343
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13337
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13344
13338
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13345
13339
|
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"])));
|
|
13346
13340
|
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
@@ -13440,7 +13434,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13440
13434
|
};
|
|
13441
13435
|
}, [preventTouch, ref, touchStart]);
|
|
13442
13436
|
}
|
|
13443
|
-
var templateObject_1$I, templateObject_2$
|
|
13437
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
13444
13438
|
|
|
13445
13439
|
var Container$w = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13446
13440
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -13719,14 +13713,14 @@ var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
13719
13713
|
return borderRadiusVariant &&
|
|
13720
13714
|
"\n border-radius: 40px;\n ";
|
|
13721
13715
|
});
|
|
13722
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13716
|
+
var TopTagContainer = 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'); });
|
|
13723
13717
|
var BottomTagContainer = 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"])));
|
|
13724
13718
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13725
13719
|
var _b, _c;
|
|
13726
13720
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13727
13721
|
return (jsxs$1(Container$v, __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.imageUrl, zoomSrc: image.imageUrl, 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 }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13728
13722
|
});
|
|
13729
|
-
var templateObject_1$G, templateObject_2$
|
|
13723
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o;
|
|
13730
13724
|
|
|
13731
13725
|
var Button$1 = newStyled.button(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
13732
13726
|
var ArrowButton = function (_a) {
|
|
@@ -13747,7 +13741,7 @@ var SlideDots = function (_a) {
|
|
|
13747
13741
|
var templateObject_1$E;
|
|
13748
13742
|
|
|
13749
13743
|
var NavigationButton = newStyled(ArrowButton)(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
13750
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13744
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13751
13745
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13752
13746
|
var SlideNavigation = function (_a) {
|
|
13753
13747
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -13760,7 +13754,7 @@ var SlideNavigation = function (_a) {
|
|
|
13760
13754
|
onNavigate(selectedIndex + 1);
|
|
13761
13755
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13762
13756
|
};
|
|
13763
|
-
var templateObject_1$D, templateObject_2$
|
|
13757
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n;
|
|
13764
13758
|
|
|
13765
13759
|
var Container$t = 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"])));
|
|
13766
13760
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -13919,7 +13913,7 @@ var Portal = function (_a) {
|
|
|
13919
13913
|
var visibleStyle = function (_a) {
|
|
13920
13914
|
var opened = _a.opened;
|
|
13921
13915
|
return opened
|
|
13922
|
-
? 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$
|
|
13916
|
+
? 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 "])));
|
|
13923
13917
|
};
|
|
13924
13918
|
var transformStyle = function (_a) {
|
|
13925
13919
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -13967,7 +13961,7 @@ var useModal = function (id) {
|
|
|
13967
13961
|
close: close,
|
|
13968
13962
|
}); }, [close, open, opened]);
|
|
13969
13963
|
};
|
|
13970
|
-
var templateObject_1$B, templateObject_2$
|
|
13964
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
13971
13965
|
|
|
13972
13966
|
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) {
|
|
13973
13967
|
var height = _a.height;
|
|
@@ -14047,13 +14041,13 @@ var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
14047
14041
|
var theme = _a.theme;
|
|
14048
14042
|
return theme.component.orderBar.backgroundColor;
|
|
14049
14043
|
});
|
|
14050
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14044
|
+
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; });
|
|
14051
14045
|
var OrderBar = function (_a) {
|
|
14052
14046
|
var message = _a.message, color = _a.color;
|
|
14053
14047
|
var theme = useTheme();
|
|
14054
14048
|
return (jsxs$1(Container$q, __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));
|
|
14055
14049
|
};
|
|
14056
|
-
var templateObject_1$z, templateObject_2$
|
|
14050
|
+
var templateObject_1$z, templateObject_2$p;
|
|
14057
14051
|
|
|
14058
14052
|
var htmlReactParser = {exports: {}};
|
|
14059
14053
|
|
|
@@ -17835,7 +17829,7 @@ HTMLReactParser$1.attributesToProps;
|
|
|
17835
17829
|
HTMLReactParser$1.Element;
|
|
17836
17830
|
|
|
17837
17831
|
var Container$p = 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"])));
|
|
17838
|
-
var Card = newStyled.div(templateObject_2$
|
|
17832
|
+
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"])));
|
|
17839
17833
|
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"])));
|
|
17840
17834
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
17841
17835
|
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
@@ -17871,10 +17865,10 @@ var PackCard = function (_a) {
|
|
|
17871
17865
|
currency: currencyCode || 'USD',
|
|
17872
17866
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17873
17867
|
};
|
|
17874
|
-
var templateObject_1$y, templateObject_2$
|
|
17868
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
17875
17869
|
|
|
17876
17870
|
var Container$o = 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"])));
|
|
17877
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
17871
|
+
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"])));
|
|
17878
17872
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17879
17873
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
17880
17874
|
}));
|
|
@@ -17895,7 +17889,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17895
17889
|
var background = _a.background;
|
|
17896
17890
|
return background || 'unset';
|
|
17897
17891
|
});
|
|
17898
|
-
var templateObject_1$x, templateObject_2$
|
|
17892
|
+
var templateObject_1$x, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
17899
17893
|
|
|
17900
17894
|
var Pagination = function (_a) {
|
|
17901
17895
|
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;
|
|
@@ -17982,7 +17976,7 @@ var templateObject_1$w;
|
|
|
17982
17976
|
|
|
17983
17977
|
var Container$m = 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"])));
|
|
17984
17978
|
var IMAGE_WIDTH = '63px';
|
|
17985
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17979
|
+
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);
|
|
17986
17980
|
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({
|
|
17987
17981
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
17988
17982
|
}), IMAGE_WIDTH);
|
|
@@ -18022,7 +18016,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18022
18016
|
var theme = useTheme();
|
|
18023
18017
|
return (jsxs$1(Container$m, __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));
|
|
18024
18018
|
};
|
|
18025
|
-
var templateObject_1$v, templateObject_2$
|
|
18019
|
+
var templateObject_1$v, templateObject_2$m, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18026
18020
|
|
|
18027
18021
|
var P$1 = newStyled.p(function (_a) {
|
|
18028
18022
|
var color = _a.color;
|
|
@@ -18084,7 +18078,7 @@ var ProgressBar = function (_a) {
|
|
|
18084
18078
|
var templateObject_1$u;
|
|
18085
18079
|
|
|
18086
18080
|
var Container$k = 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; });
|
|
18087
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18081
|
+
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"])));
|
|
18088
18082
|
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"])));
|
|
18089
18083
|
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)'; });
|
|
18090
18084
|
var QuantityPicker = function (_a) {
|
|
@@ -18111,7 +18105,7 @@ var QuantityPicker = function (_a) {
|
|
|
18111
18105
|
}, [value, clamp]);
|
|
18112
18106
|
return (jsxs$1(Container$k, __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));
|
|
18113
18107
|
};
|
|
18114
|
-
var templateObject_1$t, templateObject_2$
|
|
18108
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
18115
18109
|
|
|
18116
18110
|
/* base styles & size variants */
|
|
18117
18111
|
var CustomRadioStyles$1 = {
|
|
@@ -18182,7 +18176,7 @@ var ContainerStyles$1 = {
|
|
|
18182
18176
|
|
|
18183
18177
|
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"])));
|
|
18184
18178
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18185
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18179
|
+
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) {
|
|
18186
18180
|
var disabled = _a.disabled;
|
|
18187
18181
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18188
18182
|
});
|
|
@@ -18200,7 +18194,7 @@ var RadioPrimary = function (_a) {
|
|
|
18200
18194
|
};
|
|
18201
18195
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$j, __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));
|
|
18202
18196
|
};
|
|
18203
|
-
var templateObject_1$s, templateObject_2$
|
|
18197
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18204
18198
|
|
|
18205
18199
|
var RadioGroupInput = function (_a) {
|
|
18206
18200
|
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;
|
|
@@ -18281,7 +18275,7 @@ var ContainerStyles = {
|
|
|
18281
18275
|
|
|
18282
18276
|
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"])));
|
|
18283
18277
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18284
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18278
|
+
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) {
|
|
18285
18279
|
var disabled = _a.disabled;
|
|
18286
18280
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18287
18281
|
});
|
|
@@ -18305,7 +18299,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18305
18299
|
};
|
|
18306
18300
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$i, __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));
|
|
18307
18301
|
};
|
|
18308
|
-
var templateObject_1$r, templateObject_2$
|
|
18302
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g;
|
|
18309
18303
|
|
|
18310
18304
|
var ClubRadioGroupInput = function (_a) {
|
|
18311
18305
|
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;
|
|
@@ -18327,7 +18321,7 @@ function formatDate(date) {
|
|
|
18327
18321
|
}
|
|
18328
18322
|
|
|
18329
18323
|
var Container$h = 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"])));
|
|
18330
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18324
|
+
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"])));
|
|
18331
18325
|
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"])));
|
|
18332
18326
|
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"])));
|
|
18333
18327
|
var DateText$1 = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
@@ -18367,12 +18361,12 @@ var Review$1 = function (_a) {
|
|
|
18367
18361
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18368
18362
|
(!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));
|
|
18369
18363
|
};
|
|
18370
|
-
var templateObject_1$q, templateObject_2$
|
|
18364
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18371
18365
|
|
|
18372
18366
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18373
18367
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18374
18368
|
var Container$g = 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"])));
|
|
18375
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18369
|
+
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"])));
|
|
18376
18370
|
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"])));
|
|
18377
18371
|
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"])));
|
|
18378
18372
|
var DateText = newStyled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -18423,10 +18417,10 @@ var Review = function (_a) {
|
|
|
18423
18417
|
: description,
|
|
18424
18418
|
} }, 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 && 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 && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18425
18419
|
};
|
|
18426
|
-
var templateObject_1$p, templateObject_2$
|
|
18420
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18427
18421
|
|
|
18428
18422
|
var Container$f = 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"])));
|
|
18429
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18423
|
+
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"])));
|
|
18430
18424
|
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"])));
|
|
18431
18425
|
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"])));
|
|
18432
18426
|
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
@@ -18441,17 +18435,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18441
18435
|
var theme = useTheme();
|
|
18442
18436
|
return (jsxs$1(Container$f, { children: [jsx$1(Text$8, __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$8, __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));
|
|
18443
18437
|
};
|
|
18444
|
-
var templateObject_1$o, templateObject_2$
|
|
18438
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18445
18439
|
|
|
18446
18440
|
var Container$e = 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"])));
|
|
18447
|
-
var Text = newStyled.p(templateObject_2$
|
|
18441
|
+
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; });
|
|
18448
18442
|
var ScrollToTop = function (_a) {
|
|
18449
18443
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18450
18444
|
var theme = useTheme();
|
|
18451
18445
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18452
18446
|
return (jsxs$1(Container$e, __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));
|
|
18453
18447
|
};
|
|
18454
|
-
var templateObject_1$n, templateObject_2$
|
|
18448
|
+
var templateObject_1$n, templateObject_2$f;
|
|
18455
18449
|
|
|
18456
18450
|
var Input = newStyled.input(function (props) { return ({
|
|
18457
18451
|
padding: props.theme.component.input.padding,
|
|
@@ -18529,7 +18523,7 @@ var Anchor = newStyled.a({
|
|
|
18529
18523
|
padding: 0,
|
|
18530
18524
|
textDecoration: 'none',
|
|
18531
18525
|
});
|
|
18532
|
-
var Container$b = newStyled.div(templateObject_2$
|
|
18526
|
+
var Container$b = 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({
|
|
18533
18527
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18534
18528
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18535
18529
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18542,7 +18536,7 @@ var ResultsPanel = function (_a) {
|
|
|
18542
18536
|
var theme = useTheme();
|
|
18543
18537
|
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __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));
|
|
18544
18538
|
};
|
|
18545
|
-
var templateObject_1$l, templateObject_2$
|
|
18539
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18546
18540
|
|
|
18547
18541
|
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({
|
|
18548
18542
|
right: ['1rem', '7.75rem'],
|
|
@@ -18647,7 +18641,7 @@ var SearchBar = function (_a) {
|
|
|
18647
18641
|
};
|
|
18648
18642
|
|
|
18649
18643
|
var Container$9 = 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"])));
|
|
18650
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
18644
|
+
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"])));
|
|
18651
18645
|
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"])));
|
|
18652
18646
|
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"])));
|
|
18653
18647
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
@@ -18657,7 +18651,7 @@ var SearchNavigation = function (_a) {
|
|
|
18657
18651
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18658
18652
|
}) }, void 0)] }, void 0));
|
|
18659
18653
|
};
|
|
18660
|
-
var templateObject_1$i, templateObject_2$
|
|
18654
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18661
18655
|
|
|
18662
18656
|
var Container$8 = 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) {
|
|
18663
18657
|
var alignCenter = _a.alignCenter;
|
|
@@ -18669,17 +18663,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
18669
18663
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18670
18664
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18671
18665
|
});
|
|
18672
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18666
|
+
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"])));
|
|
18673
18667
|
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"])));
|
|
18674
18668
|
var ShortBanner = function (_a) {
|
|
18675
18669
|
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;
|
|
18676
18670
|
var theme = useTheme();
|
|
18677
18671
|
return (jsxs$1(Container$8, __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));
|
|
18678
18672
|
};
|
|
18679
|
-
var templateObject_1$h, templateObject_2$
|
|
18673
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a;
|
|
18680
18674
|
|
|
18681
18675
|
var TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __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; });
|
|
18682
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
18676
|
+
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; });
|
|
18683
18677
|
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; });
|
|
18684
18678
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
18685
18679
|
var SizeChartTable = function (_a) {
|
|
@@ -18714,10 +18708,10 @@ var SizeChartTable = function (_a) {
|
|
|
18714
18708
|
backgroundColor: getCellColor(index, cell),
|
|
18715
18709
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18716
18710
|
};
|
|
18717
|
-
var templateObject_1$g, templateObject_2$
|
|
18711
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
18718
18712
|
|
|
18719
18713
|
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; });
|
|
18720
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
18714
|
+
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; });
|
|
18721
18715
|
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; });
|
|
18722
18716
|
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; });
|
|
18723
18717
|
var SizeTable = function (_a) {
|
|
@@ -18725,7 +18719,7 @@ var SizeTable = function (_a) {
|
|
|
18725
18719
|
var theme = useTheme();
|
|
18726
18720
|
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));
|
|
18727
18721
|
};
|
|
18728
|
-
var templateObject_1$f, templateObject_2$
|
|
18722
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
18729
18723
|
|
|
18730
18724
|
var getStylesBySize$4 = function (size) {
|
|
18731
18725
|
switch (size) {
|
|
@@ -18771,25 +18765,29 @@ var TextButton = function (_a) {
|
|
|
18771
18765
|
var templateObject_1$e;
|
|
18772
18766
|
|
|
18773
18767
|
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"])));
|
|
18774
|
-
var P = newStyled.p(templateObject_2$
|
|
18768
|
+
var P = newStyled.p(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18775
18769
|
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"])));
|
|
18776
18770
|
var SizeFitGuide = function (_a) {
|
|
18777
|
-
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18778
|
-
return (jsxs$1(Container$7, { children: [jsx$1(TextButton, { LeadingIcon: 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));
|
|
18771
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
18772
|
+
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));
|
|
18779
18773
|
};
|
|
18780
|
-
var templateObject_1$d, templateObject_2$
|
|
18774
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7;
|
|
18781
18775
|
|
|
18782
18776
|
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) {
|
|
18783
18777
|
var inline = _a.inline;
|
|
18784
18778
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18785
18779
|
});
|
|
18780
|
+
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"])));
|
|
18781
|
+
var templateObject_1$c, templateObject_2$8;
|
|
18782
|
+
|
|
18786
18783
|
var SizeSelector = function (_a) {
|
|
18787
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
|
|
18784
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width, _c = _a.hasSizeGuide, hasSizeGuide = _c === void 0 ? false : _c;
|
|
18785
|
+
var isLarge = selectedValue.label === '3XL' || selectedValue.label === '4XL';
|
|
18788
18786
|
return (jsxs("div", __assign$1({ css: {
|
|
18789
18787
|
display: 'flex',
|
|
18790
18788
|
flexDirection: inline ? 'row' : 'column',
|
|
18791
18789
|
alignItems: inline ? 'center' : 'start',
|
|
18792
|
-
} }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
18790
|
+
} }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), isLarge && (jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Runs big -" }), void 0)), jsx(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Refer to our" }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
18793
18791
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
18794
18792
|
return (jsx(SelectorSecondary, { css: {
|
|
18795
18793
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -18797,8 +18795,7 @@ var SizeSelector = function (_a) {
|
|
|
18797
18795
|
minWidth: '4rem',
|
|
18798
18796
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
18799
18797
|
}) }), void 0)] }), void 0));
|
|
18800
|
-
};
|
|
18801
|
-
var templateObject_1$c;
|
|
18798
|
+
};
|
|
18802
18799
|
|
|
18803
18800
|
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) {
|
|
18804
18801
|
var titleSize = _a.titleSize;
|
|
@@ -18985,7 +18982,7 @@ var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __
|
|
|
18985
18982
|
var TextWithImage = function (_a) {
|
|
18986
18983
|
var _b, _c, _d, _e;
|
|
18987
18984
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
18988
|
-
var isMobile = useWindowDimensions(
|
|
18985
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
18989
18986
|
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$8, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
18990
18987
|
? titleStyle
|
|
18991
18988
|
: {
|
|
@@ -19214,7 +19211,7 @@ var TrackingProgress = function (_a) {
|
|
|
19214
19211
|
};
|
|
19215
19212
|
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19216
19213
|
|
|
19217
|
-
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 }\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 }\n"])), function (_a) {
|
|
19214
|
+
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) {
|
|
19218
19215
|
var textPosition = _a.textPosition;
|
|
19219
19216
|
return textPosition;
|
|
19220
19217
|
}, function (_a) {
|