contentoh-components-library 21.6.25 → 21.6.26

package/dist/components/molecules/SingleSelect/index.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleSelect = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Select de opción única con búsqueda escribiendo.
+
+  Es el CustomSelect que la aplicación usa en el alta de productos, traído a la
+  librería para que las pantallas que viven aquí no tengan que caer en el <select>
+  del sistema, que se ve ajeno al resto de la plataforma.
+
+  Se llama distinto porque la librería ya exporta un `CustomSelect`: aquel es un
+  filtro de selección múltiple con calendario, otra cosa. Compartir nombre habría
+  roto el export global.
+
+  Tres cambios respecto al original, todos porque aquí el entorno es otro:
+  el ancho es flexible en vez de 210px fijos —en el modal van tres en fila—, los
+  colores salen de las variables de la librería en lugar de `var(--gray)`, y la
+  flecha va dibujada porque la fuente de iconos de Material la carga la
+  aplicación, no esta librería.
+
+  props:
+    - options: [{ label, value }]
+    - value: el value seleccionado
+    - onChange: recibe el value elegido, o null al limpiar
+    - placeholder, disabled, loading
+*/
+var SingleSelect = function SingleSelect(_ref) {
+  var id = _ref.id,
+      className = _ref.className,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? "Selecciona una opción" : _ref$placeholder,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      onChange = _ref.onChange,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selectedValue = _useState4[0],
+      setSelectedValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var wrapperRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var selectedOption = options.find(function (option) {
+    return "".concat(option === null || option === void 0 ? void 0 : option.value) === "".concat(selectedValue);
+  });
+  var filteredOptions = loading ? [] : options.filter(function (option) {
+    var _option$label;
+
+    return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : "").toLowerCase().includes(inputValue.toLowerCase());
+  });
+
+  var handleSelect = function handleSelect(option) {
+    setSelectedValue(option === null || option === void 0 ? void 0 : option.value);
+    setInputValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value);
+    setIsOpen(false);
+  };
+
+  var clearSelected = function clearSelected() {
+    setSelectedValue("");
+    setInputValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange(null);
+  };
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []); // Al deshabilitarse se limpia: un nivel de cascada que se apaga no puede
+  // quedarse mostrando la elección anterior, que ya no significa nada.
+
+  (0, _react.useEffect)(function () {
+    if (disabled) {
+      setSelectedValue("");
+      setInputValue("");
+    }
+  }, [disabled]);
+  (0, _react.useEffect)(function () {
+    setSelectedValue(value);
+  }, [value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectWrapper, {
+    id: id,
+    className: className,
+    ref: wrapperRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectBase, {
+      disabled: disabled,
+      className: "selectBase",
+      onClick: function onClick() {
+        if (!disabled && !isOpen) setIsOpen(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [selectedOption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SelectedOptionItem, {
+          title: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          placeholder: selectedOption ? "" : placeholder,
+          value: inputValue,
+          disabled: disabled,
+          ref: inputRef,
+          onChange: function onChange(event) {
+            return setInputValue(event.target.value);
+          },
+          onFocus: function onFocus() {
+            if (!isOpen) setIsOpen(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            var _inputRef$current;
+
+            var esBorrar = event.key === "Backspace";
+            var vacio = (((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "") === "";
+            if (!isOpen) setIsOpen(true); // Borrar con el campo vacío deshace la elección, que es lo que
+            // espera quien escribe para cambiarla.
+
+            if (esBorrar && vacio && selectedValue !== "") clearSelected();
+
+            if (event.key === "Enter" && filteredOptions.length > 0) {
+              event.preventDefault();
+              handleSelect(filteredOptions[0]);
+            }
+          },
+          onBlur: function onBlur() {
+            setTimeout(function () {
+              if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {
+                setIsOpen(false);
+              }
+            }, 0);
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Arrow, {
+        "aria-hidden": "true",
+        children: "\u25BC"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Options, {
+      open: isOpen,
+      "data-testid": "options",
+      children: filteredOptions.length > 0 ? filteredOptions.map(function (option) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
+          selected: "".concat(option === null || option === void 0 ? void 0 : option.value) === "".concat(selectedValue),
+          onClick: function onClick() {
+            return handleSelect(option);
+          },
+          className: inputValue.trim() !== "" && option === filteredOptions[0] ? "first" : "",
+          tabIndex: -1,
+          children: option === null || option === void 0 ? void 0 : option.label
+        }, option === null || option === void 0 ? void 0 : option.value);
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
+        disabled: true,
+        style: {
+          pointerEvents: "none",
+          opacity: 0.5
+        },
+        children: loading ? "Cargando…" : "No se encontraron elementos"
+      })
+    })]
+  });
+};
+
+exports.SingleSelect = SingleSelect;

package/dist/components/molecules/SingleSelect/styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectedOptionItem = exports.SelectWrapper = exports.SelectBase = exports.Options = exports.OptionItem = exports.Arrow = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+require("../../../global-files/global-styles.css");
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var PINK = "#E13AA8";
+
+var SelectWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex: 1 1 0;\n  min-width: 0;\n  font-family: ", ";\n  font-size: 13px;\n  user-select: none;\n  box-sizing: border-box;\n"])), _variables.FontFamily.Raleway);
+
+exports.SelectWrapper = SelectWrapper;
+
+var SelectBase = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  min-width: 0;\n  border-radius: 5px 5px 0 0;\n  border-bottom: 1px solid rgba(225, 58, 168, 0.5);\n  color: ", ";\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  white-space: nowrap;\n  overflow-x: hidden;\n  padding: 0;\n\n  cursor: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n\n  > div {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  > div > input {\n    width: 100%;\n    min-width: 0;\n    border: none;\n    outline: none;\n    padding: 9px 22px 9px 10px;\n    border-radius: 5px 5px 0 0;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n    background: none;\n  }\n\n  > div > input::placeholder {\n    color: ", ";\n  }\n"])), _variables.GlobalColors.deep_gray, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "not-allowed" : "pointer";
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 0.5 : 1;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? "none" : "auto";
+}, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.SelectBase = SelectBase;
+
+var SelectedOptionItem = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  max-width: 60%;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n  padding: 5px 8px;\n  background-color: rgba(225, 58, 168, 0.06);\n  color: ", ";\n  font-size: 12px;\n\n  > p {\n    width: 100%;\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), _variables.GlobalColors.gray);
+/*
+  Flecha dibujada, no un icono de fuente. El componente original usaba
+  material-symbols-outlined, que la aplicación carga y esta librería no: aquí
+  habría salido la palabra "arrow_drop_down" escrita donde debería ir el triángulo.
+*/
+
+
+exports.SelectedOptionItem = SelectedOptionItem;
+
+var Arrow = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 6px;\n  pointer-events: none;\n  color: ", ";\n  font-size: 10px;\n  line-height: 1;\n"])), PINK);
+
+exports.Arrow = Arrow;
+
+var Options = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  max-height: 180px;\n  overflow-y: auto;\n  background-color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  box-shadow: 0 4px 8px rgb(0 0 0 / 18%);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: ", ";\n  z-index: 1000;\n"])), _variables.GlobalColors.white, _variables.GlobalColors.s2, function (_ref4) {
+  var open = _ref4.open;
+  return open ? "block" : "none";
+});
+
+exports.Options = Options;
+
+var OptionItem = _styledComponents.default.li(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 9px 12px;\n  cursor: pointer;\n  font-size: 12px;\n  white-space: normal;\n  background-color: ", ";\n  color: ", ";\n\n  &.first {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref5) {
+  var selected = _ref5.selected;
+  return selected ? PINK : _variables.GlobalColors.white;
+}, function (_ref6) {
+  var selected = _ref6.selected;
+  return selected ? _variables.GlobalColors.white : _variables.GlobalColors.gray;
+}, function (_ref7) {
+  var selected = _ref7.selected;
+  return selected ? PINK : "rgba(225, 58, 168, 0.1)";
+}, function (_ref8) {
+  var selected = _ref8.selected;
+  return selected ? PINK : "rgba(225, 58, 168, 0.06)";
+});
+
+exports.OptionItem = OptionItem;

package/dist/components/organisms/LinkVariantsModal/index.js

@@ -25,6 +25,8 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _api = require("./api");
 
+var _SingleSelect = require("../../molecules/SingleSelect");
+
 var _helper = require("../../../_utils/helper");
 
 var _styles = require("./styles");
@@ -568,13 +570,19 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                     }),
                     categories: []
                   });
