@trafilea/afrodita-components 6.4.6 → 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.d.ts +22 -16
- package/build/index.esm.js +215 -138
- package/build/index.esm.js.map +1 -1
- package/build/index.js +215 -137
- 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/truekind.theme.d.ts +1 -1
- 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$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) {
|
|
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$1R;
|
|
3152
3152
|
|
|
3153
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3153
|
+
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) {
|
|
3154
3154
|
var width = _a.width;
|
|
3155
3155
|
return width;
|
|
3156
3156
|
}, function (_a) {
|
|
@@ -3166,7 +3166,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1P || (templateObject_1$1P
|
|
|
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$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) {
|
|
3170
3170
|
var width = _a.width;
|
|
3171
3171
|
return width;
|
|
3172
3172
|
}, function (_a) {
|
|
@@ -3179,7 +3179,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1b || (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$1Q, templateObject_2$1c;
|
|
3183
3183
|
|
|
3184
3184
|
/* eslint-disable no-undef */
|
|
3185
3185
|
var cache = new Map();
|
|
@@ -4055,9 +4055,9 @@ function jsxs(type, props, key) {
|
|
|
4055
4055
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4056
4056
|
// `variants` styles that are consistent through all themes.
|
|
4057
4057
|
var TAGS = {
|
|
4058
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4059
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4060
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4058
|
+
hero1: newStyled.h1(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject([""], [""]))),
|
|
4059
|
+
hero2: newStyled.h2(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject([""], [""]))),
|
|
4060
|
+
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4061
4061
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4062
4062
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
4063
4063
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4191,11 +4191,11 @@ var DEFAULTS = {
|
|
|
4191
4191
|
size: 'regular',
|
|
4192
4192
|
},
|
|
4193
4193
|
};
|
|
4194
|
-
var templateObject_1$
|
|
4194
|
+
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;
|
|
4195
4195
|
|
|
4196
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4197
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4198
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4196
|
+
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"])));
|
|
4197
|
+
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"])));
|
|
4198
|
+
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"])));
|
|
4199
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"])));
|
|
4200
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"])));
|
|
4201
4201
|
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"])));
|
|
@@ -4223,27 +4223,27 @@ var PackCard$1 = function (_a) {
|
|
|
4223
4223
|
currency: currencyCode || 'USD',
|
|
4224
4224
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4225
4225
|
};
|
|
4226
|
-
var templateObject_1$
|
|
4226
|
+
var templateObject_1$1O, templateObject_2$1a, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4227
4227
|
|
|
4228
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4229
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4228
|
+
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"])));
|
|
4229
|
+
var DropContainer = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4230
4230
|
var DropList = function (_a) {
|
|
4231
4231
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4232
4232
|
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4233
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));
|
|
4234
4234
|
}) }, void 0));
|
|
4235
4235
|
};
|
|
4236
|
-
var templateObject_1$
|
|
4236
|
+
var templateObject_1$1N, templateObject_2$19;
|
|
4237
4237
|
|
|
4238
4238
|
var DROPS_TOTAL = 5;
|
|
4239
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4240
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4241
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4239
|
+
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"])));
|
|
4240
|
+
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"])));
|
|
4241
|
+
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"])));
|
|
4242
4242
|
var AbsorbencyLevel = function (_a) {
|
|
4243
4243
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4244
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));
|
|
4245
4245
|
};
|
|
4246
|
-
var templateObject_1$
|
|
4246
|
+
var templateObject_1$1M, templateObject_2$18, templateObject_3$T;
|
|
4247
4247
|
|
|
4248
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(`
|
|
4249
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(`
|
|
@@ -4319,7 +4319,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4319
4319
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4320
4320
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4321
4321
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4322
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4322
|
+
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"])));
|
|
4323
4323
|
var Accordion$1 = function (_a) {
|
|
4324
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;
|
|
4325
4325
|
var theme = useTheme();
|
|
@@ -4343,9 +4343,9 @@ var Accordion$1 = function (_a) {
|
|
|
4343
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));
|
|
4344
4344
|
} }), void 0));
|
|
4345
4345
|
};
|
|
4346
|
-
var templateObject_1$
|
|
4346
|
+
var templateObject_1$1L;
|
|
4347
4347
|
|
|
4348
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4348
|
+
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"])));
|
|
4349
4349
|
var AccordionOptions = function (_a) {
|
|
4350
4350
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4351
4351
|
var _b = useState({
|
|
@@ -4369,7 +4369,7 @@ var AccordionOptions = function (_a) {
|
|
|
4369
4369
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4370
4370
|
}) }, void 0));
|
|
4371
4371
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1K;
|
|
4373
4373
|
|
|
4374
4374
|
var CardSectionType;
|
|
4375
4375
|
(function (CardSectionType) {
|
|
@@ -4531,14 +4531,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4531
4531
|
literal: true,
|
|
4532
4532
|
});
|
|
4533
4533
|
|
|
4534
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4535
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4534
|
+
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; });
|
|
4535
|
+
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"])));
|
|
4536
4536
|
var Error$1 = function (_a) {
|
|
4537
4537
|
var error = _a.error;
|
|
4538
4538
|
var theme = useTheme();
|
|
4539
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));
|
|
4540
4540
|
};
|
|
4541
|
-
var templateObject_1$
|
|
4541
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
4542
4542
|
|
|
4543
4543
|
var BaseSelectButton = function (_a) {
|
|
4544
4544
|
var children = _a.children, as = _a.as;
|
|
@@ -4555,7 +4555,7 @@ function BaseSelectOption(_a) {
|
|
|
4555
4555
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4556
4556
|
}
|
|
4557
4557
|
|
|
4558
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4558
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4559
4559
|
function BaseSelect(_a) {
|
|
4560
4560
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4561
4561
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4565,7 +4565,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4565
4565
|
Options: BaseSelectOptions,
|
|
4566
4566
|
Option: BaseSelectOption,
|
|
4567
4567
|
});
|
|
4568
|
-
var templateObject_1$
|
|
4568
|
+
var templateObject_1$1I;
|
|
4569
4569
|
|
|
4570
4570
|
var CustomButton = newStyled.button(function (_a) {
|
|
4571
4571
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4604,7 +4604,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4604
4604
|
});
|
|
4605
4605
|
});
|
|
4606
4606
|
//TODO Remove this when we find the real solution
|
|
4607
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4607
|
+
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) {
|
|
4608
4608
|
var open = _a.open;
|
|
4609
4609
|
return open &&
|
|
4610
4610
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4624,7 +4624,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4624
4624
|
} }), void 0));
|
|
4625
4625
|
};
|
|
4626
4626
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4627
|
-
var templateObject_1$
|
|
4627
|
+
var templateObject_1$1H;
|
|
4628
4628
|
|
|
4629
4629
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4630
4630
|
var theme = _a.theme;
|
|
@@ -4791,7 +4791,7 @@ var CustomCheckboxStyles = {
|
|
|
4791
4791
|
},
|
|
4792
4792
|
};
|
|
4793
4793
|
|
|
4794
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4794
|
+
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"])));
|
|
4795
4795
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4796
4796
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4797
4797
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4802,7 +4802,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4802
4802
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4803
4803
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4804
4804
|
]; });
|
|
4805
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4805
|
+
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) {
|
|
4806
4806
|
var disabled = _a.disabled;
|
|
4807
4807
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4808
4808
|
});
|
|
@@ -4818,7 +4818,7 @@ var Checkbox = function (_a) {
|
|
|
4818
4818
|
};
|
|
4819
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));
|
|
4820
4820
|
};
|
|
4821
|
-
var templateObject_1$
|
|
4821
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4822
4822
|
|
|
4823
4823
|
var CustomOption = newStyled.li(function (_a) {
|
|
4824
4824
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4867,8 +4867,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4867
4867
|
Option: BaseDropdownOption,
|
|
4868
4868
|
});
|
|
4869
4869
|
|
|
4870
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4871
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4870
|
+
var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject([""], [""])));
|
|
4871
|
+
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"])));
|
|
4872
4872
|
function SimpleDropdown(_a) {
|
|
4873
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;
|
|
4874
4874
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4900,7 +4900,7 @@ function SimpleDropdown(_a) {
|
|
|
4900
4900
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4901
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));
|
|
4902
4902
|
}
|
|
4903
|
-
var templateObject_1$
|
|
4903
|
+
var templateObject_1$1F, templateObject_2$15;
|
|
4904
4904
|
|
|
4905
4905
|
/* base styles & size variants */
|
|
4906
4906
|
var CustomRadioStyles$2 = {
|
|
@@ -4965,9 +4965,9 @@ var ContainerStyles$2 = {
|
|
|
4965
4965
|
},
|
|
4966
4966
|
};
|
|
4967
4967
|
|
|
4968
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4968
|
+
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"])));
|
|
4969
4969
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4970
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4970
|
+
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) {
|
|
4971
4971
|
var disabled = _a.disabled;
|
|
4972
4972
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4973
4973
|
});
|
|
@@ -4975,7 +4975,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
4975
4975
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
4976
4976
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
4977
4977
|
]; });
|
|
4978
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
4978
|
+
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) {
|
|
4979
4979
|
var theme = _a.theme;
|
|
4980
4980
|
return theme.component.radio.textSize;
|
|
4981
4981
|
}, function (_a) {
|
|
@@ -4991,7 +4991,7 @@ var RadioInput = function (_a) {
|
|
|
4991
4991
|
};
|
|
4992
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));
|
|
4993
4993
|
};
|
|
4994
|
-
var templateObject_1$
|
|
4994
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$S;
|
|
4995
4995
|
|
|
4996
4996
|
var getWrapperFlexDirection = function (position) {
|
|
4997
4997
|
switch (position) {
|
|
@@ -5042,7 +5042,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5042
5042
|
}
|
|
5043
5043
|
};
|
|
5044
5044
|
|
|
5045
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5045
|
+
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) {
|
|
5046
5046
|
var position = _a.position;
|
|
5047
5047
|
return getWrapperFlexDirection(position);
|
|
5048
5048
|
}, function (_a) {
|
|
@@ -5052,7 +5052,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __ma
|
|
|
5052
5052
|
var disableHover = _a.disableHover;
|
|
5053
5053
|
return (disableHover ? 0 : 1);
|
|
5054
5054
|
});
|
|
5055
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5055
|
+
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) {
|
|
5056
5056
|
var position = _a.position;
|
|
5057
5057
|
return getContainerFlexDirection(position);
|
|
5058
5058
|
}, function (_a) {
|
|
@@ -5080,7 +5080,7 @@ var TooltipContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12
|
|
|
5080
5080
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5081
5081
|
return actual === expected ? margin : '0';
|
|
5082
5082
|
};
|
|
5083
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5083
|
+
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) {
|
|
5084
5084
|
var borderColor = _a.borderColor;
|
|
5085
5085
|
return borderColor;
|
|
5086
5086
|
}, function (_a) {
|
|
@@ -5098,7 +5098,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5098
5098
|
});
|
|
5099
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"])));
|
|
5100
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$
|
|
5101
|
+
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;
|
|
5102
5102
|
|
|
5103
5103
|
var useOnClickOutside = function (ref, handler) {
|
|
5104
5104
|
useEffect(function () {
|
|
@@ -5212,7 +5212,76 @@ var benefitsColorMapper = function (_a) {
|
|
|
5212
5212
|
};
|
|
5213
5213
|
};
|
|
5214
5214
|
|
|
5215
|
-
var getStylesBySize$d = function (size
|
|
5215
|
+
var getStylesBySize$d = function (size) {
|
|
5216
|
+
switch (size) {
|
|
5217
|
+
case ComponentSize.Large:
|
|
5218
|
+
return {
|
|
5219
|
+
borderRadius: '0.375rem',
|
|
5220
|
+
padding: '0 0.75rem',
|
|
5221
|
+
fontSize: '0.875rem',
|
|
5222
|
+
lineHeight: '1.125rem',
|
|
5223
|
+
height: '1.75rem',
|
|
5224
|
+
};
|
|
5225
|
+
case ComponentSize.Medium:
|
|
5226
|
+
return {
|
|
5227
|
+
borderRadius: '0.25rem',
|
|
5228
|
+
padding: '0 0.5rem',
|
|
5229
|
+
fontSize: '0.75rem',
|
|
5230
|
+
lineHeight: '1rem',
|
|
5231
|
+
height: '1.375rem',
|
|
5232
|
+
};
|
|
5233
|
+
case ComponentSize.Small:
|
|
5234
|
+
return {
|
|
5235
|
+
borderRadius: '0.25rem',
|
|
5236
|
+
padding: '0',
|
|
5237
|
+
fontSize: '0.625rem',
|
|
5238
|
+
lineHeight: '0.75rem',
|
|
5239
|
+
height: '2rem',
|
|
5240
|
+
};
|
|
5241
|
+
}
|
|
5242
|
+
};
|
|
5243
|
+
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) {
|
|
5244
|
+
var backgroundColor = _a.backgroundColor;
|
|
5245
|
+
return backgroundColor;
|
|
5246
|
+
}, function (_a) {
|
|
5247
|
+
var borderColor = _a.borderColor;
|
|
5248
|
+
return borderColor;
|
|
5249
|
+
}, function (_a) {
|
|
5250
|
+
var _b;
|
|
5251
|
+
var size = _a.size;
|
|
5252
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5253
|
+
}, function (_a) {
|
|
5254
|
+
var _b;
|
|
5255
|
+
var size = _a.size;
|
|
5256
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5257
|
+
}, function (_a) {
|
|
5258
|
+
var size = _a.size;
|
|
5259
|
+
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5260
|
+
}, function (_a) {
|
|
5261
|
+
var _b;
|
|
5262
|
+
var size = _a.size;
|
|
5263
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5264
|
+
});
|
|
5265
|
+
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) {
|
|
5266
|
+
var textColor = _a.textColor;
|
|
5267
|
+
return textColor;
|
|
5268
|
+
}, function (_a) {
|
|
5269
|
+
var _b;
|
|
5270
|
+
var size = _a.size;
|
|
5271
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5272
|
+
}, function (_a) {
|
|
5273
|
+
var _b;
|
|
5274
|
+
var size = _a.size;
|
|
5275
|
+
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5276
|
+
});
|
|
5277
|
+
var ClubOfferTag = function (_a) {
|
|
5278
|
+
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5279
|
+
var theme = useTheme();
|
|
5280
|
+
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": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5281
|
+
};
|
|
5282
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5283
|
+
|
|
5284
|
+
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5216
5285
|
var _a, _b, _c;
|
|
5217
5286
|
switch (size) {
|
|
5218
5287
|
case ComponentSize.Large:
|
|
@@ -5241,7 +5310,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5241
5310
|
};
|
|
5242
5311
|
}
|
|
5243
5312
|
};
|
|
5244
|
-
var Container
|
|
5313
|
+
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) {
|
|
5245
5314
|
var backgroundColor = _a.backgroundColor;
|
|
5246
5315
|
return backgroundColor;
|
|
5247
5316
|
}, function (_a) {
|
|
@@ -5250,39 +5319,39 @@ var Container$$ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5250
5319
|
}, function (_a) {
|
|
5251
5320
|
var _b;
|
|
5252
5321
|
var size = _a.size, bordersRounded = _a.bordersRounded;
|
|
5253
|
-
return (_b = getStylesBySize$
|
|
5322
|
+
return (_b = getStylesBySize$c(size, bordersRounded)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5254
5323
|
}, function (_a) {
|
|
5255
5324
|
var _b;
|
|
5256
5325
|
var size = _a.size;
|
|
5257
|
-
return (_b = getStylesBySize$
|
|
5326
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5258
5327
|
}, function (_a) {
|
|
5259
5328
|
var size = _a.size;
|
|
5260
5329
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5261
5330
|
}, function (_a) {
|
|
5262
5331
|
var _b;
|
|
5263
5332
|
var size = _a.size;
|
|
5264
|
-
return (_b = getStylesBySize$
|
|
5333
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5265
5334
|
});
|
|
5266
|
-
var H3$
|
|
5335
|
+
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) {
|
|
5267
5336
|
var textColor = _a.textColor;
|
|
5268
5337
|
return textColor;
|
|
5269
5338
|
}, function (_a) {
|
|
5270
5339
|
var _b;
|
|
5271
5340
|
var size = _a.size, theme = _a.theme;
|
|
5272
|
-
return (_b = getStylesBySize$
|
|
5341
|
+
return (_b = getStylesBySize$c(size, false, theme)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5273
5342
|
}, function (_a) {
|
|
5274
5343
|
var _b;
|
|
5275
5344
|
var size = _a.size;
|
|
5276
|
-
return (_b = getStylesBySize$
|
|
5345
|
+
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5277
5346
|
});
|
|
5278
5347
|
var DiscountTag = function (_a) {
|
|
5279
5348
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5280
5349
|
var theme = useTheme();
|
|
5281
|
-
return (jsx$1(Container
|
|
5350
|
+
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$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));
|
|
5282
5351
|
};
|
|
5283
5352
|
var templateObject_1$1B, templateObject_2$11;
|
|
5284
5353
|
|
|
5285
|
-
var getStylesBySize$
|
|
5354
|
+
var getStylesBySize$b = function (size, theme) {
|
|
5286
5355
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5287
5356
|
switch (size) {
|
|
5288
5357
|
case ComponentSize.Large:
|
|
@@ -5313,16 +5382,16 @@ var getStylesBySize$c = function (size, theme) {
|
|
|
5313
5382
|
var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall) {
|
|
5314
5383
|
var _a, _b, _c;
|
|
5315
5384
|
if (finalPriceStyled) {
|
|
5316
|
-
return (_a = getStylesBySize$
|
|
5385
|
+
return (_a = getStylesBySize$b(size, theme)) === null || _a === void 0 ? void 0 : _a.finalPricefontSize;
|
|
5317
5386
|
}
|
|
5318
5387
|
else if (finalPriceStyledSmall) {
|
|
5319
|
-
return (_b = getStylesBySize$
|
|
5388
|
+
return (_b = getStylesBySize$b(size, theme)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall;
|
|
5320
5389
|
}
|
|
5321
5390
|
else {
|
|
5322
|
-
return (_c = getStylesBySize$
|
|
5391
|
+
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5323
5392
|
}
|
|
5324
5393
|
};
|
|
5325
|
-
var Container$
|
|
5394
|
+
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"])));
|
|
5326
5395
|
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) {
|
|
5327
5396
|
var weight = _a.weight;
|
|
5328
5397
|
return (weight ? weight : '400');
|
|
@@ -5332,7 +5401,7 @@ var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5332
5401
|
}, function (_a) {
|
|
5333
5402
|
var _b;
|
|
5334
5403
|
var size = _a.size;
|
|
5335
|
-
return (_b = getStylesBySize$
|
|
5404
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5336
5405
|
}, function (_a) {
|
|
5337
5406
|
var color = _a.color;
|
|
5338
5407
|
return color;
|
|
@@ -5342,15 +5411,15 @@ var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemp
|
|
|
5342
5411
|
}, function (_a) {
|
|
5343
5412
|
var _b;
|
|
5344
5413
|
var margin = _a.margin, size = _a.size;
|
|
5345
|
-
return (margin ? (_b = getStylesBySize$
|
|
5414
|
+
return (margin ? (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5346
5415
|
}, function (_a) {
|
|
5347
5416
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5348
5417
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5349
5418
|
});
|
|
5350
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5419
|
+
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) {
|
|
5351
5420
|
var _b;
|
|
5352
5421
|
var size = _a.size;
|
|
5353
|
-
return (_b = getStylesBySize$
|
|
5422
|
+
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5354
5423
|
});
|
|
5355
5424
|
function getTestId() {
|
|
5356
5425
|
var args = [];
|
|
@@ -5378,80 +5447,11 @@ var PriceLabel = function (_a) {
|
|
|
5378
5447
|
: ComponentSize.XSmall;
|
|
5379
5448
|
return (jsx$1(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));
|
|
5380
5449
|
};
|
|
5381
|
-
return (jsxs$1(Container$
|
|
5450
|
+
return (jsxs$1(Container$Z, __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));
|
|
5382
5451
|
};
|
|
5383
|
-
var templateObject_1$1A, templateObject_2$10, templateObject_3$
|
|
5452
|
+
var templateObject_1$1A, templateObject_2$10, templateObject_3$Q;
|
|
5384
5453
|
|
|
5385
|
-
var
|
|
5386
|
-
switch (size) {
|
|
5387
|
-
case ComponentSize.Large:
|
|
5388
|
-
return {
|
|
5389
|
-
borderRadius: '0.375rem',
|
|
5390
|
-
padding: '0 0.75rem',
|
|
5391
|
-
fontSize: '0.875rem',
|
|
5392
|
-
lineHeight: '1.125rem',
|
|
5393
|
-
height: '1.75rem',
|
|
5394
|
-
};
|
|
5395
|
-
case ComponentSize.Medium:
|
|
5396
|
-
return {
|
|
5397
|
-
borderRadius: '0.25rem',
|
|
5398
|
-
padding: '0 0.5rem',
|
|
5399
|
-
fontSize: '0.75rem',
|
|
5400
|
-
lineHeight: '1rem',
|
|
5401
|
-
height: '1.375rem',
|
|
5402
|
-
};
|
|
5403
|
-
case ComponentSize.Small:
|
|
5404
|
-
return {
|
|
5405
|
-
borderRadius: '0.25rem',
|
|
5406
|
-
padding: '0',
|
|
5407
|
-
fontSize: '0.625rem',
|
|
5408
|
-
lineHeight: '0.75rem',
|
|
5409
|
-
height: '2rem',
|
|
5410
|
-
};
|
|
5411
|
-
}
|
|
5412
|
-
};
|
|
5413
|
-
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) {
|
|
5414
|
-
var backgroundColor = _a.backgroundColor;
|
|
5415
|
-
return backgroundColor;
|
|
5416
|
-
}, function (_a) {
|
|
5417
|
-
var borderColor = _a.borderColor;
|
|
5418
|
-
return borderColor;
|
|
5419
|
-
}, function (_a) {
|
|
5420
|
-
var _b;
|
|
5421
|
-
var size = _a.size;
|
|
5422
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5423
|
-
}, function (_a) {
|
|
5424
|
-
var _b;
|
|
5425
|
-
var size = _a.size;
|
|
5426
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5427
|
-
}, function (_a) {
|
|
5428
|
-
var size = _a.size;
|
|
5429
|
-
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
5430
|
-
}, function (_a) {
|
|
5431
|
-
var _b;
|
|
5432
|
-
var size = _a.size;
|
|
5433
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5434
|
-
});
|
|
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) {
|
|
5436
|
-
var textColor = _a.textColor;
|
|
5437
|
-
return textColor;
|
|
5438
|
-
}, function (_a) {
|
|
5439
|
-
var _b;
|
|
5440
|
-
var size = _a.size;
|
|
5441
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5442
|
-
}, function (_a) {
|
|
5443
|
-
var _b;
|
|
5444
|
-
var size = _a.size;
|
|
5445
|
-
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5446
|
-
});
|
|
5447
|
-
var ClubOfferTag = function (_a) {
|
|
5448
|
-
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5449
|
-
var theme = useTheme();
|
|
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));
|
|
5451
|
-
};
|
|
5452
|
-
var templateObject_1$1z, templateObject_2$$;
|
|
5453
|
-
|
|
5454
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5454
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5455
5455
|
var PriceLabelV2 = function (_a) {
|
|
5456
5456
|
var _b;
|
|
5457
5457
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5501,7 +5501,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5501
5501
|
var savetoString = saveto.toFixed(2);
|
|
5502
5502
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5503
5503
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5504
|
-
return (jsxs$1(Container$
|
|
5504
|
+
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5505
5505
|
marginTop: '-5px',
|
|
5506
5506
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5507
5507
|
marginTop: '-6px',
|
|
@@ -5517,7 +5517,84 @@ var PriceLabelV2 = function (_a) {
|
|
|
5517
5517
|
lineHeight: '22px',
|
|
5518
5518
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5519
5519
|
};
|
|
5520
|
-
var templateObject_1$
|
|
5520
|
+
var templateObject_1$1z;
|
|
5521
|
+
|
|
5522
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5523
|
+
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"])));
|
|
5524
|
+
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"])));
|
|
5525
|
+
var PriceLabelV3 = function (_a) {
|
|
5526
|
+
var _b;
|
|
5527
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity"]);
|
|
5528
|
+
var theme = useTheme();
|
|
5529
|
+
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
5530
|
+
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
5531
|
+
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
5532
|
+
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
5533
|
+
var supportedCurrencies = ['A$', 'CA$', '£'];
|
|
5534
|
+
var currencySymbol = '$';
|
|
5535
|
+
if (typeof finalPrice === 'string') {
|
|
5536
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
5537
|
+
if (finalPrice.includes(availableCurrency)) {
|
|
5538
|
+
currencySymbol = availableCurrency;
|
|
5539
|
+
}
|
|
5540
|
+
});
|
|
5541
|
+
}
|
|
5542
|
+
var finalPriceArray = typeof finalPrice === 'string' &&
|
|
5543
|
+
finalPrice.includes('.') &&
|
|
5544
|
+
finalPrice.includes(currencySymbol)
|
|
5545
|
+
? finalPrice.split(currencySymbol)[1].split('.')
|
|
5546
|
+
: ['', ''];
|
|
5547
|
+
var priceCommonProps = {
|
|
5548
|
+
size: ComponentSize.Small,
|
|
5549
|
+
color: isClubOffer
|
|
5550
|
+
? 'var(--colors-pallete-wine-color)'
|
|
5551
|
+
: color || theme.colors.pallete.secondary.color,
|
|
5552
|
+
weight: 700,
|
|
5553
|
+
};
|
|
5554
|
+
var originalPriceNum, finalPriceNum;
|
|
5555
|
+
if (typeof originalPrice === 'string' && typeof finalPrice === 'string') {
|
|
5556
|
+
originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
|
|
5557
|
+
finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
|
|
5558
|
+
}
|
|
5559
|
+
else {
|
|
5560
|
+
originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
|
|
5561
|
+
finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
|
|
5562
|
+
}
|
|
5563
|
+
var saveto = originalPriceNum - finalPriceNum;
|
|
5564
|
+
var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
|
|
5565
|
+
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
5566
|
+
saveto = Math.floor(saveto) + 0.0;
|
|
5567
|
+
}
|
|
5568
|
+
else if (decimalPart >= 0.51 && decimalPart < 1.0) {
|
|
5569
|
+
saveto = Math.floor(saveto) + 0.5;
|
|
5570
|
+
}
|
|
5571
|
+
var savetoString = saveto.toFixed(2);
|
|
5572
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5573
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5574
|
+
var DiscountedPriceOfEach = function () {
|
|
5575
|
+
var priceEachOne;
|
|
5576
|
+
if (!itemsQuantity || itemsQuantity < 2)
|
|
5577
|
+
return null;
|
|
5578
|
+
priceEachOne = (finalPriceNum / itemsQuantity).toFixed(2);
|
|
5579
|
+
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", currencySymbol, priceEachOne] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5580
|
+
};
|
|
5581
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$Z, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5582
|
+
marginTop: '-5px',
|
|
5583
|
+
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5584
|
+
marginTop: '-6px',
|
|
5585
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), itemsQuantity ? jsx$1(DiscountedPriceOfEach, {}, void 0) : null, isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5586
|
+
letterSpacing: '-0.05rem',
|
|
5587
|
+
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5588
|
+
borderRadius: '8px',
|
|
5589
|
+
width: '107px',
|
|
5590
|
+
height: '28px',
|
|
5591
|
+
alignItems: 'center',
|
|
5592
|
+
padding: '3px 8px 3px 8px',
|
|
5593
|
+
fontSize: '14px',
|
|
5594
|
+
lineHeight: '22px',
|
|
5595
|
+
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5596
|
+
};
|
|
5597
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P;
|
|
5521
5598
|
|
|
5522
5599
|
var FlexContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5523
5600
|
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) {
|
|
@@ -19284,5 +19361,5 @@ var Spinner = function (_a) {
|
|
|
19284
19361
|
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19285
19362
|
};
|
|
19286
19363
|
|
|
19287
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19364
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19288
19365
|
//# sourceMappingURL=index.esm.js.map
|