@trafilea/afrodita-components 6.31.3 → 6.31.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 +21 -13
- package/build/index.esm.js +331 -318
- package/build/index.esm.js.map +1 -1
- package/build/index.js +331 -317
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +12 -12
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -6759,13 +6759,23 @@ var ImageContainer$6 = newStyled.div(function (_a) {
|
|
|
6759
6759
|
var ImageHoverContainer$3 = newStyled.img(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6760
6760
|
var Container$Z = newStyled.a(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6761
6761
|
var ProdCardContainer$4 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6762
|
-
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6762
|
+
var Title$7 = newStyled.p(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n\n ", "\n\n @media (max-width: ", "px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
6763
6763
|
var theme = _a.theme;
|
|
6764
6764
|
return STYLES_BY_THEME[theme.name].title.fontSize;
|
|
6765
6765
|
}, function (_a) {
|
|
6766
6766
|
var theme = _a.theme;
|
|
6767
6767
|
return STYLES_BY_THEME[theme.name].title.fontWeight;
|
|
6768
|
-
}, function (
|
|
6768
|
+
}, function (_a) {
|
|
6769
|
+
var theme = _a.theme;
|
|
6770
|
+
return theme.colors.pallete.secondary.color;
|
|
6771
|
+
}, function (_a) {
|
|
6772
|
+
var align = _a.align;
|
|
6773
|
+
return align;
|
|
6774
|
+
}, function (_a) {
|
|
6775
|
+
var theme = _a.theme;
|
|
6776
|
+
return ['Revel', 'TheSpaDr'].includes(theme.name) &&
|
|
6777
|
+
"\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n max-width: 150px;\n ";
|
|
6778
|
+
}, function (_a) {
|
|
6769
6779
|
var theme = _a.theme;
|
|
6770
6780
|
return theme.mediaQueries.mobile;
|
|
6771
6781
|
}, function (_a) {
|
|
@@ -6991,6 +7001,30 @@ var Collection = {
|
|
|
6991
7001
|
ProductItemTK: ProductItemTK,
|
|
6992
7002
|
};
|
|
6993
7003
|
|
|
7004
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7005
|
+
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7006
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7007
|
+
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7008
|
+
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7009
|
+
var Label$5 = function (_a) {
|
|
7010
|
+
var label = _a.label, values = _a.values;
|
|
7011
|
+
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
7012
|
+
};
|
|
7013
|
+
var Option = function (_a) {
|
|
7014
|
+
var value = _a.value, children = _a.children;
|
|
7015
|
+
return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
7016
|
+
};
|
|
7017
|
+
var ColorRadioGroup = function (_a) {
|
|
7018
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
7019
|
+
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
7020
|
+
};
|
|
7021
|
+
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
7022
|
+
Label: Label$5,
|
|
7023
|
+
Option: Option,
|
|
7024
|
+
OptionsContainer: OptionsContainer,
|
|
7025
|
+
});
|
|
7026
|
+
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
7027
|
+
|
|
6994
7028
|
var OneColorSelector = function (_a) {
|
|
6995
7029
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
|
|
6996
7030
|
var theme = useTheme();
|
|
@@ -7030,30 +7064,6 @@ var OutOfStock = function (_a) {
|
|
|
7030
7064
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
7031
7065
|
};
|
|
7032
7066
|
|
|
7033
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7034
|
-
newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
7035
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
7036
|
-
var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
7037
|
-
var OptionsContainer = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
7038
|
-
var Label$5 = function (_a) {
|
|
7039
|
-
var label = _a.label, values = _a.values;
|
|
7040
|
-
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
7041
|
-
};
|
|
7042
|
-
var Option = function (_a) {
|
|
7043
|
-
var value = _a.value, children = _a.children;
|
|
7044
|
-
return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
|
|
7045
|
-
};
|
|
7046
|
-
var ColorRadioGroup = function (_a) {
|
|
7047
|
-
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
7048
|
-
return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
7049
|
-
};
|
|
7050
|
-
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
7051
|
-
Label: Label$5,
|
|
7052
|
-
Option: Option,
|
|
7053
|
-
OptionsContainer: OptionsContainer,
|
|
7054
|
-
});
|
|
7055
|
-
var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
|
|
7056
|
-
|
|
7057
7067
|
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
7058
7068
|
var borderColor = _a.borderColor;
|
|
7059
7069
|
return borderColor;
|
|
@@ -7070,7 +7080,37 @@ var PatternSelector = function (_a) {
|
|
|
7070
7080
|
};
|
|
7071
7081
|
var templateObject_1$1p, templateObject_2$13;
|
|
7072
7082
|
|
|
7073
|
-
var renderOptions$1 = function (
|
|
7083
|
+
var renderOptions$1 = function (options, showCross) {
|
|
7084
|
+
if (showCross === void 0) { showCross = false; }
|
|
7085
|
+
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7086
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7087
|
+
}
|
|
7088
|
+
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7089
|
+
var checked = _a.checked;
|
|
7090
|
+
if (option.meta.color) {
|
|
7091
|
+
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7092
|
+
}
|
|
7093
|
+
if (option.meta.pattern) {
|
|
7094
|
+
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7095
|
+
}
|
|
7096
|
+
return null;
|
|
7097
|
+
} }), option.label)); });
|
|
7098
|
+
};
|
|
7099
|
+
var SingleColorPicker = function (_a) {
|
|
7100
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7101
|
+
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
|
|
7102
|
+
};
|
|
7103
|
+
|
|
7104
|
+
var ColorPickerWithTooltip = function (_a) {
|
|
7105
|
+
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7106
|
+
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7107
|
+
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7108
|
+
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7109
|
+
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions$1(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions$1(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7110
|
+
};
|
|
7111
|
+
var templateObject_1$1o;
|
|
7112
|
+
|
|
7113
|
+
var renderOptions = function (selectedColor, options) {
|
|
7074
7114
|
if (options == null || options.length === 0) {
|
|
7075
7115
|
return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7076
7116
|
}
|
|
@@ -7103,39 +7143,9 @@ var MultiColorPicker = function (_a) {
|
|
|
7103
7143
|
var valueLabels = Array.from(selectedColor)
|
|
7104
7144
|
.map(function (item) { return item.label; })
|
|
7105
7145
|
.join(' | ');
|
|
7106
|
-
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions
|
|
7107
|
-
};
|
|
7108
|
-
|
|
7109
|
-
var renderOptions = function (options, showCross) {
|
|
7110
|
-
if (showCross === void 0) { showCross = false; }
|
|
7111
|
-
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7112
|
-
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7113
|
-
}
|
|
7114
|
-
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7115
|
-
var checked = _a.checked;
|
|
7116
|
-
if (option.meta.color) {
|
|
7117
|
-
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
7118
|
-
}
|
|
7119
|
-
if (option.meta.pattern) {
|
|
7120
|
-
return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
|
|
7121
|
-
}
|
|
7122
|
-
return null;
|
|
7123
|
-
} }), option.label)); });
|
|
7124
|
-
};
|
|
7125
|
-
var SingleColorPicker = function (_a) {
|
|
7126
|
-
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
|
|
7127
|
-
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
7146
|
+
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
7128
7147
|
};
|
|
7129
7148
|
|
|
7130
|
-
var ColorPickerWithTooltip = function (_a) {
|
|
7131
|
-
var _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.maxVisibleOptions, maxVisibleOptions = _d === void 0 ? 5 : _d, showCross = _a.showCross;
|
|
7132
|
-
var visibleOptions = options.slice(0, maxVisibleOptions);
|
|
7133
|
-
var hiddenOptions = options.slice(maxVisibleOptions);
|
|
7134
|
-
var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "], ["\n max-width: 300px;\n\n .tooltip-container {\n transform: translateX(-30%);\n &::before,\n &::after {\n left: 80%;\n }\n }\n\n .arrow {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin-bottom: 10px;\n }\n\n .tooltip-content {\n display: flex;\n max-width: 300px;\n flex-wrap: wrap;\n }\n "])));
|
|
7135
|
-
return (jsxs(ColorPickerWrapper, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsxs(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: [renderOptions(visibleOptions, showCross), !!hiddenOptions.length && (jsx("div", __assign$1({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: jsx(Tooltip, __assign$1({ position: 1, elementContent: jsx("div", __assign$1({ className: "tooltip-content" }, { children: renderOptions(hiddenOptions, showCross) }), void 0), withArrow: true }, { children: jsx("div", __assign$1({ className: "arrow", "data-testid": "tooltip-arrow" }, { children: jsx(Icon$1, { name: "arrows/chevron_down", width: 1, height: 1 }, void 0) }), void 0) }), void 0) }), void 0))] }), void 0)] }), void 0));
|
|
7136
|
-
};
|
|
7137
|
-
var templateObject_1$1o;
|
|
7138
|
-
|
|
7139
7149
|
var Wrapper$5 = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
7140
7150
|
var Col$1 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
7141
7151
|
var Row$2 = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
@@ -14974,267 +14984,11 @@ var useModal = function (id) {
|
|
|
14974
14984
|
};
|
|
14975
14985
|
var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
|
|
14976
14986
|
|
|
14977
|
-
var
|
|
14978
|
-
var height = _a.height;
|
|
14979
|
-
return height || '0.5rem';
|
|
14980
|
-
}, function (_a) {
|
|
14981
|
-
var backgroundColor = _a.backgroundColor;
|
|
14982
|
-
return backgroundColor;
|
|
14983
|
-
}, function (_a) {
|
|
14984
|
-
var percent = _a.percent;
|
|
14985
|
-
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
14986
|
-
}, function (_a) {
|
|
14987
|
-
var borderRadius = _a.borderRadius;
|
|
14988
|
-
return borderRadius || '0.25rem';
|
|
14989
|
-
}, function (_a) {
|
|
14990
|
-
var percent = _a.percent;
|
|
14991
|
-
return (percent ? '0' : '-50%');
|
|
14992
|
-
}, function (_a) {
|
|
14993
|
-
var percent = _a.percent;
|
|
14994
|
-
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
14995
|
-
});
|
|
14996
|
-
var Background$1 = newStyled.div(function (_a) {
|
|
14997
|
-
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
14998
|
-
return ({
|
|
14999
|
-
height: height || '0.5rem',
|
|
15000
|
-
width: '100%',
|
|
15001
|
-
backgroundColor: backgroundColor,
|
|
15002
|
-
borderRadius: borderRadius || '0.25rem',
|
|
15003
|
-
});
|
|
15004
|
-
});
|
|
15005
|
-
var BarContainer = newStyled.div({
|
|
15006
|
-
display: 'grid',
|
|
15007
|
-
gridTemplateColumns: '1fr 10fr 1fr',
|
|
15008
|
-
justifyContent: 'center',
|
|
15009
|
-
alignItems: 'center',
|
|
15010
|
-
width: '416px',
|
|
15011
|
-
gap: '8px',
|
|
15012
|
-
maxWidth: '100%',
|
|
15013
|
-
padding: '0 16px',
|
|
15014
|
-
position: 'relative',
|
|
15015
|
-
});
|
|
15016
|
-
var Container$z = newStyled.div(function (_a) {
|
|
15017
|
-
var backgroundColor = _a.backgroundColor;
|
|
15018
|
-
return ({
|
|
15019
|
-
width: '475px',
|
|
15020
|
-
maxWidth: '100%',
|
|
15021
|
-
display: 'flex',
|
|
15022
|
-
gap: '13px',
|
|
15023
|
-
padding: '16px 0',
|
|
15024
|
-
flexDirection: 'column',
|
|
15025
|
-
alignItems: 'center',
|
|
15026
|
-
background: backgroundColor,
|
|
15027
|
-
});
|
|
15028
|
-
});
|
|
15029
|
-
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
15030
|
-
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
15031
|
-
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
15032
|
-
};
|
|
15033
|
-
var Value = newStyled.div(function (_a) {
|
|
15034
|
-
var isBold = _a.isBold;
|
|
15035
|
-
return ({
|
|
15036
|
-
fontWeight: isBold ? 600 : 400,
|
|
15037
|
-
});
|
|
15038
|
-
});
|
|
15039
|
-
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
15040
|
-
var percentage = currentAmount / endingValue;
|
|
15041
|
-
return percentage > 1 ? 100 : percentage * 100;
|
|
15042
|
-
};
|
|
15043
|
-
var MotivatorProgressBar = function (_a) {
|
|
15044
|
-
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h;
|
|
15045
|
-
var theme = useTheme();
|
|
15046
|
-
var isRewardUnlocked = currentAmount >= endingValue;
|
|
15047
|
-
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
15048
|
-
var getRemainingAmountMessage = function () {
|
|
15049
|
-
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
15050
|
-
if (isClubBarMotivatorTest) {
|
|
15051
|
-
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
15052
|
-
}
|
|
15053
|
-
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
15054
|
-
};
|
|
15055
|
-
return (jsxRuntime.jsxs(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
15056
|
-
};
|
|
15057
|
-
var templateObject_1$M, templateObject_2$C;
|
|
14987
|
+
var htmlReactParser = {exports: {}};
|
|
15058
14988
|
|
|
15059
|
-
var
|
|
15060
|
-
var theme = _a.theme;
|
|
15061
|
-
return theme.component.orderBar.backgroundColor;
|
|
15062
|
-
});
|
|
15063
|
-
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
15064
|
-
var OrderBar = function (_a) {
|
|
15065
|
-
var message = _a.message, color = _a.color;
|
|
15066
|
-
var theme = useTheme();
|
|
15067
|
-
return (jsxRuntime.jsxs(Container$y, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
15068
|
-
};
|
|
15069
|
-
var templateObject_1$L, templateObject_2$B;
|
|
14989
|
+
var lib$2 = {};
|
|
15070
14990
|
|
|
15071
|
-
var
|
|
15072
|
-
background: props.bgColor,
|
|
15073
|
-
height: '100%',
|
|
15074
|
-
width: '100%',
|
|
15075
|
-
maxHeight: '48px',
|
|
15076
|
-
border: 'none',
|
|
15077
|
-
display: 'flex',
|
|
15078
|
-
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
15079
|
-
justifyContent: 'space-between',
|
|
15080
|
-
alignItems: 'center',
|
|
15081
|
-
padding: '10px 24px',
|
|
15082
|
-
}); });
|
|
15083
|
-
var StyledPanel = newStyled(Ye.Panel)({
|
|
15084
|
-
width: '100%',
|
|
15085
|
-
background: 'transparent',
|
|
15086
|
-
border: 'none',
|
|
15087
|
-
display: 'flex',
|
|
15088
|
-
flexDirection: 'column',
|
|
15089
|
-
alignItems: 'center',
|
|
15090
|
-
justifyContent: 'center',
|
|
15091
|
-
gap: '10px',
|
|
15092
|
-
});
|
|
15093
|
-
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
15094
|
-
var bgColor = _a.bgColor;
|
|
15095
|
-
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
15096
|
-
}, function (_a) {
|
|
15097
|
-
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
15098
|
-
return width;
|
|
15099
|
-
});
|
|
15100
|
-
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
15101
|
-
var templateObject_1$K, templateObject_2$A;
|
|
15102
|
-
|
|
15103
|
-
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
15104
|
-
var background = _a.background, width = _a.width;
|
|
15105
|
-
return ({
|
|
15106
|
-
display: 'flex',
|
|
15107
|
-
flexDirection: 'column',
|
|
15108
|
-
justifyContent: 'center',
|
|
15109
|
-
gap: '10px',
|
|
15110
|
-
background: background !== null && background !== void 0 ? background : '',
|
|
15111
|
-
width: width !== null && width !== void 0 ? width : 'auto',
|
|
15112
|
-
borderRadius: '8px',
|
|
15113
|
-
border: '0.063rem solid',
|
|
15114
|
-
borderColor: '#e5e5e5',
|
|
15115
|
-
padding: 'unset',
|
|
15116
|
-
overflow: 'hidden',
|
|
15117
|
-
});
|
|
15118
|
-
});
|
|
15119
|
-
var ControlIconComponent = React$2.memo(function (_a) {
|
|
15120
|
-
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
15121
|
-
var Icon = open ? closeIcon : openIcon;
|
|
15122
|
-
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
15123
|
-
});
|
|
15124
|
-
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
15125
|
-
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
15126
|
-
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
15127
|
-
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
15128
|
-
});
|
|
15129
|
-
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
15130
|
-
var AccordionContent = function (_a) {
|
|
15131
|
-
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
15132
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
15133
|
-
};
|
|
15134
|
-
var BasicAccordion = function (_a) {
|
|
15135
|
-
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
15136
|
-
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
15137
|
-
var open = _a.open;
|
|
15138
|
-
return (jsxRuntime.jsx(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
15139
|
-
} }), void 0));
|
|
15140
|
-
};
|
|
15141
|
-
|
|
15142
|
-
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
15143
|
-
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
15144
|
-
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
15145
|
-
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
15146
|
-
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
15147
|
-
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
15148
|
-
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
15149
|
-
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
15150
|
-
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
15151
|
-
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
15152
|
-
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
15153
|
-
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
15154
|
-
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
15155
|
-
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
15156
|
-
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
15157
|
-
});
|
|
15158
|
-
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
15159
|
-
|
|
15160
|
-
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
15161
|
-
// TODO: Refactor this color logic
|
|
15162
|
-
var getCellColor$2 = function (index, cell, isLight) {
|
|
15163
|
-
if (index == 0) {
|
|
15164
|
-
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
15165
|
-
}
|
|
15166
|
-
switch (cell) {
|
|
15167
|
-
case 'XS':
|
|
15168
|
-
return '#f5bab0';
|
|
15169
|
-
case 'S':
|
|
15170
|
-
return '#f7a08b';
|
|
15171
|
-
case 'M':
|
|
15172
|
-
return '#ffe1b8';
|
|
15173
|
-
case 'L':
|
|
15174
|
-
return '#f5bab0';
|
|
15175
|
-
case 'XL':
|
|
15176
|
-
return '#8bbeea';
|
|
15177
|
-
case '2XL':
|
|
15178
|
-
return '#b1d7c3';
|
|
15179
|
-
case '3XL':
|
|
15180
|
-
return '#e7a4f7';
|
|
15181
|
-
case '4XL':
|
|
15182
|
-
return '#e7c9b2';
|
|
15183
|
-
default:
|
|
15184
|
-
return '';
|
|
15185
|
-
}
|
|
15186
|
-
};
|
|
15187
|
-
|
|
15188
|
-
var SizeChartTableV3 = function (_a) {
|
|
15189
|
-
var _b, _c;
|
|
15190
|
-
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
15191
|
-
var containerRef = React$2.useRef(null);
|
|
15192
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
15193
|
-
var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
15194
|
-
var _e = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _e[0], yLabel = _e[1];
|
|
15195
|
-
var isMultilabel = xLabel && yLabel;
|
|
15196
|
-
var trimmedXLabel = trimLabel(xLabel);
|
|
15197
|
-
var trimmedYLabel = trimLabel(yLabel);
|
|
15198
|
-
React$2.useEffect(function () {
|
|
15199
|
-
var _a;
|
|
15200
|
-
var handleScroll = function () {
|
|
15201
|
-
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
15202
|
-
var maxScroll = scrollWidth - clientWidth;
|
|
15203
|
-
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
15204
|
-
setIsAtScrollEnd(function (prevState) {
|
|
15205
|
-
if (isAtEnd !== prevState) {
|
|
15206
|
-
return isAtEnd;
|
|
15207
|
-
}
|
|
15208
|
-
return prevState;
|
|
15209
|
-
});
|
|
15210
|
-
};
|
|
15211
|
-
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
15212
|
-
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
15213
|
-
}, []);
|
|
15214
|
-
// Generate unique ids for each cell
|
|
15215
|
-
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
15216
|
-
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
15217
|
-
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
15218
|
-
value: cell,
|
|
15219
|
-
}); });
|
|
15220
|
-
});
|
|
15221
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
15222
|
-
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
15223
|
-
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
15224
|
-
};
|
|
15225
|
-
var ArrowTip = function (_a) {
|
|
15226
|
-
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
15227
|
-
return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
|
|
15228
|
-
left: isRight ? '85%' : '12%',
|
|
15229
|
-
} }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
15230
|
-
};
|
|
15231
|
-
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
15232
|
-
|
|
15233
|
-
var htmlReactParser = {exports: {}};
|
|
15234
|
-
|
|
15235
|
-
var lib$2 = {};
|
|
15236
|
-
|
|
15237
|
-
var possibleStandardNamesOptimized$1 = {};
|
|
14991
|
+
var possibleStandardNamesOptimized$1 = {};
|
|
15238
14992
|
|
|
15239
14993
|
// An attribute in which the DOM/SVG standard name is the same as the React prop name (e.g., 'accept').
|
|
15240
14994
|
var SAME$1 = 0;
|
|
@@ -19009,6 +18763,265 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
19009
18763
|
HTMLReactParser$1.attributesToProps;
|
|
19010
18764
|
HTMLReactParser$1.Element;
|
|
19011
18765
|
|
|
18766
|
+
var Bar$1 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18767
|
+
var height = _a.height;
|
|
18768
|
+
return height || '0.5rem';
|
|
18769
|
+
}, function (_a) {
|
|
18770
|
+
var backgroundColor = _a.backgroundColor;
|
|
18771
|
+
return backgroundColor;
|
|
18772
|
+
}, function (_a) {
|
|
18773
|
+
var percent = _a.percent;
|
|
18774
|
+
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
18775
|
+
}, function (_a) {
|
|
18776
|
+
var borderRadius = _a.borderRadius;
|
|
18777
|
+
return borderRadius || '0.25rem';
|
|
18778
|
+
}, function (_a) {
|
|
18779
|
+
var percent = _a.percent;
|
|
18780
|
+
return (percent ? '0' : '-50%');
|
|
18781
|
+
}, function (_a) {
|
|
18782
|
+
var percent = _a.percent;
|
|
18783
|
+
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
18784
|
+
});
|
|
18785
|
+
var Background$1 = newStyled.div(function (_a) {
|
|
18786
|
+
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
18787
|
+
return ({
|
|
18788
|
+
height: height || '0.5rem',
|
|
18789
|
+
width: '100%',
|
|
18790
|
+
backgroundColor: backgroundColor,
|
|
18791
|
+
borderRadius: borderRadius || '0.25rem',
|
|
18792
|
+
});
|
|
18793
|
+
});
|
|
18794
|
+
var BarContainer = newStyled.div({
|
|
18795
|
+
display: 'grid',
|
|
18796
|
+
gridTemplateColumns: '1fr 10fr 1fr',
|
|
18797
|
+
justifyContent: 'center',
|
|
18798
|
+
alignItems: 'center',
|
|
18799
|
+
width: '416px',
|
|
18800
|
+
gap: '8px',
|
|
18801
|
+
maxWidth: '100%',
|
|
18802
|
+
padding: '0 16px',
|
|
18803
|
+
position: 'relative',
|
|
18804
|
+
});
|
|
18805
|
+
var Container$z = newStyled.div(function (_a) {
|
|
18806
|
+
var backgroundColor = _a.backgroundColor;
|
|
18807
|
+
return ({
|
|
18808
|
+
width: '475px',
|
|
18809
|
+
maxWidth: '100%',
|
|
18810
|
+
display: 'flex',
|
|
18811
|
+
gap: '13px',
|
|
18812
|
+
padding: '16px 0',
|
|
18813
|
+
flexDirection: 'column',
|
|
18814
|
+
alignItems: 'center',
|
|
18815
|
+
background: backgroundColor,
|
|
18816
|
+
});
|
|
18817
|
+
});
|
|
18818
|
+
var MessageContainer = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
18819
|
+
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
18820
|
+
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
18821
|
+
};
|
|
18822
|
+
var Value = newStyled.div(function (_a) {
|
|
18823
|
+
var isBold = _a.isBold;
|
|
18824
|
+
return ({
|
|
18825
|
+
fontWeight: isBold ? 600 : 400,
|
|
18826
|
+
});
|
|
18827
|
+
});
|
|
18828
|
+
var _calculatePercentage = function (currentAmount, endingValue) {
|
|
18829
|
+
var percentage = currentAmount / endingValue;
|
|
18830
|
+
return percentage > 1 ? 100 : percentage * 100;
|
|
18831
|
+
};
|
|
18832
|
+
var MotivatorProgressBar = function (_a) {
|
|
18833
|
+
var _b = _a.fillColor, fillColor = _b === void 0 ? '#F7A08B' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#F7F7F7' : _c, _d = _a.unfilledColor, unfilledColor = _d === void 0 ? '#EEBFBD' : _d, _e = _a.currencyCode, currencyCode = _e === void 0 ? '$' : _e, _f = _a.endingValue, endingValue = _f === void 0 ? 70 : _f, _g = _a.currentAmount, currentAmount = _g === void 0 ? 0 : _g, rewardUnlockedMessage = _a.rewardUnlockedMessage, _h = _a.isClubBarMotivatorTest, isClubBarMotivatorTest = _h === void 0 ? false : _h, remainingAmountMessage = _a.remainingAmountMessage;
|
|
18834
|
+
var theme = useTheme();
|
|
18835
|
+
var isRewardUnlocked = currentAmount >= endingValue;
|
|
18836
|
+
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
18837
|
+
var getRemainingAmountMessage = function () {
|
|
18838
|
+
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
18839
|
+
if (isClubBarMotivatorTest) {
|
|
18840
|
+
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
18841
|
+
}
|
|
18842
|
+
var message = remainingAmountMessage !== null && remainingAmountMessage !== void 0 ? remainingAmountMessage : "Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";
|
|
18843
|
+
message = message.replace('currencyCode', currencyCode);
|
|
18844
|
+
message = message.replace('remainingAmount', remainingAmount.toString());
|
|
18845
|
+
return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
|
|
18846
|
+
};
|
|
18847
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
18848
|
+
};
|
|
18849
|
+
var templateObject_1$M, templateObject_2$C;
|
|
18850
|
+
|
|
18851
|
+
var Container$y = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
18852
|
+
var theme = _a.theme;
|
|
18853
|
+
return theme.component.orderBar.backgroundColor;
|
|
18854
|
+
});
|
|
18855
|
+
var H1 = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
18856
|
+
var OrderBar = function (_a) {
|
|
18857
|
+
var message = _a.message, color = _a.color;
|
|
18858
|
+
var theme = useTheme();
|
|
18859
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
18860
|
+
};
|
|
18861
|
+
var templateObject_1$L, templateObject_2$B;
|
|
18862
|
+
|
|
18863
|
+
var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
|
|
18864
|
+
background: props.bgColor,
|
|
18865
|
+
height: '100%',
|
|
18866
|
+
width: '100%',
|
|
18867
|
+
maxHeight: '48px',
|
|
18868
|
+
border: 'none',
|
|
18869
|
+
display: 'flex',
|
|
18870
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
18871
|
+
justifyContent: 'space-between',
|
|
18872
|
+
alignItems: 'center',
|
|
18873
|
+
padding: '10px 24px',
|
|
18874
|
+
}); });
|
|
18875
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
18876
|
+
width: '100%',
|
|
18877
|
+
background: 'transparent',
|
|
18878
|
+
border: 'none',
|
|
18879
|
+
display: 'flex',
|
|
18880
|
+
flexDirection: 'column',
|
|
18881
|
+
alignItems: 'center',
|
|
18882
|
+
justifyContent: 'center',
|
|
18883
|
+
gap: '10px',
|
|
18884
|
+
});
|
|
18885
|
+
var StyledContent = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
18886
|
+
var bgColor = _a.bgColor;
|
|
18887
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
18888
|
+
}, function (_a) {
|
|
18889
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
18890
|
+
return width;
|
|
18891
|
+
});
|
|
18892
|
+
var StyledController = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
18893
|
+
var templateObject_1$K, templateObject_2$A;
|
|
18894
|
+
|
|
18895
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
18896
|
+
var background = _a.background, width = _a.width;
|
|
18897
|
+
return ({
|
|
18898
|
+
display: 'flex',
|
|
18899
|
+
flexDirection: 'column',
|
|
18900
|
+
justifyContent: 'center',
|
|
18901
|
+
gap: '10px',
|
|
18902
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
18903
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
18904
|
+
borderRadius: '8px',
|
|
18905
|
+
border: '0.063rem solid',
|
|
18906
|
+
borderColor: '#e5e5e5',
|
|
18907
|
+
padding: 'unset',
|
|
18908
|
+
overflow: 'hidden',
|
|
18909
|
+
});
|
|
18910
|
+
});
|
|
18911
|
+
var ControlIconComponent = React$2.memo(function (_a) {
|
|
18912
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
18913
|
+
var Icon = open ? closeIcon : openIcon;
|
|
18914
|
+
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
18915
|
+
});
|
|
18916
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
18917
|
+
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
18918
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
18919
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
18920
|
+
});
|
|
18921
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
18922
|
+
var AccordionContent = function (_a) {
|
|
18923
|
+
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
18924
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
18925
|
+
};
|
|
18926
|
+
var BasicAccordion = function (_a) {
|
|
18927
|
+
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
18928
|
+
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
|
|
18929
|
+
var open = _a.open;
|
|
18930
|
+
return (jsxRuntime.jsx(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
|
|
18931
|
+
} }), void 0));
|
|
18932
|
+
};
|
|
18933
|
+
|
|
18934
|
+
var TableElement$3 = newStyled.table(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border: 0.063rem solid var(--colors-shades-100-color);\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: var(--colors-shades-700-color);\n"])), function (props) { return (props.isSticky ? '0' : '0.5rem'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); }, function (props) { return (props.isSticky ? '0.5rem' : '0'); });
|
|
18935
|
+
var TableCell$3 = newStyled.td(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n line-height: normal;\n padding: 1rem 0;\n text-align: center;\n position: ", ";\n left: 0;\n z-index: ", ";\n border-bottom-left-radius: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 600;\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isLast ? '0.5rem' : '0'); });
|
|
18936
|
+
var TableHead$3 = newStyled.th(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid var(--colors-shades-100-color);\n border-right: 0.063rem solid var(--colors-shades-100-color);\n font-weight: 600;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n position: ", ";\n left: 0;\n z-index: ", ";\n background-color: ", ";\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return (props.isSticky ? 'sticky' : 'unset'); }, function (props) { return (props.isSticky ? 1 : 0); }, function (props) { return (props.isSticky ? '#fff6ef' : 'unset'); });
|
|
18937
|
+
var Label$3 = newStyled('div')(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
18938
|
+
newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
18939
|
+
newStyled(Label$3)(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
18940
|
+
var Container$x = newStyled('div')(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
18941
|
+
newStyled('span')(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
18942
|
+
var Column$2 = newStyled('div')(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: flex-start;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
18943
|
+
var TableRow$3 = newStyled.tr(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: var(--colors-shades-10-color);\n }\n"])));
|
|
18944
|
+
var Header$1 = newStyled('div')(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"], ["\n gap: 15px;\n display: flex;\n left: 0;\n border: 1px solid #e5e5e5;\n width: 100%;\n max-width: 92vw;\n position: sticky;\n padding: 14px 18px;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n border-bottom: none;\n background-color: #fff6ef;\n font-size: 0.875rem;\n font-weight: 600;\n\n @media (min-width: 400px) {\n max-width: 92.5vw;\n }\n"])));
|
|
18945
|
+
var Parent = newStyled('div')(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"], ["\n max-width: 100vw;\n position: relative;\n\n @media (max-width: 768px) {\n overflow-x: auto;\n &::-webkit-scrollbar {\n display: none;\n }\n\n -ms-overflow-style: none;\n }\n"])));
|
|
18946
|
+
var Arrow = newStyled('div')(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 44px;\n height: 44px;\n z-index: 2;\n border-radius: 50%;\n background-color: #d4605b;\n bottom: 20px;\n"])));
|
|
18947
|
+
var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) {
|
|
18948
|
+
return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
|
|
18949
|
+
});
|
|
18950
|
+
var templateObject_1$J, templateObject_2$z, templateObject_3$w, templateObject_4$q, templateObject_5$j, templateObject_6$h, templateObject_7$f, templateObject_8$b, templateObject_9$7, templateObject_10$7, templateObject_11$5, templateObject_12$2, templateObject_13$2, templateObject_14$2;
|
|
18951
|
+
|
|
18952
|
+
var getIsOdd$2 = function (number) { return number % 2 !== 0; };
|
|
18953
|
+
// TODO: Refactor this color logic
|
|
18954
|
+
var getCellColor$2 = function (index, cell, isLight) {
|
|
18955
|
+
if (index == 0) {
|
|
18956
|
+
return isLight ? '#fff6ef' : '#f6f0e7';
|
|
18957
|
+
}
|
|
18958
|
+
switch (cell) {
|
|
18959
|
+
case 'XS':
|
|
18960
|
+
return '#f5bab0';
|
|
18961
|
+
case 'S':
|
|
18962
|
+
return '#f7a08b';
|
|
18963
|
+
case 'M':
|
|
18964
|
+
return '#ffe1b8';
|
|
18965
|
+
case 'L':
|
|
18966
|
+
return '#f5bab0';
|
|
18967
|
+
case 'XL':
|
|
18968
|
+
return '#8bbeea';
|
|
18969
|
+
case '2XL':
|
|
18970
|
+
return '#b1d7c3';
|
|
18971
|
+
case '3XL':
|
|
18972
|
+
return '#e7a4f7';
|
|
18973
|
+
case '4XL':
|
|
18974
|
+
return '#e7c9b2';
|
|
18975
|
+
default:
|
|
18976
|
+
return '';
|
|
18977
|
+
}
|
|
18978
|
+
};
|
|
18979
|
+
|
|
18980
|
+
var SizeChartTableV3 = function (_a) {
|
|
18981
|
+
var _b, _c;
|
|
18982
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
18983
|
+
var containerRef = React$2.useRef(null);
|
|
18984
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
18985
|
+
var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
|
|
18986
|
+
var _e = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _e[0], yLabel = _e[1];
|
|
18987
|
+
var isMultilabel = xLabel && yLabel;
|
|
18988
|
+
var trimmedXLabel = trimLabel(xLabel);
|
|
18989
|
+
var trimmedYLabel = trimLabel(yLabel);
|
|
18990
|
+
React$2.useEffect(function () {
|
|
18991
|
+
var _a;
|
|
18992
|
+
var handleScroll = function () {
|
|
18993
|
+
var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
18994
|
+
var maxScroll = scrollWidth - clientWidth;
|
|
18995
|
+
var isAtEnd = scrollLeft >= maxScroll * 0.92;
|
|
18996
|
+
setIsAtScrollEnd(function (prevState) {
|
|
18997
|
+
if (isAtEnd !== prevState) {
|
|
18998
|
+
return isAtEnd;
|
|
18999
|
+
}
|
|
19000
|
+
return prevState;
|
|
19001
|
+
});
|
|
19002
|
+
};
|
|
19003
|
+
(_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
|
|
19004
|
+
return function () { var _a; return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll); };
|
|
19005
|
+
}, []);
|
|
19006
|
+
// Generate unique ids for each cell
|
|
19007
|
+
var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
|
|
19008
|
+
return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
|
|
19009
|
+
id: "".concat(rowIndex, "-").concat(cellIndex),
|
|
19010
|
+
value: cell,
|
|
19011
|
+
}); });
|
|
19012
|
+
});
|
|
19013
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Parent, __assign$1({ ref: containerRef }, { children: jsxRuntime.jsx(Container$x, { children: jsxRuntime.jsxs(Column$2, { children: [isMultilabel && (jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx("div", { children: trimmedYLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$3, __assign$1({ isSticky: !!newSizeTableCss }, { children: [jsxRuntime.jsx(TableHeader, __assign$1({ isColored: newSizeTableCss }, { children: jsxRuntime.jsx(TableRow$3, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$3, __assign$1({ isSticky: !!newSizeTableCss && index === 0 }, { children: index === 0 && isMultilabel ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', alignItems: 'center', gap: '15px' } }, { children: [jsxRuntime.jsx("div", { children: trimmedXLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronDownVariant, {}, void 0)] }), void 0)) : (header) }), header)); }) }, void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: index === 0, isLast: index === 0 && parentIndex === tableContent.length - 1, style: {
|
|
19014
|
+
backgroundColor: getCellColor$2(index, cell.value, true),
|
|
19015
|
+
} }, { children: cell.value }), cell.id)); }) }, row[0].id)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContentWithIds === null || tableContentWithIds === void 0 ? void 0 : tableContentWithIds.map(function (row, parentIndex) { return (jsxRuntime.jsx(TableRow$3, __assign$1({ className: getIsOdd$2(parentIndex) ? 'background' : '' }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell) { return (jsxRuntime.jsx(TableCell$3, __assign$1({ isSticky: false }, { children: cell.value }), cell.id)); }) }), row[0].id)); }) }, void 0))] }), void 0)] }, void 0) }, void 0) }), void 0), newSizeTableCss && isMobile && jsxRuntime.jsx(ArrowTip, { isRight: !isAtScrollEnd }, void 0)] }, void 0));
|
|
19016
|
+
};
|
|
19017
|
+
var ArrowTip = function (_a) {
|
|
19018
|
+
var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
|
|
19019
|
+
return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
|
|
19020
|
+
left: isRight ? '85%' : '12%',
|
|
19021
|
+
} }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
|
|
19022
|
+
};
|
|
19023
|
+
var trimLabel = function (label) { var _a, _b; return (_b = (_a = label === null || label === void 0 ? void 0 : label.trim()) === null || _a === void 0 ? void 0 : _a.split(' ')) === null || _b === void 0 ? void 0 : _b[0]; };
|
|
19024
|
+
|
|
19012
19025
|
var Container$w = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
19013
19026
|
var Card$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
19014
19027
|
var Tag$1 = newStyled.div(templateObject_3$v || (templateObject_3$v = __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"])));
|
|
@@ -21263,6 +21276,7 @@ exports.ThemeProvider = ThemeProvider;
|
|
|
21263
21276
|
exports.ThemeVariables = ThemeVariables;
|
|
21264
21277
|
exports.Timer = Timer;
|
|
21265
21278
|
exports.Toast = Toast;
|
|
21279
|
+
exports.ToggleComponent = ToggleComponent;
|
|
21266
21280
|
exports.Tooltip = Tooltip;
|
|
21267
21281
|
exports.Totals = Totals;
|
|
21268
21282
|
exports.TrackingProgress = TrackingProgress;
|