@trafilea/afrodita-components 6.4.0 → 6.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +17 -8
- package/build/index.esm.js +306 -318
- package/build/index.esm.js.map +1 -1
- package/build/index.js +306 -318
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +4 -0
- package/build/theme/shapermint.theme.d.ts +4 -0
- package/build/theme/thespadr.theme.d.ts +4 -0
- package/build/theme/thespadr.theme.js +5 -1
- package/build/theme/truekind.theme.d.ts +4 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3147,7 +3147,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3147
3147
|
desktop: 1280,
|
|
3148
3148
|
};
|
|
3149
3149
|
|
|
3150
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3150
|
+
var Container$17 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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) {
|
|
3151
3151
|
var height = _a.height;
|
|
3152
3152
|
return (height ? height : '1.5em');
|
|
3153
3153
|
}, function (_a) {
|
|
@@ -3174,9 +3174,9 @@ var SkeletonBox = function (_a) {
|
|
|
3174
3174
|
var theme = useTheme();
|
|
3175
3175
|
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3176
3176
|
};
|
|
3177
|
-
var templateObject_1$
|
|
3177
|
+
var templateObject_1$1P;
|
|
3178
3178
|
|
|
3179
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3179
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3180
3180
|
var width = _a.width;
|
|
3181
3181
|
return width;
|
|
3182
3182
|
}, function (_a) {
|
|
@@ -3192,7 +3192,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N
|
|
|
3192
3192
|
var opacity = _a.opacity;
|
|
3193
3193
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3194
3194
|
});
|
|
3195
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3195
|
+
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) {
|
|
3196
3196
|
var width = _a.width;
|
|
3197
3197
|
return width;
|
|
3198
3198
|
}, function (_a) {
|
|
@@ -3205,7 +3205,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3205
3205
|
var opacity = _a.opacity;
|
|
3206
3206
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3207
3207
|
});
|
|
3208
|
-
var templateObject_1$
|
|
3208
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable no-undef */
|
|
3211
3211
|
var cache = new Map();
|
|
@@ -3283,7 +3283,7 @@ var getIconDimension = function (dimension) {
|
|
|
3283
3283
|
return "".concat(dimension, "rem");
|
|
3284
3284
|
};
|
|
3285
3285
|
|
|
3286
|
-
var
|
|
3286
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3287
3287
|
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3288
3288
|
var _b = React$2.useState(false), error = _b[0], setError = _b[1];
|
|
3289
3289
|
var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
@@ -3321,7 +3321,8 @@ var IconFromExtSource = function (_a) {
|
|
|
3321
3321
|
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3322
3322
|
}
|
|
3323
3323
|
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3324
|
-
};
|
|
3324
|
+
};
|
|
3325
|
+
var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
|
|
3325
3326
|
|
|
3326
3327
|
/* eslint-disable react/forbid-component-props */
|
|
3327
3328
|
var UnmemoIcon = function (_a) {
|
|
@@ -4080,14 +4081,14 @@ function jsxs(type, props, key) {
|
|
|
4080
4081
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4081
4082
|
// `variants` styles that are consistent through all themes.
|
|
4082
4083
|
var TAGS = {
|
|
4083
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4084
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4084
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
4085
|
+
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4085
4086
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4086
4087
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4087
4088
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4088
4089
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4089
4090
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4090
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4091
|
+
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4091
4092
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4092
4093
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4093
4094
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4216,10 +4217,10 @@ var DEFAULTS = {
|
|
|
4216
4217
|
size: 'regular',
|
|
4217
4218
|
},
|
|
4218
4219
|
};
|
|
4219
|
-
var templateObject_1$
|
|
4220
|
+
var templateObject_1$1N, 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;
|
|
4220
4221
|
|
|
4221
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4222
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4222
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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"])));
|
|
4223
|
+
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"])));
|
|
4223
4224
|
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"])));
|
|
4224
4225
|
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"])));
|
|
4225
4226
|
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"])));
|
|
@@ -4248,27 +4249,27 @@ var PackCard$1 = function (_a) {
|
|
|
4248
4249
|
currency: currencyCode || 'USD',
|
|
4249
4250
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4250
4251
|
};
|
|
4251
|
-
var templateObject_1$
|
|
4252
|
+
var templateObject_1$1M, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4252
4253
|
|
|
4253
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4254
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4254
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4255
|
+
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4255
4256
|
var DropList = function (_a) {
|
|
4256
4257
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4257
4258
|
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4258
4259
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4259
4260
|
}) }, void 0));
|
|
4260
4261
|
};
|
|
4261
|
-
var templateObject_1$
|
|
4262
|
+
var templateObject_1$1L, templateObject_2$18;
|
|
4262
4263
|
|
|
4263
4264
|
var DROPS_TOTAL = 5;
|
|
4264
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4265
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4265
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4266
|
+
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"])));
|
|
4266
4267
|
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"])));
|
|
4267
4268
|
var AbsorbencyLevel = function (_a) {
|
|
4268
4269
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4269
4270
|
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4270
4271
|
};
|
|
4271
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1K, templateObject_2$17, templateObject_3$S;
|
|
4272
4273
|
|
|
4273
4274
|
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]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.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===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.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(`
|
|
4274
4275
|
`),"","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(`
|
|
@@ -4344,7 +4345,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4344
4345
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4345
4346
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4346
4347
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4347
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4348
|
+
var StyledContent = newStyled.button(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4348
4349
|
var Accordion$1 = function (_a) {
|
|
4349
4350
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4350
4351
|
var theme = useTheme();
|
|
@@ -4368,9 +4369,9 @@ var Accordion$1 = function (_a) {
|
|
|
4368
4369
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4369
4370
|
} }), void 0));
|
|
4370
4371
|
};
|
|
4371
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1J;
|
|
4372
4373
|
|
|
4373
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4374
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4374
4375
|
var AccordionOptions = function (_a) {
|
|
4375
4376
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4376
4377
|
var _b = React$2.useState({
|
|
@@ -4394,7 +4395,7 @@ var AccordionOptions = function (_a) {
|
|
|
4394
4395
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4395
4396
|
}) }, void 0));
|
|
4396
4397
|
};
|
|
4397
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1I;
|
|
4398
4399
|
|
|
4399
4400
|
exports.CardSectionType = void 0;
|
|
4400
4401
|
(function (CardSectionType) {
|
|
@@ -4556,14 +4557,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4556
4557
|
literal: true,
|
|
4557
4558
|
});
|
|
4558
4559
|
|
|
4559
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4560
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4560
|
+
var ErrorText = newStyled.h3(templateObject_1$1H || (templateObject_1$1H = __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; });
|
|
4561
|
+
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"])));
|
|
4561
4562
|
var Error$1 = function (_a) {
|
|
4562
4563
|
var error = _a.error;
|
|
4563
4564
|
var theme = useTheme();
|
|
4564
4565
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4565
4566
|
};
|
|
4566
|
-
var templateObject_1$
|
|
4567
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
4567
4568
|
|
|
4568
4569
|
var BaseSelectButton = function (_a) {
|
|
4569
4570
|
var children = _a.children, as = _a.as;
|
|
@@ -4580,7 +4581,7 @@ function BaseSelectOption(_a) {
|
|
|
4580
4581
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4581
4582
|
}
|
|
4582
4583
|
|
|
4583
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4584
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4584
4585
|
function BaseSelect(_a) {
|
|
4585
4586
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4586
4587
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4590,7 +4591,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4590
4591
|
Options: BaseSelectOptions,
|
|
4591
4592
|
Option: BaseSelectOption,
|
|
4592
4593
|
});
|
|
4593
|
-
var templateObject_1$
|
|
4594
|
+
var templateObject_1$1G;
|
|
4594
4595
|
|
|
4595
4596
|
var CustomButton = newStyled.button(function (_a) {
|
|
4596
4597
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4628,26 +4629,28 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4628
4629
|
},
|
|
4629
4630
|
});
|
|
4630
4631
|
});
|
|
4632
|
+
//TODO Remove this when we find the real solution
|
|
4633
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4634
|
+
var open = _a.open;
|
|
4635
|
+
return open &&
|
|
4636
|
+
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
4637
|
+
});
|
|
4631
4638
|
var BaseDropdownButton = function (_a) {
|
|
4632
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4639
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, label = _a.label, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4633
4640
|
var theme = useTheme();
|
|
4634
4641
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: React$2.Fragment }, { children: function (_a) {
|
|
4635
4642
|
var open = _a.open;
|
|
4636
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [
|
|
4643
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [label ? (jsxs("div", __assign$1({ css: {
|
|
4644
|
+
display: 'flex',
|
|
4645
|
+
flexDirection: 'column',
|
|
4646
|
+
alignItems: 'flex-start',
|
|
4647
|
+
whiteSpace: 'nowrap',
|
|
4648
|
+
overflowX: 'hidden',
|
|
4649
|
+
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
|
|
4637
4650
|
} }), void 0));
|
|
4638
4651
|
};
|
|
4639
|
-
var
|
|
4640
|
-
|
|
4641
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4642
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4643
|
-
display: 'flex',
|
|
4644
|
-
flexDirection: 'column',
|
|
4645
|
-
alignItems: 'flex-start',
|
|
4646
|
-
whiteSpace: 'nowrap',
|
|
4647
|
-
overflowX: 'hidden',
|
|
4648
|
-
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
|
|
4649
|
-
};
|
|
4650
|
-
};
|
|
4652
|
+
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4653
|
+
var templateObject_1$1F;
|
|
4651
4654
|
|
|
4652
4655
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4653
4656
|
var theme = _a.theme;
|
|
@@ -4825,7 +4828,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4825
4828
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4826
4829
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4827
4830
|
]; });
|
|
4828
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4831
|
+
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) {
|
|
4829
4832
|
var disabled = _a.disabled;
|
|
4830
4833
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4831
4834
|
});
|
|
@@ -4841,7 +4844,7 @@ var Checkbox = function (_a) {
|
|
|
4841
4844
|
};
|
|
4842
4845
|
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4843
4846
|
};
|
|
4844
|
-
var templateObject_1$1E, templateObject_2$
|
|
4847
|
+
var templateObject_1$1E, templateObject_2$15;
|
|
4845
4848
|
|
|
4846
4849
|
var CustomOption = newStyled.li(function (_a) {
|
|
4847
4850
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4885,13 +4888,13 @@ function BaseDropdown(_a) {
|
|
|
4885
4888
|
}, disabled: disabled }, { children: children }), void 0));
|
|
4886
4889
|
}
|
|
4887
4890
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
4888
|
-
Button: BaseDropdownButton,
|
|
4891
|
+
Button: BaseDropdownButton$1,
|
|
4889
4892
|
Options: BaseDropdownOptions,
|
|
4890
4893
|
Option: BaseDropdownOption,
|
|
4891
4894
|
});
|
|
4892
4895
|
|
|
4893
4896
|
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4894
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4897
|
+
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"])));
|
|
4895
4898
|
function SimpleDropdown(_a) {
|
|
4896
4899
|
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;
|
|
4897
4900
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4920,11 +4923,10 @@ function SimpleDropdown(_a) {
|
|
|
4920
4923
|
}
|
|
4921
4924
|
setSelectedValue(value);
|
|
4922
4925
|
}, [value, options, initialValue]);
|
|
4923
|
-
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4924
4926
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4925
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4927
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4926
4928
|
}
|
|
4927
|
-
var templateObject_1$1D, templateObject_2$
|
|
4929
|
+
var templateObject_1$1D, templateObject_2$14;
|
|
4928
4930
|
|
|
4929
4931
|
/* base styles & size variants */
|
|
4930
4932
|
var CustomRadioStyles$2 = {
|
|
@@ -4991,7 +4993,7 @@ var ContainerStyles$2 = {
|
|
|
4991
4993
|
|
|
4992
4994
|
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"])));
|
|
4993
4995
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4994
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4996
|
+
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) {
|
|
4995
4997
|
var disabled = _a.disabled;
|
|
4996
4998
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4997
4999
|
});
|
|
@@ -5015,12 +5017,7 @@ var RadioInput = function (_a) {
|
|
|
5015
5017
|
};
|
|
5016
5018
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5017
5019
|
};
|
|
5018
|
-
var templateObject_1$1C, templateObject_2$
|
|
5019
|
-
|
|
5020
|
-
var TooltipArrow = function (_a) {
|
|
5021
|
-
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
5022
|
-
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
5023
|
-
};
|
|
5020
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R;
|
|
5024
5021
|
|
|
5025
5022
|
var getWrapperFlexDirection = function (position) {
|
|
5026
5023
|
switch (position) {
|
|
@@ -5046,40 +5043,16 @@ var getContainerFlexDirection = function (position) {
|
|
|
5046
5043
|
return 'row-reverse';
|
|
5047
5044
|
}
|
|
5048
5045
|
};
|
|
5049
|
-
var
|
|
5046
|
+
var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
5050
5047
|
switch (position) {
|
|
5051
5048
|
case exports.ComponentPosition.Top:
|
|
5052
|
-
return '
|
|
5049
|
+
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 }");
|
|
5053
5050
|
case exports.ComponentPosition.Bottom:
|
|
5054
|
-
return '
|
|
5051
|
+
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 }");
|
|
5055
5052
|
case exports.ComponentPosition.Left:
|
|
5056
|
-
return '
|
|
5053
|
+
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 }");
|
|
5057
5054
|
case exports.ComponentPosition.Right:
|
|
5058
|
-
return '
|
|
5059
|
-
}
|
|
5060
|
-
};
|
|
5061
|
-
var getArrowContainerPadding = function (position) {
|
|
5062
|
-
switch (position) {
|
|
5063
|
-
case exports.ComponentPosition.Top:
|
|
5064
|
-
return '0 1.25rem';
|
|
5065
|
-
case exports.ComponentPosition.Bottom:
|
|
5066
|
-
return '0 1.25rem';
|
|
5067
|
-
case exports.ComponentPosition.Left:
|
|
5068
|
-
return '0 0 0.625rem 0';
|
|
5069
|
-
case exports.ComponentPosition.Right:
|
|
5070
|
-
return '0 0 0.625rem 0';
|
|
5071
|
-
}
|
|
5072
|
-
};
|
|
5073
|
-
var getArrowContainerMargin = function (position) {
|
|
5074
|
-
switch (position) {
|
|
5075
|
-
case exports.ComponentPosition.Top:
|
|
5076
|
-
return '-1px 0 0 0';
|
|
5077
|
-
case exports.ComponentPosition.Bottom:
|
|
5078
|
-
return '0 0 -1px 0';
|
|
5079
|
-
case exports.ComponentPosition.Left:
|
|
5080
|
-
return '0';
|
|
5081
|
-
case exports.ComponentPosition.Right:
|
|
5082
|
-
return '0';
|
|
5055
|
+
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 }");
|
|
5083
5056
|
}
|
|
5084
5057
|
};
|
|
5085
5058
|
var getTooltipAlignItems = function (position, align) {
|
|
@@ -5095,48 +5068,51 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5095
5068
|
}
|
|
5096
5069
|
};
|
|
5097
5070
|
|
|
5098
|
-
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:
|
|
5071
|
+
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) {
|
|
5099
5072
|
var position = _a.position;
|
|
5100
5073
|
return getWrapperFlexDirection(position);
|
|
5074
|
+
}, function (_a) {
|
|
5075
|
+
var disableHover = _a.disableHover;
|
|
5076
|
+
return (disableHover ? 'hidden' : 'visible');
|
|
5077
|
+
}, function (_a) {
|
|
5078
|
+
var disableHover = _a.disableHover;
|
|
5079
|
+
return (disableHover ? 0 : 1);
|
|
5101
5080
|
});
|
|
5102
|
-
var TooltipContainer = newStyled.div(function (_a) {
|
|
5103
|
-
var position = _a.position
|
|
5104
|
-
return (
|
|
5105
|
-
|
|
5106
|
-
|
|
5107
|
-
|
|
5108
|
-
|
|
5109
|
-
|
|
5110
|
-
|
|
5111
|
-
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
|
|
5117
|
-
|
|
5118
|
-
|
|
5081
|
+
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) {
|
|
5082
|
+
var position = _a.position;
|
|
5083
|
+
return getContainerFlexDirection(position);
|
|
5084
|
+
}, function (_a) {
|
|
5085
|
+
var position = _a.position, align = _a.align;
|
|
5086
|
+
return getTooltipAlignItems(position, align);
|
|
5087
|
+
}, function (_a) {
|
|
5088
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5089
|
+
return getTooltipMargin(position, exports.ComponentPosition.Right, "".concat(childrenWidth, "px"));
|
|
5090
|
+
}, function (_a) {
|
|
5091
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5092
|
+
return getTooltipMargin(position, exports.ComponentPosition.Left, "".concat(childrenWidth, "px"));
|
|
5093
|
+
}, function (_a) {
|
|
5094
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5095
|
+
return getTooltipMargin(position, exports.ComponentPosition.Top, "-".concat(tooltipHeight, "px"));
|
|
5096
|
+
}, function (_a) {
|
|
5097
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5098
|
+
return getTooltipMargin(position, exports.ComponentPosition.Bottom, "-".concat(tooltipHeight, "px"));
|
|
5099
|
+
}, function (_a) {
|
|
5100
|
+
var maxWidth = _a.maxWidth;
|
|
5101
|
+
return (maxWidth ? maxWidth : 'none');
|
|
5102
|
+
}, function (_a) {
|
|
5103
|
+
var position = _a.position, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, withArrow = _a.withArrow;
|
|
5104
|
+
return withArrow && getArrowStyles(position, borderColor, backgroundColor);
|
|
5119
5105
|
});
|
|
5120
5106
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5121
5107
|
return actual === expected ? margin : '0';
|
|
5122
5108
|
};
|
|
5123
|
-
var ContentWrapper = newStyled.div(
|
|
5109
|
+
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) {
|
|
5124
5110
|
var borderColor = _a.borderColor;
|
|
5125
5111
|
return borderColor;
|
|
5126
5112
|
}, function (_a) {
|
|
5127
5113
|
var backgroundColor = _a.backgroundColor;
|
|
5128
5114
|
return backgroundColor;
|
|
5129
5115
|
});
|
|
5130
|
-
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) {
|
|
5131
|
-
var position = _a.position;
|
|
5132
|
-
return getArrowRotation(position);
|
|
5133
|
-
}, function (_a) {
|
|
5134
|
-
var position = _a.position;
|
|
5135
|
-
return getArrowContainerPadding(position);
|
|
5136
|
-
}, function (_a) {
|
|
5137
|
-
var position = _a.position;
|
|
5138
|
-
return getArrowContainerMargin(position);
|
|
5139
|
-
});
|
|
5140
5116
|
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) {
|
|
5141
5117
|
var color = _a.color;
|
|
5142
5118
|
return color;
|
|
@@ -5147,15 +5123,91 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5147
5123
|
return color;
|
|
5148
5124
|
});
|
|
5149
5125
|
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"])));
|
|
5150
|
-
var
|
|
5126
|
+
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"])));
|
|
5127
|
+
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;
|
|
5128
|
+
|
|
5129
|
+
var useOnClickOutside = function (ref, handler) {
|
|
5130
|
+
React$2.useEffect(function () {
|
|
5131
|
+
var listener = function (event) {
|
|
5132
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
5133
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5134
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5135
|
+
return;
|
|
5136
|
+
}
|
|
5137
|
+
handler(event);
|
|
5138
|
+
};
|
|
5139
|
+
document.addEventListener('mousedown', listener);
|
|
5140
|
+
document.addEventListener('touchstart', listener);
|
|
5141
|
+
return function () {
|
|
5142
|
+
document.removeEventListener('mousedown', listener);
|
|
5143
|
+
document.removeEventListener('touchstart', listener);
|
|
5144
|
+
};
|
|
5145
|
+
}, [ref, handler]);
|
|
5146
|
+
};
|
|
5147
|
+
|
|
5148
|
+
function getWindowDimensions() {
|
|
5149
|
+
if (typeof window === 'undefined')
|
|
5150
|
+
return { width: 0, height: 0 };
|
|
5151
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
5152
|
+
return {
|
|
5153
|
+
width: width,
|
|
5154
|
+
height: height,
|
|
5155
|
+
};
|
|
5156
|
+
}
|
|
5157
|
+
var getViewport = function (breakpoints, width) {
|
|
5158
|
+
if (width <= breakpoints.mobile)
|
|
5159
|
+
return Viewports.mobile;
|
|
5160
|
+
if (width <= breakpoints.tablet)
|
|
5161
|
+
return Viewports.tablet;
|
|
5162
|
+
if (width <= breakpoints.desktop)
|
|
5163
|
+
return Viewports.desktop;
|
|
5164
|
+
return Viewports.desktopLarge;
|
|
5165
|
+
};
|
|
5166
|
+
var useWindowDimensions = function (breakpoints, _a) {
|
|
5167
|
+
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5168
|
+
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5169
|
+
var _c = React$2.useState(function () {
|
|
5170
|
+
var dimension = getWindowDimensions();
|
|
5171
|
+
return {
|
|
5172
|
+
windowDimensions: dimension,
|
|
5173
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5174
|
+
};
|
|
5175
|
+
}), state = _c[0], setState = _c[1];
|
|
5176
|
+
React$2.useEffect(function () {
|
|
5177
|
+
function handleResize() {
|
|
5178
|
+
var newDimension = getWindowDimensions();
|
|
5179
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5180
|
+
setState(function (oldState) {
|
|
5181
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5182
|
+
return {
|
|
5183
|
+
windowDimensions: newDimension,
|
|
5184
|
+
viewport: newViewport,
|
|
5185
|
+
};
|
|
5186
|
+
}
|
|
5187
|
+
return oldState;
|
|
5188
|
+
});
|
|
5189
|
+
}
|
|
5190
|
+
handleResize();
|
|
5191
|
+
window.addEventListener('resize', handleResize);
|
|
5192
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5193
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5194
|
+
}, [shouldListenChanges]);
|
|
5195
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5196
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5197
|
+
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5198
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5199
|
+
};
|
|
5151
5200
|
|
|
5152
5201
|
var Tooltip = function (_a) {
|
|
5153
|
-
var
|
|
5202
|
+
var _b;
|
|
5203
|
+
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;
|
|
5154
5204
|
var theme = useTheme();
|
|
5155
|
-
var
|
|
5205
|
+
var _e = React$2.useState(0), childrenWidth = _e[0], setChildrenWidth = _e[1];
|
|
5156
5206
|
var childrenRef = React$2.createRef();
|
|
5157
|
-
var
|
|
5207
|
+
var _f = React$2.useState(0), tooltipHeight = _f[0], setTooltipHeight = _f[1];
|
|
5158
5208
|
var tooltipRef = React$2.createRef();
|
|
5209
|
+
var _g = React$2.useState(false), closeTooltip = _g[0], setCloseTooltip = _g[1];
|
|
5210
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
5159
5211
|
React$2.useLayoutEffect(function () {
|
|
5160
5212
|
var ref = childrenRef.current;
|
|
5161
5213
|
setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
|
|
@@ -5164,12 +5216,12 @@ var Tooltip = function (_a) {
|
|
|
5164
5216
|
var ref = tooltipRef.current;
|
|
5165
5217
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5166
5218
|
}, [tooltipRef]);
|
|
5167
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
5219
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip === true && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("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), jsxRuntime.jsxs(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) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(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)), jsxRuntime.jsxs(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 && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
5168
5220
|
testId: 'HeaderIcon',
|
|
5169
5221
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5170
5222
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5171
5223
|
: theme.colors.pallete.secondary.color,
|
|
5172
|
-
}) }, void 0)), jsxRuntime.jsx(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) && (jsxRuntime.jsx(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)
|
|
5224
|
+
}) }, void 0)), jsxRuntime.jsx(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) && (jsxRuntime.jsx(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));
|
|
5173
5225
|
};
|
|
5174
5226
|
|
|
5175
5227
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5237,7 +5289,7 @@ var Container$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __
|
|
|
5237
5289
|
var size = _a.size;
|
|
5238
5290
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5239
5291
|
});
|
|
5240
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5292
|
+
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) {
|
|
5241
5293
|
var textColor = _a.textColor;
|
|
5242
5294
|
return textColor;
|
|
5243
5295
|
}, function (_a) {
|
|
@@ -5254,60 +5306,7 @@ var DiscountTag = function (_a) {
|
|
|
5254
5306
|
var theme = useTheme();
|
|
5255
5307
|
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
5256
5308
|
};
|
|
5257
|
-
var templateObject_1$1A, templateObject_2$
|
|
5258
|
-
|
|
5259
|
-
function getWindowDimensions() {
|
|
5260
|
-
if (typeof window === 'undefined')
|
|
5261
|
-
return { width: 0, height: 0 };
|
|
5262
|
-
var width = window.innerWidth, height = window.innerHeight;
|
|
5263
|
-
return {
|
|
5264
|
-
width: width,
|
|
5265
|
-
height: height,
|
|
5266
|
-
};
|
|
5267
|
-
}
|
|
5268
|
-
var getViewport = function (breakpoints, width) {
|
|
5269
|
-
if (width <= breakpoints.mobile)
|
|
5270
|
-
return Viewports.mobile;
|
|
5271
|
-
if (width <= breakpoints.tablet)
|
|
5272
|
-
return Viewports.tablet;
|
|
5273
|
-
if (width <= breakpoints.desktop)
|
|
5274
|
-
return Viewports.desktop;
|
|
5275
|
-
return Viewports.desktopLarge;
|
|
5276
|
-
};
|
|
5277
|
-
var useWindowDimensions = function (breakpoints, _a) {
|
|
5278
|
-
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5279
|
-
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5280
|
-
var _c = React$2.useState(function () {
|
|
5281
|
-
var dimension = getWindowDimensions();
|
|
5282
|
-
return {
|
|
5283
|
-
windowDimensions: dimension,
|
|
5284
|
-
viewport: getViewport(breakpoints, dimension.width),
|
|
5285
|
-
};
|
|
5286
|
-
}), state = _c[0], setState = _c[1];
|
|
5287
|
-
React$2.useEffect(function () {
|
|
5288
|
-
function handleResize() {
|
|
5289
|
-
var newDimension = getWindowDimensions();
|
|
5290
|
-
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5291
|
-
setState(function (oldState) {
|
|
5292
|
-
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5293
|
-
return {
|
|
5294
|
-
windowDimensions: newDimension,
|
|
5295
|
-
viewport: newViewport,
|
|
5296
|
-
};
|
|
5297
|
-
}
|
|
5298
|
-
return oldState;
|
|
5299
|
-
});
|
|
5300
|
-
}
|
|
5301
|
-
handleResize();
|
|
5302
|
-
window.addEventListener('resize', handleResize);
|
|
5303
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5304
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5305
|
-
}, [shouldListenChanges]);
|
|
5306
|
-
var isMobile = state.viewport === Viewports.mobile;
|
|
5307
|
-
var isTablet = state.viewport === Viewports.tablet;
|
|
5308
|
-
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5309
|
-
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5310
|
-
};
|
|
5309
|
+
var templateObject_1$1A, templateObject_2$11;
|
|
5311
5310
|
|
|
5312
5311
|
var getStylesBySize$c = function (size, theme) {
|
|
5313
5312
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5350,7 +5349,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5350
5349
|
}
|
|
5351
5350
|
};
|
|
5352
5351
|
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"])));
|
|
5353
|
-
var Price = newStyled.p(templateObject_2
|
|
5352
|
+
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) {
|
|
5354
5353
|
var weight = _a.weight;
|
|
5355
5354
|
return (weight ? weight : '400');
|
|
5356
5355
|
}, function (_a) {
|
|
@@ -5407,7 +5406,7 @@ var PriceLabel = function (_a) {
|
|
|
5407
5406
|
};
|
|
5408
5407
|
return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5409
5408
|
};
|
|
5410
|
-
var templateObject_1$1z, templateObject_2
|
|
5409
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5411
5410
|
|
|
5412
5411
|
var getStylesBySize$b = function (size) {
|
|
5413
5412
|
switch (size) {
|
|
@@ -5459,7 +5458,7 @@ var Container$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
5459
5458
|
var size = _a.size;
|
|
5460
5459
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5461
5460
|
});
|
|
5462
|
-
var H3$2 = newStyled.h3(templateObject_2
|
|
5461
|
+
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) {
|
|
5463
5462
|
var textColor = _a.textColor;
|
|
5464
5463
|
return textColor;
|
|
5465
5464
|
}, function (_a) {
|
|
@@ -5476,7 +5475,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5476
5475
|
var theme = useTheme();
|
|
5477
5476
|
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
5478
5477
|
};
|
|
5479
|
-
var templateObject_1$1y, templateObject_2
|
|
5478
|
+
var templateObject_1$1y, templateObject_2$$;
|
|
5480
5479
|
|
|
5481
5480
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5482
5481
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5547,7 +5546,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5547
5546
|
var templateObject_1$1x;
|
|
5548
5547
|
|
|
5549
5548
|
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5550
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5549
|
+
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) {
|
|
5551
5550
|
var selected = _a.selected, theme = _a.theme;
|
|
5552
5551
|
return selected
|
|
5553
5552
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5584,7 +5583,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5584
5583
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5585
5584
|
});
|
|
5586
5585
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5587
|
-
var templateObject_1$1w, templateObject_2$
|
|
5586
|
+
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;
|
|
5588
5587
|
|
|
5589
5588
|
var radioIds = {
|
|
5590
5589
|
oneTime: {
|
|
@@ -5660,12 +5659,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5660
5659
|
_a$2);
|
|
5661
5660
|
|
|
5662
5661
|
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5663
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5662
|
+
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"])));
|
|
5664
5663
|
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"])));
|
|
5665
5664
|
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"])));
|
|
5666
5665
|
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"])));
|
|
5667
5666
|
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"])));
|
|
5668
|
-
var templateObject_1$1u, templateObject_2$
|
|
5667
|
+
var templateObject_1$1u, templateObject_2$Z, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5669
5668
|
|
|
5670
5669
|
var NameWithStars = function (_a) {
|
|
5671
5670
|
var name = _a.name, size = _a.size;
|
|
@@ -5684,7 +5683,7 @@ var ResultFeedback = function (_a) {
|
|
|
5684
5683
|
};
|
|
5685
5684
|
|
|
5686
5685
|
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; });
|
|
5687
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5686
|
+
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"])));
|
|
5688
5687
|
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; });
|
|
5689
5688
|
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) {
|
|
5690
5689
|
var theme = _a.theme;
|
|
@@ -5696,7 +5695,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5696
5695
|
var theme = _a.theme, size = _a.size;
|
|
5697
5696
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5698
5697
|
});
|
|
5699
|
-
var templateObject_1$1t, templateObject_2$
|
|
5698
|
+
var templateObject_1$1t, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5700
5699
|
|
|
5701
5700
|
/* base styles & size variants */
|
|
5702
5701
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5819,13 +5818,13 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5819
5818
|
var templateObject_1$1q;
|
|
5820
5819
|
|
|
5821
5820
|
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"])));
|
|
5822
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5821
|
+
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"])));
|
|
5823
5822
|
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) {
|
|
5824
5823
|
var color = _a.color;
|
|
5825
5824
|
return color;
|
|
5826
5825
|
});
|
|
5827
5826
|
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"])));
|
|
5828
|
-
var templateObject_1$1p, templateObject_2$
|
|
5827
|
+
var templateObject_1$1p, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5829
5828
|
|
|
5830
5829
|
var Minimalistic = function (_a) {
|
|
5831
5830
|
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;
|
|
@@ -5834,7 +5833,7 @@ var Minimalistic = function (_a) {
|
|
|
5834
5833
|
};
|
|
5835
5834
|
|
|
5836
5835
|
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"])));
|
|
5837
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5836
|
+
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; });
|
|
5838
5837
|
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; });
|
|
5839
5838
|
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"])));
|
|
5840
5839
|
var Simple = function (_a) {
|
|
@@ -5842,7 +5841,7 @@ var Simple = function (_a) {
|
|
|
5842
5841
|
var theme = useTheme();
|
|
5843
5842
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5844
5843
|
};
|
|
5845
|
-
var templateObject_1$1o, templateObject_2$
|
|
5844
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
5846
5845
|
|
|
5847
5846
|
var Bundle = {
|
|
5848
5847
|
Minimalistic: Minimalistic,
|
|
@@ -5853,7 +5852,7 @@ var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __
|
|
|
5853
5852
|
var displayBNPL = _a.displayBNPL;
|
|
5854
5853
|
return (displayBNPL ? 'flex' : 'none');
|
|
5855
5854
|
});
|
|
5856
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5855
|
+
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"])));
|
|
5857
5856
|
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"])));
|
|
5858
5857
|
var BuyNowPayLater = function (_a) {
|
|
5859
5858
|
var _b;
|
|
@@ -5866,7 +5865,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5866
5865
|
}
|
|
5867
5866
|
return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5868
5867
|
};
|
|
5869
|
-
var templateObject_1$1n, templateObject_2$
|
|
5868
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$J;
|
|
5870
5869
|
|
|
5871
5870
|
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; });
|
|
5872
5871
|
var Title$5 = function (_a) {
|
|
@@ -5926,7 +5925,7 @@ var CartProductItem = {
|
|
|
5926
5925
|
};
|
|
5927
5926
|
|
|
5928
5927
|
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"])));
|
|
5929
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5928
|
+
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"])));
|
|
5930
5929
|
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"])));
|
|
5931
5930
|
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"])));
|
|
5932
5931
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -5938,7 +5937,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5938
5937
|
var isMobile = useWindowDimensions().isMobile;
|
|
5939
5938
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5940
5939
|
};
|
|
5941
|
-
var templateObject_1$1h, templateObject_2$
|
|
5940
|
+
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;
|
|
5942
5941
|
|
|
5943
5942
|
var Spacing = function (_a) {
|
|
5944
5943
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5947,7 +5946,7 @@ var Spacing = function (_a) {
|
|
|
5947
5946
|
};
|
|
5948
5947
|
|
|
5949
5948
|
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"])));
|
|
5950
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
5949
|
+
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"])));
|
|
5951
5950
|
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"])));
|
|
5952
5951
|
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) {
|
|
5953
5952
|
var index = _a.index;
|
|
@@ -5960,7 +5959,7 @@ var StrengthBars = function (_a) {
|
|
|
5960
5959
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5961
5960
|
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5962
5961
|
};
|
|
5963
|
-
var templateObject_1$1g, templateObject_2$
|
|
5962
|
+
var templateObject_1$1g, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
5964
5963
|
|
|
5965
5964
|
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"])));
|
|
5966
5965
|
var templateObject_1$1f;
|
|
@@ -6075,7 +6074,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6075
6074
|
});
|
|
6076
6075
|
});
|
|
6077
6076
|
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"])));
|
|
6078
|
-
var Container$O = newStyled.a(templateObject_2$
|
|
6077
|
+
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"])));
|
|
6079
6078
|
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"])));
|
|
6080
6079
|
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; });
|
|
6081
6080
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6163,7 +6162,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6163
6162
|
};
|
|
6164
6163
|
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));
|
|
6165
6164
|
};
|
|
6166
|
-
var templateObject_1$1c, templateObject_2$
|
|
6165
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6167
6166
|
|
|
6168
6167
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6169
6168
|
var width = _a.width, height = _a.height;
|
|
@@ -6174,7 +6173,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6174
6173
|
});
|
|
6175
6174
|
});
|
|
6176
6175
|
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; });
|
|
6177
|
-
var Container$N = newStyled.a(templateObject_2$
|
|
6176
|
+
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"])));
|
|
6178
6177
|
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"])));
|
|
6179
6178
|
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; });
|
|
6180
6179
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6261,7 +6260,7 @@ var ProductItemTK = function (_a) {
|
|
|
6261
6260
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6262
6261
|
} }, { 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));
|
|
6263
6262
|
};
|
|
6264
|
-
var templateObject_1$1b, templateObject_2$
|
|
6263
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6265
6264
|
|
|
6266
6265
|
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"])));
|
|
6267
6266
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6321,7 +6320,7 @@ var OutOfStock = function (_a) {
|
|
|
6321
6320
|
};
|
|
6322
6321
|
|
|
6323
6322
|
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"])));
|
|
6324
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6323
|
+
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6325
6324
|
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"])));
|
|
6326
6325
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6327
6326
|
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"])));
|
|
@@ -6342,7 +6341,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6342
6341
|
Option: Option,
|
|
6343
6342
|
OptionsContainer: OptionsContainer,
|
|
6344
6343
|
});
|
|
6345
|
-
var templateObject_1$19, templateObject_2$
|
|
6344
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6346
6345
|
|
|
6347
6346
|
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) {
|
|
6348
6347
|
var borderColor = _a.borderColor;
|
|
@@ -6351,14 +6350,14 @@ var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __
|
|
|
6351
6350
|
var noStock = _a.noStock;
|
|
6352
6351
|
return (noStock ? '0.4' : '1');
|
|
6353
6352
|
});
|
|
6354
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6353
|
+
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"])));
|
|
6355
6354
|
var PatternSelector = function (_a) {
|
|
6356
6355
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6357
6356
|
var theme = useTheme();
|
|
6358
6357
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6359
6358
|
return (jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6360
6359
|
};
|
|
6361
|
-
var templateObject_1$18, templateObject_2$
|
|
6360
|
+
var templateObject_1$18, templateObject_2$P;
|
|
6362
6361
|
|
|
6363
6362
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6364
6363
|
if (options == null || options.length === 0) {
|
|
@@ -6417,8 +6416,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6417
6416
|
};
|
|
6418
6417
|
|
|
6419
6418
|
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'); });
|
|
6420
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6421
|
-
var Row$
|
|
6419
|
+
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"])));
|
|
6420
|
+
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) {
|
|
6422
6421
|
return props.rightToLeft &&
|
|
6423
6422
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6424
6423
|
});
|
|
@@ -6428,9 +6427,9 @@ var FreeShipping = newStyled.span(templateObject_6$h || (templateObject_6$h = __
|
|
|
6428
6427
|
var CrossSellCheckbox = function (_a) {
|
|
6429
6428
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6430
6429
|
var theme = useTheme();
|
|
6431
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$
|
|
6430
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6432
6431
|
};
|
|
6433
|
-
var templateObject_1$17, templateObject_2$
|
|
6432
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6434
6433
|
|
|
6435
6434
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6436
6435
|
__proto__: null,
|
|
@@ -6480,8 +6479,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObj
|
|
|
6480
6479
|
var theme = _a.theme;
|
|
6481
6480
|
return theme.colors.text.disabled;
|
|
6482
6481
|
});
|
|
6483
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6484
|
-
var templateObject_1$16, templateObject_2$
|
|
6482
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6483
|
+
var templateObject_1$16, templateObject_2$N;
|
|
6485
6484
|
|
|
6486
6485
|
var BaseCTA = function (_a) {
|
|
6487
6486
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6549,7 +6548,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6549
6548
|
};
|
|
6550
6549
|
|
|
6551
6550
|
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; });
|
|
6552
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6551
|
+
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"])));
|
|
6553
6552
|
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; });
|
|
6554
6553
|
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; });
|
|
6555
6554
|
var Note = function (_a) {
|
|
@@ -6557,14 +6556,14 @@ var Note = function (_a) {
|
|
|
6557
6556
|
var theme = useTheme();
|
|
6558
6557
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6559
6558
|
};
|
|
6560
|
-
var templateObject_1$15, templateObject_2$
|
|
6559
|
+
var templateObject_1$15, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
6561
6560
|
|
|
6562
6561
|
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) {
|
|
6563
6562
|
var theme = _a.theme;
|
|
6564
6563
|
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 ");
|
|
6565
6564
|
});
|
|
6566
|
-
var Line = newStyled.div(templateObject_2$
|
|
6567
|
-
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({
|
|
6565
|
+
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; });
|
|
6566
|
+
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({
|
|
6568
6567
|
flexDirection: ['column', 'row'],
|
|
6569
6568
|
}));
|
|
6570
6569
|
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({
|
|
@@ -6600,9 +6599,9 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __m
|
|
|
6600
6599
|
var DeliveryDetails = function (_a) {
|
|
6601
6600
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6602
6601
|
var theme = useTheme();
|
|
6603
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6602
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6604
6603
|
};
|
|
6605
|
-
var templateObject_1$14, templateObject_2$
|
|
6604
|
+
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;
|
|
6606
6605
|
|
|
6607
6606
|
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) {
|
|
6608
6607
|
var top = _a.top;
|
|
@@ -6611,7 +6610,7 @@ var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __mak
|
|
|
6611
6610
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6612
6611
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6613
6612
|
});
|
|
6614
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6613
|
+
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) {
|
|
6615
6614
|
var height = _a.height;
|
|
6616
6615
|
return height;
|
|
6617
6616
|
}, function (_a) {
|
|
@@ -6658,15 +6657,20 @@ var Drawer = function (_a) {
|
|
|
6658
6657
|
}, [isOpen, onClose, onOpen]);
|
|
6659
6658
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(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;
|
|
6660
6659
|
};
|
|
6661
|
-
var templateObject_1$13, templateObject_2$
|
|
6660
|
+
var templateObject_1$13, templateObject_2$K;
|
|
6661
|
+
|
|
6662
|
+
var TooltipArrow = function (_a) {
|
|
6663
|
+
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6664
|
+
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("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));
|
|
6665
|
+
};
|
|
6662
6666
|
|
|
6663
6667
|
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"])));
|
|
6664
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6668
|
+
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"])));
|
|
6665
6669
|
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"])));
|
|
6666
6670
|
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"])));
|
|
6667
6671
|
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; });
|
|
6668
6672
|
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; });
|
|
6669
|
-
var templateObject_1$12, templateObject_2$
|
|
6673
|
+
var templateObject_1$12, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6670
6674
|
|
|
6671
6675
|
var DropdownListIcons = function (_a) {
|
|
6672
6676
|
var items = _a.items;
|
|
@@ -6680,12 +6684,12 @@ var Dropdown = function (_a) {
|
|
|
6680
6684
|
};
|
|
6681
6685
|
|
|
6682
6686
|
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"])));
|
|
6683
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6687
|
+
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"])));
|
|
6684
6688
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6685
6689
|
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"])));
|
|
6686
6690
|
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"])));
|
|
6687
6691
|
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"])));
|
|
6688
|
-
var templateObject_1$11, templateObject_2$
|
|
6692
|
+
var templateObject_1$11, templateObject_2$I, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6689
6693
|
|
|
6690
6694
|
var SizeDropdown = function (_a) {
|
|
6691
6695
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6709,7 +6713,7 @@ var SizeDropdown = function (_a) {
|
|
|
6709
6713
|
};
|
|
6710
6714
|
|
|
6711
6715
|
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; });
|
|
6712
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6716
|
+
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; });
|
|
6713
6717
|
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"])));
|
|
6714
6718
|
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"])));
|
|
6715
6719
|
var DropdownDialog = function (_a) {
|
|
@@ -6720,7 +6724,7 @@ var DropdownDialog = function (_a) {
|
|
|
6720
6724
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6721
6725
|
}) }), void 0) }), void 0));
|
|
6722
6726
|
};
|
|
6723
|
-
var templateObject_1$10, templateObject_2$
|
|
6727
|
+
var templateObject_1$10, templateObject_2$H, templateObject_3$y, templateObject_4$n;
|
|
6724
6728
|
|
|
6725
6729
|
function FilteringDropdown(_a) {
|
|
6726
6730
|
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;
|
|
@@ -6754,7 +6758,7 @@ function FilteringDropdown(_a) {
|
|
|
6754
6758
|
}
|
|
6755
6759
|
|
|
6756
6760
|
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; });
|
|
6757
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6761
|
+
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; });
|
|
6758
6762
|
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"])));
|
|
6759
6763
|
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'); });
|
|
6760
6764
|
var Accordion = function (_a) {
|
|
@@ -6763,10 +6767,10 @@ var Accordion = function (_a) {
|
|
|
6763
6767
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6764
6768
|
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6765
6769
|
};
|
|
6766
|
-
var templateObject_1$$, templateObject_2$
|
|
6770
|
+
var templateObject_1$$, templateObject_2$G, templateObject_3$x, templateObject_4$m;
|
|
6767
6771
|
|
|
6768
6772
|
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; });
|
|
6769
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6773
|
+
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"])));
|
|
6770
6774
|
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"])));
|
|
6771
6775
|
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"])));
|
|
6772
6776
|
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; });
|
|
@@ -6775,7 +6779,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6775
6779
|
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; });
|
|
6776
6780
|
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"])));
|
|
6777
6781
|
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"])));
|
|
6778
|
-
var templateObject_1$_, templateObject_2$
|
|
6782
|
+
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;
|
|
6779
6783
|
|
|
6780
6784
|
var getStylesBySize$7 = function (size, theme) {
|
|
6781
6785
|
switch (size) {
|
|
@@ -6841,7 +6845,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6841
6845
|
};
|
|
6842
6846
|
|
|
6843
6847
|
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"])));
|
|
6844
|
-
var LI = newStyled.li(templateObject_2$
|
|
6848
|
+
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; });
|
|
6845
6849
|
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"])));
|
|
6846
6850
|
var Tags = function (_a) {
|
|
6847
6851
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -6850,7 +6854,7 @@ var Tags = function (_a) {
|
|
|
6850
6854
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6851
6855
|
}) }), void 0));
|
|
6852
6856
|
};
|
|
6853
|
-
var templateObject_1$Z, templateObject_2$
|
|
6857
|
+
var templateObject_1$Z, templateObject_2$E, templateObject_3$v;
|
|
6854
6858
|
|
|
6855
6859
|
var Filters = function (_a) {
|
|
6856
6860
|
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;
|
|
@@ -6987,7 +6991,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
6987
6991
|
};
|
|
6988
6992
|
|
|
6989
6993
|
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"])));
|
|
6990
|
-
var Container$I = newStyled.div(templateObject_2$
|
|
6994
|
+
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"])));
|
|
6991
6995
|
var FitGuarantee = function (_a) {
|
|
6992
6996
|
var _b;
|
|
6993
6997
|
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;
|
|
@@ -7005,10 +7009,10 @@ var FitGuarantee = function (_a) {
|
|
|
7005
7009
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7006
7010
|
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7007
7011
|
};
|
|
7008
|
-
var templateObject_1$Y, templateObject_2$
|
|
7012
|
+
var templateObject_1$Y, templateObject_2$D;
|
|
7009
7013
|
|
|
7010
7014
|
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"])));
|
|
7011
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7015
|
+
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; });
|
|
7012
7016
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7013
7017
|
border: 'none',
|
|
7014
7018
|
background: 'transparent',
|
|
@@ -7023,7 +7027,7 @@ var FitPredictor = function (_a) {
|
|
|
7023
7027
|
var theme = useTheme();
|
|
7024
7028
|
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));
|
|
7025
7029
|
};
|
|
7026
|
-
var templateObject_1$X, templateObject_2$
|
|
7030
|
+
var templateObject_1$X, templateObject_2$C;
|
|
7027
7031
|
|
|
7028
7032
|
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) {
|
|
7029
7033
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
@@ -11351,7 +11355,7 @@ var SliderNavigation = function (_a) {
|
|
|
11351
11355
|
};
|
|
11352
11356
|
|
|
11353
11357
|
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"])));
|
|
11354
|
-
var verticalStyles = css(templateObject_2$
|
|
11358
|
+
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"])));
|
|
11355
11359
|
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) {
|
|
11356
11360
|
var position = _a.position;
|
|
11357
11361
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11381,7 +11385,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11381
11385
|
arrowPadding: 1.625,
|
|
11382
11386
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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 && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11383
11387
|
};
|
|
11384
|
-
var templateObject_1$U, templateObject_2$
|
|
11388
|
+
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;
|
|
11385
11389
|
|
|
11386
11390
|
var propTypes = {exports: {}};
|
|
11387
11391
|
|
|
@@ -12979,7 +12983,7 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
12979
12983
|
return borderRadiusVariant &&
|
|
12980
12984
|
"\n border-radius: 40px;\n ";
|
|
12981
12985
|
});
|
|
12982
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
12986
|
+
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'); });
|
|
12983
12987
|
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"])));
|
|
12984
12988
|
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"])));
|
|
12985
12989
|
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"])));
|
|
@@ -12993,7 +12997,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12993
12997
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12994
12998
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("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), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12995
12999
|
};
|
|
12996
|
-
var templateObject_1$T, templateObject_2$
|
|
13000
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12997
13001
|
|
|
12998
13002
|
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"])));
|
|
12999
13003
|
var ProductGallery = function (_a) {
|
|
@@ -13071,25 +13075,6 @@ var PaypalButton = function (_a) {
|
|
|
13071
13075
|
};
|
|
13072
13076
|
var templateObject_1$Q;
|
|
13073
13077
|
|
|
13074
|
-
var useOnClickOutside = function (ref, handler) {
|
|
13075
|
-
React$2.useEffect(function () {
|
|
13076
|
-
var listener = function (event) {
|
|
13077
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
13078
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
13079
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
13080
|
-
return;
|
|
13081
|
-
}
|
|
13082
|
-
handler(event);
|
|
13083
|
-
};
|
|
13084
|
-
document.addEventListener('mousedown', listener);
|
|
13085
|
-
document.addEventListener('touchstart', listener);
|
|
13086
|
-
return function () {
|
|
13087
|
-
document.removeEventListener('mousedown', listener);
|
|
13088
|
-
document.removeEventListener('touchstart', listener);
|
|
13089
|
-
};
|
|
13090
|
-
}, [ref, handler]);
|
|
13091
|
-
};
|
|
13092
|
-
|
|
13093
13078
|
var Container$C = newStyled.div(function (props) { return ({
|
|
13094
13079
|
height: 'auto',
|
|
13095
13080
|
textAlign: 'center',
|
|
@@ -13144,7 +13129,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13144
13129
|
};
|
|
13145
13130
|
|
|
13146
13131
|
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'); });
|
|
13147
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13132
|
+
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'); });
|
|
13148
13133
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13149
13134
|
var titlePosition = _a.titlePosition;
|
|
13150
13135
|
return titlePosition == 'center' &&
|
|
@@ -13155,13 +13140,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13155
13140
|
var isMobile = useWindowDimensions().isMobile;
|
|
13156
13141
|
return (jsxRuntime.jsxs(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13157
13142
|
};
|
|
13158
|
-
var templateObject_1$P, templateObject_2$
|
|
13143
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$s;
|
|
13159
13144
|
|
|
13160
13145
|
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) {
|
|
13161
13146
|
var color = _a.color;
|
|
13162
13147
|
return color;
|
|
13163
13148
|
});
|
|
13164
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13149
|
+
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) {
|
|
13165
13150
|
var color = _a.color;
|
|
13166
13151
|
return color;
|
|
13167
13152
|
});
|
|
@@ -13170,7 +13155,7 @@ var InputLabel = function (_a) {
|
|
|
13170
13155
|
var theme = useTheme();
|
|
13171
13156
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13172
13157
|
};
|
|
13173
|
-
var templateObject_1$O, templateObject_2$
|
|
13158
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13174
13159
|
|
|
13175
13160
|
var containerByStatus = function (theme, status) {
|
|
13176
13161
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13183,7 +13168,7 @@ var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
13183
13168
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13184
13169
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13185
13170
|
});
|
|
13186
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13171
|
+
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"])));
|
|
13187
13172
|
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) {
|
|
13188
13173
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13189
13174
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13257,7 +13242,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13257
13242
|
return theme.component.input.lineHeight;
|
|
13258
13243
|
});
|
|
13259
13244
|
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"])));
|
|
13260
|
-
var templateObject_1$N, templateObject_2$
|
|
13245
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13261
13246
|
|
|
13262
13247
|
var BaseInput = function (_a) {
|
|
13263
13248
|
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"]);
|
|
@@ -13305,7 +13290,7 @@ var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13305
13290
|
var theme = _a.theme;
|
|
13306
13291
|
return theme.component.inputCustom.input.borderRadius;
|
|
13307
13292
|
});
|
|
13308
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13293
|
+
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) {
|
|
13309
13294
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13310
13295
|
return defaultRounded
|
|
13311
13296
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13322,19 +13307,19 @@ var Custom = function (_a) {
|
|
|
13322
13307
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13323
13308
|
return (jsxRuntime.jsx(Container$z, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13324
13309
|
};
|
|
13325
|
-
var templateObject_1$M, templateObject_2$
|
|
13310
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13326
13311
|
|
|
13327
13312
|
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) {
|
|
13328
13313
|
var size = _a.size;
|
|
13329
13314
|
return (size === 'small' ? '36px' : '');
|
|
13330
13315
|
});
|
|
13331
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13316
|
+
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"])));
|
|
13332
13317
|
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"])));
|
|
13333
13318
|
var Success = function (_a) {
|
|
13334
13319
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13335
13320
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13336
13321
|
};
|
|
13337
|
-
var templateObject_1$L, templateObject_2$
|
|
13322
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$q;
|
|
13338
13323
|
|
|
13339
13324
|
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) {
|
|
13340
13325
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -13356,13 +13341,13 @@ var BasePlusButton = function (_a) {
|
|
|
13356
13341
|
var templateObject_1$K;
|
|
13357
13342
|
|
|
13358
13343
|
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"])));
|
|
13359
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13344
|
+
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"])));
|
|
13360
13345
|
var BasePlusIcon = function (_a) {
|
|
13361
13346
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13362
13347
|
var theme = useTheme();
|
|
13363
13348
|
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13364
13349
|
};
|
|
13365
|
-
var templateObject_1$J, templateObject_2$
|
|
13350
|
+
var templateObject_1$J, templateObject_2$u;
|
|
13366
13351
|
|
|
13367
13352
|
var Input$3 = {
|
|
13368
13353
|
Simple: BaseInput,
|
|
@@ -13377,7 +13362,7 @@ var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
13377
13362
|
"\n border-radius: 40px;\n ";
|
|
13378
13363
|
});
|
|
13379
13364
|
// max-height: 31.875rem;
|
|
13380
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13365
|
+
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'); });
|
|
13381
13366
|
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"])));
|
|
13382
13367
|
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"])));
|
|
13383
13368
|
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"])));
|
|
@@ -13477,7 +13462,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13477
13462
|
};
|
|
13478
13463
|
}, [preventTouch, ref, touchStart]);
|
|
13479
13464
|
}
|
|
13480
|
-
var templateObject_1$I, templateObject_2$
|
|
13465
|
+
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;
|
|
13481
13466
|
|
|
13482
13467
|
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"])));
|
|
13483
13468
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -13756,14 +13741,14 @@ var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
13756
13741
|
return borderRadiusVariant &&
|
|
13757
13742
|
"\n border-radius: 40px;\n ";
|
|
13758
13743
|
});
|
|
13759
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13744
|
+
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'); });
|
|
13760
13745
|
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"])));
|
|
13761
13746
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13762
13747
|
var _b, _c;
|
|
13763
13748
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13764
13749
|
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
13765
13750
|
});
|
|
13766
|
-
var templateObject_1$G, templateObject_2$
|
|
13751
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o;
|
|
13767
13752
|
|
|
13768
13753
|
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"])));
|
|
13769
13754
|
var ArrowButton = function (_a) {
|
|
@@ -13784,7 +13769,7 @@ var SlideDots = function (_a) {
|
|
|
13784
13769
|
var templateObject_1$E;
|
|
13785
13770
|
|
|
13786
13771
|
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"])));
|
|
13787
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13772
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13788
13773
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13789
13774
|
var SlideNavigation = function (_a) {
|
|
13790
13775
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -13797,7 +13782,7 @@ var SlideNavigation = function (_a) {
|
|
|
13797
13782
|
onNavigate(selectedIndex + 1);
|
|
13798
13783
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13799
13784
|
};
|
|
13800
|
-
var templateObject_1$D, templateObject_2$
|
|
13785
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n;
|
|
13801
13786
|
|
|
13802
13787
|
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"])));
|
|
13803
13788
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -13956,7 +13941,7 @@ var Portal = function (_a) {
|
|
|
13956
13941
|
var visibleStyle = function (_a) {
|
|
13957
13942
|
var opened = _a.opened;
|
|
13958
13943
|
return opened
|
|
13959
|
-
? 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$
|
|
13944
|
+
? 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 "])));
|
|
13960
13945
|
};
|
|
13961
13946
|
var transformStyle = function (_a) {
|
|
13962
13947
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14004,7 +13989,7 @@ var useModal = function (id) {
|
|
|
14004
13989
|
close: close,
|
|
14005
13990
|
}); }, [close, open, opened]);
|
|
14006
13991
|
};
|
|
14007
|
-
var templateObject_1$B, templateObject_2$
|
|
13992
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14008
13993
|
|
|
14009
13994
|
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) {
|
|
14010
13995
|
var height = _a.height;
|
|
@@ -14084,13 +14069,13 @@ var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
14084
14069
|
var theme = _a.theme;
|
|
14085
14070
|
return theme.component.orderBar.backgroundColor;
|
|
14086
14071
|
});
|
|
14087
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14072
|
+
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; });
|
|
14088
14073
|
var OrderBar = function (_a) {
|
|
14089
14074
|
var message = _a.message, color = _a.color;
|
|
14090
14075
|
var theme = useTheme();
|
|
14091
14076
|
return (jsxRuntime.jsxs(Container$q, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14092
14077
|
};
|
|
14093
|
-
var templateObject_1$z, templateObject_2$
|
|
14078
|
+
var templateObject_1$z, templateObject_2$p;
|
|
14094
14079
|
|
|
14095
14080
|
var htmlReactParser = {exports: {}};
|
|
14096
14081
|
|
|
@@ -17872,7 +17857,7 @@ HTMLReactParser$1.attributesToProps;
|
|
|
17872
17857
|
HTMLReactParser$1.Element;
|
|
17873
17858
|
|
|
17874
17859
|
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"])));
|
|
17875
|
-
var Card = newStyled.div(templateObject_2$
|
|
17860
|
+
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"])));
|
|
17876
17861
|
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"])));
|
|
17877
17862
|
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"])));
|
|
17878
17863
|
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"])));
|
|
@@ -17908,10 +17893,10 @@ var PackCard = function (_a) {
|
|
|
17908
17893
|
currency: currencyCode || 'USD',
|
|
17909
17894
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17910
17895
|
};
|
|
17911
|
-
var templateObject_1$y, templateObject_2$
|
|
17896
|
+
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;
|
|
17912
17897
|
|
|
17913
17898
|
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"])));
|
|
17914
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
17899
|
+
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"])));
|
|
17915
17900
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17916
17901
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
17917
17902
|
}));
|
|
@@ -17932,7 +17917,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17932
17917
|
var background = _a.background;
|
|
17933
17918
|
return background || 'unset';
|
|
17934
17919
|
});
|
|
17935
|
-
var templateObject_1$x, templateObject_2$
|
|
17920
|
+
var templateObject_1$x, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
17936
17921
|
|
|
17937
17922
|
var Pagination = function (_a) {
|
|
17938
17923
|
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;
|
|
@@ -18019,7 +18004,7 @@ var templateObject_1$w;
|
|
|
18019
18004
|
|
|
18020
18005
|
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"])));
|
|
18021
18006
|
var IMAGE_WIDTH = '63px';
|
|
18022
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18007
|
+
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);
|
|
18023
18008
|
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({
|
|
18024
18009
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18025
18010
|
}), IMAGE_WIDTH);
|
|
@@ -18059,7 +18044,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18059
18044
|
var theme = useTheme();
|
|
18060
18045
|
return (jsxRuntime.jsxs(Container$m, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(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));
|
|
18061
18046
|
};
|
|
18062
|
-
var templateObject_1$v, templateObject_2$
|
|
18047
|
+
var templateObject_1$v, templateObject_2$m, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18063
18048
|
|
|
18064
18049
|
var P$1 = newStyled.p(function (_a) {
|
|
18065
18050
|
var color = _a.color;
|
|
@@ -18121,7 +18106,7 @@ var ProgressBar = function (_a) {
|
|
|
18121
18106
|
var templateObject_1$u;
|
|
18122
18107
|
|
|
18123
18108
|
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; });
|
|
18124
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18109
|
+
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"])));
|
|
18125
18110
|
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"])));
|
|
18126
18111
|
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)'; });
|
|
18127
18112
|
var QuantityPicker = function (_a) {
|
|
@@ -18148,7 +18133,7 @@ var QuantityPicker = function (_a) {
|
|
|
18148
18133
|
}, [value, clamp]);
|
|
18149
18134
|
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(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));
|
|
18150
18135
|
};
|
|
18151
|
-
var templateObject_1$t, templateObject_2$
|
|
18136
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
18152
18137
|
|
|
18153
18138
|
/* base styles & size variants */
|
|
18154
18139
|
var CustomRadioStyles$1 = {
|
|
@@ -18219,7 +18204,7 @@ var ContainerStyles$1 = {
|
|
|
18219
18204
|
|
|
18220
18205
|
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"])));
|
|
18221
18206
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18222
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18207
|
+
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) {
|
|
18223
18208
|
var disabled = _a.disabled;
|
|
18224
18209
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18225
18210
|
});
|
|
@@ -18237,7 +18222,7 @@ var RadioPrimary = function (_a) {
|
|
|
18237
18222
|
};
|
|
18238
18223
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18239
18224
|
};
|
|
18240
|
-
var templateObject_1$s, templateObject_2$
|
|
18225
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18241
18226
|
|
|
18242
18227
|
var RadioGroupInput = function (_a) {
|
|
18243
18228
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18318,7 +18303,7 @@ var ContainerStyles = {
|
|
|
18318
18303
|
|
|
18319
18304
|
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"])));
|
|
18320
18305
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18321
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18306
|
+
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) {
|
|
18322
18307
|
var disabled = _a.disabled;
|
|
18323
18308
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18324
18309
|
});
|
|
@@ -18342,7 +18327,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18342
18327
|
};
|
|
18343
18328
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(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));
|
|
18344
18329
|
};
|
|
18345
|
-
var templateObject_1$r, templateObject_2$
|
|
18330
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g;
|
|
18346
18331
|
|
|
18347
18332
|
var ClubRadioGroupInput = function (_a) {
|
|
18348
18333
|
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 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18364,7 +18349,7 @@ function formatDate(date) {
|
|
|
18364
18349
|
}
|
|
18365
18350
|
|
|
18366
18351
|
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"])));
|
|
18367
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18352
|
+
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"])));
|
|
18368
18353
|
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"])));
|
|
18369
18354
|
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"])));
|
|
18370
18355
|
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"])));
|
|
@@ -18404,12 +18389,12 @@ var Review$1 = function (_a) {
|
|
|
18404
18389
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18405
18390
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18406
18391
|
};
|
|
18407
|
-
var templateObject_1$q, templateObject_2$
|
|
18392
|
+
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;
|
|
18408
18393
|
|
|
18409
18394
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18410
18395
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18411
18396
|
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"])));
|
|
18412
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18397
|
+
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"])));
|
|
18413
18398
|
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"])));
|
|
18414
18399
|
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"])));
|
|
18415
18400
|
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"])));
|
|
@@ -18460,10 +18445,10 @@ var Review = function (_a) {
|
|
|
18460
18445
|
: description,
|
|
18461
18446
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18462
18447
|
};
|
|
18463
|
-
var templateObject_1$p, templateObject_2$
|
|
18448
|
+
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;
|
|
18464
18449
|
|
|
18465
18450
|
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"])));
|
|
18466
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18451
|
+
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"])));
|
|
18467
18452
|
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"])));
|
|
18468
18453
|
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"])));
|
|
18469
18454
|
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"])));
|
|
@@ -18478,17 +18463,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18478
18463
|
var theme = useTheme();
|
|
18479
18464
|
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18480
18465
|
};
|
|
18481
|
-
var templateObject_1$o, templateObject_2$
|
|
18466
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18482
18467
|
|
|
18483
18468
|
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"])));
|
|
18484
|
-
var Text = newStyled.p(templateObject_2$
|
|
18469
|
+
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; });
|
|
18485
18470
|
var ScrollToTop = function (_a) {
|
|
18486
18471
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18487
18472
|
var theme = useTheme();
|
|
18488
18473
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18489
18474
|
return (jsxRuntime.jsxs(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18490
18475
|
};
|
|
18491
|
-
var templateObject_1$n, templateObject_2$
|
|
18476
|
+
var templateObject_1$n, templateObject_2$f;
|
|
18492
18477
|
|
|
18493
18478
|
var Input = newStyled.input(function (props) { return ({
|
|
18494
18479
|
padding: props.theme.component.input.padding,
|
|
@@ -18566,7 +18551,7 @@ var Anchor = newStyled.a({
|
|
|
18566
18551
|
padding: 0,
|
|
18567
18552
|
textDecoration: 'none',
|
|
18568
18553
|
});
|
|
18569
|
-
var Container$b = newStyled.div(templateObject_2$
|
|
18554
|
+
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({
|
|
18570
18555
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18571
18556
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18572
18557
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18579,7 +18564,7 @@ var ResultsPanel = function (_a) {
|
|
|
18579
18564
|
var theme = useTheme();
|
|
18580
18565
|
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18581
18566
|
};
|
|
18582
|
-
var templateObject_1$l, templateObject_2$
|
|
18567
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18583
18568
|
|
|
18584
18569
|
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({
|
|
18585
18570
|
right: ['1rem', '7.75rem'],
|
|
@@ -18684,7 +18669,7 @@ var SearchBar = function (_a) {
|
|
|
18684
18669
|
};
|
|
18685
18670
|
|
|
18686
18671
|
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"])));
|
|
18687
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
18672
|
+
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"])));
|
|
18688
18673
|
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"])));
|
|
18689
18674
|
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"])));
|
|
18690
18675
|
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"])));
|
|
@@ -18694,7 +18679,7 @@ var SearchNavigation = function (_a) {
|
|
|
18694
18679
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18695
18680
|
}) }, void 0)] }, void 0));
|
|
18696
18681
|
};
|
|
18697
|
-
var templateObject_1$i, templateObject_2$
|
|
18682
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18698
18683
|
|
|
18699
18684
|
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) {
|
|
18700
18685
|
var alignCenter = _a.alignCenter;
|
|
@@ -18706,17 +18691,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
18706
18691
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18707
18692
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18708
18693
|
});
|
|
18709
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18694
|
+
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"])));
|
|
18710
18695
|
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"])));
|
|
18711
18696
|
var ShortBanner = function (_a) {
|
|
18712
18697
|
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;
|
|
18713
18698
|
var theme = useTheme();
|
|
18714
18699
|
return (jsxRuntime.jsxs(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18715
18700
|
};
|
|
18716
|
-
var templateObject_1$h, templateObject_2$
|
|
18701
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a;
|
|
18717
18702
|
|
|
18718
18703
|
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; });
|
|
18719
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
18704
|
+
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; });
|
|
18720
18705
|
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; });
|
|
18721
18706
|
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; });
|
|
18722
18707
|
var SizeChartTable = function (_a) {
|
|
@@ -18751,10 +18736,10 @@ var SizeChartTable = function (_a) {
|
|
|
18751
18736
|
backgroundColor: getCellColor(index, cell),
|
|
18752
18737
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18753
18738
|
};
|
|
18754
|
-
var templateObject_1$g, templateObject_2$
|
|
18739
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
18755
18740
|
|
|
18756
18741
|
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; });
|
|
18757
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
18742
|
+
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; });
|
|
18758
18743
|
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; });
|
|
18759
18744
|
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; });
|
|
18760
18745
|
var SizeTable = function (_a) {
|
|
@@ -18762,7 +18747,7 @@ var SizeTable = function (_a) {
|
|
|
18762
18747
|
var theme = useTheme();
|
|
18763
18748
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
18764
18749
|
};
|
|
18765
|
-
var templateObject_1$f, templateObject_2$
|
|
18750
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
18766
18751
|
|
|
18767
18752
|
var getStylesBySize$4 = function (size) {
|
|
18768
18753
|
switch (size) {
|
|
@@ -18808,25 +18793,29 @@ var TextButton = function (_a) {
|
|
|
18808
18793
|
var templateObject_1$e;
|
|
18809
18794
|
|
|
18810
18795
|
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"])));
|
|
18811
|
-
var P = newStyled.p(templateObject_2$
|
|
18796
|
+
var P = newStyled.p(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18812
18797
|
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"])));
|
|
18813
18798
|
var SizeFitGuide = function (_a) {
|
|
18814
|
-
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18815
|
-
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18799
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
18800
|
+
return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18816
18801
|
};
|
|
18817
|
-
var templateObject_1$d, templateObject_2$
|
|
18802
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7;
|
|
18818
18803
|
|
|
18819
18804
|
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) {
|
|
18820
18805
|
var inline = _a.inline;
|
|
18821
18806
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18822
18807
|
});
|
|
18808
|
+
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"])));
|
|
18809
|
+
var templateObject_1$c, templateObject_2$8;
|
|
18810
|
+
|
|
18823
18811
|
var SizeSelector = function (_a) {
|
|
18824
|
-
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;
|
|
18812
|
+
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;
|
|
18813
|
+
var isLarge = selectedValue.label === '3XL' || selectedValue.label === '4XL';
|
|
18825
18814
|
return (jsxs("div", __assign$1({ css: {
|
|
18826
18815
|
display: 'flex',
|
|
18827
18816
|
flexDirection: inline ? 'row' : 'column',
|
|
18828
18817
|
alignItems: inline ? 'center' : 'start',
|
|
18829
|
-
} }, { 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) {
|
|
18818
|
+
} }, { 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) {
|
|
18830
18819
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
18831
18820
|
return (jsx(SelectorSecondary, { css: {
|
|
18832
18821
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -18834,8 +18823,7 @@ var SizeSelector = function (_a) {
|
|
|
18834
18823
|
minWidth: '4rem',
|
|
18835
18824
|
}, size: exports.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));
|
|
18836
18825
|
}) }), void 0)] }), void 0));
|
|
18837
|
-
};
|
|
18838
|
-
var templateObject_1$c;
|
|
18826
|
+
};
|
|
18839
18827
|
|
|
18840
18828
|
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) {
|
|
18841
18829
|
var titleSize = _a.titleSize;
|
|
@@ -19251,7 +19239,7 @@ var TrackingProgress = function (_a) {
|
|
|
19251
19239
|
};
|
|
19252
19240
|
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19253
19241
|
|
|
19254
|
-
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) {
|
|
19242
|
+
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) {
|
|
19255
19243
|
var textPosition = _a.textPosition;
|
|
19256
19244
|
return textPosition;
|
|
19257
19245
|
}, function (_a) {
|