contentoh-components-library 21.6.16 → 21.6.18

package/dist/ai/prompts/attribute.prompt.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateAttributePrompt = void 0;
+
+var generateAttributePrompt = function generateAttributePrompt(_ref) {
+  var _ref$upc = _ref.upc,
+      upc = _ref$upc === void 0 ? 0 : _ref$upc,
+      _ref$inputName = _ref.inputName,
+      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$currentValue = _ref.currentValue,
+      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? "" : _ref$category,
+      _ref$retailer = _ref.retailer,
+      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
+      _ref$maxChar = _ref.maxChar,
+      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
+  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n, mejora y captura de atributos de la ficha t\xE9cnica de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear atributos claros, concisos y relevantes que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje preciso y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Nombre del atributo: ").concat(inputName, "\n    - Requerimiento del atributo: ").concat(description, "\n    - Valor actual del atributo: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza el nombre del producto y la categor\xEDa para entender su contexto.\n    2. Analiza la descripci\xF3n del atributo actual del producto.\n    3. Identifica la informaci\xF3n clave del atributo que sean relevantes y \xFAtiles para los clientes potenciales.\n    4. Genera una lista de atributos que:\n      - Cumplan con la descripcion del atributo proporcionada, no inventes datos o cambies el contexto de lo que pide la descripci\xF3n del atributo.\n      - Sean claros y f\xE1ciles de entender.\n      - Destaquen las caracter\xEDsticas y beneficios clave del producto.\n      - Utilicen un lenguaje preciso y adaptado al p\xFAblico objetivo.\n      - Mantengan un tono profesional y coherente con la marca.\n      - Aumenten la probabilidad de compra del producto.\n      - No excedan los ").concat(maxChar, " caracteres en total.\n      - Si existe ejemplo en la descripci\xF3n del atributo, sigue el mismo formato para generar los atributos.\n    5. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    6. No repitas el encabezado: ").concat(inputName, "\n    7. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n    Aseg\xFArate de que los atributos generados cumplan con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la captura de atributos para la ficha t\xE9cnica del producto para atraer, convencer y dar la informaci\xF3n completa a los clientes potenciales que puedan realizar una compra.\n  ");
+};
+
+exports.generateAttributePrompt = generateAttributePrompt;

package/dist/ai/prompts/description.prompt.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDescriptionPrompt = void 0;
+
+// Cadena y Proveedor
+
+/**
+ * La cadena ${cadena} tiene estas reglas ${reglas} para el tipo de descripcion que es: ${descripcion}
+*/
+var generateDescriptionPrompt = function generateDescriptionPrompt(_ref) {
+  var _ref$upc = _ref.upc,
+      upc = _ref$upc === void 0 ? 0 : _ref$upc,
+      _ref$inputName = _ref.inputName,
+      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? "" : _ref$description,
+      _ref$currentValue = _ref.currentValue,
+      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$category = _ref.category,
+      category = _ref$category === void 0 ? "" : _ref$category,
+      _ref$retailer = _ref.retailer,
+      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
+      _ref$maxChar = _ref.maxChar,
+      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
+  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n y mejora de descripciones de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear descripciones claras, concisas y atractivas que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Encabezado de la descripci\xF3n: ").concat(inputName, "\n    - Requerimiento de la descripcion: ").concat(description, "\n    - Descripcion actual del producto: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza la descripci\xF3n actual del producto en caso de tenerla.\n    2. Identifica \xE1reas de mejora, como claridad, concisi\xF3n, atractivo y relevancia.\n    3. Genera una descripci\xF3n que:\n      - Sea clara y f\xE1cil de entender.\n      - Destaque las caracter\xEDsticas y beneficios clave del producto.\n      - Utilice un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n      - Mantenga un tono profesional y coherente con la marca.\n      - No exceda los ").concat(maxChar, " caracteres.\n      - Aumente la probabilidad de compra del producto, utilizando persuasi\xF3n en la necesidad de compra del producto.\n    4. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    5. No repitas el encabezado: ").concat(inputName, "\n    6. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n\n    Aseg\xFArate de que la descripci\xF3n generada cumpla con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la descripci\xF3n del producto para atraer y convencer a los clientes potenciales de realizar una compra. Eres un experto en marketing y redacci\xF3n persuasiva.\n\n    Nota: No estas hablando con los clientes, estas descripciones ir\xE1n en la tienda de E-commerce de la cadena comercial. No realices saludos, despedidas, sugerencias\n  ");
+};
+
+exports.generateDescriptionPrompt = generateDescriptionPrompt;

