@trafilea/afrodita-components 6.31.3 → 6.31.4

package/build/index.js

@@ -6991,6 +6991,30 @@ var Collection = {
     ProductItemTK: ProductItemTK,
 };
 
+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"])));
+newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
+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"])));
+var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
+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"])));
+var Label$5 = function (_a) {
+    var label = _a.label, values = _a.values;
+    return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
+};
+var Option = function (_a) {
+    var value = _a.value, children = _a.children;
+    return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
+};
+var ColorRadioGroup = function (_a) {
+    var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
+    return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
+};
+var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
+    Label: Label$5,
+    Option: Option,
+    OptionsContainer: OptionsContainer,
+});
+var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
+
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
     var theme = useTheme();
@@ -7030,30 +7054,6 @@ var OutOfStock = function (_a) {
     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));
 };
 
-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"])));
-newStyled(lt.Label)(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
-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"])));
-var Span = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
-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"])));
-var Label$5 = function (_a) {
-    var label = _a.label, values = _a.values;
-    return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
-};
-var Option = function (_a) {
-    var value = _a.value, children = _a.children;
-    return (jsxRuntime.jsx(CustomRadioGroupOption, __assign$1({ value: value }, { children: children }), void 0));
-};
-var ColorRadioGroup = function (_a) {
-    var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
-    return (jsxRuntime.jsx(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
-};
-var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
-    Label: Label$5,
-    Option: Option,
-    OptionsContainer: OptionsContainer,
-});
-var templateObject_1$1q, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$w;
-
 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) {
     var borderColor = _a.borderColor;
     return borderColor;
@@ -7070,7 +7070,37 @@ var PatternSelector = function (_a) {
 };
 var templateObject_1$1p, templateObject_2$13;
 
-var renderOptions$1 = function (selectedColor, options) {
+var renderOptions$1 = function (options, showCross) {
+    if (showCross === void 0) { showCross = false; }
+    if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
+        return jsx(OutOfStock, { title: "out of stock color" }, void 0);
+    }
+    return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
+            var checked = _a.checked;
+            if (option.meta.color) {
+                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
+            }
+            if (option.meta.pattern) {
+                return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
+            }
+            return null;
+        } }), option.label)); });
+};
+var SingleColorPicker = function (_a) {
+    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;
+    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));
+};
+
+var ColorPickerWithTooltip = function (_a) {
+    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;
+    var visibleOptions = options.slice(0, maxVisibleOptions);
+    var hiddenOptions = options.slice(maxVisibleOptions);
+    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  "])));
+    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));
+};
+var templateObject_1$1o;
+
+var renderOptions = function (selectedColor, options) {
     if (options == null || options.length === 0) {
         return jsxRuntime.jsx(OutOfStock, { title: "out of stock color" }, void 0);
     }
@@ -7103,39 +7133,9 @@ var MultiColorPicker = function (_a) {
     var valueLabels = Array.from(selectedColor)
         .map(function (item) { return item.label; })
         .join(' | ');
-    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$1(selectedColor, options) }, void 0)] }), void 0));
-};
-
-var renderOptions = function (options, showCross) {
-    if (showCross === void 0) { showCross = false; }
-    if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
-        return jsx(OutOfStock, { title: "out of stock color" }, void 0);
-    }
-    return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
-            var checked = _a.checked;
-            if (option.meta.color) {
-                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
-            }
-            if (option.meta.pattern) {
-                return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
-            }
-            return null;
-        } }), option.label)); });
-};
-var SingleColorPicker = function (_a) {
-    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;
-    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));
+    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));
 };
 
-var ColorPickerWithTooltip = function (_a) {
-    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;
-    var visibleOptions = options.slice(0, maxVisibleOptions);
-    var hiddenOptions = options.slice(maxVisibleOptions);
-    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  "])));
-    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));
-};
-var templateObject_1$1o;
-
 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'); });
 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"])));
 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 +14974,11 @@ var useModal = function (id) {
 };
 var templateObject_1$N, templateObject_2$D, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$i, templateObject_7$g;
 
