@trafilea/afrodita-components 6.37.3 → 6.37.5

package/build/index.d.ts

@@ -2579,6 +2579,8 @@ interface imageVideoProps {
     isMobile?: boolean;
 }
 
+/** @jsxImportSource @emotion/react */
+
 interface ColorPickerWithTooltipProps {
     options: ColorPickerOption[];
     maxVisibleOptions?: number;
@@ -2588,8 +2590,11 @@ interface ColorPickerWithTooltipProps {
     inline?: boolean;
     showCross?: boolean;
     className?: string;
+    tooltipOptions?: {
+        showCloseIcon?: boolean;
+    };
 }
-declare const ColorPickerWithTooltip: ({ options, selectedValue, label, onChange, inline, maxVisibleOptions, showCross, className, }: ColorPickerWithTooltipProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ColorPickerWithTooltip: FC<ColorPickerWithTooltipProps>;
 
 interface MultiColorPickerProps {
     options?: ColorPickerOption[];

package/build/index.esm.js

@@ -6740,7 +6740,7 @@ var ImageContainer$6 = newStyled.div(function (_a) {
 var ImageHoverContainer$3 = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __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"])));
 var Container$12 = newStyled.a(templateObject_2$1c || (templateObject_2$1c = __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"])));
 var ProdCardContainer$4 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
-var Title$7 = newStyled.p(templateObject_4$M || (templateObject_4$M = __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  ", "\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  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
+var Title$7 = newStyled.h2(templateObject_4$M || (templateObject_4$M = __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  ", "\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  ", "\n\n  @media (max-width: ", "px) {\n    font-size: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return STYLES_BY_THEME[theme.name].title.fontSize;
 }, function (_a) {
@@ -7086,11 +7086,12 @@ var SingleColorPicker = function (_a) {
 };
 
 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, className = _a.className;
+    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, className = _a.className, tooltipOptions = _a.tooltipOptions;
     var visibleOptions = options.slice(0, maxVisibleOptions);
     var hiddenOptions = options.slice(maxVisibleOptions);
+    var showCloseIcon = (tooltipOptions !== null && tooltipOptions !== void 0 ? tooltipOptions : {}).showCloseIcon;
     var ColorPickerWrapper = newStyled(ColorRadioGroup$1)(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\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    position: relative;\n    max-width: 300px;\n\n    .tooltip-container {\n      position: absolute;\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({ className: className, 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));
+    return (jsxs(ColorPickerWrapper, __assign$1({ className: className, 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({ showCloseIcon: showCloseIcon, 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$1u;