package/dist/ai/schemas/attribute.schema.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var schema = {
+  type: "object",
+  properties: {
+    results: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string"
+          },
+          value: {
+            type: "string"
+          }
+        }
+      },
+      maxItems: 3
+    },
+    compliance_warnings: {
+      type: "array",
+      items: {
+        type: "string"
+      }
+    }
+  },
+  required: ["results"]
+};
+var _default = schema;
+exports.default = _default;

package/dist/ai/schemas/description.schema.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var schema = {
+  type: "object",
+  properties: {
+    results: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          value: {
+            type: "string"
+          }
+        }
+      },
+      minItems: 1,
+      maxItems: 3
+    }
+  },
+  required: ["results"]
+};
+var _default = schema;
+exports.default = _default;

package/dist/components/atoms/InheritanceTag/InheritanceTag.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PropioSinAccion = exports.Propio = exports.NoEsVariante = exports.Heredado = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/atoms/InheritanceTag",
+  label: "Inheritance Tag",
+  component: _index.InheritanceTag
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.InheritanceTag, (0, _objectSpread2.default)({}, args));
+};
+
+var Heredado = Template.bind({});
+exports.Heredado = Heredado;
+Heredado.args = {
+  isVariant: true,
+  isOverridden: false,
+  parentUpc: "7501234567890"
+};
+var Propio = Template.bind({});
+exports.Propio = Propio;
+Propio.args = {
+  isVariant: true,
+  isOverridden: true,
+  parentUpc: "7501234567890",
+  onRestore: function onRestore() {}
+}; // Un valor propio sin onRestore no ofrece la acción: se marca, pero no se puede
+// revertir desde ahí. Es el caso de las vistas de solo lectura.
+
+var PropioSinAccion = Template.bind({});
+exports.PropioSinAccion = PropioSinAccion;
+PropioSinAccion.args = {
+  isVariant: true,
+  isOverridden: true
+}; // En un producto que no es variante no se pinta nada.
+
+var NoEsVariante = Template.bind({});
+exports.NoEsVariante = NoEsVariante;
+NoEsVariante.args = {
+  isVariant: false,
+  isOverridden: true
+};

package/dist/components/atoms/InheritanceTag/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InheritanceTag = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/**
+ * Marca si el valor de un atributo viene del producto padre o es propio de la
+ * variante. Solo tiene sentido dentro de una variante: en un producto sin padre
+ * no se pinta nada, porque no hay de quién heredar.
+ *
+ * El estado "propio" es el que carga información —ese campo se separó del padre—
+ * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
+ * "Heredado" es el caso normal y se mantiene discreto: si gritara en cada campo,
+ * la ficha entera se volvería ruido.
+ */
+var InheritanceTag = function InheritanceTag(_ref) {
+  var _ref$isVariant = _ref.isVariant,
+      isVariant = _ref$isVariant === void 0 ? false : _ref$isVariant,
+      _ref$isOverridden = _ref.isOverridden,
+      isOverridden = _ref$isOverridden === void 0 ? false : _ref$isOverridden,
+      parentUpc = _ref.parentUpc,
+      onRestore = _ref.onRestore,
+      _ref$restoreLabel = _ref.restoreLabel,
+      restoreLabel = _ref$restoreLabel === void 0 ? "Volver a heredar" : _ref$restoreLabel,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? "" : _ref$className;
+  if (!isVariant) return null;
+  var state = isOverridden ? "own" : "inherited";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "inheritance-tag ".concat(state, " ").concat(className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "tag-label",
+      title: isOverridden ? "Valor propio de esta variante. La propagación del producto padre no lo modifica." : "Valor heredado".concat(parentUpc ? " del producto ".concat(parentUpc) : " del producto padre", "."),
+      children: isOverridden ? "Propio" : "Heredado"
+    }), isOverridden && onRestore && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: "tag-action",
+      onClick: onRestore,
+      children: restoreLabel
+    })]
+  });
+};
+
+exports.InheritanceTag = InheritanceTag;