-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) {
-    var height = _a.height;
-    return height || '0.5rem';
-}, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor;
-}, function (_a) {
-    var percent = _a.percent;
-    return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
-}, function (_a) {
-    var borderRadius = _a.borderRadius;
-    return borderRadius || '0.25rem';
-}, function (_a) {
-    var percent = _a.percent;
-    return (percent ? '0' : '-50%');
-}, function (_a) {
-    var percent = _a.percent;
-    return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
-});
-var Background$1 = newStyled.div(function (_a) {
-    var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
-    return ({
-        height: height || '0.5rem',
-        width: '100%',
-        backgroundColor: backgroundColor,
-        borderRadius: borderRadius || '0.25rem',
-    });
-});
-var BarContainer = newStyled.div({
-    display: 'grid',
-    gridTemplateColumns: '1fr 10fr 1fr',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '416px',
-    gap: '8px',
-    maxWidth: '100%',
-    padding: '0 16px',
-    position: 'relative',
-});
-var Container$z = newStyled.div(function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return ({
-        width: '475px',
-        maxWidth: '100%',
-        display: 'flex',
-        gap: '13px',
-        padding: '16px 0',
-        flexDirection: 'column',
-        alignItems: 'center',
-        background: backgroundColor,
-    });
-});
-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"])));
-var getBarWithBasedOnPercent$1 = function (percent) {
-    return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
-};
-var Value = newStyled.div(function (_a) {
-    var isBold = _a.isBold;
-    return ({
-        fontWeight: isBold ? 600 : 400,
-    });
-});
-var _calculatePercentage = function (currentAmount, endingValue) {
-    var percentage = currentAmount / endingValue;
-    return percentage > 1 ? 100 : percentage * 100;
-};
-var MotivatorProgressBar = function (_a) {
-    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;
-    var theme = useTheme();
-    var isRewardUnlocked = currentAmount >= endingValue;
-    var progress = _calculatePercentage(currentAmount, endingValue);
-    var getRemainingAmountMessage = function () {
-        var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
-        if (isClubBarMotivatorTest) {
-            return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
-        }
-        return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0));
-    };
-    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));
-};
-var templateObject_1$M, templateObject_2$C;
+var htmlReactParser = {exports: {}};
 
-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) {
-    var theme = _a.theme;
-    return theme.component.orderBar.backgroundColor;
-});
-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; });
-var OrderBar = function (_a) {
-    var message = _a.message, color = _a.color;
-    var theme = useTheme();
-    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));
-};
-var templateObject_1$L, templateObject_2$B;
+var lib$2 = {};
 
-var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
-    background: props.bgColor,
-    height: '100%',
-    width: '100%',
-    maxHeight: '48px',
-    border: 'none',
-    display: 'flex',
-    cursor: props.disabled ? 'not-allowed' : 'pointer',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '10px 24px',
-}); });
-var StyledPanel = newStyled(Ye.Panel)({
-    width: '100%',
-    background: 'transparent',
-    border: 'none',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: '10px',
-});
-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) {
-    var bgColor = _a.bgColor;
-    return bgColor !== null && bgColor !== void 0 ? bgColor : '';
-}, function (_a) {
-    var _b = _a.width, width = _b === void 0 ? '100%' : _b;
-    return width;
-});
-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"])));
-var templateObject_1$K, templateObject_2$A;
-
-var StyledDisclosure = newStyled(Ye)(function (_a) {
-    var background = _a.background, width = _a.width;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        gap: '10px',
-        background: background !== null && background !== void 0 ? background : '',
-        width: width !== null && width !== void 0 ? width : 'auto',
-        borderRadius: '8px',
-        border: '0.063rem solid',
-        borderColor: '#e5e5e5',
-        padding: 'unset',
-        overflow: 'hidden',
-    });
-});
-var ControlIconComponent = React$2.memo(function (_a) {
-    var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
-    var Icon = open ? closeIcon : openIcon;
-    return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
-});
-ControlIconComponent.displayName = 'ControlIconComponent';
-var HeaderContentComponent = React$2.memo(function (_a) {
-    var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
-});
-HeaderContentComponent.displayName = 'HeaderContentComponent';
-var AccordionContent = function (_a) {
-    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;
-    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));
-};
-var BasicAccordion = function (_a) {
-    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;
-    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) {
-            var open = _a.open;
-            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));
-        } }), void 0));
-};
-
-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'); });
-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'); });
-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'); });
-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"])));
-newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-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"])));
-var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) {
-    return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
-});
-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;
-
-var getIsOdd$2 = function (number) { return number % 2 !== 0; };
-// TODO: Refactor this color logic
-var getCellColor$2 = function (index, cell, isLight) {
-    if (index == 0) {
-        return isLight ? '#fff6ef' : '#f6f0e7';
-    }
-    switch (cell) {
-        case 'XS':
-            return '#f5bab0';
-        case 'S':
-            return '#f7a08b';
-        case 'M':
-            return '#ffe1b8';
-        case 'L':
-            return '#f5bab0';
-        case 'XL':
-            return '#8bbeea';
-        case '2XL':
-            return '#b1d7c3';
-        case '3XL':
-            return '#e7a4f7';
-        case '4XL':
-            return '#e7c9b2';
-        default:
-            return '';
-    }
-};
-
-var SizeChartTableV3 = function (_a) {
-    var _b, _c;
-    var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
-    var containerRef = React$2.useRef(null);
-    var isMobile = useWindowDimensions().isMobile;
-    var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
-    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];
-    var isMultilabel = xLabel && yLabel;
-    var trimmedXLabel = trimLabel(xLabel);
-    var trimmedYLabel = trimLabel(yLabel);
-    React$2.useEffect(function () {
-        var _a;
-        var handleScroll = function () {
-            var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-            var maxScroll = scrollWidth - clientWidth;
-            var isAtEnd = scrollLeft >= maxScroll * 0.92;
-            setIsAtScrollEnd(function (prevState) {
-                if (isAtEnd !== prevState) {
-                    return isAtEnd;
-                }
-                return prevState;
-            });
-        };
-        (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
-        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); };
-    }, []);
-    // Generate unique ids for each cell
-    var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
-        return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
-            id: "".concat(rowIndex, "-").concat(cellIndex),
-            value: cell,
-        }); });
-    });
-    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: {
-                                                    backgroundColor: getCellColor$2(index, cell.value, true),
-                                                } }, { 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));
-};
-var ArrowTip = function (_a) {
-    var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
-    return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
-            left: isRight ? '85%' : '12%',
-        } }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
-};
-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]; };
-
-var htmlReactParser = {exports: {}};
-
-var lib$2 = {};
-
-var possibleStandardNamesOptimized$1 = {};
+var possibleStandardNamesOptimized$1 = {};
 
 // An attribute in which the DOM/SVG standard name is the same as the React prop name (e.g., 'accept').
 var SAME$1 = 0;
