@trafilea/afrodita-components 6.35.0 → 6.35.2

package/build/index.esm.js

@@ -7082,7 +7082,7 @@ var renderOptions$1 = function (options, showCross) {
 };
 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));
+    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.5rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options, showCross) }), void 0)] }), void 0));
 };
 
 var ColorPickerWithTooltip = function (_a) {
@@ -12103,7 +12103,10 @@ var ImageSmallPreview = function (_a) {
 
 var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n  max-width: 360px;\n  overflow: auto;\n"])));
 var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"], ["\n  grid-row-gap: 20px;\n  overflow: auto;\n  grid-area: 1/1;\n"])));
-var Container$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"], ["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"])), function (_a) {
+var Container$T = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n  display: grid;\n  max-height: ", ";\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"], ["\n  display: grid;\n  max-height: ", ";\n  height: min-content;\n  align-items: flex-start;\n  ", "\n\n  ", "\n"])), function (_a) {
+    var isRatioSquare = _a.isRatioSquare, theme = _a.theme;
+    return isRatioSquare ? '530px' : "calc(530px / (".concat(theme.component.gallery.aspectRatio, "))");
+}, function (_a) {
     var position = _a.position;
     return (position == 'horizontal' ? horizontalStyles : verticalStyles);
 }, function (_a) {
@@ -12144,7 +12147,7 @@ var ImagePreviewList = function (_a) {
         var element = document.querySelector(".imageListContainer");
         element.scrollBy(0, 200);
     };
-    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
+    return (jsxs$1(Fragment$2, { children: [jsx$1(Container$T, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows, isRatioSquare: isRatioSquare }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
                             arrowWidth: 0.75,
                             arrowHeight: 1.25,
                             arrowPadding: 1.625,
@@ -20217,7 +20220,7 @@ var ButtonsContainer = newStyled.div(templateObject_1$p || (templateObject_1$p =
     var inline = _a.inline;
     return (inline ? '0 0 0 10px' : '8px 0 0 0');
 });
-var Row = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  gap: 5px;\n  display: flex;\n  margin: 5px 0 3px;\n  flex-wrap: wrap;\n\n  & button {\n    font-weight: 600;\n  }\n"], ["\n  gap: 5px;\n  display: flex;\n  margin: 5px 0 3px;\n  flex-wrap: wrap;\n\n  & button {\n    font-weight: 600;\n  }\n"])));
+var Row = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  gap: 5px;\n  display: flex;\n  margin: 8px 0 0;\n  flex-wrap: wrap;\n\n  & button {\n    font-weight: 600;\n  }\n"], ["\n  gap: 5px;\n  display: flex;\n  margin: 8px 0 0;\n  flex-wrap: wrap;\n\n  & button {\n    font-weight: 600;\n  }\n"])));
 var templateObject_1$p, templateObject_2$l;
 
 var SizeSelector = function (_a) {