-                }
+                } // El tercer nivel no viene como {id, name} sino como
+                // {category_id, subcategory}: con el mapeo de los otros dos, la
+                // categoría salía en la lista pero sin texto. Mismo criterio que usa
+                // el alta de productos, incluido el separador legible.
+
 
                 return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
                   categories: lista.map(function (item) {
+                    var _item$subcategory;
+
                     return {
-                      value: item.id,
-                      label: item.name
+                      value: item.category_id,
+                      label: ((_item$subcategory = item.subcategory) !== null && _item$subcategory !== void 0 ? _item$subcategory : "").replace("|", " > ")
                     };
                   })
                 });
@@ -1065,62 +1073,45 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }, item.clave);
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-retailer",
+                placeholder: "Agregar otra cadena\u2026",
+                options: filters.retailers,
                 value: newRetailer,
-                onChange: function onChange(event) {
-                  var valor = event.target.value;
-                  setNewRetailer(valor);
+                loading: loadingFilters && !filters.retailers.length,
+                onChange: function onChange(valor) {
+                  setNewRetailer(valor !== null && valor !== void 0 ? valor : "");
                   setNewDepartment("");
                   setNewCategory("");
                   if (valor) loadFilters(valor, null);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Agregar otra cadena\u2026"
-                }), filters.retailers.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-department",
+                placeholder: "Departamento\u2026",
+                options: filters.departments,
                 value: newDepartment,
