@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.js
CHANGED
|
@@ -3147,7 +3147,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3147
3147
|
desktop: 1280,
|
|
3148
3148
|
};
|
|
3149
3149
|
|
|
3150
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3150
|
+
var Container$17 = newStyled.div(templateObject_1$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) {
|
|
3151
3151
|
var height = _a.height;
|
|
3152
3152
|
return (height ? height : '1.5em');
|
|
3153
3153
|
}, function (_a) {
|
|
@@ -3174,9 +3174,9 @@ var SkeletonBox = function (_a) {
|
|
|
3174
3174
|
var theme = useTheme();
|
|
3175
3175
|
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3176
3176
|
};
|
|
3177
|
-
var templateObject_1$
|
|
3177
|
+
var templateObject_1$1Q;
|
|
3178
3178
|
|
|
3179
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3179
|
+
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) {
|
|
3180
3180
|
var width = _a.width;
|
|
3181
3181
|
return width;
|
|
3182
3182
|
}, function (_a) {
|
|
@@ -3205,7 +3205,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$
|
|
|
3205
3205
|
var opacity = _a.opacity;
|
|
3206
3206
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3207
3207
|
});
|
|
3208
|
-
var templateObject_1$
|
|
3208
|
+
var templateObject_1$1P, templateObject_2$1b;
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable no-undef */
|
|
3211
3211
|
var cache = new Map();
|
|
@@ -4081,7 +4081,7 @@ function jsxs(type, props, key) {
|
|
|
4081
4081
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4082
4082
|
// `variants` styles that are consistent through all themes.
|
|
4083
4083
|
var TAGS = {
|
|
4084
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4084
|
+
hero1: newStyled.h1(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject([""], [""]))),
|
|
4085
4085
|
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4086
4086
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4087
4087
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4217,9 +4217,9 @@ var DEFAULTS = {
|
|
|
4217
4217
|
size: 'regular',
|
|
4218
4218
|
},
|
|
4219
4219
|
};
|
|
4220
|
-
var templateObject_1$
|
|
4220
|
+
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;
|
|
4221
4221
|
|
|
4222
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4222
|
+
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"])));
|
|
4223
4223
|
var Card$3 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4224
4224
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4225
4225
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4249,9 +4249,9 @@ var PackCard$1 = function (_a) {
|
|
|
4249
4249
|
currency: currencyCode || 'USD',
|
|
4250
4250
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4251
4251
|
};
|
|
4252
|
-
var templateObject_1$
|
|
4252
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4253
4253
|
|
|
4254
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4254
|
+
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"])));
|
|
4255
4255
|
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4256
4256
|
var DropList = function (_a) {
|
|
4257
4257
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -4259,17 +4259,17 @@ var DropList = function (_a) {
|
|
|
4259
4259
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4260
4260
|
}) }, void 0));
|
|
4261
4261
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4262
|
+
var templateObject_1$1M, templateObject_2$18;
|
|
4263
4263
|
|
|
4264
4264
|
var DROPS_TOTAL = 5;
|
|
4265
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4265
|
+
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"])));
|
|
4266
4266
|
var Title$8 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4267
4267
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4268
4268
|
var AbsorbencyLevel = function (_a) {
|
|
4269
4269
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4270
4270
|
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4271
4271
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1L, templateObject_2$17, templateObject_3$S;
|
|
4273
4273
|
|
|
4274
4274
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4275
4275
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4345,7 +4345,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4345
4345
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4346
4346
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4347
4347
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4348
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4348
|
+
var StyledContent = newStyled.button(templateObject_1$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"])));
|
|
4349
4349
|
var Accordion$1 = function (_a) {
|
|
4350
4350
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4351
4351
|
var theme = useTheme();
|
|
@@ -4369,9 +4369,9 @@ var Accordion$1 = function (_a) {
|
|
|
4369
4369
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4370
4370
|
} }), void 0));
|
|
4371
4371
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1K;
|
|
4373
4373
|
|
|
4374
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4374
|
+
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"])));
|
|
4375
4375
|
var AccordionOptions = function (_a) {
|
|
4376
4376
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4377
4377
|
var _b = React$2.useState({
|
|
@@ -4395,7 +4395,7 @@ var AccordionOptions = function (_a) {
|
|
|
4395
4395
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4396
4396
|
}) }, void 0));
|
|
4397
4397
|
};
|
|
4398
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1J;
|
|
4399
4399
|
|
|
4400
4400
|
exports.CardSectionType = void 0;
|
|
4401
4401
|
(function (CardSectionType) {
|
|
@@ -4557,14 +4557,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4557
4557
|
literal: true,
|
|
4558
4558
|
});
|
|
4559
4559
|
|
|
4560
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4560
|
+
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; });
|
|
4561
4561
|
var ErrorContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4562
4562
|
var Error$1 = function (_a) {
|
|
4563
4563
|
var error = _a.error;
|
|
4564
4564
|
var theme = useTheme();
|
|
4565
4565
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4566
4566
|
};
|
|
4567
|
-
var templateObject_1$
|
|
4567
|
+
var templateObject_1$1I, templateObject_2$16;
|
|
4568
4568
|
|
|
4569
4569
|
var BaseSelectButton = function (_a) {
|
|
4570
4570
|
var children = _a.children, as = _a.as;
|
|
@@ -4581,7 +4581,7 @@ function BaseSelectOption(_a) {
|
|
|
4581
4581
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4582
4582
|
}
|
|
4583
4583
|
|
|
4584
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4584
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4585
4585
|
function BaseSelect(_a) {
|
|
4586
4586
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4587
4587
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4591,7 +4591,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4591
4591
|
Options: BaseSelectOptions,
|
|
4592
4592
|
Option: BaseSelectOption,
|
|
4593
4593
|
});
|
|
4594
|
-
var templateObject_1$
|
|
4594
|
+
var templateObject_1$1H;
|
|
4595
4595
|
|
|
4596
4596
|
var CustomButton = newStyled.button(function (_a) {
|
|
4597
4597
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4630,7 +4630,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4630
4630
|
});
|
|
4631
4631
|
});
|
|
4632
4632
|
//TODO Remove this when we find the real solution
|
|
4633
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4633
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$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) {
|
|
4634
4634
|
var open = _a.open;
|
|
4635
4635
|
return open &&
|
|
4636
4636
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4650,7 +4650,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4650
4650
|
} }), void 0));
|
|
4651
4651
|
};
|
|
4652
4652
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4653
|
-
var templateObject_1$
|
|
4653
|
+
var templateObject_1$1G;
|
|
4654
4654
|
|
|
4655
4655
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4656
4656
|
var theme = _a.theme;
|
|
@@ -4817,7 +4817,7 @@ var CustomCheckboxStyles = {
|
|
|
4817
4817
|
},
|
|
4818
4818
|
};
|
|
4819
4819
|
|
|
4820
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4820
|
+
var Container$12 = newStyled.div(templateObject_1$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"])));
|
|
4821
4821
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4822
4822
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4823
4823
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4844,7 +4844,7 @@ var Checkbox = function (_a) {
|
|
|
4844
4844
|
};
|
|
4845
4845
|
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4846
4846
|
};
|
|
4847
|
-
var templateObject_1$
|
|
4847
|
+
var templateObject_1$1F, templateObject_2$15;
|
|
4848
4848
|
|
|
4849
4849
|
var CustomOption = newStyled.li(function (_a) {
|
|
4850
4850
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4893,7 +4893,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4893
4893
|
Option: BaseDropdownOption,
|
|
4894
4894
|
});
|
|
4895
4895
|
|
|
4896
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4896
|
+
var Container$11 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject([""], [""])));
|
|
4897
4897
|
var RequiredPlaceholder = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4898
4898
|
function SimpleDropdown(_a) {
|
|
4899
4899
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
@@ -4926,7 +4926,7 @@ function SimpleDropdown(_a) {
|
|
|
4926
4926
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4927
4927
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4928
4928
|
}
|
|
4929
|
-
var templateObject_1$
|
|
4929
|
+
var templateObject_1$1E, templateObject_2$14;
|
|
4930
4930
|
|
|
4931
4931
|
/* base styles & size variants */
|
|
4932
4932
|
var CustomRadioStyles$2 = {
|
|
@@ -4991,7 +4991,7 @@ var ContainerStyles$2 = {
|
|
|
4991
4991
|
},
|
|
4992
4992
|
};
|
|
4993
4993
|
|
|
4994
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4994
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4995
4995
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4996
4996
|
var Input$4 = newStyled.input(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
4997
4997
|
var disabled = _a.disabled;
|
|
@@ -5017,7 +5017,7 @@ var RadioInput = function (_a) {
|
|
|
5017
5017
|
};
|
|
5018
5018
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5019
5019
|
};
|
|
5020
|
-
var templateObject_1$
|
|
5020
|
+
var templateObject_1$1D, templateObject_2$13, templateObject_3$R;
|
|
5021
5021
|
|
|
5022
5022
|
var getWrapperFlexDirection = function (position) {
|
|
5023
5023
|
switch (position) {
|
|
@@ -5068,7 +5068,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5068
5068
|
}
|
|
5069
5069
|
};
|
|
5070
5070
|
|
|
5071
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5071
|
+
var Wrapper$6 = newStyled.div(templateObject_1$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) {
|
|
5072
5072
|
var position = _a.position;
|
|
5073
5073
|
return getWrapperFlexDirection(position);
|
|
5074
5074
|
}, function (_a) {
|
|
@@ -5124,7 +5124,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5124
5124
|
});
|
|
5125
5125
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5126
5126
|
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5127
|
-
var templateObject_1$
|
|
5127
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$Q, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5128
5128
|
|
|
5129
5129
|
var useOnClickOutside = function (ref, handler) {
|
|
5130
5130
|
React$2.useEffect(function () {
|
|
@@ -5267,7 +5267,7 @@ var getStylesBySize$d = function (size, bordersRounded, theme) {
|
|
|
5267
5267
|
};
|
|
5268
5268
|
}
|
|
5269
5269
|
};
|
|
5270
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5270
|
+
var Container$$ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5271
5271
|
var backgroundColor = _a.backgroundColor;
|
|
5272
5272
|
return backgroundColor;
|
|
5273
5273
|
}, function (_a) {
|
|
@@ -5306,7 +5306,7 @@ var DiscountTag = function (_a) {
|
|
|
5306
5306
|
var theme = useTheme();
|
|
5307
5307
|
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5308
5308
|
};
|
|
5309
|
-
var templateObject_1$
|
|
5309
|
+
var templateObject_1$1B, templateObject_2$11;
|
|
5310
5310
|
|
|
5311
5311
|
var getStylesBySize$c = function (size, theme) {
|
|
5312
5312
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5348,7 +5348,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5348
5348
|
return (_c = getStylesBySize$c(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5349
5349
|
}
|
|
5350
5350
|
};
|
|
5351
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5351
|
+
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"])));
|
|
5352
5352
|
var Price = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
5353
5353
|
var weight = _a.weight;
|
|
5354
5354
|
return (weight ? weight : '400');
|
|
@@ -5406,7 +5406,7 @@ var PriceLabel = function (_a) {
|
|
|
5406
5406
|
};
|
|
5407
5407
|
return (jsxRuntime.jsxs(Container$_, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5408
5408
|
};
|
|
5409
|
-
var templateObject_1$
|
|
5409
|
+
var templateObject_1$1A, templateObject_2$10, templateObject_3$P;
|
|
5410
5410
|
|
|
5411
5411
|
var getStylesBySize$b = function (size) {
|
|
5412
5412
|
switch (size) {
|
|
@@ -5436,7 +5436,7 @@ var getStylesBySize$b = function (size) {
|
|
|
5436
5436
|
};
|
|
5437
5437
|
}
|
|
5438
5438
|
};
|
|
5439
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5439
|
+
var Container$Z = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5440
5440
|
var backgroundColor = _a.backgroundColor;
|
|
5441
5441
|
return backgroundColor;
|
|
5442
5442
|
}, function (_a) {
|
|
@@ -5475,9 +5475,9 @@ var ClubOfferTag = function (_a) {
|
|
|
5475
5475
|
var theme = useTheme();
|
|
5476
5476
|
return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5477
5477
|
};
|
|
5478
|
-
var templateObject_1$
|
|
5478
|
+
var templateObject_1$1z, templateObject_2$$;
|
|
5479
5479
|
|
|
5480
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5480
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5481
5481
|
var PriceLabelV2 = function (_a) {
|
|
5482
5482
|
var _b;
|
|
5483
5483
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay"]);
|
|
@@ -5543,9 +5543,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5543
5543
|
lineHeight: '22px',
|
|
5544
5544
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5545
5545
|
};
|
|
5546
|
-
var templateObject_1$
|
|
5546
|
+
var templateObject_1$1y;
|
|
5547
5547
|
|
|
5548
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5548
|
+
var FlexContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5549
5549
|
var ContainerBase = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5550
5550
|
var selected = _a.selected, theme = _a.theme;
|
|
5551
5551
|
return selected
|
|
@@ -5583,7 +5583,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5583
5583
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5584
5584
|
});
|
|
5585
5585
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5586
|
-
var templateObject_1$
|
|
5586
|
+
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;
|
|
5587
5587
|
|
|
5588
5588
|
var radioIds = {
|
|
5589
5589
|
oneTime: {
|
|
@@ -5596,7 +5596,7 @@ var radioIds = {
|
|
|
5596
5596
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5597
5597
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5598
5598
|
var Autoship = function (_a) {
|
|
5599
|
-
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;
|
|
5599
|
+
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;
|
|
5600
5600
|
var theme = useTheme();
|
|
5601
5601
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5602
5602
|
? frequencyValues.map(function (value) {
|
|
@@ -5635,15 +5635,15 @@ var Autoship = function (_a) {
|
|
|
5635
5635
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5636
5636
|
return (jsxRuntime.jsxs(Container$Y, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5637
5637
|
? benefitsColor.selected
|
|
5638
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5638
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5639
5639
|
};
|
|
5640
5640
|
|
|
5641
|
-
var Img = newStyled.img(templateObject_1$
|
|
5641
|
+
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; });
|
|
5642
5642
|
var Image$3 = function (_a) {
|
|
5643
5643
|
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;
|
|
5644
5644
|
return (jsxRuntime.jsx(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));
|
|
5645
5645
|
};
|
|
5646
|
-
var templateObject_1$
|
|
5646
|
+
var templateObject_1$1w;
|
|
5647
5647
|
|
|
5648
5648
|
var _a$2;
|
|
5649
5649
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5658,13 +5658,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5658
5658
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5659
5659
|
_a$2);
|
|
5660
5660
|
|
|
5661
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5661
|
+
var CustomerDetails = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""])));
|
|
5662
5662
|
var CustomerInfo = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5663
5663
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5664
5664
|
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
5665
5665
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5666
5666
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5667
|
-
var templateObject_1$
|
|
5667
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5668
5668
|
|
|
5669
5669
|
var NameWithStars = function (_a) {
|
|
5670
5670
|
var name = _a.name, size = _a.size;
|
|
@@ -5682,7 +5682,7 @@ var ResultFeedback = function (_a) {
|
|
|
5682
5682
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5683
5683
|
};
|
|
5684
5684
|
|
|
5685
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5685
|
+
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; });
|
|
5686
5686
|
var ImageContainer$5 = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5687
5687
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5688
5688
|
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
@@ -5695,7 +5695,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5695
5695
|
var theme = _a.theme, size = _a.size;
|
|
5696
5696
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5697
5697
|
});
|
|
5698
|
-
var templateObject_1$
|
|
5698
|
+
var templateObject_1$1u, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5699
5699
|
|
|
5700
5700
|
/* base styles & size variants */
|
|
5701
5701
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5773,7 +5773,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5773
5773
|
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5774
5774
|
};
|
|
5775
5775
|
|
|
5776
|
-
var Section = newStyled.div(templateObject_1$
|
|
5776
|
+
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) {
|
|
5777
5777
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5778
5778
|
});
|
|
5779
5779
|
var CardHeader = function (_a) {
|
|
@@ -5784,16 +5784,16 @@ var CardFooter = function (_a) {
|
|
|
5784
5784
|
var children = _a.children;
|
|
5785
5785
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5786
5786
|
};
|
|
5787
|
-
var templateObject_1$
|
|
5787
|
+
var templateObject_1$1t;
|
|
5788
5788
|
|
|
5789
|
-
var Body = newStyled.div(templateObject_1$
|
|
5789
|
+
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"])));
|
|
5790
5790
|
var CardBody = function (_a) {
|
|
5791
5791
|
var children = _a.children;
|
|
5792
5792
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5793
5793
|
};
|
|
5794
|
-
var templateObject_1$
|
|
5794
|
+
var templateObject_1$1s;
|
|
5795
5795
|
|
|
5796
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5796
|
+
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) {
|
|
5797
5797
|
var flex = _a.flex;
|
|
5798
5798
|
return flex &&
|
|
5799
5799
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5815,16 +5815,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5815
5815
|
Footer: CardFooter,
|
|
5816
5816
|
Body: CardBody,
|
|
5817
5817
|
});
|
|
5818
|
-
var templateObject_1$
|
|
5818
|
+
var templateObject_1$1r;
|
|
5819
5819
|
|
|
5820
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5820
|
+
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"])));
|
|
5821
5821
|
var StyledContainer = newStyled.div(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5822
5822
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5823
5823
|
var color = _a.color;
|
|
5824
5824
|
return color;
|
|
5825
5825
|
});
|
|
5826
5826
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5827
|
-
var templateObject_1$
|
|
5827
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$L, templateObject_4$z;
|
|
5828
5828
|
|
|
5829
5829
|
var Minimalistic = function (_a) {
|
|
5830
5830
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -5832,7 +5832,7 @@ var Minimalistic = function (_a) {
|
|
|
5832
5832
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5833
5833
|
};
|
|
5834
5834
|
|
|
5835
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5835
|
+
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"])));
|
|
5836
5836
|
var Title$6 = newStyled.h1(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5837
5837
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5838
5838
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
@@ -5841,14 +5841,14 @@ var Simple = function (_a) {
|
|
|
5841
5841
|
var theme = useTheme();
|
|
5842
5842
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5843
5843
|
};
|
|
5844
|
-
var templateObject_1$
|
|
5844
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$K, templateObject_4$y;
|
|
5845
5845
|
|
|
5846
5846
|
var Bundle = {
|
|
5847
5847
|
Minimalistic: Minimalistic,
|
|
5848
5848
|
Simple: Simple,
|
|
5849
5849
|
};
|
|
5850
5850
|
|
|
5851
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5851
|
+
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) {
|
|
5852
5852
|
var displayBNPL = _a.displayBNPL;
|
|
5853
5853
|
return (displayBNPL ? 'flex' : 'none');
|
|
5854
5854
|
});
|
|
@@ -5865,41 +5865,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5865
5865
|
}
|
|
5866
5866
|
return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5867
5867
|
};
|
|
5868
|
-
var templateObject_1$
|
|
5868
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$J;
|
|
5869
5869
|
|
|
5870
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5870
|
+
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; });
|
|
5871
5871
|
var Title$5 = function (_a) {
|
|
5872
5872
|
var title = _a.title;
|
|
5873
5873
|
var theme = useTheme();
|
|
5874
5874
|
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5875
5875
|
};
|
|
5876
|
-
var templateObject_1$
|
|
5876
|
+
var templateObject_1$1n;
|
|
5877
5877
|
|
|
5878
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5878
|
+
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; });
|
|
5879
5879
|
var Promo = function (_a) {
|
|
5880
5880
|
var text = _a.text;
|
|
5881
5881
|
var theme = useTheme();
|
|
5882
5882
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5883
5883
|
};
|
|
5884
|
-
var templateObject_1$
|
|
5884
|
+
var templateObject_1$1m;
|
|
5885
5885
|
|
|
5886
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5886
|
+
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; });
|
|
5887
5887
|
var Description$1 = function (_a) {
|
|
5888
5888
|
var text = _a.text;
|
|
5889
5889
|
var theme = useTheme();
|
|
5890
5890
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5891
5891
|
};
|
|
5892
|
-
var templateObject_1$
|
|
5892
|
+
var templateObject_1$1l;
|
|
5893
5893
|
|
|
5894
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5894
|
+
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"); });
|
|
5895
5895
|
var CloseButton$1 = function (_a) {
|
|
5896
5896
|
var onClick = _a.onClick, size = _a.size;
|
|
5897
5897
|
var theme = useTheme();
|
|
5898
5898
|
return (jsxRuntime.jsx(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5899
5899
|
};
|
|
5900
|
-
var templateObject_1$
|
|
5900
|
+
var templateObject_1$1k;
|
|
5901
5901
|
|
|
5902
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5902
|
+
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) {
|
|
5903
5903
|
var backgroundColor = _a.backgroundColor;
|
|
5904
5904
|
return backgroundColor;
|
|
5905
5905
|
}, function (_a) {
|
|
@@ -5914,7 +5914,7 @@ var OfferBanner = function (_a) {
|
|
|
5914
5914
|
var theme = useTheme();
|
|
5915
5915
|
return (jsxRuntime.jsx(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));
|
|
5916
5916
|
};
|
|
5917
|
-
var templateObject_1$
|
|
5917
|
+
var templateObject_1$1j;
|
|
5918
5918
|
|
|
5919
5919
|
var CartProductItem = {
|
|
5920
5920
|
Title: Title$5,
|
|
@@ -5924,7 +5924,7 @@ var CartProductItem = {
|
|
|
5924
5924
|
CloseButton: CloseButton$1,
|
|
5925
5925
|
};
|
|
5926
5926
|
|
|
5927
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5927
|
+
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"])));
|
|
5928
5928
|
var MobileContainer = newStyled(Container$S)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
5929
5929
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
5930
5930
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
@@ -5937,7 +5937,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5937
5937
|
var isMobile = useWindowDimensions().isMobile;
|
|
5938
5938
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
5939
5939
|
};
|
|
5940
|
-
var templateObject_1$
|
|
5940
|
+
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;
|
|
5941
5941
|
|
|
5942
5942
|
var Spacing = function (_a) {
|
|
5943
5943
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -5945,7 +5945,7 @@ var Spacing = function (_a) {
|
|
|
5945
5945
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
5946
5946
|
};
|
|
5947
5947
|
|
|
5948
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
5948
|
+
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"])));
|
|
5949
5949
|
var Content$2 = newStyled('div')(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
5950
5950
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
5951
5951
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
@@ -5959,12 +5959,12 @@ var StrengthBars = function (_a) {
|
|
|
5959
5959
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
5960
5960
|
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
5961
5961
|
};
|
|
5962
|
-
var templateObject_1$
|
|
5962
|
+
var templateObject_1$1h, templateObject_2$T, templateObject_3$H, templateObject_4$w;
|
|
5963
5963
|
|
|
5964
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
5965
|
-
var templateObject_1$
|
|
5964
|
+
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"])));
|
|
5965
|
+
var templateObject_1$1g;
|
|
5966
5966
|
|
|
5967
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
5967
|
+
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) {
|
|
5968
5968
|
var marginRight = _a.marginRight;
|
|
5969
5969
|
return marginRight;
|
|
5970
5970
|
});
|
|
@@ -5980,7 +5980,7 @@ var StarList = function (_a) {
|
|
|
5980
5980
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
5981
5981
|
}) }, void 0));
|
|
5982
5982
|
};
|
|
5983
|
-
var templateObject_1$
|
|
5983
|
+
var templateObject_1$1f;
|
|
5984
5984
|
|
|
5985
5985
|
/* base styles & size variants */
|
|
5986
5986
|
var LabelStyles = {
|
|
@@ -6021,8 +6021,8 @@ var LabelStyles = {
|
|
|
6021
6021
|
});
|
|
6022
6022
|
},
|
|
6023
6023
|
};
|
|
6024
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6025
|
-
var templateObject_1$
|
|
6024
|
+
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"])));
|
|
6025
|
+
var templateObject_1$1e;
|
|
6026
6026
|
|
|
6027
6027
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6028
6028
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6042,9 +6042,10 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6042
6042
|
}),
|
|
6043
6043
|
];
|
|
6044
6044
|
});
|
|
6045
|
+
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; });
|
|
6045
6046
|
var starsNumber = 5;
|
|
6046
6047
|
var Rating = function (_a) {
|
|
6047
|
-
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.
|
|
6048
|
+
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
6048
6049
|
function handleAnchorClick(e) {
|
|
6049
6050
|
var _a;
|
|
6050
6051
|
if (e.cancelable) {
|
|
@@ -6062,8 +6063,9 @@ var Rating = function (_a) {
|
|
|
6062
6063
|
href: reviewsContainerId,
|
|
6063
6064
|
}
|
|
6064
6065
|
: {};
|
|
6065
|
-
return (jsxRuntime.jsxs(Container$P, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6066
|
-
};
|
|
6066
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6067
|
+
};
|
|
6068
|
+
var templateObject_1$1d;
|
|
6067
6069
|
|
|
6068
6070
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6069
6071
|
var width = _a.width, height = _a.height;
|