@trafilea/afrodita-components 6.4.5 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +1 -1
- package/build/index.d.ts +22 -16
- package/build/index.esm.css +1 -1
- package/build/index.esm.js +220 -140
- package/build/index.esm.js.map +1 -1
- package/build/index.js +220 -139
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +1 -1
- package/build/theme/shapermint.theme.d.ts +1 -1
- package/build/theme/thebodcon.theme.d.ts +764 -0
- package/build/theme/thebodcon.theme.js +1025 -0
- package/build/theme/thespadr.theme.d.ts +1 -1
- package/build/theme/thespadr.theme.js +3 -3
- package/build/theme/truekind.theme.d.ts +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3147,7 +3147,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3147
3147
|
desktop: 1280,
|
|
3148
3148
|
};
|
|
3149
3149
|
|
|
3150
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3150
|
+
var Container$17 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3151
3151
|
var height = _a.height;
|
|
3152
3152
|
return (height ? height : '1.5em');
|
|
3153
3153
|
}, function (_a) {
|
|
@@ -3174,9 +3174,9 @@ var SkeletonBox = function (_a) {
|
|
|
3174
3174
|
var theme = useTheme();
|
|
3175
3175
|
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3176
3176
|
};
|
|
3177
|
-
var templateObject_1$
|
|
3177
|
+
var templateObject_1$1R;
|
|
3178
3178
|
|
|
3179
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3179
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3180
3180
|
var width = _a.width;
|
|
3181
3181
|
return width;
|
|
3182
3182
|
}, function (_a) {
|
|
@@ -3192,7 +3192,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1P || (templateObject_1$1P
|
|
|
3192
3192
|
var opacity = _a.opacity;
|
|
3193
3193
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3194
3194
|
});
|
|
3195
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3195
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3196
3196
|
var width = _a.width;
|
|
3197
3197
|
return width;
|
|
3198
3198
|
}, function (_a) {
|
|
@@ -3205,7 +3205,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$
|
|
|
3205
3205
|
var opacity = _a.opacity;
|
|
3206
3206
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3207
3207
|
});
|
|
3208
|
-
var templateObject_1$
|
|
3208
|
+
var templateObject_1$1Q, templateObject_2$1c;
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable no-undef */
|
|
3211
3211
|
var cache = new Map();
|
|
@@ -4081,9 +4081,9 @@ function jsxs(type, props, key) {
|
|
|
4081
4081
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4082
4082
|
// `variants` styles that are consistent through all themes.
|
|
4083
4083
|
var TAGS = {
|
|
4084
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4085
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4086
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4084
|
+
hero1: newStyled.h1(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""]))),
|
|
4085
|
+
hero2: newStyled.h2(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject([""], [""]))),
|
|
4086
|
+
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4087
4087
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4088
4088
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4089
4089
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4217,11 +4217,11 @@ var DEFAULTS = {
|
|
|
4217
4217
|
size: 'regular',
|
|
4218
4218
|
},
|
|
4219
4219
|
};
|
|
4220
|
-
var templateObject_1$
|
|
4220
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$V, 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;
|
|
4221
4221
|
|
|
4222
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4223
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4224
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4222
|
+
var Container$16 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4223
|
+
var Card$3 = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4224
|
+
var Tag$2 = newStyled.div(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
4225
4225
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4226
4226
|
var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4227
4227
|
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
@@ -4249,27 +4249,27 @@ var PackCard$1 = function (_a) {
|
|
|
4249
4249
|
currency: currencyCode || 'USD',
|
|
4250
4250
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4251
4251
|
};
|
|
4252
|
-
var templateObject_1$
|
|
4252
|
+
var templateObject_1$1O, templateObject_2$1a, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4253
4253
|
|
|
4254
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4255
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4254
|
+
var Container$15 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4255
|
+
var DropContainer = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4256
4256
|
var DropList = function (_a) {
|
|
4257
4257
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4258
4258
|
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4259
4259
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4260
4260
|
}) }, void 0));
|
|
4261
4261
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4262
|
+
var templateObject_1$1N, templateObject_2$19;
|
|
4263
4263
|
|
|
4264
4264
|
var DROPS_TOTAL = 5;
|
|
4265
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4266
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4267
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4265
|
+
var Container$14 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4266
|
+
var Title$8 = newStyled.p(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
4267
|
+
var Description$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
4268
4268
|
var AbsorbencyLevel = function (_a) {
|
|
4269
4269
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4270
4270
|
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4271
4271
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1M, templateObject_2$18, templateObject_3$T;
|
|
4273
4273
|
|
|
4274
4274
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4275
4275
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4345,7 +4345,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4345
4345
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4346
4346
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4347
4347
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4348
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4348
|
+
var StyledContent = newStyled.button(templateObject_1$1L || (templateObject_1$1L = __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"])));
|
|
4349
4349
|
var Accordion$1 = function (_a) {
|
|
4350
4350
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4351
4351
|
var theme = useTheme();
|
|
@@ -4369,9 +4369,9 @@ var Accordion$1 = function (_a) {
|
|
|
4369
4369
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4370
4370
|
} }), void 0));
|
|
4371
4371
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1L;
|
|
4373
4373
|
|
|
4374
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4374
|
+
var Container$13 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4375
4375
|
var AccordionOptions = function (_a) {
|
|
4376
4376
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4377
4377
|
var _b = React$2.useState({
|
|
@@ -4395,7 +4395,7 @@ var AccordionOptions = function (_a) {
|
|
|
4395
4395
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4396
4396
|
}) }, void 0));
|
|
4397
4397
|
};
|
|
4398
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1K;
|
|
4399
4399
|
|
|
4400
4400
|
exports.CardSectionType = void 0;
|
|
4401
4401
|
(function (CardSectionType) {
|
|
@@ -4557,14 +4557,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4557
4557
|
literal: true,
|
|
4558
4558
|
});
|
|
4559
4559
|
|
|
4560
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4561
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4560
|
+
var ErrorText = newStyled.h3(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4561
|
+
var ErrorContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
4562
4562
|
var Error$1 = function (_a) {
|
|
4563
4563
|
var error = _a.error;
|
|
4564
4564
|
var theme = useTheme();
|
|
4565
4565
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4566
4566
|
};
|
|
4567
|
-
var templateObject_1$
|
|
4567
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
4568
4568
|
|
|
4569
4569
|
var BaseSelectButton = function (_a) {
|
|
4570
4570
|
var children = _a.children, as = _a.as;
|
|
@@ -4581,7 +4581,7 @@ function BaseSelectOption(_a) {
|
|
|
4581
4581
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4582
4582
|
}
|
|
4583
4583
|
|
|
4584
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4584
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4585
4585
|
function BaseSelect(_a) {
|
|
4586
4586
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4587
4587
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4591,7 +4591,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4591
4591
|
Options: BaseSelectOptions,
|
|
4592
4592
|
Option: BaseSelectOption,
|
|
4593
4593
|
});
|
|
4594
|
-
var templateObject_1$
|
|
4594
|
+
var templateObject_1$1I;
|
|
4595
4595
|
|
|
4596
4596
|
var CustomButton = newStyled.button(function (_a) {
|
|
4597
4597
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4630,7 +4630,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4630
4630
|
});
|
|
4631
4631
|
});
|
|
4632
4632
|
//TODO Remove this when we find the real solution
|
|
4633
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4633
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4634
4634
|
var open = _a.open;
|
|
4635
4635
|
return open &&
|
|
4636
4636
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4650,7 +4650,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4650
4650
|
} }), void 0));
|
|
4651
4651
|
};
|
|
4652
4652
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4653
|
-
var templateObject_1$
|
|
4653
|
+
var templateObject_1$1H;
|
|
4654
4654
|
|
|
4655
4655
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4656
4656
|
var theme = _a.theme;
|
|
@@ -4817,7 +4817,7 @@ var CustomCheckboxStyles = {
|
|
|
4817
4817
|
},
|
|
4818
4818
|
};
|
|
4819
4819
|
|
|
4820
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4820
|
+
var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4821
4821
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4822
4822
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4823
4823
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4828,7 +4828,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4828
4828
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4829
4829
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4830
4830
|
]; });
|
|
4831
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4831
|
+
var Input$5 = newStyled.input(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
4832
4832
|
var disabled = _a.disabled;
|
|
4833
4833
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4834
4834
|
});
|
|
@@ -4844,7 +4844,7 @@ var Checkbox = function (_a) {
|
|
|
4844
4844
|
};
|
|
4845
4845
|
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4846
4846
|
};
|
|
4847
|
-
var templateObject_1$
|
|
4847
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4848
4848
|
|
|
4849
4849
|
var CustomOption = newStyled.li(function (_a) {
|
|
4850
4850
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4893,8 +4893,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4893
4893
|
Option: BaseDropdownOption,
|
|
4894
4894
|
});
|
|
4895
4895
|
|
|
4896
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4897
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4896
|
+
var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject([""], [""])));
|
|
4897
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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"])));
|
|
4898
4898
|
function SimpleDropdown(_a) {
|
|
4899
4899
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4900
4900
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4926,7 +4926,7 @@ function SimpleDropdown(_a) {
|
|
|
4926
4926
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4927
4927
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4928
4928
|
}
|
|
4929
|
-
var templateObject_1$
|
|
4929
|
+
var templateObject_1$1F, templateObject_2$15;
|
|
4930
4930
|
|
|
4931
4931
|
/* base styles & size variants */
|
|
4932
4932
|
var CustomRadioStyles$2 = {
|
|
@@ -4991,9 +4991,9 @@ var ContainerStyles$2 = {
|
|
|
4991
4991
|
},
|
|
4992
4992
|
};
|
|
4993
4993
|
|
|
4994
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4994
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4995
4995
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4996
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4996
|
+
var Input$4 = newStyled.input(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
4997
4997
|
var disabled = _a.disabled;
|
|
4998
4998
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4999
4999
|
});
|
|
@@ -5001,7 +5001,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5001
5001
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5002
5002
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5003
5003
|
]; });
|
|
5004
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5004
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5005
5005
|
var theme = _a.theme;
|
|
5006
5006
|
return theme.component.radio.textSize;
|
|
5007
5007
|
}, function (_a) {
|
|
@@ -5017,7 +5017,7 @@ var RadioInput = function (_a) {
|
|
|
5017
5017
|
};
|
|
5018
5018
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5019
5019
|
};
|
|
5020
|
-
var templateObject_1$
|
|
5020
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$S;
|
|
5021
5021
|
|
|
5022
5022
|
var getWrapperFlexDirection = function (position) {
|
|
5023
5023
|
switch (position) {
|
|
@@ -5068,7 +5068,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5068
5068
|
}
|
|
5069
5069
|
};
|
|
5070
5070
|
|
|
5071
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5071
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
5072
5072
|
var position = _a.position;
|
|
5073
5073
|
return getWrapperFlexDirection(position);
|
|
5074
5074
|
}, function (_a) {
|
|
@@ -5078,7 +5078,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __ma
|
|
|
5078
5078
|
var disableHover = _a.disableHover;
|
|
5079
5079
|
return (disableHover ? 0 : 1);
|
|
5080
5080
|
});
|
|
5081
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5081
|
+
var TooltipContainer = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5082
5082
|
var position = _a.position;
|
|
5083
5083
|
return getContainerFlexDirection(position);
|
|
5084
5084
|
}, function (_a) {
|
|
@@ -5106,7 +5106,7 @@ var TooltipContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12
|
|
|
5106
5106
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5107
5107
|
return actual === expected ? margin : '0';
|
|
5108
5108
|
};
|
|
5109
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5109
|
+
var ContentWrapper = newStyled.div(templateObject_3$R || (templateObject_3$R = __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) {
|
|
5110
5110
|
var borderColor = _a.borderColor;
|
|
5111
5111
|
return borderColor;
|
|
5112
5112
|
}, function (_a) {
|
|
@@ -5124,7 +5124,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5124
5124
|
});
|
|
5125
5125
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5126
5126
|
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5127
|
-
var templateObject_1$
|
|
5127
|
+
var templateObject_1$1D, templateObject_2$13, templateObject_3$R, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5128
5128
|
|
|
5129
5129
|
var useOnClickOutside = function (ref, handler) {
|
|
5130
5130
|
React$2.useEffect(function () {
|
|
@@ -5238,7 +5238,76 @@ var benefitsColorMapper = function (_a) {
|
|
|
5238
5238
|
};
|
|
5239
5239
|
};
|
|
5240
5240
|
|
|
5241
|
-
var getStylesBySize$d = function (size
|
|
5241
|
+
var getStylesBySize$d = function (size) {
|
|
5242
|
+
switch (size) {
|
|
5243
|
+
case exports.ComponentSize.Large:
|
|
5244
|
+
return {
|
|
5245
|
+
borderRadius: '0.375rem',
|
|
5246
|
+
padding: '0 0.75rem',
|
|
5247
|
+
fontSize: '0.875rem',
|
|
5248
|
+
lineHeight: '1.125rem',
|
|
5249
|
+
height: '1.75rem',
|
|
5250
|
+
};
|
|
5251
|
+
case exports.ComponentSize.Medium:
|
|
5252
|
+
return {
|
|
5253
|
+
borderRadius: '0.25rem',
|
|
5254
|
+
padding: '0 0.5rem',
|
|
5255
|
+
fontSize: '0.75rem',
|
|
5256
|
+
lineHeight: '1rem',
|
|
5257
|
+
height: '1.375rem',
|
|
5258
|
+
};
|
|
5259
|
+
case exports.ComponentSize.Small:
|
|
5260
|
+
return {
|
|
5261
|
+
borderRadius: '0.25rem',
|
|
5262
|
+
padding: '0',
|
|
5263
|
+
fontSize: '0.625rem',
|
|
5264
|
+
lineHeight: '0.75rem',
|
|
5265
|
+
height: '2rem',
|
|
5266
|
+
};
|
|
5267
|
+
}
|
|
5268
|
+
};
|
|
5269
|
+
var Container$$ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5270
|
+
var backgroundColor = _a.backgroundColor;
|
|
5271
|
+
return backgroundColor;
|
|
5272
|
+
}, function (_a) {
|
|
5273
|
+
var borderColor = _a.borderColor;
|
|
5274
|
+
return borderColor;
|
|
5275
|
+
}, function (_a) {
|
|
5276
|
+
var _b;
|
|
5277
|
+
var size = _a.size;
|
|
5278
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5279
|
+
}, function (_a) {
|
|
5280
|
+
var _b;
|
|
5281
|
+
var size = _a.size;
|
|
5282
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5283
|
+
}, function (_a) {
|
|
5284
|
+
var size = _a.size;
|
|
5285
|
+
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5286
|
+
}, function (_a) {
|
|
5287
|
+
var _b;
|
|
5288
|
+
var size = _a.size;
|
|
5289
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5290
|
+
});
|
|
5291
|
+
var H3$3 = newStyled.h3(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5292
|
+
var textColor = _a.textColor;
|
|
5293
|
+
return textColor;
|
|
5294
|
+
}, function (_a) {
|
|
5295
|
+
var _b;
|
|
5296
|
+
var size = _a.size;
|
|
5297
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5298
|
+
}, function (_a) {
|
|
5299
|
+
var _b;
|
|
5300
|
+
var size = _a.size;
|
|
5301
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5302
|
+
});
|
|
5303
|
+
var ClubOfferTag = function (_a) {
|
|
5304
|
+
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5305
|
+
var theme = useTheme();
|
|
5306
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5307
|
+
};
|
|
5308
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5309
|
+
|
|
5310
|
+
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5242
5311
|
var _a, _b, _c;
|
|
5243
5312
|
switch (size) {
|
|
5244
5313
|
case exports.ComponentSize.Large:
|
|
@@ -5267,7 +5336,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5267
5336
|
};
|
|
5268
5337
|
}
|
|
5269
5338
|
};
|
|
5270
|
-
var Container
|
|
5339
|
+
var Container$_ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5271
5340
|
var backgroundColor = _a.backgroundColor;
|
|
5272
5341
|
return backgroundColor;
|
|
5273
5342
|
}, function (_a) {
|
|
@@ -5276,39 +5345,39 @@ var Container$$ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5276
5345
|
}, function (_a) {
|
|
5277
5346
|
var _b;
|
|
5278
5347
|
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5279
|
-
return (_b = getStylesBySize$
|
|
5348
|
+
return (_b = getStylesBySize$c(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5280
5349
|
}, function (_a) {
|
|
5281
5350
|
var _b;
|
|
5282
5351
|
var size = _a.size;
|
|
5283
|
-
return (_b = getStylesBySize$
|
|
5352
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5284
5353
|
}, function (_a) {
|
|
5285
5354
|
var size = _a.size;
|
|
5286
5355
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5287
5356
|
}, function (_a) {
|
|
5288
5357
|
var _b;
|
|
5289
5358
|
var size = _a.size;
|
|
5290
|
-
return (_b = getStylesBySize$
|
|
5359
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5291
5360
|
});
|
|
5292
|
-
var H3$
|
|
5361
|
+
var H3$2 = 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) {
|
|
5293
5362
|
var textColor = _a.textColor;
|
|
5294
5363
|
return textColor;
|
|
5295
5364
|
}, function (_a) {
|
|
5296
5365
|
var _b;
|
|
5297
5366
|
var size = _a.size, theme = _a.theme;
|
|
5298
|
-
return (_b = getStylesBySize$
|
|
5367
|
+
return (_b = getStylesBySize$c(size, false, theme)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5299
5368
|
}, function (_a) {
|
|
5300
5369
|
var _b;
|
|
5301
5370
|
var size = _a.size;
|
|
5302
|
-
return (_b = getStylesBySize$
|
|
5371
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5303
5372
|
});
|
|
5304
5373
|
var DiscountTag = function (_a) {
|
|
5305
5374
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5306
5375
|
var theme = useTheme();
|
|
5307
|
-
return (jsxRuntime.jsx(Container
|
|
5376
|
+
return (jsxRuntime.jsx(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5308
5377
|
};
|
|
5309
5378
|
var templateObject_1$1B, templateObject_2$11;
|
|
5310
5379
|
|
|
5311
|
-
var getStylesBySize$
|
|
5380
|
+
var getStylesBySize$b = function (size, theme) {
|
|
5312
5381
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5313
5382
|
switch (size) {
|
|
5314
5383
|
case exports.ComponentSize.Large:
|
|
@@ -5339,16 +5408,16 @@ var getStylesBySize$c = function (size, theme) {
|
|
|
5339
5408
|
var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall) {
|
|
5340
5409
|
var _a, _b, _c;
|
|
5341
5410
|
if (finalPriceStyled) {
|
|
5342
|
-
return (_a = getStylesBySize$
|
|
5411
|
+
return (_a = getStylesBySize$b(size, theme)) === null || _a === void 0 ? void 0 : _a.finalPricefontSize;
|
|
5343
5412
|
}
|
|
5344
5413
|
else if (finalPriceStyledSmall) {
|
|
5345
|
-
return (_b = getStylesBySize$
|
|
5414
|
+
return (_b = getStylesBySize$b(size, theme)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall;
|
|
5346
5415
|
}
|
|
5347
5416
|
else {
|
|
5348
|
-
return (_c = getStylesBySize$
|
|
5417
|
+
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5349
5418
|
}
|
|
5350
5419
|
};
|
|
5351
|
-
var Container$
|
|
5420
|
+
var Container$Z = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5352
5421
|
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) {
|
|
5353
5422
|
var weight = _a.weight;
|
|
5354
5423
|
return (weight ? weight : '400');
|
|
@@ -5358,7 +5427,7 @@ var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5358
5427
|
}, function (_a) {
|
|
5359
5428
|
var _b;
|
|
5360
5429
|
var size = _a.size;
|
|
5361
|
-
return (_b = getStylesBySize$
|
|
5430
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5362
5431
|
}, function (_a) {
|
|
5363
5432
|
var color = _a.color;
|
|
5364
5433
|
return color;
|
|
@@ -5368,15 +5437,15 @@ var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5368
5437
|
}, function (_a) {
|
|
5369
5438
|
var _b;
|
|
5370
5439
|
var margin = _a.margin, size = _a.size;
|
|
5371
|
-
return (margin ? (_b = getStylesBySize$
|
|
5440
|
+
return (margin ? (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5372
5441
|
}, function (_a) {
|
|
5373
5442
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5374
5443
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5375
5444
|
});
|
|
5376
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5445
|
+
var TagContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5377
5446
|
var _b;
|
|
5378
5447
|
var size = _a.size;
|
|
5379
|
-
return (_b = getStylesBySize$
|
|
5448
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5380
5449
|
});
|
|
5381
5450
|
function getTestId() {
|
|
5382
5451
|
var args = [];
|
|
@@ -5404,80 +5473,11 @@ var PriceLabel = function (_a) {
|
|
|
5404
5473
|
: exports.ComponentSize.XSmall;
|
|
5405
5474
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5406
5475
|
};
|
|
5407
|
-
return (jsxRuntime.jsxs(Container$
|
|
5476
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5408
5477
|
};
|
|
5409
|
-
var templateObject_1$1A, templateObject_2$10, templateObject_3$
|
|
5478
|
+
var templateObject_1$1A, templateObject_2$10, templateObject_3$Q;
|
|
5410
5479
|
|
|
5411
|
-
var
|
|
5412
|
-
switch (size) {
|
|
5413
|
-
case exports.ComponentSize.Large:
|
|
5414
|
-
return {
|
|
5415
|
-
borderRadius: '0.375rem',
|
|
5416
|
-
padding: '0 0.75rem',
|
|
5417
|
-
fontSize: '0.875rem',
|
|
5418
|
-
lineHeight: '1.125rem',
|
|
5419
|
-
height: '1.75rem',
|
|
5420
|
-
};
|
|
5421
|
-
case exports.ComponentSize.Medium:
|
|
5422
|
-
return {
|
|
5423
|
-
borderRadius: '0.25rem',
|
|
5424
|
-
padding: '0 0.5rem',
|
|
5425
|
-
fontSize: '0.75rem',
|
|
5426
|
-
lineHeight: '1rem',
|
|
5427
|
-
height: '1.375rem',
|
|
5428
|
-
};
|
|
5429
|
-
case exports.ComponentSize.Small:
|
|
5430
|
-
return {
|
|
5431
|
-
borderRadius: '0.25rem',
|
|
5432
|
-
padding: '0',
|
|
5433
|
-
fontSize: '0.625rem',
|
|
5434
|
-
lineHeight: '0.75rem',
|
|
5435
|
-
height: '2rem',
|
|
5436
|
-
};
|
|
5437
|
-
}
|
|
5438
|
-
};
|
|
5439
|
-
var Container$Z = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5440
|
-
var backgroundColor = _a.backgroundColor;
|
|
5441
|
-
return backgroundColor;
|
|
5442
|
-
}, function (_a) {
|
|
5443
|
-
var borderColor = _a.borderColor;
|
|
5444
|
-
return borderColor;
|
|
5445
|
-
}, function (_a) {
|
|
5446
|
-
var _b;
|
|
5447
|
-
var size = _a.size;
|
|
5448
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5449
|
-
}, function (_a) {
|
|
5450
|
-
var _b;
|
|
5451
|
-
var size = _a.size;
|
|
5452
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5453
|
-
}, function (_a) {
|
|
5454
|
-
var size = _a.size;
|
|
5455
|
-
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5456
|
-
}, function (_a) {
|
|
5457
|
-
var _b;
|
|
5458
|
-
var size = _a.size;
|
|
5459
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5460
|
-
});
|
|
5461
|
-
var H3$2 = newStyled.h3(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5462
|
-
var textColor = _a.textColor;
|
|
5463
|
-
return textColor;
|
|
5464
|
-
}, function (_a) {
|
|
5465
|
-
var _b;
|
|
5466
|
-
var size = _a.size;
|
|
5467
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5468
|
-
}, function (_a) {
|
|
5469
|
-
var _b;
|
|
5470
|
-
var size = _a.size;
|
|
5471
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5472
|
-
});
|
|
5473
|
-
var ClubOfferTag = function (_a) {
|
|
5474
|
-
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5475
|
-
var theme = useTheme();
|
|
5476
|
-
return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5477
|
-
};
|
|
5478
|
-
var templateObject_1$1z, templateObject_2$$;
|
|
5479
|
-
|
|
5480
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5480
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5481
5481
|
var PriceLabelV2 = function (_a) {
|
|
5482
5482
|
var _b;
|
|
5483
5483
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5527,7 +5527,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5527
5527
|
var savetoString = saveto.toFixed(2);
|
|
5528
5528
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5529
5529
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5530
|
-
return (jsxRuntime.jsxs(Container$
|
|
5530
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5531
5531
|
marginTop: '-5px',
|
|
5532
5532
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5533
5533
|
marginTop: '-6px',
|
|
@@ -5543,7 +5543,84 @@ var PriceLabelV2 = function (_a) {
|
|
|
5543
5543
|
lineHeight: '22px',
|
|
5544
5544
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5545
5545
|
};
|
|
5546
|
-
var templateObject_1$
|
|
5546
|
+
var templateObject_1$1z;
|
|
5547
|
+
|
|
5548
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5549
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5550
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5551
|
+
var PriceLabelV3 = function (_a) {
|
|
5552
|
+
var _b;
|
|
5553
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity"]);
|
|
5554
|
+
var theme = useTheme();
|
|
5555
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
5556
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
5557
|
+
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
5558
|
+
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
5559
|
+
var supportedCurrencies = ['A$', 'CA$', '£'];
|
|
5560
|
+
var currencySymbol = '$';
|
|
5561
|
+
if (typeof finalPrice === 'string') {
|
|
5562
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
5563
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
5564
|
+
currencySymbol = availableCurrency;
|
|
5565
|
+
}
|
|
5566
|
+
});
|
|
5567
|
+
}
|
|
5568
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
5569
|
+
finalPrice.includes('.') &&
|
|
5570
|
+
finalPrice.includes(currencySymbol)
|
|
5571
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
5572
|
+
: ['', ''];
|
|
5573
|
+
var priceCommonProps = {
|
|
5574
|
+
size: exports.ComponentSize.Small,
|
|
5575
|
+
color: isClubOffer
|
|
5576
|
+
? 'var(--colors-pallete-wine-color)'
|
|
5577
|
+
: color || theme.colors.pallete.secondary.color,
|
|
5578
|
+
weight: 700,
|
|
5579
|
+
};
|
|
5580
|
+
var originalPriceNum, finalPriceNum;
|
|
5581
|
+
if (typeof originalPrice === 'string' && typeof finalPrice === 'string') {
|
|
5582
|
+
originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
|
|
5583
|
+
finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
|
|
5584
|
+
}
|
|
5585
|
+
else {
|
|
5586
|
+
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
5587
|
+
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
5588
|
+
}
|
|
5589
|
+
var saveto = originalPriceNum - finalPriceNum;
|
|
5590
|
+
var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
|
|
5591
|
+
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
5592
|
+
saveto = Math.floor(saveto) + 0.0;
|
|
5593
|
+
}
|
|
5594
|
+
else if (decimalPart >= 0.51 && decimalPart < 1.0) {
|
|
5595
|
+
saveto = Math.floor(saveto) + 0.5;
|
|
5596
|
+
}
|
|
5597
|
+
var savetoString = saveto.toFixed(2);
|
|
5598
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5599
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5600
|
+
var DiscountedPriceOfEach = function () {
|
|
5601
|
+
var priceEachOne;
|
|
5602
|
+
if (!itemsQuantity || itemsQuantity < 2)
|
|
5603
|
+
return null;
|
|
5604
|
+
priceEachOne = (finalPriceNum / itemsQuantity).toFixed(2);
|
|
5605
|
+
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", currencySymbol, priceEachOne] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5606
|
+
};
|
|
5607
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$Z, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5608
|
+
marginTop: '-5px',
|
|
5609
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5610
|
+
marginTop: '-6px',
|
|
5611
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), itemsQuantity ? jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0) : null, isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5612
|
+
letterSpacing: '-0.05rem',
|
|
5613
|
+
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5614
|
+
borderRadius: '8px',
|
|
5615
|
+
width: '107px',
|
|
5616
|
+
height: '28px',
|
|
5617
|
+
alignItems: 'center',
|
|
5618
|
+
padding: '3px 8px 3px 8px',
|
|
5619
|
+
fontSize: '14px',
|
|
5620
|
+
lineHeight: '22px',
|
|
5621
|
+
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5622
|
+
};
|
|
5623
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P;
|
|
5547
5624
|
|
|
5548
5625
|
var FlexContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5549
5626
|
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) {
|
|
@@ -7031,7 +7108,7 @@ var FitPredictor = function (_a) {
|
|
|
7031
7108
|
};
|
|
7032
7109
|
var templateObject_1$X, templateObject_2$C;
|
|
7033
7110
|
|
|
7034
|
-
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) {
|
|
7111
|
+
var Image$1 = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
7035
7112
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7036
7113
|
return borderRadiusVariant &&
|
|
7037
7114
|
"\nborder-radius: 20px;\n";
|
|
@@ -13358,10 +13435,13 @@ var Input$3 = {
|
|
|
13358
13435
|
SimplePlusIcon: BasePlusIcon,
|
|
13359
13436
|
};
|
|
13360
13437
|
|
|
13361
|
-
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13438
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13362
13439
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13363
13440
|
return borderRadiusVariant &&
|
|
13364
13441
|
"\n border-radius: 40px;\n ";
|
|
13442
|
+
}, function (_a) {
|
|
13443
|
+
var theme = _a.theme;
|
|
13444
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13365
13445
|
});
|
|
13366
13446
|
// max-height: 31.875rem;
|
|
13367
13447
|
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'); });
|
|
@@ -19363,6 +19443,7 @@ exports.PaypalButton = PaypalButton;
|
|
|
19363
19443
|
exports.Portal = Portal;
|
|
19364
19444
|
exports.PriceLabel = PriceLabel;
|
|
19365
19445
|
exports.PriceLabelV2 = PriceLabelV2;
|
|
19446
|
+
exports.PriceLabelV3 = PriceLabelV3;
|
|
19366
19447
|
exports.ProductGallery = ProductGallery;
|
|
19367
19448
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19368
19449
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|