@@ -19009,6 +18753,265 @@ HTMLReactParser$1.htmlToDOM;
 HTMLReactParser$1.attributesToProps;
 HTMLReactParser$1.Element;
 
+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) {
+    var height = _a.height;
+    return height || '0.5rem';
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '0.25rem';
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? '0' : '-50%');
+}, function (_a) {
+    var percent = _a.percent;
+    return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
+});
+var Background$1 = newStyled.div(function (_a) {
+    var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
+    return ({
+        height: height || '0.5rem',
+        width: '100%',
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius || '0.25rem',
+    });
+});
+var BarContainer = newStyled.div({
+    display: 'grid',
+    gridTemplateColumns: '1fr 10fr 1fr',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '416px',
+    gap: '8px',
+    maxWidth: '100%',
+    padding: '0 16px',
+    position: 'relative',
+});
+var Container$z = newStyled.div(function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return ({
+        width: '475px',
+        maxWidth: '100%',
+        display: 'flex',
+        gap: '13px',
+        padding: '16px 0',
+        flexDirection: 'column',
+        alignItems: 'center',
+        background: backgroundColor,
+    });
+});
+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"])));
+var getBarWithBasedOnPercent$1 = function (percent) {
+    return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
+};
+var Value = newStyled.div(function (_a) {
+    var isBold = _a.isBold;
+    return ({
+        fontWeight: isBold ? 600 : 400,
+    });
+});
+var _calculatePercentage = function (currentAmount, endingValue) {
+    var percentage = currentAmount / endingValue;
+    return percentage > 1 ? 100 : percentage * 100;
+};
+var MotivatorProgressBar = function (_a) {
+    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;
+    var theme = useTheme();
+    var isRewardUnlocked = currentAmount >= endingValue;
+    var progress = _calculatePercentage(currentAmount, endingValue);
+    var getRemainingAmountMessage = function () {
+        var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
+        if (isClubBarMotivatorTest) {
+            return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
+        }
+        var message = remainingAmountMessage !== null && remainingAmountMessage !== void 0 ? remainingAmountMessage : "Spend currencyCoderemainingAmount more to get <strong>Free Shipping</strong>";
+        message = message.replace('currencyCode', currencyCode);
+        message = message.replace('remainingAmount', remainingAmount.toString());
+        return (jsxRuntime.jsx(MessageContainer, { children: HTMLReactParser$1(message) }, void 0));
+    };
+    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));
+};
+var templateObject_1$M, templateObject_2$C;
+
+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) {
+    var theme = _a.theme;
+    return theme.component.orderBar.backgroundColor;
+});
+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; });
+var OrderBar = function (_a) {
+    var message = _a.message, color = _a.color;
+    var theme = useTheme();
+    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));
+};
+var templateObject_1$L, templateObject_2$B;
+
+var StyledButton$1 = newStyled(Ye.Button)(function (props) { return ({
+    background: props.bgColor,
+    height: '100%',
+    width: '100%',
+    maxHeight: '48px',
+    border: 'none',
+    display: 'flex',
+    cursor: props.disabled ? 'not-allowed' : 'pointer',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 24px',
+}); });
+var StyledPanel = newStyled(Ye.Panel)({
+    width: '100%',
+    background: 'transparent',
+    border: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '10px',
+});
+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) {
+    var bgColor = _a.bgColor;
+    return bgColor !== null && bgColor !== void 0 ? bgColor : '';
+}, function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '100%' : _b;
+    return width;
+});
+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"])));
+var templateObject_1$K, templateObject_2$A;
+
+var StyledDisclosure = newStyled(Ye)(function (_a) {
+    var background = _a.background, width = _a.width;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        gap: '10px',
+        background: background !== null && background !== void 0 ? background : '',
+        width: width !== null && width !== void 0 ? width : 'auto',
+        borderRadius: '8px',
+        border: '0.063rem solid',
+        borderColor: '#e5e5e5',
+        padding: 'unset',
+        overflow: 'hidden',
+    });
+});
+var ControlIconComponent = React$2.memo(function (_a) {
+    var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
+    var Icon = open ? closeIcon : openIcon;
+    return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
+});
+ControlIconComponent.displayName = 'ControlIconComponent';
+var HeaderContentComponent = React$2.memo(function (_a) {
+    var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
+});
+HeaderContentComponent.displayName = 'HeaderContentComponent';
+var AccordionContent = function (_a) {
+    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;
+    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));
+};
+var BasicAccordion = function (_a) {
+    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;
+    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) {
+            var open = _a.open;
+            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));
+        } }), void 0));
+};
+
+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'); });
+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'); });
+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'); });
+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"])));
+newStyled(Label$3)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+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"])));
+var TableHeader = newStyled('thead')(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) {
+    return props.isColored ? 'var(--colors-pallete-primary-80-color)' : 'unset';
+});
+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;
+
+var getIsOdd$2 = function (number) { return number % 2 !== 0; };
+// TODO: Refactor this color logic
+var getCellColor$2 = function (index, cell, isLight) {
+    if (index == 0) {
+        return isLight ? '#fff6ef' : '#f6f0e7';
+    }
+    switch (cell) {
+        case 'XS':
+            return '#f5bab0';
+        case 'S':
+            return '#f7a08b';
+        case 'M':
+            return '#ffe1b8';
+        case 'L':
+            return '#f5bab0';
+        case 'XL':
+            return '#8bbeea';
+        case '2XL':
+            return '#b1d7c3';
+        case '3XL':
+            return '#e7a4f7';
+        case '4XL':
+            return '#e7c9b2';
+        default:
+            return '';
+    }
+};
+
+var SizeChartTableV3 = function (_a) {
+    var _b, _c;
+    var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
+    var containerRef = React$2.useRef(null);
+    var isMobile = useWindowDimensions().isMobile;
+    var _d = React$2.useState(false), isAtScrollEnd = _d[0], setIsAtScrollEnd = _d[1];
+    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];
+    var isMultilabel = xLabel && yLabel;
+    var trimmedXLabel = trimLabel(xLabel);
+    var trimmedYLabel = trimLabel(yLabel);
+    React$2.useEffect(function () {
+        var _a;
+        var handleScroll = function () {
+            var _a = containerRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
+            var maxScroll = scrollWidth - clientWidth;
+            var isAtEnd = scrollLeft >= maxScroll * 0.92;
+            setIsAtScrollEnd(function (prevState) {
+                if (isAtEnd !== prevState) {
+                    return isAtEnd;
+                }
+                return prevState;
+            });
+        };
+        (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll);
+        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); };
+    }, []);
+    // Generate unique ids for each cell
+    var tableContentWithIds = tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, rowIndex) {
+        return row === null || row === void 0 ? void 0 : row.map(function (cell, cellIndex) { return ({
+            id: "".concat(rowIndex, "-").concat(cellIndex),
+            value: cell,
+        }); });
+    });
+    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: {
+                                                    backgroundColor: getCellColor$2(index, cell.value, true),
+                                                } }, { 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));
+};
+var ArrowTip = function (_a) {
+    var _b = _a.isRight, isRight = _b === void 0 ? true : _b;
+    return (jsxRuntime.jsx(Arrow, __assign$1({ style: {
+            left: isRight ? '85%' : '12%',
+        } }, { children: isRight ? (jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { fill: "white" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, { fill: "white" }, void 0)) }), void 0));
+};
+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]; };
+
 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"])));
 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"])));
 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 +21266,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.ThemeVariables = ThemeVariables;
 exports.Timer = Timer;
 exports.Toast = Toast;
+exports.ToggleComponent = ToggleComponent;
 exports.Tooltip = Tooltip;
 exports.Totals = Totals;
 exports.TrackingProgress = TrackingProgress;