@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.esm.js
CHANGED
|
@@ -3121,7 +3121,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3121
3121
|
desktop: 1280,
|
|
3122
3122
|
};
|
|
3123
3123
|
|
|
3124
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3124
|
+
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) {
|
|
3125
3125
|
var height = _a.height;
|
|
3126
3126
|
return (height ? height : '1.5em');
|
|
3127
3127
|
}, function (_a) {
|
|
@@ -3148,9 +3148,9 @@ var SkeletonBox = function (_a) {
|
|
|
3148
3148
|
var theme = useTheme();
|
|
3149
3149
|
return jsx$1(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3150
3150
|
};
|
|
3151
|
-
var templateObject_1$
|
|
3151
|
+
var templateObject_1$1P;
|
|
3152
3152
|
|
|
3153
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3153
|
+
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) {
|
|
3154
3154
|
var width = _a.width;
|
|
3155
3155
|
return width;
|
|
3156
3156
|
}, function (_a) {
|
|
@@ -3166,7 +3166,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1N || (templateObject_1$1N
|
|
|
3166
3166
|
var opacity = _a.opacity;
|
|
3167
3167
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3168
3168
|
});
|
|
3169
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3169
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3170
3170
|
var width = _a.width;
|
|
3171
3171
|
return width;
|
|
3172
3172
|
}, function (_a) {
|
|
@@ -3179,7 +3179,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1a || (templateObject_2$
|
|
|
3179
3179
|
var opacity = _a.opacity;
|
|
3180
3180
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3181
3181
|
});
|
|
3182
|
-
var templateObject_1$
|
|
3182
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
3183
3183
|
|
|
3184
3184
|
/* eslint-disable no-undef */
|
|
3185
3185
|
var cache = new Map();
|
|
@@ -3257,7 +3257,7 @@ var getIconDimension = function (dimension) {
|
|
|
3257
3257
|
return "".concat(dimension, "rem");
|
|
3258
3258
|
};
|
|
3259
3259
|
|
|
3260
|
-
var
|
|
3260
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3261
3261
|
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"]);
|
|
3262
3262
|
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3263
3263
|
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
@@ -3295,7 +3295,8 @@ var IconFromExtSource = function (_a) {
|
|
|
3295
3295
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3296
3296
|
}
|
|
3297
3297
|
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3298
|
-
};
|
|
3298
|
+
};
|
|
3299
|
+
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3299
3300
|
|
|
3300
3301
|
/* eslint-disable react/forbid-component-props */
|
|
3301
3302
|
var UnmemoIcon = function (_a) {
|
|
@@ -4054,14 +4055,14 @@ function jsxs(type, props, key) {
|
|
|
4054
4055
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4055
4056
|
// `variants` styles that are consistent through all themes.
|
|
4056
4057
|
var TAGS = {
|
|
4057
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4058
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4058
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
4059
|
+
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4059
4060
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4060
4061
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4061
4062
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4062
4063
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4063
4064
|
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4064
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4065
|
+
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4065
4066
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4066
4067
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4067
4068
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4190,10 +4191,10 @@ var DEFAULTS = {
|
|
|
4190
4191
|
size: 'regular',
|
|
4191
4192
|
},
|
|
4192
4193
|
};
|
|
4193
|
-
var templateObject_1$
|
|
4194
|
+
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;
|
|
4194
4195
|
|
|
4195
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4196
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4196
|
+
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"])));
|
|
4197
|
+
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"])));
|
|
4197
4198
|
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"])));
|
|
4198
4199
|
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"])));
|
|
4199
4200
|
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"])));
|
|
@@ -4222,27 +4223,27 @@ var PackCard$1 = function (_a) {
|
|
|
4222
4223
|
currency: currencyCode || 'USD',
|
|
4223
4224
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4224
4225
|
};
|
|
4225
|
-
var templateObject_1$
|
|
4226
|
+
var templateObject_1$1M, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4226
4227
|
|
|
4227
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4228
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4228
|
+
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"])));
|
|
4229
|
+
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4229
4230
|
var DropList = function (_a) {
|
|
4230
4231
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4231
4232
|
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4232
4233
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4233
4234
|
}) }, void 0));
|
|
4234
4235
|
};
|
|
4235
|
-
var templateObject_1$
|
|
4236
|
+
var templateObject_1$1L, templateObject_2$18;
|
|
4236
4237
|
|
|
4237
4238
|
var DROPS_TOTAL = 5;
|
|
4238
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4239
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4239
|
+
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"])));
|
|
4240
|
+
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"])));
|
|
4240
4241
|
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"])));
|
|
4241
4242
|
var AbsorbencyLevel = function (_a) {
|
|
4242
4243
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4243
4244
|
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4244
4245
|
};
|
|
4245
|
-
var templateObject_1$
|
|
4246
|
+
var templateObject_1$1K, templateObject_2$17, templateObject_3$S;
|
|
4246
4247
|
|
|
4247
4248
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4248
4249
|
`),"","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(`
|
|
@@ -4318,7 +4319,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4318
4319
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4319
4320
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4320
4321
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4321
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4322
|
+
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"])));
|
|
4322
4323
|
var Accordion$1 = function (_a) {
|
|
4323
4324
|
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;
|
|
4324
4325
|
var theme = useTheme();
|
|
@@ -4342,9 +4343,9 @@ var Accordion$1 = function (_a) {
|
|
|
4342
4343
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4343
4344
|
} }), void 0));
|
|
4344
4345
|
};
|
|
4345
|
-
var templateObject_1$
|
|
4346
|
+
var templateObject_1$1J;
|
|
4346
4347
|
|
|
4347
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4348
|
+
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"])));
|
|
4348
4349
|
var AccordionOptions = function (_a) {
|
|
4349
4350
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4350
4351
|
var _b = useState({
|
|
@@ -4368,7 +4369,7 @@ var AccordionOptions = function (_a) {
|
|
|
4368
4369
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4369
4370
|
}) }, void 0));
|
|
4370
4371
|
};
|
|
4371
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1I;
|
|
4372
4373
|
|
|
4373
4374
|
var CardSectionType;
|
|
4374
4375
|
(function (CardSectionType) {
|
|
@@ -4530,14 +4531,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4530
4531
|
literal: true,
|
|
4531
4532
|
});
|
|
4532
4533
|
|
|
4533
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4534
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4534
|
+
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; });
|
|
4535
|
+
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"])));
|
|
4535
4536
|
var Error$1 = function (_a) {
|
|
4536
4537
|
var error = _a.error;
|
|
4537
4538
|
var theme = useTheme();
|
|
4538
4539
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4539
4540
|
};
|
|
4540
|
-
var templateObject_1$
|
|
4541
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
4541
4542
|
|
|
4542
4543
|
var BaseSelectButton = function (_a) {
|
|
4543
4544
|
var children = _a.children, as = _a.as;
|
|
@@ -4554,7 +4555,7 @@ function BaseSelectOption(_a) {
|
|
|
4554
4555
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4555
4556
|
}
|
|
4556
4557
|
|
|
4557
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4558
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4558
4559
|
function BaseSelect(_a) {
|
|
4559
4560
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4560
4561
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4564,7 +4565,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4564
4565
|
Options: BaseSelectOptions,
|
|
4565
4566
|
Option: BaseSelectOption,
|
|
4566
4567
|
});
|
|
4567
|
-
var templateObject_1$
|
|
4568
|
+
var templateObject_1$1G;
|
|
4568
4569
|
|
|
4569
4570
|
var CustomButton = newStyled.button(function (_a) {
|
|
4570
4571
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4602,26 +4603,28 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4602
4603
|
},
|
|
4603
4604
|
});
|
|
4604
4605
|
});
|
|
4606
|
+
//TODO Remove this when we find the real solution
|
|
4607
|
+
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) {
|
|
4608
|
+
var open = _a.open;
|
|
4609
|
+
return open &&
|
|
4610
|
+
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
4611
|
+
});
|
|
4605
4612
|
var BaseDropdownButton = function (_a) {
|
|
4606
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4613
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, label = _a.label, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4607
4614
|
var theme = useTheme();
|
|
4608
4615
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: Fragment$1 }, { children: function (_a) {
|
|
4609
4616
|
var open = _a.open;
|
|
4610
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [
|
|
4617
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [label ? (jsxs("div", __assign$1({ css: {
|
|
4618
|
+
display: 'flex',
|
|
4619
|
+
flexDirection: 'column',
|
|
4620
|
+
alignItems: 'flex-start',
|
|
4621
|
+
whiteSpace: 'nowrap',
|
|
4622
|
+
overflowX: 'hidden',
|
|
4623
|
+
} }, { 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));
|
|
4611
4624
|
} }), void 0));
|
|
4612
4625
|
};
|
|
4613
|
-
var
|
|
4614
|
-
|
|
4615
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4616
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4617
|
-
display: 'flex',
|
|
4618
|
-
flexDirection: 'column',
|
|
4619
|
-
alignItems: 'flex-start',
|
|
4620
|
-
whiteSpace: 'nowrap',
|
|
4621
|
-
overflowX: 'hidden',
|
|
4622
|
-
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
|
|
4623
|
-
};
|
|
4624
|
-
};
|
|
4626
|
+
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4627
|
+
var templateObject_1$1F;
|
|
4625
4628
|
|
|
4626
4629
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4627
4630
|
var theme = _a.theme;
|
|
@@ -4799,7 +4802,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4799
4802
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4800
4803
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4801
4804
|
]; });
|
|
4802
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4805
|
+
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) {
|
|
4803
4806
|
var disabled = _a.disabled;
|
|
4804
4807
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4805
4808
|
});
|
|
@@ -4815,7 +4818,7 @@ var Checkbox = function (_a) {
|
|
|
4815
4818
|
};
|
|
4816
4819
|
return (jsxs$1(Container$12, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4817
4820
|
};
|
|
4818
|
-
var templateObject_1$1E, templateObject_2$
|
|
4821
|
+
var templateObject_1$1E, templateObject_2$15;
|
|
4819
4822
|
|
|
4820
4823
|
var CustomOption = newStyled.li(function (_a) {
|
|
4821
4824
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4859,13 +4862,13 @@ function BaseDropdown(_a) {
|
|
|
4859
4862
|
}, disabled: disabled }, { children: children }), void 0));
|
|
4860
4863
|
}
|
|
4861
4864
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
4862
|
-
Button: BaseDropdownButton,
|
|
4865
|
+
Button: BaseDropdownButton$1,
|
|
4863
4866
|
Options: BaseDropdownOptions,
|
|
4864
4867
|
Option: BaseDropdownOption,
|
|
4865
4868
|
});
|
|
4866
4869
|
|
|
4867
4870
|
var Container$11 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject([""], [""])));
|
|
4868
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4871
|
+
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"])));
|
|
4869
4872
|
function SimpleDropdown(_a) {
|
|
4870
4873
|
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;
|
|
4871
4874
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4894,11 +4897,10 @@ function SimpleDropdown(_a) {
|
|
|
4894
4897
|
}
|
|
4895
4898
|
setSelectedValue(value);
|
|
4896
4899
|
}, [value, options, initialValue]);
|
|
4897
|
-
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4898
4900
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4899
|
-
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4901
|
+
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4900
4902
|
}
|
|
4901
|
-
var templateObject_1$1D, templateObject_2$
|
|
4903
|
+
var templateObject_1$1D, templateObject_2$14;
|
|
4902
4904
|
|
|
4903
4905
|
/* base styles & size variants */
|
|
4904
4906
|
var CustomRadioStyles$2 = {
|
|
@@ -4965,7 +4967,7 @@ var ContainerStyles$2 = {
|
|
|
4965
4967
|
|
|
4966
4968
|
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"])));
|
|
4967
4969
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4968
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4970
|
+
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) {
|
|
4969
4971
|
var disabled = _a.disabled;
|
|
4970
4972
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4971
4973
|
});
|
|
@@ -4989,12 +4991,7 @@ var RadioInput = function (_a) {
|
|
|
4989
4991
|
};
|
|
4990
4992
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
4991
4993
|
};
|
|
4992
|
-
var templateObject_1$1C, templateObject_2$
|
|
4993
|
-
|
|
4994
|
-
var TooltipArrow = function (_a) {
|
|
4995
|
-
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
4996
|
-
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
4997
|
-
};
|
|
4994
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R;
|
|
4998
4995
|
|
|
4999
4996
|
var getWrapperFlexDirection = function (position) {
|
|
5000
4997
|
switch (position) {
|
|
@@ -5020,40 +5017,16 @@ var getContainerFlexDirection = function (position) {
|
|
|
5020
5017
|
return 'row-reverse';
|
|
5021
5018
|
}
|
|
5022
5019
|
};
|
|
5023
|
-
var
|
|
5020
|
+
var getArrowStyles = function (position, borderColor, backgroundColor) {
|
|
5024
5021
|
switch (position) {
|
|
5025
5022
|
case ComponentPosition.Top:
|
|
5026
|
-
return '
|
|
5023
|
+
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 }");
|
|
5027
5024
|
case ComponentPosition.Bottom:
|
|
5028
|
-
return '
|
|
5025
|
+
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 }");
|
|
5029
5026
|
case ComponentPosition.Left:
|
|
5030
|
-
return '
|
|
5027
|
+
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 }");
|
|
5031
5028
|
case ComponentPosition.Right:
|
|
5032
|
-
return '
|
|
5033
|
-
}
|
|
5034
|
-
};
|
|
5035
|
-
var getArrowContainerPadding = function (position) {
|
|
5036
|
-
switch (position) {
|
|
5037
|
-
case ComponentPosition.Top:
|
|
5038
|
-
return '0 1.25rem';
|
|
5039
|
-
case ComponentPosition.Bottom:
|
|
5040
|
-
return '0 1.25rem';
|
|
5041
|
-
case ComponentPosition.Left:
|
|
5042
|
-
return '0 0 0.625rem 0';
|
|
5043
|
-
case ComponentPosition.Right:
|
|
5044
|
-
return '0 0 0.625rem 0';
|
|
5045
|
-
}
|
|
5046
|
-
};
|
|
5047
|
-
var getArrowContainerMargin = function (position) {
|
|
5048
|
-
switch (position) {
|
|
5049
|
-
case ComponentPosition.Top:
|
|
5050
|
-
return '-1px 0 0 0';
|
|
5051
|
-
case ComponentPosition.Bottom:
|
|
5052
|
-
return '0 0 -1px 0';
|
|
5053
|
-
case ComponentPosition.Left:
|
|
5054
|
-
return '0';
|
|
5055
|
-
case ComponentPosition.Right:
|
|
5056
|
-
return '0';
|
|
5029
|
+
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 }");
|
|
5057
5030
|
}
|
|
5058
5031
|
};
|
|
5059
5032
|
var getTooltipAlignItems = function (position, align) {
|
|
@@ -5069,48 +5042,51 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5069
5042
|
}
|
|
5070
5043
|
};
|
|
5071
5044
|
|
|
5072
|
-
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:
|
|
5045
|
+
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) {
|
|
5073
5046
|
var position = _a.position;
|
|
5074
5047
|
return getWrapperFlexDirection(position);
|
|
5048
|
+
}, function (_a) {
|
|
5049
|
+
var disableHover = _a.disableHover;
|
|
5050
|
+
return (disableHover ? 'hidden' : 'visible');
|
|
5051
|
+
}, function (_a) {
|
|
5052
|
+
var disableHover = _a.disableHover;
|
|
5053
|
+
return (disableHover ? 0 : 1);
|
|
5075
5054
|
});
|
|
5076
|
-
var TooltipContainer = newStyled.div(function (_a) {
|
|
5077
|
-
var position = _a.position
|
|
5078
|
-
return (
|
|
5079
|
-
|
|
5080
|
-
|
|
5081
|
-
|
|
5082
|
-
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5055
|
+
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) {
|
|
5056
|
+
var position = _a.position;
|
|
5057
|
+
return getContainerFlexDirection(position);
|
|
5058
|
+
}, function (_a) {
|
|
5059
|
+
var position = _a.position, align = _a.align;
|
|
5060
|
+
return getTooltipAlignItems(position, align);
|
|
5061
|
+
}, function (_a) {
|
|
5062
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5063
|
+
return getTooltipMargin(position, ComponentPosition.Right, "".concat(childrenWidth, "px"));
|
|
5064
|
+
}, function (_a) {
|
|
5065
|
+
var position = _a.position, childrenWidth = _a.childrenWidth;
|
|
5066
|
+
return getTooltipMargin(position, ComponentPosition.Left, "".concat(childrenWidth, "px"));
|
|
5067
|
+
}, function (_a) {
|
|
5068
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5069
|
+
return getTooltipMargin(position, ComponentPosition.Top, "-".concat(tooltipHeight, "px"));
|
|
5070
|
+
}, function (_a) {
|
|
5071
|
+
var position = _a.position, tooltipHeight = _a.tooltipHeight;
|
|
5072
|
+
return getTooltipMargin(position, ComponentPosition.Bottom, "-".concat(tooltipHeight, "px"));
|
|
5073
|
+
}, function (_a) {
|
|
5074
|
+
var maxWidth = _a.maxWidth;
|
|
5075
|
+
return (maxWidth ? maxWidth : 'none');
|
|
5076
|
+
}, function (_a) {
|
|
5077
|
+
var position = _a.position, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, withArrow = _a.withArrow;
|
|
5078
|
+
return withArrow && getArrowStyles(position, borderColor, backgroundColor);
|
|
5093
5079
|
});
|
|
5094
5080
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5095
5081
|
return actual === expected ? margin : '0';
|
|
5096
5082
|
};
|
|
5097
|
-
var ContentWrapper = newStyled.div(
|
|
5083
|
+
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) {
|
|
5098
5084
|
var borderColor = _a.borderColor;
|
|
5099
5085
|
return borderColor;
|
|
5100
5086
|
}, function (_a) {
|
|
5101
5087
|
var backgroundColor = _a.backgroundColor;
|
|
5102
5088
|
return backgroundColor;
|
|
5103
5089
|
});
|
|
5104
|
-
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) {
|
|
5105
|
-
var position = _a.position;
|
|
5106
|
-
return getArrowRotation(position);
|
|
5107
|
-
}, function (_a) {
|
|
5108
|
-
var position = _a.position;
|
|
5109
|
-
return getArrowContainerPadding(position);
|
|
5110
|
-
}, function (_a) {
|
|
5111
|
-
var position = _a.position;
|
|
5112
|
-
return getArrowContainerMargin(position);
|
|
5113
|
-
});
|
|
5114
5090
|
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) {
|
|
5115
5091
|
var color = _a.color;
|
|
5116
5092
|
return color;
|
|
@@ -5121,15 +5097,91 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5121
5097
|
return color;
|
|
5122
5098
|
});
|
|
5123
5099
|
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"])));
|
|
5124
|
-
var
|
|
5100
|
+
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"])));
|
|
5101
|
+
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;
|
|
5102
|
+
|
|
5103
|
+
var useOnClickOutside = function (ref, handler) {
|
|
5104
|
+
useEffect(function () {
|
|
5105
|
+
var listener = function (event) {
|
|
5106
|
+
// Do nothing if clicking ref's element or descendent elements
|
|
5107
|
+
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
5108
|
+
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
5109
|
+
return;
|
|
5110
|
+
}
|
|
5111
|
+
handler(event);
|
|
5112
|
+
};
|
|
5113
|
+
document.addEventListener('mousedown', listener);
|
|
5114
|
+
document.addEventListener('touchstart', listener);
|
|
5115
|
+
return function () {
|
|
5116
|
+
document.removeEventListener('mousedown', listener);
|
|
5117
|
+
document.removeEventListener('touchstart', listener);
|
|
5118
|
+
};
|
|
5119
|
+
}, [ref, handler]);
|
|
5120
|
+
};
|
|
5121
|
+
|
|
5122
|
+
function getWindowDimensions() {
|
|
5123
|
+
if (typeof window === 'undefined')
|
|
5124
|
+
return { width: 0, height: 0 };
|
|
5125
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
5126
|
+
return {
|
|
5127
|
+
width: width,
|
|
5128
|
+
height: height,
|
|
5129
|
+
};
|
|
5130
|
+
}
|
|
5131
|
+
var getViewport = function (breakpoints, width) {
|
|
5132
|
+
if (width <= breakpoints.mobile)
|
|
5133
|
+
return Viewports.mobile;
|
|
5134
|
+
if (width <= breakpoints.tablet)
|
|
5135
|
+
return Viewports.tablet;
|
|
5136
|
+
if (width <= breakpoints.desktop)
|
|
5137
|
+
return Viewports.desktop;
|
|
5138
|
+
return Viewports.desktopLarge;
|
|
5139
|
+
};
|
|
5140
|
+
var useWindowDimensions = function (breakpoints, _a) {
|
|
5141
|
+
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5142
|
+
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5143
|
+
var _c = useState(function () {
|
|
5144
|
+
var dimension = getWindowDimensions();
|
|
5145
|
+
return {
|
|
5146
|
+
windowDimensions: dimension,
|
|
5147
|
+
viewport: getViewport(breakpoints, dimension.width),
|
|
5148
|
+
};
|
|
5149
|
+
}), state = _c[0], setState = _c[1];
|
|
5150
|
+
useEffect(function () {
|
|
5151
|
+
function handleResize() {
|
|
5152
|
+
var newDimension = getWindowDimensions();
|
|
5153
|
+
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5154
|
+
setState(function (oldState) {
|
|
5155
|
+
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5156
|
+
return {
|
|
5157
|
+
windowDimensions: newDimension,
|
|
5158
|
+
viewport: newViewport,
|
|
5159
|
+
};
|
|
5160
|
+
}
|
|
5161
|
+
return oldState;
|
|
5162
|
+
});
|
|
5163
|
+
}
|
|
5164
|
+
handleResize();
|
|
5165
|
+
window.addEventListener('resize', handleResize);
|
|
5166
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5167
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5168
|
+
}, [shouldListenChanges]);
|
|
5169
|
+
var isMobile = state.viewport === Viewports.mobile;
|
|
5170
|
+
var isTablet = state.viewport === Viewports.tablet;
|
|
5171
|
+
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5172
|
+
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5173
|
+
};
|
|
5125
5174
|
|
|
5126
5175
|
var Tooltip = function (_a) {
|
|
5127
|
-
var
|
|
5176
|
+
var _b;
|
|
5177
|
+
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;
|
|
5128
5178
|
var theme = useTheme();
|
|
5129
|
-
var
|
|
5179
|
+
var _e = useState(0), childrenWidth = _e[0], setChildrenWidth = _e[1];
|
|
5130
5180
|
var childrenRef = createRef();
|
|
5131
|
-
var
|
|
5181
|
+
var _f = useState(0), tooltipHeight = _f[0], setTooltipHeight = _f[1];
|
|
5132
5182
|
var tooltipRef = createRef();
|
|
5183
|
+
var _g = useState(false), closeTooltip = _g[0], setCloseTooltip = _g[1];
|
|
5184
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
5133
5185
|
useLayoutEffect(function () {
|
|
5134
5186
|
var ref = childrenRef.current;
|
|
5135
5187
|
setChildrenWidth((ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
|
|
@@ -5138,12 +5190,12 @@ var Tooltip = function (_a) {
|
|
|
5138
5190
|
var ref = tooltipRef.current;
|
|
5139
5191
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5140
5192
|
}, [tooltipRef]);
|
|
5141
|
-
return (jsxs$1(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
5193
|
+
return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip === true && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsx$1(CloseToolTip, __assign$1({ onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: 0.5, height: 0.5, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
5142
5194
|
testId: 'HeaderIcon',
|
|
5143
5195
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5144
5196
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5145
5197
|
: theme.colors.pallete.secondary.color,
|
|
5146
|
-
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0)
|
|
5198
|
+
}) }, void 0)), jsx$1(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsx$1(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
5147
5199
|
};
|
|
5148
5200
|
|
|
5149
5201
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5211,7 +5263,7 @@ var Container$$ = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __
|
|
|
5211
5263
|
var size = _a.size;
|
|
5212
5264
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5213
5265
|
});
|
|
5214
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5266
|
+
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) {
|
|
5215
5267
|
var textColor = _a.textColor;
|
|
5216
5268
|
return textColor;
|
|
5217
5269
|
}, function (_a) {
|
|
@@ -5228,60 +5280,7 @@ var DiscountTag = function (_a) {
|
|
|
5228
5280
|
var theme = useTheme();
|
|
5229
5281
|
return (jsx$1(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5230
5282
|
};
|
|
5231
|
-
var templateObject_1$1A, templateObject_2$
|
|
5232
|
-
|
|
5233
|
-
function getWindowDimensions() {
|
|
5234
|
-
if (typeof window === 'undefined')
|
|
5235
|
-
return { width: 0, height: 0 };
|
|
5236
|
-
var width = window.innerWidth, height = window.innerHeight;
|
|
5237
|
-
return {
|
|
5238
|
-
width: width,
|
|
5239
|
-
height: height,
|
|
5240
|
-
};
|
|
5241
|
-
}
|
|
5242
|
-
var getViewport = function (breakpoints, width) {
|
|
5243
|
-
if (width <= breakpoints.mobile)
|
|
5244
|
-
return Viewports.mobile;
|
|
5245
|
-
if (width <= breakpoints.tablet)
|
|
5246
|
-
return Viewports.tablet;
|
|
5247
|
-
if (width <= breakpoints.desktop)
|
|
5248
|
-
return Viewports.desktop;
|
|
5249
|
-
return Viewports.desktopLarge;
|
|
5250
|
-
};
|
|
5251
|
-
var useWindowDimensions = function (breakpoints, _a) {
|
|
5252
|
-
if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
|
|
5253
|
-
var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
|
|
5254
|
-
var _c = useState(function () {
|
|
5255
|
-
var dimension = getWindowDimensions();
|
|
5256
|
-
return {
|
|
5257
|
-
windowDimensions: dimension,
|
|
5258
|
-
viewport: getViewport(breakpoints, dimension.width),
|
|
5259
|
-
};
|
|
5260
|
-
}), state = _c[0], setState = _c[1];
|
|
5261
|
-
useEffect(function () {
|
|
5262
|
-
function handleResize() {
|
|
5263
|
-
var newDimension = getWindowDimensions();
|
|
5264
|
-
var newViewport = getViewport(breakpoints, newDimension.width);
|
|
5265
|
-
setState(function (oldState) {
|
|
5266
|
-
if (shouldListenChanges || oldState.viewport !== newViewport) {
|
|
5267
|
-
return {
|
|
5268
|
-
windowDimensions: newDimension,
|
|
5269
|
-
viewport: newViewport,
|
|
5270
|
-
};
|
|
5271
|
-
}
|
|
5272
|
-
return oldState;
|
|
5273
|
-
});
|
|
5274
|
-
}
|
|
5275
|
-
handleResize();
|
|
5276
|
-
window.addEventListener('resize', handleResize);
|
|
5277
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5278
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
5279
|
-
}, [shouldListenChanges]);
|
|
5280
|
-
var isMobile = state.viewport === Viewports.mobile;
|
|
5281
|
-
var isTablet = state.viewport === Viewports.tablet;
|
|
5282
|
-
var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
|
|
5283
|
-
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5284
|
-
};
|
|
5283
|
+
var templateObject_1$1A, templateObject_2$11;
|
|
5285
5284
|
|
|
5286
5285
|
var getStylesBySize$c = function (size, theme) {
|
|
5287
5286
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5324,7 +5323,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5324
5323
|
}
|
|
5325
5324
|
};
|
|
5326
5325
|
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"])));
|
|
5327
|
-
var Price = newStyled.p(templateObject_2
|
|
5326
|
+
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) {
|
|
5328
5327
|
var weight = _a.weight;
|
|
5329
5328
|
return (weight ? weight : '400');
|
|
5330
5329
|
}, function (_a) {
|
|
@@ -5381,7 +5380,7 @@ var PriceLabel = function (_a) {
|
|
|
5381
5380
|
};
|
|
5382
5381
|
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5383
5382
|
};
|
|
5384
|
-
var templateObject_1$1z, templateObject_2
|
|
5383
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5385
5384
|
|
|
5386
5385
|
var getStylesBySize$b = function (size) {
|
|
5387
5386
|
switch (size) {
|
|
@@ -5433,7 +5432,7 @@ var Container$Z = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
5433
5432
|
var size = _a.size;
|
|
5434
5433
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5435
5434
|
});
|
|
5436
|
-
var H3$2 = newStyled.h3(templateObject_2
|
|
5435
|
+
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) {
|
|
5437
5436
|
var textColor = _a.textColor;
|
|
5438
5437
|
return textColor;
|
|
5439
5438
|
}, function (_a) {
|
|
@@ -5450,7 +5449,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5450
5449
|
var theme = useTheme();
|
|
5451
5450
|
return (jsx$1(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5452
5451
|
};
|
|
5453
|
-
var templateObject_1$1y, templateObject_2
|
|
5452
|
+
var templateObject_1$1y, templateObject_2$$;
|
|
5454
5453
|
|
|
5455
5454
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5456
5455
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5521,7 +5520,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5521
5520
|
var templateObject_1$1x;
|
|
5522
5521
|
|
|
5523
5522
|
var FlexContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5524
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5523
|
+
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) {
|
|
5525
5524
|
var selected = _a.selected, theme = _a.theme;
|
|
5526
5525
|
return selected
|
|
5527
5526
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5558,7 +5557,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5558
5557
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5559
5558
|
});
|
|
5560
5559
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5561
|
-
var templateObject_1$1w, templateObject_2$
|
|
5560
|
+
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;
|
|
5562
5561
|
|
|
5563
5562
|
var radioIds = {
|
|
5564
5563
|
oneTime: {
|
|
@@ -5634,12 +5633,12 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5634
5633
|
_a$2);
|
|
5635
5634
|
|
|
5636
5635
|
var CustomerDetails = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""])));
|
|
5637
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5636
|
+
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"])));
|
|
5638
5637
|
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"])));
|
|
5639
5638
|
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"])));
|
|
5640
5639
|
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"])));
|
|
5641
5640
|
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"])));
|
|
5642
|
-
var templateObject_1$1u, templateObject_2$
|
|
5641
|
+
var templateObject_1$1u, templateObject_2$Z, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5643
5642
|
|
|
5644
5643
|
var NameWithStars = function (_a) {
|
|
5645
5644
|
var name = _a.name, size = _a.size;
|
|
@@ -5658,7 +5657,7 @@ var ResultFeedback = function (_a) {
|
|
|
5658
5657
|
};
|
|
5659
5658
|
|
|
5660
5659
|
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; });
|
|
5661
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5660
|
+
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"])));
|
|
5662
5661
|
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; });
|
|
5663
5662
|
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) {
|
|
5664
5663
|
var theme = _a.theme;
|
|
@@ -5670,7 +5669,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5670
5669
|
var theme = _a.theme, size = _a.size;
|
|
5671
5670
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5672
5671
|
});
|
|
5673
|
-
var templateObject_1$1t, templateObject_2$
|
|
5672
|
+
var templateObject_1$1t, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5674
5673
|
|
|
5675
5674
|
/* base styles & size variants */
|
|
5676
5675
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5793,13 +5792,13 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5793
5792
|
var templateObject_1$1q;
|
|
5794
5793
|
|
|
5795
5794
|
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"])));
|
|
5796
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5795
|
+
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"])));
|
|
5797
5796
|
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) {
|
|
5798
5797
|
var color = _a.color;
|
|
5799
5798
|
return color;
|
|
5800
5799
|
});
|
|
5801
5800
|
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"])));
|
|
5802
|
-
var templateObject_1$1p, templateObject_2$
|
|
5801
|
+
var templateObject_1$1p, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5803
5802
|
|
|
5804
5803
|
var Minimalistic = function (_a) {
|
|
5805
5804
|
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;
|
|
@@ -5808,7 +5807,7 @@ var Minimalistic = function (_a) {
|
|
|
5808
5807
|
};
|
|
5809
5808
|
|
|
5810
5809
|
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"])));
|
|
5811
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5810
|
+
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; });
|
|
5812
5811
|
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; });
|
|
5813
5812
|
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"])));
|
|
5814
5813
|
var Simple = function (_a) {
|
|
@@ -5816,7 +5815,7 @@ var Simple = function (_a) {
|
|
|
5816
5815
|
var theme = useTheme();
|
|
5817
5816
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5818
5817
|
};
|
|
5819
|
-
var templateObject_1$1o, templateObject_2$
|
|
5818
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
5820
5819
|
|
|
5821
5820
|
var Bundle = {
|
|
5822
5821
|
Minimalistic: Minimalistic,
|
|
@@ -5827,7 +5826,7 @@ var Container$U = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __
|
|
|
5827
5826
|
var displayBNPL = _a.displayBNPL;
|
|
5828
5827
|
return (displayBNPL ? 'flex' : 'none');
|
|
5829
5828
|
});
|
|
5830
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5829
|
+
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"])));
|
|
5831
5830
|
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"])));
|
|
5832
5831
|
var BuyNowPayLater = function (_a) {
|
|
5833
5832
|
var _b;
|
|
@@ -5840,7 +5839,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5840
5839
|
}
|
|
5841
5840
|
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5842
5841
|
};
|
|
5843
|
-
var templateObject_1$1n, templateObject_2$
|
|
5842
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$J;
|
|
5844
5843
|
|
|
5845
5844
|
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; });
|
|
5846
5845
|
var Title$5 = function (_a) {
|
|
@@ -5900,7 +5899,7 @@ var CartProductItem = {
|
|
|
5900
5899
|
};
|
|
5901
5900
|
|
|
5902
5901
|
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"])));
|
|
5903
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5902
|
+
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"])));
|
|
5904
5903
|
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"])));
|
|
5905
5904
|
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"])));
|
|
5906
5905
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -5912,7 +5911,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5912
5911
|
var isMobile = useWindowDimensions().isMobile;
|
|
5913
5912
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5914
5913
|
};
|
|
5915
|
-
var templateObject_1$1h, templateObject_2$
|
|
5914
|
+
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;
|
|
5916
5915
|
|
|
5917
5916
|
var Spacing = function (_a) {
|
|
5918
5917
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5921,7 +5920,7 @@ var Spacing = function (_a) {
|
|
|
5921
5920
|
};
|
|
5922
5921
|
|
|
5923
5922
|
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"])));
|
|
5924
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
5923
|
+
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"])));
|
|
5925
5924
|
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"])));
|
|
5926
5925
|
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) {
|
|
5927
5926
|
var index = _a.index;
|
|
@@ -5934,7 +5933,7 @@ var StrengthBars = function (_a) {
|
|
|
5934
5933
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5935
5934
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5936
5935
|
};
|
|
5937
|
-
var templateObject_1$1g, templateObject_2$
|
|
5936
|
+
var templateObject_1$1g, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
5938
5937
|
|
|
5939
5938
|
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"])));
|
|
5940
5939
|
var templateObject_1$1f;
|
|
@@ -6049,7 +6048,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6049
6048
|
});
|
|
6050
6049
|
});
|
|
6051
6050
|
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"])));
|
|
6052
|
-
var Container$O = newStyled.a(templateObject_2$
|
|
6051
|
+
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"])));
|
|
6053
6052
|
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"])));
|
|
6054
6053
|
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; });
|
|
6055
6054
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6137,7 +6136,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6137
6136
|
};
|
|
6138
6137
|
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));
|
|
6139
6138
|
};
|
|
6140
|
-
var templateObject_1$1c, templateObject_2$
|
|
6139
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6141
6140
|
|
|
6142
6141
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6143
6142
|
var width = _a.width, height = _a.height;
|
|
@@ -6148,7 +6147,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6148
6147
|
});
|
|
6149
6148
|
});
|
|
6150
6149
|
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; });
|
|
6151
|
-
var Container$N = newStyled.a(templateObject_2$
|
|
6150
|
+
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"])));
|
|
6152
6151
|
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"])));
|
|
6153
6152
|
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; });
|
|
6154
6153
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6235,7 +6234,7 @@ var ProductItemTK = function (_a) {
|
|
|
6235
6234
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6236
6235
|
} }, { 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));
|
|
6237
6236
|
};
|
|
6238
|
-
var templateObject_1$1b, templateObject_2$
|
|
6237
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$i, templateObject_7$c;
|
|
6239
6238
|
|
|
6240
6239
|
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"])));
|
|
6241
6240
|
function withProductGrid(ProductItemComponent, data) {
|
|
@@ -6295,7 +6294,7 @@ var OutOfStock = function (_a) {
|
|
|
6295
6294
|
};
|
|
6296
6295
|
|
|
6297
6296
|
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"])));
|
|
6298
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6297
|
+
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6299
6298
|
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"])));
|
|
6300
6299
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6301
6300
|
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"])));
|
|
@@ -6316,7 +6315,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6316
6315
|
Option: Option,
|
|
6317
6316
|
OptionsContainer: OptionsContainer,
|
|
6318
6317
|
});
|
|
6319
|
-
var templateObject_1$19, templateObject_2$
|
|
6318
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$j;
|
|
6320
6319
|
|
|
6321
6320
|
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) {
|
|
6322
6321
|
var borderColor = _a.borderColor;
|
|
@@ -6325,14 +6324,14 @@ var Container$L = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __
|
|
|
6325
6324
|
var noStock = _a.noStock;
|
|
6326
6325
|
return (noStock ? '0.4' : '1');
|
|
6327
6326
|
});
|
|
6328
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6327
|
+
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"])));
|
|
6329
6328
|
var PatternSelector = function (_a) {
|
|
6330
6329
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6331
6330
|
var theme = useTheme();
|
|
6332
6331
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6333
6332
|
return (jsx$1(Container$L, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6334
6333
|
};
|
|
6335
|
-
var templateObject_1$18, templateObject_2$
|
|
6334
|
+
var templateObject_1$18, templateObject_2$P;
|
|
6336
6335
|
|
|
6337
6336
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6338
6337
|
if (options == null || options.length === 0) {
|
|
@@ -6391,8 +6390,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6391
6390
|
};
|
|
6392
6391
|
|
|
6393
6392
|
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'); });
|
|
6394
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6395
|
-
var Row$
|
|
6393
|
+
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"])));
|
|
6394
|
+
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) {
|
|
6396
6395
|
return props.rightToLeft &&
|
|
6397
6396
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6398
6397
|
});
|
|
@@ -6402,9 +6401,9 @@ var FreeShipping = newStyled.span(templateObject_6$h || (templateObject_6$h = __
|
|
|
6402
6401
|
var CrossSellCheckbox = function (_a) {
|
|
6403
6402
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6404
6403
|
var theme = useTheme();
|
|
6405
|
-
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$
|
|
6404
|
+
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6406
6405
|
};
|
|
6407
|
-
var templateObject_1$17, templateObject_2$
|
|
6406
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$h;
|
|
6408
6407
|
|
|
6409
6408
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6410
6409
|
__proto__: null,
|
|
@@ -6454,8 +6453,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObj
|
|
|
6454
6453
|
var theme = _a.theme;
|
|
6455
6454
|
return theme.colors.text.disabled;
|
|
6456
6455
|
});
|
|
6457
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6458
|
-
var templateObject_1$16, templateObject_2$
|
|
6456
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6457
|
+
var templateObject_1$16, templateObject_2$N;
|
|
6459
6458
|
|
|
6460
6459
|
var BaseCTA = function (_a) {
|
|
6461
6460
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6523,7 +6522,7 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6523
6522
|
};
|
|
6524
6523
|
|
|
6525
6524
|
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; });
|
|
6526
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6525
|
+
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"])));
|
|
6527
6526
|
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; });
|
|
6528
6527
|
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; });
|
|
6529
6528
|
var Note = function (_a) {
|
|
@@ -6531,14 +6530,14 @@ var Note = function (_a) {
|
|
|
6531
6530
|
var theme = useTheme();
|
|
6532
6531
|
return (jsxs$1(Container$K, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6533
6532
|
};
|
|
6534
|
-
var templateObject_1$15, templateObject_2$
|
|
6533
|
+
var templateObject_1$15, templateObject_2$M, templateObject_3$C, templateObject_4$r;
|
|
6535
6534
|
|
|
6536
6535
|
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) {
|
|
6537
6536
|
var theme = _a.theme;
|
|
6538
6537
|
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 ");
|
|
6539
6538
|
});
|
|
6540
|
-
var Line = newStyled.div(templateObject_2$
|
|
6541
|
-
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({
|
|
6539
|
+
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; });
|
|
6540
|
+
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({
|
|
6542
6541
|
flexDirection: ['column', 'row'],
|
|
6543
6542
|
}));
|
|
6544
6543
|
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({
|
|
@@ -6574,9 +6573,9 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$9 || (templateObject_8$9 = __m
|
|
|
6574
6573
|
var DeliveryDetails = function (_a) {
|
|
6575
6574
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6576
6575
|
var theme = useTheme();
|
|
6577
|
-
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6576
|
+
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6578
6577
|
};
|
|
6579
|
-
var templateObject_1$14, templateObject_2$
|
|
6578
|
+
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;
|
|
6580
6579
|
|
|
6581
6580
|
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) {
|
|
6582
6581
|
var top = _a.top;
|
|
@@ -6585,7 +6584,7 @@ var Backdrop = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __mak
|
|
|
6585
6584
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6586
6585
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6587
6586
|
});
|
|
6588
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6587
|
+
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) {
|
|
6589
6588
|
var height = _a.height;
|
|
6590
6589
|
return height;
|
|
6591
6590
|
}, function (_a) {
|
|
@@ -6632,15 +6631,20 @@ var Drawer = function (_a) {
|
|
|
6632
6631
|
}, [isOpen, onClose, onOpen]);
|
|
6633
6632
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6634
6633
|
};
|
|
6635
|
-
var templateObject_1$13, templateObject_2$
|
|
6634
|
+
var templateObject_1$13, templateObject_2$K;
|
|
6635
|
+
|
|
6636
|
+
var TooltipArrow = function (_a) {
|
|
6637
|
+
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6638
|
+
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
6639
|
+
};
|
|
6636
6640
|
|
|
6637
6641
|
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"])));
|
|
6638
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6642
|
+
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"])));
|
|
6639
6643
|
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"])));
|
|
6640
6644
|
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"])));
|
|
6641
6645
|
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; });
|
|
6642
6646
|
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; });
|
|
6643
|
-
var templateObject_1$12, templateObject_2$
|
|
6647
|
+
var templateObject_1$12, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6644
6648
|
|
|
6645
6649
|
var DropdownListIcons = function (_a) {
|
|
6646
6650
|
var items = _a.items;
|
|
@@ -6654,12 +6658,12 @@ var Dropdown = function (_a) {
|
|
|
6654
6658
|
};
|
|
6655
6659
|
|
|
6656
6660
|
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"])));
|
|
6657
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6661
|
+
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"])));
|
|
6658
6662
|
var SizeLabel = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6659
6663
|
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"])));
|
|
6660
6664
|
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"])));
|
|
6661
6665
|
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"])));
|
|
6662
|
-
var templateObject_1$11, templateObject_2$
|
|
6666
|
+
var templateObject_1$11, templateObject_2$I, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$e;
|
|
6663
6667
|
|
|
6664
6668
|
var SizeDropdown = function (_a) {
|
|
6665
6669
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6683,7 +6687,7 @@ var SizeDropdown = function (_a) {
|
|
|
6683
6687
|
};
|
|
6684
6688
|
|
|
6685
6689
|
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; });
|
|
6686
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6690
|
+
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; });
|
|
6687
6691
|
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"])));
|
|
6688
6692
|
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"])));
|
|
6689
6693
|
var DropdownDialog = function (_a) {
|
|
@@ -6694,7 +6698,7 @@ var DropdownDialog = function (_a) {
|
|
|
6694
6698
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6695
6699
|
}) }), void 0) }), void 0));
|
|
6696
6700
|
};
|
|
6697
|
-
var templateObject_1$10, templateObject_2$
|
|
6701
|
+
var templateObject_1$10, templateObject_2$H, templateObject_3$y, templateObject_4$n;
|
|
6698
6702
|
|
|
6699
6703
|
function FilteringDropdown(_a) {
|
|
6700
6704
|
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;
|
|
@@ -6728,7 +6732,7 @@ function FilteringDropdown(_a) {
|
|
|
6728
6732
|
}
|
|
6729
6733
|
|
|
6730
6734
|
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; });
|
|
6731
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6735
|
+
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; });
|
|
6732
6736
|
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"])));
|
|
6733
6737
|
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'); });
|
|
6734
6738
|
var Accordion = function (_a) {
|
|
@@ -6737,10 +6741,10 @@ var Accordion = function (_a) {
|
|
|
6737
6741
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6738
6742
|
return (jsxs$1(Container$J, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6739
6743
|
};
|
|
6740
|
-
var templateObject_1$$, templateObject_2$
|
|
6744
|
+
var templateObject_1$$, templateObject_2$G, templateObject_3$x, templateObject_4$m;
|
|
6741
6745
|
|
|
6742
6746
|
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; });
|
|
6743
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6747
|
+
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"])));
|
|
6744
6748
|
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"])));
|
|
6745
6749
|
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"])));
|
|
6746
6750
|
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; });
|
|
@@ -6749,7 +6753,7 @@ var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a =
|
|
|
6749
6753
|
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; });
|
|
6750
6754
|
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"])));
|
|
6751
6755
|
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"])));
|
|
6752
|
-
var templateObject_1$_, templateObject_2$
|
|
6756
|
+
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;
|
|
6753
6757
|
|
|
6754
6758
|
var getStylesBySize$7 = function (size, theme) {
|
|
6755
6759
|
switch (size) {
|
|
@@ -6815,7 +6819,7 @@ var SelectorSecondary = function (_a) {
|
|
|
6815
6819
|
};
|
|
6816
6820
|
|
|
6817
6821
|
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"])));
|
|
6818
|
-
var LI = newStyled.li(templateObject_2$
|
|
6822
|
+
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; });
|
|
6819
6823
|
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"])));
|
|
6820
6824
|
var Tags = function (_a) {
|
|
6821
6825
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -6824,7 +6828,7 @@ var Tags = function (_a) {
|
|
|
6824
6828
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
6825
6829
|
}) }), void 0));
|
|
6826
6830
|
};
|
|
6827
|
-
var templateObject_1$Z, templateObject_2$
|
|
6831
|
+
var templateObject_1$Z, templateObject_2$E, templateObject_3$v;
|
|
6828
6832
|
|
|
6829
6833
|
var Filters = function (_a) {
|
|
6830
6834
|
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;
|
|
@@ -6961,7 +6965,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
6961
6965
|
};
|
|
6962
6966
|
|
|
6963
6967
|
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"])));
|
|
6964
|
-
var Container$I = newStyled.div(templateObject_2$
|
|
6968
|
+
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"])));
|
|
6965
6969
|
var FitGuarantee = function (_a) {
|
|
6966
6970
|
var _b;
|
|
6967
6971
|
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;
|
|
@@ -6979,10 +6983,10 @@ var FitGuarantee = function (_a) {
|
|
|
6979
6983
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
6980
6984
|
} }, { children: title }), void 0), jsx$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6981
6985
|
};
|
|
6982
|
-
var templateObject_1$Y, templateObject_2$
|
|
6986
|
+
var templateObject_1$Y, templateObject_2$D;
|
|
6983
6987
|
|
|
6984
6988
|
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"])));
|
|
6985
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6989
|
+
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; });
|
|
6986
6990
|
var textButtonStyles$1 = function (theme) { return ({
|
|
6987
6991
|
border: 'none',
|
|
6988
6992
|
background: 'transparent',
|
|
@@ -6997,7 +7001,7 @@ var FitPredictor = function (_a) {
|
|
|
6997
7001
|
var theme = useTheme();
|
|
6998
7002
|
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));
|
|
6999
7003
|
};
|
|
7000
|
-
var templateObject_1$X, templateObject_2$
|
|
7004
|
+
var templateObject_1$X, templateObject_2$C;
|
|
7001
7005
|
|
|
7002
7006
|
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) {
|
|
7003
7007
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
@@ -11325,7 +11329,7 @@ var SliderNavigation = function (_a) {
|
|
|
11325
11329
|
};
|
|
11326
11330
|
|
|
11327
11331
|
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"])));
|
|
11328
|
-
var verticalStyles = css(templateObject_2$
|
|
11332
|
+
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"])));
|
|
11329
11333
|
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) {
|
|
11330
11334
|
var position = _a.position;
|
|
11331
11335
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11355,7 +11359,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11355
11359
|
arrowPadding: 1.625,
|
|
11356
11360
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11357
11361
|
};
|
|
11358
|
-
var templateObject_1$U, templateObject_2$
|
|
11362
|
+
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;
|
|
11359
11363
|
|
|
11360
11364
|
var propTypes = {exports: {}};
|
|
11361
11365
|
|
|
@@ -12953,7 +12957,7 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
12953
12957
|
return borderRadiusVariant &&
|
|
12954
12958
|
"\n border-radius: 40px;\n ";
|
|
12955
12959
|
});
|
|
12956
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
12960
|
+
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'); });
|
|
12957
12961
|
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"])));
|
|
12958
12962
|
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"])));
|
|
12959
12963
|
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"])));
|
|
@@ -12967,7 +12971,7 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
12967
12971
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
12968
12972
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
12969
12973
|
};
|
|
12970
|
-
var templateObject_1$T, templateObject_2$
|
|
12974
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
12971
12975
|
|
|
12972
12976
|
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"])));
|
|
12973
12977
|
var ProductGallery = function (_a) {
|
|
@@ -13045,25 +13049,6 @@ var PaypalButton = function (_a) {
|
|
|
13045
13049
|
};
|
|
13046
13050
|
var templateObject_1$Q;
|
|
13047
13051
|
|
|
13048
|
-
var useOnClickOutside = function (ref, handler) {
|
|
13049
|
-
useEffect(function () {
|
|
13050
|
-
var listener = function (event) {
|
|
13051
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
13052
|
-
var el = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
13053
|
-
if (!el || el.contains((event === null || event === void 0 ? void 0 : event.target) || null)) {
|
|
13054
|
-
return;
|
|
13055
|
-
}
|
|
13056
|
-
handler(event);
|
|
13057
|
-
};
|
|
13058
|
-
document.addEventListener('mousedown', listener);
|
|
13059
|
-
document.addEventListener('touchstart', listener);
|
|
13060
|
-
return function () {
|
|
13061
|
-
document.removeEventListener('mousedown', listener);
|
|
13062
|
-
document.removeEventListener('touchstart', listener);
|
|
13063
|
-
};
|
|
13064
|
-
}, [ref, handler]);
|
|
13065
|
-
};
|
|
13066
|
-
|
|
13067
13052
|
var Container$C = newStyled.div(function (props) { return ({
|
|
13068
13053
|
height: 'auto',
|
|
13069
13054
|
textAlign: 'center',
|
|
@@ -13118,7 +13103,7 @@ var IconsWithTitle = function (_a) {
|
|
|
13118
13103
|
};
|
|
13119
13104
|
|
|
13120
13105
|
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'); });
|
|
13121
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13106
|
+
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'); });
|
|
13122
13107
|
var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13123
13108
|
var titlePosition = _a.titlePosition;
|
|
13124
13109
|
return titlePosition == 'center' &&
|
|
@@ -13129,13 +13114,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13129
13114
|
var isMobile = useWindowDimensions().isMobile;
|
|
13130
13115
|
return (jsxs$1(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13131
13116
|
};
|
|
13132
|
-
var templateObject_1$P, templateObject_2$
|
|
13117
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$s;
|
|
13133
13118
|
|
|
13134
13119
|
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) {
|
|
13135
13120
|
var color = _a.color;
|
|
13136
13121
|
return color;
|
|
13137
13122
|
});
|
|
13138
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13123
|
+
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) {
|
|
13139
13124
|
var color = _a.color;
|
|
13140
13125
|
return color;
|
|
13141
13126
|
});
|
|
@@ -13144,7 +13129,7 @@ var InputLabel = function (_a) {
|
|
|
13144
13129
|
var theme = useTheme();
|
|
13145
13130
|
return (jsxs$1(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13146
13131
|
};
|
|
13147
|
-
var templateObject_1$O, templateObject_2$
|
|
13132
|
+
var templateObject_1$O, templateObject_2$y;
|
|
13148
13133
|
|
|
13149
13134
|
var containerByStatus = function (theme, status) {
|
|
13150
13135
|
if (status === InputValidationType.Valid)
|
|
@@ -13157,7 +13142,7 @@ var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __ma
|
|
|
13157
13142
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13158
13143
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13159
13144
|
});
|
|
13160
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13145
|
+
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"])));
|
|
13161
13146
|
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) {
|
|
13162
13147
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13163
13148
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13231,7 +13216,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13231
13216
|
return theme.component.input.lineHeight;
|
|
13232
13217
|
});
|
|
13233
13218
|
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"])));
|
|
13234
|
-
var templateObject_1$N, templateObject_2$
|
|
13219
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
13235
13220
|
|
|
13236
13221
|
var BaseInput = function (_a) {
|
|
13237
13222
|
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"]);
|
|
@@ -13279,7 +13264,7 @@ var Container$z = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13279
13264
|
var theme = _a.theme;
|
|
13280
13265
|
return theme.component.inputCustom.input.borderRadius;
|
|
13281
13266
|
});
|
|
13282
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13267
|
+
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) {
|
|
13283
13268
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13284
13269
|
return defaultRounded
|
|
13285
13270
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13296,19 +13281,19 @@ var Custom = function (_a) {
|
|
|
13296
13281
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13297
13282
|
return (jsx$1(Container$z, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13298
13283
|
};
|
|
13299
|
-
var templateObject_1$M, templateObject_2$
|
|
13284
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13300
13285
|
|
|
13301
13286
|
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) {
|
|
13302
13287
|
var size = _a.size;
|
|
13303
13288
|
return (size === 'small' ? '36px' : '');
|
|
13304
13289
|
});
|
|
13305
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13290
|
+
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"])));
|
|
13306
13291
|
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"])));
|
|
13307
13292
|
var Success = function (_a) {
|
|
13308
13293
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13309
13294
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13310
13295
|
};
|
|
13311
|
-
var templateObject_1$L, templateObject_2$
|
|
13296
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$q;
|
|
13312
13297
|
|
|
13313
13298
|
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) {
|
|
13314
13299
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
@@ -13330,13 +13315,13 @@ var BasePlusButton = function (_a) {
|
|
|
13330
13315
|
var templateObject_1$K;
|
|
13331
13316
|
|
|
13332
13317
|
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"])));
|
|
13333
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13318
|
+
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"])));
|
|
13334
13319
|
var BasePlusIcon = function (_a) {
|
|
13335
13320
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13336
13321
|
var theme = useTheme();
|
|
13337
13322
|
return (jsx$1(Container$y, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13338
13323
|
};
|
|
13339
|
-
var templateObject_1$J, templateObject_2$
|
|
13324
|
+
var templateObject_1$J, templateObject_2$u;
|
|
13340
13325
|
|
|
13341
13326
|
var Input$3 = {
|
|
13342
13327
|
Simple: BaseInput,
|
|
@@ -13351,7 +13336,7 @@ var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
13351
13336
|
"\n border-radius: 40px;\n ";
|
|
13352
13337
|
});
|
|
13353
13338
|
// max-height: 31.875rem;
|
|
13354
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13339
|
+
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'); });
|
|
13355
13340
|
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"])));
|
|
13356
13341
|
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"])));
|
|
13357
13342
|
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"])));
|
|
@@ -13451,7 +13436,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13451
13436
|
};
|
|
13452
13437
|
}, [preventTouch, ref, touchStart]);
|
|
13453
13438
|
}
|
|
13454
|
-
var templateObject_1$I, templateObject_2$
|
|
13439
|
+
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;
|
|
13455
13440
|
|
|
13456
13441
|
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"])));
|
|
13457
13442
|
var ProductGalleryMobile = function (_a) {
|
|
@@ -13730,14 +13715,14 @@ var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __ma
|
|
|
13730
13715
|
return borderRadiusVariant &&
|
|
13731
13716
|
"\n border-radius: 40px;\n ";
|
|
13732
13717
|
});
|
|
13733
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13718
|
+
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'); });
|
|
13734
13719
|
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"])));
|
|
13735
13720
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13736
13721
|
var _b, _c;
|
|
13737
13722
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13738
13723
|
return (jsxs$1(Container$v, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13739
13724
|
});
|
|
13740
|
-
var templateObject_1$G, templateObject_2$
|
|
13725
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o;
|
|
13741
13726
|
|
|
13742
13727
|
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"])));
|
|
13743
13728
|
var ArrowButton = function (_a) {
|
|
@@ -13758,7 +13743,7 @@ var SlideDots = function (_a) {
|
|
|
13758
13743
|
var templateObject_1$E;
|
|
13759
13744
|
|
|
13760
13745
|
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"])));
|
|
13761
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13746
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13762
13747
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13763
13748
|
var SlideNavigation = function (_a) {
|
|
13764
13749
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -13771,7 +13756,7 @@ var SlideNavigation = function (_a) {
|
|
|
13771
13756
|
onNavigate(selectedIndex + 1);
|
|
13772
13757
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13773
13758
|
};
|
|
13774
|
-
var templateObject_1$D, templateObject_2$
|
|
13759
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n;
|
|
13775
13760
|
|
|
13776
13761
|
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"])));
|
|
13777
13762
|
var ProductGalleryMobileV2 = function (_a) {
|
|
@@ -13930,7 +13915,7 @@ var Portal = function (_a) {
|
|
|
13930
13915
|
var visibleStyle = function (_a) {
|
|
13931
13916
|
var opened = _a.opened;
|
|
13932
13917
|
return opened
|
|
13933
|
-
? 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$
|
|
13918
|
+
? 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 "])));
|
|
13934
13919
|
};
|
|
13935
13920
|
var transformStyle = function (_a) {
|
|
13936
13921
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -13978,7 +13963,7 @@ var useModal = function (id) {
|
|
|
13978
13963
|
close: close,
|
|
13979
13964
|
}); }, [close, open, opened]);
|
|
13980
13965
|
};
|
|
13981
|
-
var templateObject_1$B, templateObject_2$
|
|
13966
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
13982
13967
|
|
|
13983
13968
|
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) {
|
|
13984
13969
|
var height = _a.height;
|
|
@@ -14058,13 +14043,13 @@ var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __ma
|
|
|
14058
14043
|
var theme = _a.theme;
|
|
14059
14044
|
return theme.component.orderBar.backgroundColor;
|
|
14060
14045
|
});
|
|
14061
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14046
|
+
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; });
|
|
14062
14047
|
var OrderBar = function (_a) {
|
|
14063
14048
|
var message = _a.message, color = _a.color;
|
|
14064
14049
|
var theme = useTheme();
|
|
14065
14050
|
return (jsxs$1(Container$q, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14066
14051
|
};
|
|
14067
|
-
var templateObject_1$z, templateObject_2$
|
|
14052
|
+
var templateObject_1$z, templateObject_2$p;
|
|
14068
14053
|
|
|
14069
14054
|
var htmlReactParser = {exports: {}};
|
|
14070
14055
|
|
|
@@ -17846,7 +17831,7 @@ HTMLReactParser$1.attributesToProps;
|
|
|
17846
17831
|
HTMLReactParser$1.Element;
|
|
17847
17832
|
|
|
17848
17833
|
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"])));
|
|
17849
|
-
var Card = newStyled.div(templateObject_2$
|
|
17834
|
+
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"])));
|
|
17850
17835
|
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"])));
|
|
17851
17836
|
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"])));
|
|
17852
17837
|
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"])));
|
|
@@ -17882,10 +17867,10 @@ var PackCard = function (_a) {
|
|
|
17882
17867
|
currency: currencyCode || 'USD',
|
|
17883
17868
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17884
17869
|
};
|
|
17885
|
-
var templateObject_1$y, templateObject_2$
|
|
17870
|
+
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;
|
|
17886
17871
|
|
|
17887
17872
|
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"])));
|
|
17888
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
17873
|
+
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"])));
|
|
17889
17874
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
17890
17875
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
17891
17876
|
}));
|
|
@@ -17906,7 +17891,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
17906
17891
|
var background = _a.background;
|
|
17907
17892
|
return background || 'unset';
|
|
17908
17893
|
});
|
|
17909
|
-
var templateObject_1$x, templateObject_2$
|
|
17894
|
+
var templateObject_1$x, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
17910
17895
|
|
|
17911
17896
|
var Pagination = function (_a) {
|
|
17912
17897
|
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;
|
|
@@ -17993,7 +17978,7 @@ var templateObject_1$w;
|
|
|
17993
17978
|
|
|
17994
17979
|
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"])));
|
|
17995
17980
|
var IMAGE_WIDTH = '63px';
|
|
17996
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17981
|
+
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);
|
|
17997
17982
|
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({
|
|
17998
17983
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
17999
17984
|
}), IMAGE_WIDTH);
|
|
@@ -18033,7 +18018,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18033
18018
|
var theme = useTheme();
|
|
18034
18019
|
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18035
18020
|
};
|
|
18036
|
-
var templateObject_1$v, templateObject_2$
|
|
18021
|
+
var templateObject_1$v, templateObject_2$m, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18037
18022
|
|
|
18038
18023
|
var P$1 = newStyled.p(function (_a) {
|
|
18039
18024
|
var color = _a.color;
|
|
@@ -18095,7 +18080,7 @@ var ProgressBar = function (_a) {
|
|
|
18095
18080
|
var templateObject_1$u;
|
|
18096
18081
|
|
|
18097
18082
|
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; });
|
|
18098
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18083
|
+
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"])));
|
|
18099
18084
|
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"])));
|
|
18100
18085
|
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)'; });
|
|
18101
18086
|
var QuantityPicker = function (_a) {
|
|
@@ -18122,7 +18107,7 @@ var QuantityPicker = function (_a) {
|
|
|
18122
18107
|
}, [value, clamp]);
|
|
18123
18108
|
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18124
18109
|
};
|
|
18125
|
-
var templateObject_1$t, templateObject_2$
|
|
18110
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
18126
18111
|
|
|
18127
18112
|
/* base styles & size variants */
|
|
18128
18113
|
var CustomRadioStyles$1 = {
|
|
@@ -18193,7 +18178,7 @@ var ContainerStyles$1 = {
|
|
|
18193
18178
|
|
|
18194
18179
|
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"])));
|
|
18195
18180
|
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18196
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18181
|
+
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) {
|
|
18197
18182
|
var disabled = _a.disabled;
|
|
18198
18183
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18199
18184
|
});
|
|
@@ -18211,7 +18196,7 @@ var RadioPrimary = function (_a) {
|
|
|
18211
18196
|
};
|
|
18212
18197
|
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18213
18198
|
};
|
|
18214
|
-
var templateObject_1$s, templateObject_2$
|
|
18199
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18215
18200
|
|
|
18216
18201
|
var RadioGroupInput = function (_a) {
|
|
18217
18202
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18292,7 +18277,7 @@ var ContainerStyles = {
|
|
|
18292
18277
|
|
|
18293
18278
|
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"])));
|
|
18294
18279
|
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18295
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18280
|
+
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) {
|
|
18296
18281
|
var disabled = _a.disabled;
|
|
18297
18282
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18298
18283
|
});
|
|
@@ -18316,7 +18301,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18316
18301
|
};
|
|
18317
18302
|
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18318
18303
|
};
|
|
18319
|
-
var templateObject_1$r, templateObject_2$
|
|
18304
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g;
|
|
18320
18305
|
|
|
18321
18306
|
var ClubRadioGroupInput = function (_a) {
|
|
18322
18307
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18338,7 +18323,7 @@ function formatDate(date) {
|
|
|
18338
18323
|
}
|
|
18339
18324
|
|
|
18340
18325
|
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"])));
|
|
18341
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18326
|
+
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"])));
|
|
18342
18327
|
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"])));
|
|
18343
18328
|
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"])));
|
|
18344
18329
|
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"])));
|
|
@@ -18378,12 +18363,12 @@ var Review$1 = function (_a) {
|
|
|
18378
18363
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18379
18364
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18380
18365
|
};
|
|
18381
|
-
var templateObject_1$q, templateObject_2$
|
|
18366
|
+
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;
|
|
18382
18367
|
|
|
18383
18368
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18384
18369
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18385
18370
|
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"])));
|
|
18386
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18371
|
+
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"])));
|
|
18387
18372
|
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"])));
|
|
18388
18373
|
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"])));
|
|
18389
18374
|
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"])));
|
|
@@ -18434,10 +18419,10 @@ var Review = function (_a) {
|
|
|
18434
18419
|
: description,
|
|
18435
18420
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
18436
18421
|
};
|
|
18437
|
-
var templateObject_1$p, templateObject_2$
|
|
18422
|
+
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;
|
|
18438
18423
|
|
|
18439
18424
|
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"])));
|
|
18440
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18425
|
+
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"])));
|
|
18441
18426
|
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"])));
|
|
18442
18427
|
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"])));
|
|
18443
18428
|
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"])));
|
|
@@ -18452,17 +18437,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18452
18437
|
var theme = useTheme();
|
|
18453
18438
|
return (jsxs$1(Container$f, { children: [jsx$1(Text$8, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$8, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18454
18439
|
};
|
|
18455
|
-
var templateObject_1$o, templateObject_2$
|
|
18440
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18456
18441
|
|
|
18457
18442
|
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"])));
|
|
18458
|
-
var Text = newStyled.p(templateObject_2$
|
|
18443
|
+
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; });
|
|
18459
18444
|
var ScrollToTop = function (_a) {
|
|
18460
18445
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18461
18446
|
var theme = useTheme();
|
|
18462
18447
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18463
18448
|
return (jsxs$1(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18464
18449
|
};
|
|
18465
|
-
var templateObject_1$n, templateObject_2$
|
|
18450
|
+
var templateObject_1$n, templateObject_2$f;
|
|
18466
18451
|
|
|
18467
18452
|
var Input = newStyled.input(function (props) { return ({
|
|
18468
18453
|
padding: props.theme.component.input.padding,
|
|
@@ -18540,7 +18525,7 @@ var Anchor = newStyled.a({
|
|
|
18540
18525
|
padding: 0,
|
|
18541
18526
|
textDecoration: 'none',
|
|
18542
18527
|
});
|
|
18543
|
-
var Container$b = newStyled.div(templateObject_2$
|
|
18528
|
+
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({
|
|
18544
18529
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18545
18530
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18546
18531
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18553,7 +18538,7 @@ var ResultsPanel = function (_a) {
|
|
|
18553
18538
|
var theme = useTheme();
|
|
18554
18539
|
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18555
18540
|
};
|
|
18556
|
-
var templateObject_1$l, templateObject_2$
|
|
18541
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18557
18542
|
|
|
18558
18543
|
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({
|
|
18559
18544
|
right: ['1rem', '7.75rem'],
|
|
@@ -18658,7 +18643,7 @@ var SearchBar = function (_a) {
|
|
|
18658
18643
|
};
|
|
18659
18644
|
|
|
18660
18645
|
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"])));
|
|
18661
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
18646
|
+
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"])));
|
|
18662
18647
|
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"])));
|
|
18663
18648
|
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"])));
|
|
18664
18649
|
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"])));
|
|
@@ -18668,7 +18653,7 @@ var SearchNavigation = function (_a) {
|
|
|
18668
18653
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18669
18654
|
}) }, void 0)] }, void 0));
|
|
18670
18655
|
};
|
|
18671
|
-
var templateObject_1$i, templateObject_2$
|
|
18656
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
18672
18657
|
|
|
18673
18658
|
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) {
|
|
18674
18659
|
var alignCenter = _a.alignCenter;
|
|
@@ -18680,17 +18665,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
18680
18665
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18681
18666
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18682
18667
|
});
|
|
18683
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18668
|
+
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"])));
|
|
18684
18669
|
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"])));
|
|
18685
18670
|
var ShortBanner = function (_a) {
|
|
18686
18671
|
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;
|
|
18687
18672
|
var theme = useTheme();
|
|
18688
18673
|
return (jsxs$1(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
18689
18674
|
};
|
|
18690
|
-
var templateObject_1$h, templateObject_2$
|
|
18675
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a;
|
|
18691
18676
|
|
|
18692
18677
|
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; });
|
|
18693
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
18678
|
+
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; });
|
|
18694
18679
|
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; });
|
|
18695
18680
|
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; });
|
|
18696
18681
|
var SizeChartTable = function (_a) {
|
|
@@ -18725,10 +18710,10 @@ var SizeChartTable = function (_a) {
|
|
|
18725
18710
|
backgroundColor: getCellColor(index, cell),
|
|
18726
18711
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
18727
18712
|
};
|
|
18728
|
-
var templateObject_1$g, templateObject_2$
|
|
18713
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
18729
18714
|
|
|
18730
18715
|
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; });
|
|
18731
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
18716
|
+
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; });
|
|
18732
18717
|
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; });
|
|
18733
18718
|
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; });
|
|
18734
18719
|
var SizeTable = function (_a) {
|
|
@@ -18736,7 +18721,7 @@ var SizeTable = function (_a) {
|
|
|
18736
18721
|
var theme = useTheme();
|
|
18737
18722
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
18738
18723
|
};
|
|
18739
|
-
var templateObject_1$f, templateObject_2$
|
|
18724
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
18740
18725
|
|
|
18741
18726
|
var getStylesBySize$4 = function (size) {
|
|
18742
18727
|
switch (size) {
|
|
@@ -18782,25 +18767,29 @@ var TextButton = function (_a) {
|
|
|
18782
18767
|
var templateObject_1$e;
|
|
18783
18768
|
|
|
18784
18769
|
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"])));
|
|
18785
|
-
var P = newStyled.p(templateObject_2$
|
|
18770
|
+
var P = newStyled.p(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
18786
18771
|
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"])));
|
|
18787
18772
|
var SizeFitGuide = function (_a) {
|
|
18788
|
-
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
18789
|
-
return (jsxs$1(Container$7, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18773
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
18774
|
+
return (jsxs$1(Container$7, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
18790
18775
|
};
|
|
18791
|
-
var templateObject_1$d, templateObject_2$
|
|
18776
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7;
|
|
18792
18777
|
|
|
18793
18778
|
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) {
|
|
18794
18779
|
var inline = _a.inline;
|
|
18795
18780
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
18796
18781
|
});
|
|
18782
|
+
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"])));
|
|
18783
|
+
var templateObject_1$c, templateObject_2$8;
|
|
18784
|
+
|
|
18797
18785
|
var SizeSelector = function (_a) {
|
|
18798
|
-
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;
|
|
18786
|
+
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;
|
|
18787
|
+
var isLarge = selectedValue.label === '3XL' || selectedValue.label === '4XL';
|
|
18799
18788
|
return (jsxs("div", __assign$1({ css: {
|
|
18800
18789
|
display: 'flex',
|
|
18801
18790
|
flexDirection: inline ? 'row' : 'column',
|
|
18802
18791
|
alignItems: inline ? 'center' : 'start',
|
|
18803
|
-
} }, { 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) {
|
|
18792
|
+
} }, { children: [jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$8, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), 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) {
|
|
18804
18793
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
18805
18794
|
return (jsx(SelectorSecondary, { css: {
|
|
18806
18795
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -18808,8 +18797,7 @@ var SizeSelector = function (_a) {
|
|
|
18808
18797
|
minWidth: '4rem',
|
|
18809
18798
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
18810
18799
|
}) }), void 0)] }), void 0));
|
|
18811
|
-
};
|
|
18812
|
-
var templateObject_1$c;
|
|
18800
|
+
};
|
|
18813
18801
|
|
|
18814
18802
|
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) {
|
|
18815
18803
|
var titleSize = _a.titleSize;
|
|
@@ -19225,7 +19213,7 @@ var TrackingProgress = function (_a) {
|
|
|
19225
19213
|
};
|
|
19226
19214
|
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19227
19215
|
|
|
19228
|
-
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) {
|
|
19216
|
+
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) {
|
|
19229
19217
|
var textPosition = _a.textPosition;
|
|
19230
19218
|
return textPosition;
|
|
19231
19219
|
}, function (_a) {
|