-                disabled: !newRetailer || !filters.departments.length,
-                onChange: function onChange(event) {
-                  var valor = event.target.value;
-                  setNewDepartment(valor);
+                disabled: !newRetailer,
+                loading: loadingFilters && !!newRetailer,
+                onChange: function onChange(valor) {
+                  setNewDepartment(valor !== null && valor !== void 0 ? valor : "");
                   setNewCategory("");
                   if (valor) loadFilters(newRetailer, valor);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Departamento\u2026"
-                }), filters.departments.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-category",
+                placeholder: "Categor\xEDa\u2026",
+                options: filters.categories,
                 value: newCategory,
-                disabled: !newDepartment || !filters.categories.length,
-                onChange: function onChange(event) {
-                  return setNewCategory(event.target.value);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Categor\xEDa\u2026"
-                }), filters.categories.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
+                disabled: !newDepartment,
+                loading: loadingFilters && !!newDepartment,
+                onChange: function onChange(valor) {
+                  return setNewCategory(valor !== null && valor !== void 0 ? valor : "");
+                }
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                 type: "button",
                 onClick: addRetailer,
                 disabled: !newRetailer || !newCategory || loadingFilters,
-                children: loadingFilters ? "…" : "Agregar"
+                children: "Agregar"
               })]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
@@ -1262,72 +1253,68 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
               children: "El producto padre no tiene atributos con valor que heredar."
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+          }), imagenesUtiles.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "paso",
                 children: "4"
               }), " Im\xE1genes"]
-            }), imagenesUtiles.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "radio",
-                    name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
-                    checked: modes.images === "all",
-                    onChange: function onChange() {
-                      return chooseMode("images", "all", imagenesUtiles.map(function (item) {
-                        return item.id;
-                      }));
-                    }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                      className: "hint",
-                      children: [imagenesUtiles.length, " imagen(es) en el padre."]
-                    })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.images === "all",
+                  onChange: function onChange() {
+                    return chooseMode("images", "all", imagenesUtiles.map(function (item) {
+                      return item.id;
+                    }));
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "hint",
+                    children: [imagenesUtiles.length, " imagen(es) en el padre."]
                   })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.images === "some",
+                  onChange: function onChange() {
+                    return chooseMode("images", "some", []);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "hint",
+                    children: "\xDAtil cuando la variante cambia de color o de empaque."
+                  })]
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
+              children: imagenesUtiles.map(function (image) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "radio",
-                    name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
-                    checked: modes.images === "some",
+                    type: "checkbox",
+                    disabled: modes.images === "all",
+                    checked: chosen.images.includes(image.id),
                     onChange: function onChange() {
-                      return chooseMode("images", "some", []);
+                      return toggleChoice("images", image.id);
                     }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "hint",
-                      children: "\xDAtil cuando la variante cambia de color o de empaque."
-                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: (0, _helper.getProductImage)(image.src),
+                    alt: "",
+                    onError: function onError() {
+                      return setBrokenImages(function (current) {
+                        return current.includes(image.id) ? current : [].concat((0, _toConsumableArray2.default)(current), [image.id]);
+                      });
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: image.imageType || "Sin tipo de toma"
                   })]
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
-                children: imagenesUtiles.map(function (image) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                      type: "checkbox",
-                      disabled: modes.images === "all",
-                      checked: chosen.images.includes(image.id),
-                      onChange: function onChange() {
-                        return toggleChoice("images", image.id);
-                      }
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                      src: (0, _helper.getProductImage)(image.src),
-                      alt: "",
-                      onError: function onError() {
-                        return setBrokenImages(function (current) {
-                          return current.includes(image.id) ? current : [].concat((0, _toConsumableArray2.default)(current), [image.id]);
-                        });
-                      }
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      children: image.imageType || "Sin tipo de toma"
-                    })]
-                  }, image.id);
-                })
-              })]
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-              children: "El producto padre no tiene im\xE1genes que heredar."
+                }, image.id);
+              })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
             children: "Lo que elijas heredar reemplaza el valor actual de la variante, incluso si alguien lo hab\xEDa capturado a mano."

package/dist/components/organisms/LinkVariantsModal/styles.js

@@ -73,7 +73,7 @@ var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObj
 
 exports.ImageGrid = ImageGrid;
 
-var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-bottom: 16px;\n\n  select {\n    flex: 1 1 140px;\n    min-width: 0;\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n    background-color: ", ";\n  }\n\n  button {\n    height: 32px;\n    padding: 0 14px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    background: none;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  button:disabled {\n    opacity: 0.4;\n    cursor: default;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK);
+var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: 8px;\n  margin-bottom: 16px;\n\n  button {\n    height: 38px;\n    padding: 0 14px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    background: none;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n    flex-shrink: 0;\n  }\n\n  button:disabled {\n    opacity: 0.4;\n    cursor: default;\n  }\n"])), PINK, _variables.FontFamily.Raleway_600, PINK);
 
 exports.AddRetailer = AddRetailer;