package/dist/components/atoms/InheritanceTag/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = 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;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  height: 16px;\n\n  .tag-label {\n    border-radius: 3px;\n    padding: 2px 5px;\n    font-family: ", ";\n    font-size: 10px;\n    line-height: 12px;\n    letter-spacing: -0.015em;\n    white-space: nowrap;\n    cursor: default;\n  }\n\n  /* Heredado: el caso normal. Discreto a prop\xF3sito. */\n  &.inherited .tag-label {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Propio: la excepci\xF3n que informa. Lleva el acento de marca. */\n  &.own .tag-label {\n    background-color: rgba(", ", 0.12);\n    color: ", ";\n  }\n\n  .tag-action {\n    border: none;\n    background: none;\n    padding: 0;\n    font-family: ", ";\n    font-size: 10px;\n    line-height: 12px;\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n\n    &:hover {\n      color: ", ";\n    }\n\n    &:focus-visible {\n      outline: 1px solid ", ";\n      outline-offset: 2px;\n      border-radius: 2px;\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_500, _variables.GlobalColors.s4, _variables.GlobalColors.original_magenta, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -32,11 +32,16 @@ var logoToWhite = "grayscale(1) brightness(0) invert(1)";
   anterior, lo que ensancha el trazo de forma pareja sin desenfocarlo (blur 0).
   Va DESPUÉS de logoToWhite a propósito: antes del invert(1) estas sombras
   blancas se voltearían a negro.
+
+  El peso se dosifica con el alfa, no con el offset: a 0.15px el desplazamiento
+  ya es sub-pixel, así que reducirlo cae en el mismo píxel al rasterizar y no se
+  distingue. Medio blanco (0.5) deja el trazo a mitad de camino entre el
+  original y el engrosado opaco, conservando las cuatro cardinales.
 */
 
-var logoThicken = "\n  drop-shadow(0.15px 0 0 #fff) drop-shadow(-0.15px 0 0 #fff)\n  drop-shadow(0 0.15px 0 #fff) drop-shadow(0 -0.15px 0 #fff)\n";
+var logoThicken = "\n  drop-shadow(0.15px 0 0 rgba(255, 255, 255, 0.5))\n  drop-shadow(-0.15px 0 0 rgba(255, 255, 255, 0.5))\n  drop-shadow(0 0.15px 0 rgba(255, 255, 255, 0.5))\n  drop-shadow(0 -0.15px 0 rgba(255, 255, 255, 0.5))\n";
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  padding: 23px 0 26px 0;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", ";\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 0;\n  & + * {\n    margin-left: 30px;\n  }\n  .logo-footer {\n    /*\n      Ambos logotipos son anchos (6:1 el del pie, 7.6:1 el de arriba), as\xED que\n      el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,\n      cerca de los ~167px del logotipo superior a 22px.\n    */\n    height: 26px;\n    align-self: center;\n    flex-shrink: 0;\n    opacity: 0.9;\n    filter: ", ";\n    /* Firma anclada al pie: el space-between la baja hasta el padding. */\n    margin-top: auto;\n  }\n  .navbar-top {\n    /*\n      Caja de alto fijo: el isotipo animado \"respira\" (sus frames crecen de\n      156px a 192px de contenido) y sin este slot cada latido empujar\xEDa el men\xFA\n      hacia abajo. Tambi\xE9n absorbe el cambio de alto entre logotipo e isotipo.\n    */\n    .logo-slot {\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .logo {\n      width: auto;\n      filter: ", ";\n    }\n    .logo-wordmark {\n      height: 22px;\n      filter: ", " ", ";\n    }\n    /*\n      El GIF trae ~20% de lienzo transparente por eje (contenido \xFAtil de 240x192\n      dentro de 300x320), as\xED que necesita m\xE1s alto declarado que el SVG que\n      sustituye para leerse del mismo tama\xF1o: 40px de caja \u2248 24px de glifo.\n    */\n    .logo-isotype {\n      height: 40px;\n    }\n    .option {\n      .option-div {\n        width: 100%;\n        white-space: nowrap;\n      }\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-top: 50px;\n      .active {\n        text-decoration: none;\n        background: rgba(255, 255, 255, 0.1);\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: 32px;\n        height: auto;\n        width: auto;\n        &:last-child {\n          margin-bottom: 10px;\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  box-sizing: border-box;\n  padding: 23px 0 26px 0;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", ";\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 0;\n  & + * {\n    margin-left: 30px;\n  }\n  .logo-footer {\n    /*\n      Ambos logotipos son anchos (6:1 el del pie, 7.6:1 el de arriba), as\xED que\n      el ancho es lo que decide si se ven parejos: 26px de alto dan ~156px,\n      cerca de los ~167px del logotipo superior a 22px.\n    */\n    height: 29px;\n    align-self: center;\n    flex-shrink: 0;\n    opacity: 0.9;\n    filter: ", ";\n    /* Firma anclada al pie: el space-between la baja hasta el padding. */\n    margin-top: auto;\n  }\n  .navbar-top {\n    /*\n      Caja de alto fijo: el isotipo animado \"respira\" (sus frames crecen de\n      156px a 192px de contenido) y sin este slot cada latido empujar\xEDa el men\xFA\n      hacia abajo. Tambi\xE9n absorbe el cambio de alto entre logotipo e isotipo.\n    */\n    .logo-slot {\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .logo {\n      width: auto;\n      filter: ", ";\n    }\n    .logo-wordmark {\n      height: 22px;\n      filter: ", " ", ";\n    }\n    /*\n      El GIF trae ~20% de lienzo transparente por eje (contenido \xFAtil de 240x192\n      dentro de 300x320), as\xED que necesita m\xE1s alto declarado que el SVG que\n      sustituye para leerse del mismo tama\xF1o: 40px de caja \u2248 24px de glifo.\n    */\n    .logo-isotype {\n      height: 40px;\n    }\n    .option {\n      .option-div {\n        width: 100%;\n        white-space: nowrap;\n      }\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-top: 50px;\n      .active {\n        text-decoration: none;\n        background: rgba(255, 255, 255, 0.1);\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: 32px;\n        height: auto;\n        width: auto;\n        &:last-child {\n          margin-bottom: 10px;\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
   return bar ? "240px" : "66px";
 }, logoToWhite, logoToWhite, logoToWhite, logoThicken);

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

@@ -11,6 +11,8 @@ var _GeneralInputv = require("../../atoms/GeneralInputv2");
 
 var _ScreenHeaderv = require("../../atoms/ScreenHeaderv2");
 
+var _InheritanceTag = require("../../atoms/InheritanceTag");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var TagAndInputv2 = function TagAndInputv2(_ref) {
@@ -43,13 +45,17 @@ var TagAndInputv2 = function TagAndInputv2(_ref) {
       onKeyDown = _ref.onKeyDown,
       showTooltip = _ref.showTooltip,
       auditClass = _ref.auditClass,
-      showMissingChars = _ref.showMissingChars;
+      showMissingChars = _ref.showMissingChars,
+      isVariant = _ref.isVariant,
+      isOverridden = _ref.isOverridden,
+      parentUpc = _ref.parentUpc,
+      onRestoreInheritance = _ref.onRestoreInheritance;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
-    children: [(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "title-container",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
         text: label,
         headerType: "input-name-header",
         color: color,
@@ -61,7 +67,14 @@ var TagAndInputv2 = function TagAndInputv2(_ref) {
         required: required,
         description: description,
         showMissingChars: showMissingChars
-      })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InheritanceTag.InheritanceTag, {
+        isVariant: isVariant,
+        isOverridden: isOverridden,
+        parentUpc: parentUpc,
+        onRestore: onRestoreInheritance ? function () {
+          return onRestoreInheritance(inputId);
+        } : undefined
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInputv.GeneralInputv2, {
       inputId: inputId,
       inputType: inputType,

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n    .tooltip {\n      display: none;\n      position: absolute;\n      background-color: ", ";\n      color: ", ";\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 19px;\n      left: 0;\n      top: 0;\n      height: fit-content;\n    }\n\n    // &:hover {\n    //   .tooltip {\n    //     display: block;\n    //   }\n    // }\n  }\n\n  // & > :first-child {\n  //   & + * {\n  //     margin-top: ", "px;\n  //   }\n  // }\n  & + * {\n    margin-top: ", "px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .title-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    /* El nombre del atributo manda; el chip se acomoda a su lado sin\n       empujarlo ni robarle ancho cuando el texto es largo. */\n    & > :first-child {\n      min-width: 0;\n    }\n    .inheritance-tag {\n      flex-shrink: 0;\n    }\n\n    .tooltip {\n      display: none;\n      position: absolute;\n      background-color: ", ";\n      color: ", ";\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 19px;\n      left: 0;\n      top: 0;\n      height: fit-content;\n    }\n\n    // &:hover {\n    //   .tooltip {\n    //     display: block;\n    //   }\n    // }\n  }\n\n  // & > :first-child {\n  //   & + * {\n  //     margin-top: ", "px;\n  //   }\n  // }\n  & + * {\n    margin-top: ", "px;\n  }\n"])), _variables.GlobalColors.white, function (_ref) {
   var color = _ref.color;
   return color ? color : _variables.GlobalColors.s5;
 }, _variables.FontFamily.Raleway, function (_ref2) {

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

@@ -42,7 +42,9 @@ var InputGroupv2 = function InputGroupv2(_ref) {
       compare = _ref.compare,
       activeRetailer = _ref.activeRetailer,
       setUpdatedBoxData = _ref.setUpdatedBoxData,
-      showMissingChars = _ref.showMissingChars;
+      showMissingChars = _ref.showMissingChars,
+      variant = _ref.variant,
+      onRestoreInheritance = _ref.onRestoreInheritance;
 
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
@@ -106,7 +108,7 @@ var InputGroupv2 = function InputGroupv2(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "inputs-container",
         children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
-          var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _auditInputs$input, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12, _dataInputs$input13, _dataInputs$input14, _dataInputs$input15, _dataInputs$input16, _auditInputGroup$inpu, _auditInputGroup$inpu2;
+          var _dataInputs$input, _dataInputs$input2, _dataInputs$input3, _dataInputs$input4, _dataInputs$input5, _dataInputs$input6, _auditInputs$input, _dataInputs$input7, _dataInputs$input8, _dataInputs$input9, _dataInputs$input10, _dataInputs$input11, _dataInputs$input12, _dataInputs$input13, _dataInputs$input14, _dataInputs$input15, _dataInputs$input16, _dataInputs$input17, _variant$parent, _auditInputGroup$inpu, _auditInputGroup$inpu2;
 
           return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInputv.TagAndInputv2, {
@@ -131,7 +133,11 @@ var InputGroupv2 = function InputGroupv2(_ref) {
               description: (_dataInputs$input16 = dataInputs[input]) === null || _dataInputs$input16 === void 0 ? void 0 : _dataInputs$input16.description,
               showTooltip: true,
               auditClass: compare && !isEquals(dataInputs[input].value, auditInputs[input].value) ? "audit-class" : "",
-              showMissingChars: showMissingChars
+              showMissingChars: showMissingChars,
+              isVariant: variant === null || variant === void 0 ? void 0 : variant.isVariant,
+              isOverridden: (_dataInputs$input17 = dataInputs[input]) === null || _dataInputs$input17 === void 0 ? void 0 : _dataInputs$input17.isOverridden,
+              parentUpc: variant === null || variant === void 0 ? void 0 : (_variant$parent = variant.parent) === null || _variant$parent === void 0 ? void 0 : _variant$parent.upc,
+              onRestoreInheritance: onRestoreInheritance
             }, index + "-" + ((_dataInputs$input = dataInputs[input]) === null || _dataInputs$input === void 0 ? void 0 : _dataInputs$input.value) + "-" + ((_dataInputs$input2 = dataInputs[input]) === null || _dataInputs$input2 === void 0 ? void 0 : _dataInputs$input2.id) + "-" + compare)
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInputv.TagAndInputv2, {
             inputId: input.id,
@@ -166,36 +172,40 @@ var InputGroupv2 = function InputGroupv2(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "inputs-container",
         children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs2 = inputGroup.inputs) === null || _inputGroup$inputs2 === void 0 ? void 0 : _inputGroup$inputs2.map(function (input, index) {
-          var _dataInputs$input17, _dataInputs$input18, _dataInputs$input19, _dataInputs$input20, _dataInputs$input21, _dataInputs$input22, _auditInputs$input2, _dataInputs$input23, _dataInputs$input24, _dataInputs$input25, _dataInputs$input26, _dataInputs$input27, _dataInputs$input28, _auditInputGroup$inpu3, _auditInputGroup$inpu4;
+          var _dataInputs$input18, _dataInputs$input19, _dataInputs$input20, _dataInputs$input21, _dataInputs$input22, _dataInputs$input23, _auditInputs$input2, _dataInputs$input24, _dataInputs$input25, _dataInputs$input26, _dataInputs$input27, _dataInputs$input28, _dataInputs$input29, _dataInputs$input30, _variant$parent2, _auditInputGroup$inpu3, _auditInputGroup$inpu4;
 
           return activeSection === "Ficha técnica" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInputv.TagAndInputv2, {
               //disabled={input === 40001}
               disabled: false,
-              inputId: (_dataInputs$input19 = dataInputs[input]) === null || _dataInputs$input19 === void 0 ? void 0 : _dataInputs$input19.id,
+              inputId: (_dataInputs$input20 = dataInputs[input]) === null || _dataInputs$input20 === void 0 ? void 0 : _dataInputs$input20.id,
               version: version,
-              inputType: inputTypeValue((_dataInputs$input20 = dataInputs[input]) === null || _dataInputs$input20 === void 0 ? void 0 : _dataInputs$input20.type),
-              label: ((_dataInputs$input21 = dataInputs[input]) === null || _dataInputs$input21 === void 0 ? void 0 : _dataInputs$input21.name) + ((_dataInputs$input22 = dataInputs[input]) !== null && _dataInputs$input22 !== void 0 && _dataInputs$input22.required ? "*" : ""),
-              value: compare ? (_auditInputs$input2 = auditInputs[input]) === null || _auditInputs$input2 === void 0 ? void 0 : _auditInputs$input2.value : (_dataInputs$input23 = dataInputs[input]) === null || _dataInputs$input23 === void 0 ? void 0 : _dataInputs$input23.value,
+              inputType: inputTypeValue((_dataInputs$input21 = dataInputs[input]) === null || _dataInputs$input21 === void 0 ? void 0 : _dataInputs$input21.type),
+              label: ((_dataInputs$input22 = dataInputs[input]) === null || _dataInputs$input22 === void 0 ? void 0 : _dataInputs$input22.name) + ((_dataInputs$input23 = dataInputs[input]) !== null && _dataInputs$input23 !== void 0 && _dataInputs$input23.required ? "*" : ""),
+              value: compare ? (_auditInputs$input2 = auditInputs[input]) === null || _auditInputs$input2 === void 0 ? void 0 : _auditInputs$input2.value : (_dataInputs$input24 = dataInputs[input]) === null || _dataInputs$input24 === void 0 ? void 0 : _dataInputs$input24.value,
               inputPlaceHolder: input === null || input === void 0 ? void 0 : input.placeholder,
               articleId: articleId,
-              isRequired: (_dataInputs$input24 = dataInputs[input]) === null || _dataInputs$input24 === void 0 ? void 0 : _dataInputs$input24.required,
+              isRequired: (_dataInputs$input25 = dataInputs[input]) === null || _dataInputs$input25 === void 0 ? void 0 : _dataInputs$input25.required,
               required: input.required,
               minWords: input === null || input === void 0 ? void 0 : input.min_words,
               maxWords: input === null || input === void 0 ? void 0 : input.max_words,
               minChar: input === null || input === void 0 ? void 0 : input.min_chars,
               updatedDatasheets: updatedDatasheets,
               setUpdatedDatasheets: setUpdatedDatasheets,
-              maxChar: (_dataInputs$input25 = dataInputs[input]) !== null && _dataInputs$input25 !== void 0 && _dataInputs$input25.max_chars ? (_dataInputs$input26 = dataInputs[input]) === null || _dataInputs$input26 === void 0 ? void 0 : _dataInputs$input26.max_chars : 999,
-              optionList: (_dataInputs$input27 = dataInputs[input]) === null || _dataInputs$input27 === void 0 ? void 0 : _dataInputs$input27.option_list,
-              description: (_dataInputs$input28 = dataInputs[input]) === null || _dataInputs$input28 === void 0 ? void 0 : _dataInputs$input28.description,
+              maxChar: (_dataInputs$input26 = dataInputs[input]) !== null && _dataInputs$input26 !== void 0 && _dataInputs$input26.max_chars ? (_dataInputs$input27 = dataInputs[input]) === null || _dataInputs$input27 === void 0 ? void 0 : _dataInputs$input27.max_chars : 999,
+              optionList: (_dataInputs$input28 = dataInputs[input]) === null || _dataInputs$input28 === void 0 ? void 0 : _dataInputs$input28.option_list,
+              description: (_dataInputs$input29 = dataInputs[input]) === null || _dataInputs$input29 === void 0 ? void 0 : _dataInputs$input29.description,
               showTooltip: true,
               inputGroup: inputGroup,
               dataInputs: dataInputs,
               onChange: setUpdatedBoxData,
               auditClass: compare && !isEquals(dataInputs[input].value, auditInputs[input].value) ? "audit-class" : "",
-              showMissingChars: showMissingChars
-            }, index + "-" + ((_dataInputs$input17 = dataInputs[input]) === null || _dataInputs$input17 === void 0 ? void 0 : _dataInputs$input17.value) + "-" + ((_dataInputs$input18 = dataInputs[input]) === null || _dataInputs$input18 === void 0 ? void 0 : _dataInputs$input18.id) + "-" + compare)
+              showMissingChars: showMissingChars,
+              isVariant: variant === null || variant === void 0 ? void 0 : variant.isVariant,
+              isOverridden: (_dataInputs$input30 = dataInputs[input]) === null || _dataInputs$input30 === void 0 ? void 0 : _dataInputs$input30.isOverridden,
+              parentUpc: variant === null || variant === void 0 ? void 0 : (_variant$parent2 = variant.parent) === null || _variant$parent2 === void 0 ? void 0 : _variant$parent2.upc,
+              onRestoreInheritance: onRestoreInheritance
+            }, index + "-" + ((_dataInputs$input18 = dataInputs[input]) === null || _dataInputs$input18 === void 0 ? void 0 : _dataInputs$input18.value) + "-" + ((_dataInputs$input19 = dataInputs[input]) === null || _dataInputs$input19 === void 0 ? void 0 : _dataInputs$input19.id) + "-" + compare)
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInputv.TagAndInputv2, {
             inputId: input.id,
             index: index,