@trafilea/afrodita-components 6.4.4 → 6.4.5
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 +3 -1
- package/build/index.esm.js +85 -83
- package/build/index.esm.js.map +1 -1
- package/build/index.js +85 -83
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +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$1Q || (templateObject_1$1Q = __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$1Q;
|
|
3152
3152
|
|
|
3153
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3153
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1P || (templateObject_1$1P = __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) {
|
|
@@ -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$1P, templateObject_2$1b;
|
|
3183
3183
|
|
|
3184
3184
|
/* eslint-disable no-undef */
|
|
3185
3185
|
var cache = new Map();
|
|
@@ -4055,7 +4055,7 @@ 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$
|
|
4058
|
+
hero1: newStyled.h1(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject([""], [""]))),
|
|
4059
4059
|
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4060
4060
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4061
4061
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4191,9 +4191,9 @@ var DEFAULTS = {
|
|
|
4191
4191
|
size: 'regular',
|
|
4192
4192
|
},
|
|
4193
4193
|
};
|
|
4194
|
-
var templateObject_1$
|
|
4194
|
+
var templateObject_1$1O, templateObject_2$1a, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4195
4195
|
|
|
4196
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4196
|
+
var Container$16 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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
4197
|
var Card$3 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4198
4198
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
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"])));
|
|
@@ -4223,9 +4223,9 @@ 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$1N, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4227
4227
|
|
|
4228
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4228
|
+
var Container$15 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4229
4229
|
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4230
4230
|
var DropList = function (_a) {
|
|
4231
4231
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -4233,17 +4233,17 @@ var DropList = function (_a) {
|
|
|
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$1M, templateObject_2$18;
|
|
4237
4237
|
|
|
4238
4238
|
var DROPS_TOTAL = 5;
|
|
4239
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4239
|
+
var Container$14 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4240
4240
|
var Title$8 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4241
4241
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
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$1L, templateObject_2$17, templateObject_3$S;
|
|
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$1K || (templateObject_1$1K = __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$1K;
|
|
4347
4347
|
|
|
4348
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4348
|
+
var Container$13 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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$1J;
|
|
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$
|
|
4534
|
+
var ErrorText = newStyled.h3(templateObject_1$1I || (templateObject_1$1I = __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
4535
|
var ErrorContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
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$1I, templateObject_2$16;
|
|
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$1H || (templateObject_1$1H = __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$1H;
|
|
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$1G || (templateObject_1$1G = __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$1G;
|
|
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$1F || (templateObject_1$1F = __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),
|
|
@@ -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$1F, templateObject_2$15;
|
|
4822
4822
|
|
|
4823
4823
|
var CustomOption = newStyled.li(function (_a) {
|
|
4824
4824
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4867,7 +4867,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4867
4867
|
Option: BaseDropdownOption,
|
|
4868
4868
|
});
|
|
4869
4869
|
|
|
4870
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4870
|
+
var Container$11 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject([""], [""])));
|
|
4871
4871
|
var RequiredPlaceholder = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
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;
|
|
@@ -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$1E, templateObject_2$14;
|
|
4904
4904
|
|
|
4905
4905
|
/* base styles & size variants */
|
|
4906
4906
|
var CustomRadioStyles$2 = {
|
|
@@ -4965,7 +4965,7 @@ 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$1D || (templateObject_1$1D = __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
4970
|
var Input$4 = newStyled.input(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
4971
4971
|
var disabled = _a.disabled;
|
|
@@ -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$1D, templateObject_2$13, templateObject_3$R;
|
|
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$1C || (templateObject_1$1C = __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) {
|
|
@@ -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$1C, templateObject_2$12, templateObject_3$Q, 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 () {
|
|
@@ -5241,7 +5241,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5241
5241
|
};
|
|
5242
5242
|
}
|
|
5243
5243
|
};
|
|
5244
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5244
|
+
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
5245
|
var backgroundColor = _a.backgroundColor;
|
|
5246
5246
|
return backgroundColor;
|
|
5247
5247
|
}, function (_a) {
|
|
@@ -5280,7 +5280,7 @@ var DiscountTag = function (_a) {
|
|
|
5280
5280
|
var theme = useTheme();
|
|
5281
5281
|
return (jsx$1(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5282
5282
|
};
|
|
5283
|
-
var templateObject_1$
|
|
5283
|
+
var templateObject_1$1B, templateObject_2$11;
|
|
5284
5284
|
|
|
5285
5285
|
var getStylesBySize$c = function (size, theme) {
|
|
5286
5286
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5322,7 +5322,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5322
5322
|
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5323
5323
|
}
|
|
5324
5324
|
};
|
|
5325
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5325
|
+
var Container$_ = 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
5326
|
var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
5327
5327
|
var weight = _a.weight;
|
|
5328
5328
|
return (weight ? weight : '400');
|
|
@@ -5380,7 +5380,7 @@ var PriceLabel = function (_a) {
|
|
|
5380
5380
|
};
|
|
5381
5381
|
return (jsxs$1(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5382
5382
|
};
|
|
5383
|
-
var templateObject_1$
|
|
5383
|
+
var templateObject_1$1A, templateObject_2$10, templateObject_3$P;
|
|
5384
5384
|
|
|
5385
5385
|
var getStylesBySize$b = function (size) {
|
|
5386
5386
|
switch (size) {
|
|
@@ -5410,7 +5410,7 @@ var getStylesBySize$b = function (size) {
|
|
|
5410
5410
|
};
|
|
5411
5411
|
}
|
|
5412
5412
|
};
|
|
5413
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
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
5414
|
var backgroundColor = _a.backgroundColor;
|
|
5415
5415
|
return backgroundColor;
|
|
5416
5416
|
}, function (_a) {
|
|
@@ -5449,9 +5449,9 @@ var ClubOfferTag = function (_a) {
|
|
|
5449
5449
|
var theme = useTheme();
|
|
5450
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
5451
|
};
|
|
5452
|
-
var templateObject_1$
|
|
5452
|
+
var templateObject_1$1z, templateObject_2$$;
|
|
5453
5453
|
|
|
5454
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5454
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"]);
|
|
@@ -5517,9 +5517,9 @@ 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$1y;
|
|
5521
5521
|
|
|
5522
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5522
|
+
var FlexContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5523
5523
|
var ContainerBase = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5524
5524
|
var selected = _a.selected, theme = _a.theme;
|
|
5525
5525
|
return selected
|
|
@@ -5557,7 +5557,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5557
5557
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5558
5558
|
});
|
|
5559
5559
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5560
|
-
var templateObject_1$
|
|
5560
|
+
var templateObject_1$1x, templateObject_2$_, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5561
5561
|
|
|
5562
5562
|
var radioIds = {
|
|
5563
5563
|
oneTime: {
|
|
@@ -5570,7 +5570,7 @@ var radioIds = {
|
|
|
5570
5570
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5571
5571
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5572
5572
|
var Autoship = function (_a) {
|
|
5573
|
-
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className;
|
|
5573
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon;
|
|
5574
5574
|
var theme = useTheme();
|
|
5575
5575
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5576
5576
|
? frequencyValues.map(function (value) {
|
|
@@ -5609,15 +5609,15 @@ var Autoship = function (_a) {
|
|
|
5609
5609
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5610
5610
|
return (jsxs$1(Container$Y, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5611
5611
|
? benefitsColor.selected
|
|
5612
|
-
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5612
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5613
5613
|
};
|
|
5614
5614
|
|
|
5615
|
-
var Img = newStyled.img(templateObject_1$
|
|
5615
|
+
var Img = newStyled.img(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
5616
5616
|
var Image$3 = function (_a) {
|
|
5617
5617
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
5618
5618
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5619
5619
|
};
|
|
5620
|
-
var templateObject_1$
|
|
5620
|
+
var templateObject_1$1w;
|
|
5621
5621
|
|
|
5622
5622
|
var _a$2;
|
|
5623
5623
|
var BeforeAfterVariant;
|
|
@@ -5632,13 +5632,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5632
5632
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5633
5633
|
_a$2);
|
|
5634
5634
|
|
|
5635
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5635
|
+
var CustomerDetails = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""])));
|
|
5636
5636
|
var CustomerInfo = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5637
5637
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5638
5638
|
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
5639
5639
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5640
5640
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5641
|
-
var templateObject_1$
|
|
5641
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5642
5642
|
|
|
5643
5643
|
var NameWithStars = function (_a) {
|
|
5644
5644
|
var name = _a.name, size = _a.size;
|
|
@@ -5656,7 +5656,7 @@ var ResultFeedback = function (_a) {
|
|
|
5656
5656
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5657
5657
|
};
|
|
5658
5658
|
|
|
5659
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5659
|
+
var Container$X = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5660
5660
|
var ImageContainer$5 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5661
5661
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5662
5662
|
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -5669,7 +5669,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5669
5669
|
var theme = _a.theme, size = _a.size;
|
|
5670
5670
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5671
5671
|
});
|
|
5672
|
-
var templateObject_1$
|
|
5672
|
+
var templateObject_1$1u, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5673
5673
|
|
|
5674
5674
|
/* base styles & size variants */
|
|
5675
5675
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5747,7 +5747,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5747
5747
|
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5748
5748
|
};
|
|
5749
5749
|
|
|
5750
|
-
var Section = newStyled.div(templateObject_1$
|
|
5750
|
+
var Section = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
5751
5751
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5752
5752
|
});
|
|
5753
5753
|
var CardHeader = function (_a) {
|
|
@@ -5758,16 +5758,16 @@ var CardFooter = function (_a) {
|
|
|
5758
5758
|
var children = _a.children;
|
|
5759
5759
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5760
5760
|
};
|
|
5761
|
-
var templateObject_1$
|
|
5761
|
+
var templateObject_1$1t;
|
|
5762
5762
|
|
|
5763
|
-
var Body = newStyled.div(templateObject_1$
|
|
5763
|
+
var Body = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
5764
5764
|
var CardBody = function (_a) {
|
|
5765
5765
|
var children = _a.children;
|
|
5766
5766
|
return jsx$1(Body, { children: children }, void 0);
|
|
5767
5767
|
};
|
|
5768
|
-
var templateObject_1$
|
|
5768
|
+
var templateObject_1$1s;
|
|
5769
5769
|
|
|
5770
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5770
|
+
var Container$W = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
5771
5771
|
var flex = _a.flex;
|
|
5772
5772
|
return flex &&
|
|
5773
5773
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5789,16 +5789,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5789
5789
|
Footer: CardFooter,
|
|
5790
5790
|
Body: CardBody,
|
|
5791
5791
|
});
|
|
5792
|
-
var templateObject_1$
|
|
5792
|
+
var templateObject_1$1r;
|
|
5793
5793
|
|
|
5794
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5794
|
+
var StyledWrapper = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5795
5795
|
var StyledContainer = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5796
5796
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5797
5797
|
var color = _a.color;
|
|
5798
5798
|
return color;
|
|
5799
5799
|
});
|
|
5800
5800
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5801
|
-
var templateObject_1$
|
|
5801
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5802
5802
|
|
|
5803
5803
|
var Minimalistic = function (_a) {
|
|
5804
5804
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -5806,7 +5806,7 @@ var Minimalistic = function (_a) {
|
|
|
5806
5806
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5807
5807
|
};
|
|
5808
5808
|
|
|
5809
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5809
|
+
var Container$V = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5810
5810
|
var Title$6 = newStyled.h1(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5811
5811
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5812
5812
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
@@ -5815,14 +5815,14 @@ var Simple = function (_a) {
|
|
|
5815
5815
|
var theme = useTheme();
|
|
5816
5816
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5817
5817
|
};
|
|
5818
|
-
var templateObject_1$
|
|
5818
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
5819
5819
|
|
|
5820
5820
|
var Bundle = {
|
|
5821
5821
|
Minimalistic: Minimalistic,
|
|
5822
5822
|
Simple: Simple,
|
|
5823
5823
|
};
|
|
5824
5824
|
|
|
5825
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5825
|
+
var Container$U = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
5826
5826
|
var displayBNPL = _a.displayBNPL;
|
|
5827
5827
|
return (displayBNPL ? 'flex' : 'none');
|
|
5828
5828
|
});
|
|
@@ -5839,41 +5839,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5839
5839
|
}
|
|
5840
5840
|
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5841
5841
|
};
|
|
5842
|
-
var templateObject_1$
|
|
5842
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$J;
|
|
5843
5843
|
|
|
5844
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5844
|
+
var Text$7 = newStyled.span(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5845
5845
|
var Title$5 = function (_a) {
|
|
5846
5846
|
var title = _a.title;
|
|
5847
5847
|
var theme = useTheme();
|
|
5848
5848
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5849
5849
|
};
|
|
5850
|
-
var templateObject_1$
|
|
5850
|
+
var templateObject_1$1n;
|
|
5851
5851
|
|
|
5852
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5852
|
+
var P$3 = newStyled.p(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5853
5853
|
var Promo = function (_a) {
|
|
5854
5854
|
var text = _a.text;
|
|
5855
5855
|
var theme = useTheme();
|
|
5856
5856
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5857
5857
|
};
|
|
5858
|
-
var templateObject_1$
|
|
5858
|
+
var templateObject_1$1m;
|
|
5859
5859
|
|
|
5860
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5860
|
+
var Text$6 = newStyled.span(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5861
5861
|
var Description$1 = function (_a) {
|
|
5862
5862
|
var text = _a.text;
|
|
5863
5863
|
var theme = useTheme();
|
|
5864
5864
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5865
5865
|
};
|
|
5866
|
-
var templateObject_1$
|
|
5866
|
+
var templateObject_1$1l;
|
|
5867
5867
|
|
|
5868
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5868
|
+
var Container$T = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
5869
5869
|
var CloseButton$1 = function (_a) {
|
|
5870
5870
|
var onClick = _a.onClick, size = _a.size;
|
|
5871
5871
|
var theme = useTheme();
|
|
5872
5872
|
return (jsx$1(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5873
5873
|
};
|
|
5874
|
-
var templateObject_1$
|
|
5874
|
+
var templateObject_1$1k;
|
|
5875
5875
|
|
|
5876
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5876
|
+
var Text$5 = newStyled.h3(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
5877
5877
|
var backgroundColor = _a.backgroundColor;
|
|
5878
5878
|
return backgroundColor;
|
|
5879
5879
|
}, function (_a) {
|
|
@@ -5888,7 +5888,7 @@ var OfferBanner = function (_a) {
|
|
|
5888
5888
|
var theme = useTheme();
|
|
5889
5889
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5890
5890
|
};
|
|
5891
|
-
var templateObject_1$
|
|
5891
|
+
var templateObject_1$1j;
|
|
5892
5892
|
|
|
5893
5893
|
var CartProductItem = {
|
|
5894
5894
|
Title: Title$5,
|
|
@@ -5898,7 +5898,7 @@ var CartProductItem = {
|
|
|
5898
5898
|
CloseButton: CloseButton$1,
|
|
5899
5899
|
};
|
|
5900
5900
|
|
|
5901
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5901
|
+
var Container$S = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
5902
5902
|
var MobileContainer = newStyled(Container$S)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
5903
5903
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
5904
5904
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
@@ -5911,7 +5911,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5911
5911
|
var isMobile = useWindowDimensions().isMobile;
|
|
5912
5912
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5913
5913
|
};
|
|
5914
|
-
var templateObject_1$
|
|
5914
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
5915
5915
|
|
|
5916
5916
|
var Spacing = function (_a) {
|
|
5917
5917
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5919,7 +5919,7 @@ var Spacing = function (_a) {
|
|
|
5919
5919
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5920
5920
|
};
|
|
5921
5921
|
|
|
5922
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5922
|
+
var Container$R = newStyled('div')(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
5923
5923
|
var Content$2 = newStyled('div')(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
5924
5924
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
5925
5925
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -5933,12 +5933,12 @@ var StrengthBars = function (_a) {
|
|
|
5933
5933
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5934
5934
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5935
5935
|
};
|
|
5936
|
-
var templateObject_1$
|
|
5936
|
+
var templateObject_1$1h, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
5937
5937
|
|
|
5938
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5939
|
-
var templateObject_1$
|
|
5938
|
+
var Container$Q = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5939
|
+
var templateObject_1$1g;
|
|
5940
5940
|
|
|
5941
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5941
|
+
var StarContainer = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
5942
5942
|
var marginRight = _a.marginRight;
|
|
5943
5943
|
return marginRight;
|
|
5944
5944
|
});
|
|
@@ -5954,7 +5954,7 @@ var StarList = function (_a) {
|
|
|
5954
5954
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5955
5955
|
}) }, void 0));
|
|
5956
5956
|
};
|
|
5957
|
-
var templateObject_1$
|
|
5957
|
+
var templateObject_1$1f;
|
|
5958
5958
|
|
|
5959
5959
|
/* base styles & size variants */
|
|
5960
5960
|
var LabelStyles = {
|
|
@@ -5995,8 +5995,8 @@ var LabelStyles = {
|
|
|
5995
5995
|
});
|
|
5996
5996
|
},
|
|
5997
5997
|
};
|
|
5998
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
5999
|
-
var templateObject_1$
|
|
5998
|
+
var Container$P = newStyled.a(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
5999
|
+
var templateObject_1$1e;
|
|
6000
6000
|
|
|
6001
6001
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6002
6002
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6016,9 +6016,10 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6016
6016
|
}),
|
|
6017
6017
|
];
|
|
6018
6018
|
});
|
|
6019
|
+
var RatingLabel = newStyled.span(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6019
6020
|
var starsNumber = 5;
|
|
6020
6021
|
var Rating = function (_a) {
|
|
6021
|
-
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.
|
|
6022
|
+
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
6022
6023
|
function handleAnchorClick(e) {
|
|
6023
6024
|
var _a;
|
|
6024
6025
|
if (e.cancelable) {
|
|
@@ -6036,8 +6037,9 @@ var Rating = function (_a) {
|
|
|
6036
6037
|
href: reviewsContainerId,
|
|
6037
6038
|
}
|
|
6038
6039
|
: {};
|
|
6039
|
-
return (jsxs$1(Container$P, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6040
|
-
};
|
|
6040
|
+
return (jsxs$1(Container$P, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6041
|
+
};
|
|
6042
|
+
var templateObject_1$1d;
|
|
6041
6043
|
|
|
6042
6044
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6043
6045
|
var width = _a.width, height = _a.height;
|