contentoh-components-library 21.0.3 → 21.0.6

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CharCounterDefault = 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/CharCounter",
+  component: _index.CharCounter
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CharCounter, (0, _objectSpread2.default)({}, args));
+};
+
+var CharCounterDefault = Template.bind({});
+exports.CharCounterDefault = CharCounterDefault;
+CharCounterDefault.args = {
+  counter: 0,
+  limit: 0
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CharCounter = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CharCounter = function CharCounter(_ref) {
+  var counter = _ref.counter,
+      limit = _ref.limit;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: limit && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      children: [counter, "/", limit]
+    })
+  });
+};
+
+exports.CharCounter = CharCounter;

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

@@ -0,0 +1,20 @@
+"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"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  color: ", ";\n  font-size: 13px;\n  text-align: right;\n  padding-right: 10px;\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

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

@@ -20,77 +20,98 @@ var _jsxRuntime = require("react/jsx-runtime");
 var GeneralInput = function GeneralInput(_ref) {
   var inputType = _ref.inputType,
       inputId = _ref.inputId,
+      inputName = _ref.inputName,
       inputValue = _ref.inputValue,
-      articleId = _ref.articleId,
-      isRequired = _ref.isRequired,
-      version = _ref.version,
       inputPlaceholder = _ref.inputPlaceholder,
-      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      validateInput = _ref.validateInput,
+      position = _ref.position,
+      inputsArray = _ref.inputsArray,
+      inputSize = _ref.inputSize,
+      articleId = _ref.articleId,
       updatedDatasheets = _ref.updatedDatasheets,
       setUpdatedDatasheets = _ref.setUpdatedDatasheets,
-      index = _ref.index,
-      dinamicHeight = _ref.dinamicHeight;
+      updatedDescriptions = _ref.updatedDescriptions,
+      setUpdatedDescriptions = _ref.setUpdatedDescriptions,
+      maxChar = _ref.maxChar,
+      isRequired = _ref.isRequired,
+      version = _ref.version;
 
   var _useState = (0, _react.useState)({
-    value: inputValue ? inputValue : ""
+    value: inputValue
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       textValue = _useState2[0],
       setTextValue = _useState2[1];
 
-  var onHandleChange = function onHandleChange(e) {
-    setTextValue(function (_ref2) {
-      var value = _ref2.value;
-      return value = e.target.value;
-    });
-    updatedDatasheets && addTextAreaToArray(e.target.value, updatedDatasheets, setUpdatedDatasheets);
-  };
-
-  (0, _react.useEffect)(function () {
-    if (dinamicHeight) {
-      var input = document.querySelector("textarea#description-".concat(inputId, "-").concat(index));
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      requiredEmpty = _useState4[0],
+      setRequiredEmpty = _useState4[1];
 
-      if (input) {
-        input.style.cssText = "height:" + input.scrollHeight + "px";
+  var onHandleChange = function onHandleChange(evt) {
+    if (validateInput) {
+      setTextValue({
+        value: validateInput(evt, position, inputsArray)
+      });
+    } else {
+      setTextValue({
+        value: evt.target.value
+      });
+      var dataSave = updatedDatasheets.slice();
+      if (dataSave.length === 0) dataSave.push({
+        articleId: articleId,
+        versionId: version,
+        attributeId: inputId,
+        value: evt.target.value
+      });else if (dataSave.some(function (e) {
+        return e.attributeId === inputId;
+      })) {
+        dataSave.forEach(function (e) {
+          if (e.attributeId === inputId) {
+            e.value = evt.target.value;
+          }
+        });
+      } else {
+        dataSave.push({
+          articleId: articleId,
+          versionId: version,
+          attributeId: inputId,
+          value: evt.target.value
+        });
       }
+      setUpdatedDatasheets(dataSave);
     }
-  }, [textValue]);
-
-  var addTextAreaToArray = function addTextAreaToArray(textValue) {
-    var array = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    var setArray = arguments.length > 2 ? arguments[2] : undefined;
-    var tempDescriptions = array;
-    var newArticle = {
-      articleId: articleId,
-      attributeId: inputId,
-      value: textValue,
-      versionId: version
-    };
-    var isOnArray = tempDescriptions === null || tempDescriptions === void 0 ? void 0 : tempDescriptions.some(function (desc, index) {
-      if (desc.attributeId === newArticle.attributeId) {
-        tempDescriptions[index] = newArticle;
-        return true;
-      }
-    });
-    !isOnArray && (tempDescriptions === null || tempDescriptions === void 0 ? void 0 : tempDescriptions.push(newArticle));
-    setArray(tempDescriptions);
   };
 
+  (0, _react.useEffect)(function () {
+    var _textValue$value;
+
+    setRequiredEmpty(isRequired && ((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0);
+  }, [textValue]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    isRequired: isRequired && !textValue.value,
+    isRequired: requiredEmpty,
     children: inputType !== "textarea" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: inputType,
-      id: "datasheet-" + inputId + "-" + index,
+      id: inputId,
+      size: inputSize,
       className: "general-input",
       placeholder: inputPlaceholder,
-      value: textValue === null || textValue === void 0 ? void 0 : textValue.value,
-      onChange: onHandleChange
+      value: textValue.value,
+      onInput: function onInput(e) {
+        return onHandleChange(e);
+      },
+      required: isRequired,
+      maxLength: maxChar
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
-      id: "description-" + inputId + "-" + index,
-      addTextAreaToArray: addTextAreaToArray,
-      updatedDescriptions: updatedDatasheets,
+      name: inputName,
+      inputId: inputId,
+      placeholder: inputPlaceholder,
+      mainValue: textValue.value,
+      onChange: onHandleChange,
+      articleId: articleId,
+      updatedDescriptions: updatedDescriptions,
       setUpdatedDescriptions: setUpdatedDescriptions,
-      inputValue: inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(/<br>/gm, "<p><br></p>"),
+      maxChar: maxChar,
       isRequired: isRequired
     })
   });

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

@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n  }\n  &.home-panel {\n    text-align: center;\n    h2 {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-size: 18px;\n      line-height: 21px;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  &.home-card {\n    position: relative;\n    .plan {\n      text-align: center;\n      & + * {\n        margin-top: 40px;\n      }\n    }\n    .arrowimage {\n      position: absolute;\n      top: 50px;\n      left: 40px;\n    }\n    .general-text {\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      text-align: center;\n      letter-spacing: -0.015em;\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .payment-register {\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-continuar {\n      text-align: center;\n      & + * {\n        margin-top: 35px;\n      }\n    }\n    .continue {\n      text-align: center;\n      font-family: ", ";\n      font-size: 14px;\n      line-height: 19px;\n      letter-spacing: -0.015em;\n      text-decoration-line: underline;\n      color: ", ";\n    }\n  }\n  .main-container{\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), function (_ref) {
   var panelColor = _ref.panelColor;
   return panelColor ? panelColor : "linear-gradient(180deg, #E33AA9 0%, #3B1366 100%)";
-}, _variables.FontFamily.AvenirNext, function (_ref2) {
+}, _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, function (_ref2) {
   var panelColor = _ref2.panelColor;
   return panelColor ? _variables.GlobalColors.s4 : "#FBFBFB";
 }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta, _variables.FontFamily.AvenirNext, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);

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

@@ -20,100 +20,161 @@ var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var InputFormatter = function InputFormatter(_ref) {
-  var _ref$inputValue = _ref.inputValue,
-      inputValue = _ref$inputValue === void 0 ? "" : _ref$inputValue,
-      id = _ref.id,
+  var _ref$mainValue = _ref.mainValue,
+      mainValue = _ref$mainValue === void 0 ? "" : _ref$mainValue,
+      inputId = _ref.inputId,
+      articleId = _ref.articleId,
       updatedDescriptions = _ref.updatedDescriptions,
       setUpdatedDescriptions = _ref.setUpdatedDescriptions,
       addTextAreaToArray = _ref.addTextAreaToArray,
-      isRequired = _ref.isRequired;
+      name = _ref.name,
+      isRequired = _ref.isRequired,
+      maxChar = _ref.maxChar;
 
-  var _useState = (0, _react.useState)(inputValue),
+  var _useState = (0, _react.useState)(mainValue),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      convertedText = _useState2[0],
-      setConvertedText = _useState2[1];
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      focus = _useState4[0],
-      setFocus = _useState4[1];
+      selection = _useState4[0],
+      setSelection = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      selection = _useState6[0],
-      setSelection = _useState6[1];
-
-  var _useState7 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
     left: 0,
     top: 0
   }),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      position = _useState8[0],
-      setPosition = _useState8[1];
-
-  var onHandleTextAreaChange = function onHandleTextAreaChange(value) {
-    setConvertedText(function (current) {
-      return current = value;
-    });
-    !id.includes("commentary") && addTextAreaToArray(value.trim().replace(/<\/?p>/gm, ""), updatedDescriptions, setUpdatedDescriptions);
+      charsCounter = _useState8[0],
+      setCharsCounter = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      quillState = _useState10[0],
+      setQuillState = _useState10[1];
+
+  var maxLength = maxChar ? maxChar : 999;
+
+  var getValue = function getValue(value) {
+    var temp = value.replace(/\n/gm, "<br>");
+    return temp;
+  }; //const quillRef = useRef();
+
+
+  var setQuill = function setQuill(ref) {
+    if (!ref || ref === null) return;
+    if (typeof ref.getEditor !== "function") return;
+    setQuillState(ref.getEditor());
+  };
+
+  var valueFormater = function valueFormater(value) {
+    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "");
   };
 
-  function getSelectionText() {
-    setPosition({
-      left: 0,
-      top: 0
-    });
-    var text = "";
-
-    if (window.getSelection) {
-      text = window.getSelection().toString();
-    } else if (document.selection && document.selection.type != "Control") {
-      text = document.selection.createRange().text;
+  var _onChange = function onChange(valueInput, delta, user, h) {
+    var value = "";
+
+    if (h.getLength() - 1 <= maxLength) {
+      setInputValue(function (val) {
+        return val = valueInput.replace(/<\/?span.*?>/gm, "");
+      });
+      value = valueInput;
+    } else {
+      quillState.deleteText(maxLength, quillState.getLength());
+      setInputValue(function (val) {
+        return val = quillState.getText();
+      });
+      value = quillState.getText();
     }
 
-    setSelection(text.length > 0);
-  }
+    setCharsCounter(h.getLength() - 1);
+    value = valueFormater(value);
+    var idInput = inputId;
+    var dataSave = updatedDescriptions.slice();
+
+    if (dataSave.length > 0) {
+      if (dataSave.filter(function (e) {
+        return e.attributeId === idInput;
+      }).length > 0) {
+        dataSave.forEach(function (e) {
+          if (e.attributeId === idInput) {
+            e.value = value;
+          }
+        });
+      } else {
+        dataSave.push({
+          articleId: articleId,
+          attributeId: idInput,
+          value: value
+        });
+      }
+    } else {
+      dataSave.push({
+        articleId: articleId,
+        attributeId: idInput,
+        value: value
+      });
+    }
 
-  var getCursorPosition = function getCursorPosition(e) {
-    var input = document.getElementById(id);
-    var elementPosition = input.getBoundingClientRect();
-    position.top === 0 && position.left === 0 && setPosition({
-      left: e.clientX - elementPosition.x,
-      top: e.clientY - elementPosition.y
-    });
+    setUpdatedDescriptions(dataSave);
   };
 
-  console.log(convertedText);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    focus: focus,
+  var getSelection = function getSelection(range, a, b) {
+    //getBounds(index,length)
+    var selected = b.getSelection();
+    var bounds = b.getBounds((selected === null || selected === void 0 ? void 0 : selected.index) || 0, (selected === null || selected === void 0 ? void 0 : selected.length) || 0);
+
+    if (a === "user") {
+      setPosition({
+        left: bounds.left,
+        top: bounds.top
+      });
+      setSelection((selected === null || selected === void 0 ? void 0 : selected.length) > 0);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    isRequired: isRequired && (inputValue.replace(/<.*?>/gm, "").length === 0 || !inputValue),
     selection: selection,
     position: position,
-    isRequired: isRequired && convertedText.replace(/<\/?p>/gm, "") === "<br>",
-    onClick: function onClick(e) {
-      getCursorPosition(e);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
-      id: id,
-      value: convertedText,
-      onChange: onHandleTextAreaChange,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+      id: inputId + "",
+      ref: function ref(el) {
+        return setQuill(el);
+      },
+      value: getValue(inputValue) //disabled={!props.enableInputs}
+      ,
       modules: {
         toolbar: ["bold"]
       },
-      onFocus: function onFocus() {
-        return setFocus(true);
+      onKeyPress: function onKeyPress(e) {
+        if (charsCounter >= maxLength && e.key !== "Backspace") {
+          e.preventDefault();
+        }
       },
-      onBlur: function onBlur() {
-        setFocus(false);
-        setSelection(false);
-        setPosition({
-          left: 0,
-          top: 0
-        });
+      onKeyDown: function onKeyDown(e) {
+        var keysArray = ["Backspace", "Meta", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+
+        if (charsCounter >= maxLength && keysArray.every(function (key) {
+          return e.key !== key;
+        })) {
+          e.preventDefault();
+        }
       },
-      onChangeSelection: function onChangeSelection() {
-        return getSelectionText();
-      }
-    })
+      onChange: function onChange(valueInput, user, range, h) {
+        _onChange(valueInput, user, range, h);
+      },
+      onChangeSelection: getSelection
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "description-limit",
+      children: [charsCounter, "/", maxLength]
+    })]
   });
 };
 

package/dist/components/atoms/InputFormatter/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  .quill {\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    border: 1px solid\n      ", ";\n    position: relative;\n    border-radius: 2px;\n\n    .ql-toolbar {\n      background-color: ", ";\n      position: absolute;\n      z-index: 10;\n      border: 1px solid ", ";\n      width: 45px;\n      height: 45px;\n      border-radius: 4px;\n      visibility: ", ";\n      top: ", "px;\n      left: ", "px;\n    }\n\n    .ql-container {\n      border: none;\n      font-family: ", ";\n      color: ", ";\n      strong {\n        font-family: ", ";\n      }\n    }\n  }\n  .description-limit {\n    font-size: 12px;\n    font-family: ", ";\n    color: ", ";\n    text-align: right;\n  }\n"])), function (_ref) {
   var focus = _ref.focus,
       isRequired = _ref.isRequired;
   return focus ? _variables.GlobalColors.magenta_s2 : isRequired ? "red" : _variables.GlobalColors.s3;
@@ -28,6 +28,6 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 }, function (_ref4) {
   var position = _ref4.position;
   return position.left;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_900);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_900, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
 
 exports.Container = Container;

package/dist/components/atoms/ProgressBar/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  background-color: ", ";\n  width: fit-content;\n  height: 27px;\n  padding: 4px;\n  border-radius: 15px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 19px;\n  color: ", ";\n\n  &.status-As,\n  &.status-P {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  width: fit-content;\n  height: 27px;\n  padding: 4px;\n  border-radius: 15px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 19px;\n  color: ", ";\n\n  &.status-As,\n  &.status-P {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
   return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
 }, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
 

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

@@ -22,14 +22,16 @@ function Select(props) {
         disabled: true,
         children: props.placeholder
       }), props.options && props.options.map(function (item, i) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("option", {
+          className: item.required ? "option-required" : "" //className={ ? "option-required" : ""}
+          ,
           value: item.value ? item.value : item // selected={
           //   item.value
           //     ? item.value == props.valueSelected && "selected"
           //     : item === props.valueSelected && "selected"
           // }
           ,
-          children: item.name ? item.name : item
+          children: [item.name ? item.name : item, " ", item !== null && item !== void 0 && item.required ? "*" : ""]
         }, "select-" + item.value ? item.value : item + "-" + i);
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.BackgroundEnd, {})]

package/dist/components/atoms/Select/style.js

@@ -24,7 +24,7 @@ var BackgroundEnd = _styledComponents.default.div(_templateObject2 || (_template
 
 exports.BackgroundEnd = BackgroundEnd;
 
-var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  &:option {\n    background-color: blue;\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n"])), function (_ref2) {
+var SelectCustom = _styledComponents.default.select(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fafafa;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  outline: 0;\n  box-shadow: none;\n  border: 0 !important;\n  background-image: none;\n  width: ", ";\n  cursor: pointer;\n  height: 21px;\n  font-family: Avenir Next;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 21px;\n  padding: 0 5px;\n  box-sizing: border-box;\n  &::-ms-expand {\n    display: none;\n  }\n  option {\n    background-color: blue;\n    &:disabled {\n      color: #d4d1d7;\n    }\n    &:invalid {\n      color: gray;\n    }\n  }\n"])), function (_ref2) {
   var width = _ref2.width;
   return width || "100%";
 });

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-IN_PROGRESS,\n  &.status-QF {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  padding: 0 10px;\n  height: 20px;\n  background-color: ", ";\n  border-radius: 3px;\n\n  p {\n    text-align: center;\n    color: ", ";\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 20px;\n  }\n\n  &.status-As,\n  &.status-P,\n  &.status-IN_PROGRESS,\n  &.status-QF {\n    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-AC,\n  &.status-AF {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RF,\n  &.status-RP,\n  &.status-RC {\n    background-color: ", ";\n  }\n\n  &.status-Dat,\n  &.status-Dsc,\n  &.status-Imgs {\n    background-color: ", ";\n  }\n\n  &.status-Ex {\n    background-color: ", ";\n  }\n\n  &.status-DDI {\n    background-color: ", ";\n  }\n\n  &.status-GLD {\n    background-color: ", ";\n  }\n\n  &.status-TAB {\n    background-color: ", ";\n  }\n\n  &.status-Pt {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.oval-form {\n    border-radius: 10px;\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
 
 exports.Container = Container;

package/dist/components/molecules/CarouselImagesLogin/CarouselImagesLogin.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CarouselImagesLoginDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/CarouselImagesLogin",
+  component: _index.CarouselImagesLogin
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CarouselImagesLogin, (0, _objectSpread2.default)({}, args));
+};
+
+var CarouselImagesLoginDefault = Template.bind({});
+exports.CarouselImagesLoginDefault = CarouselImagesLoginDefault;
+CarouselImagesLoginDefault.args = {
+  panelImg: [_loginImage.default, _login.default, _login2.default],
+  panelText: "Elige la plataforma que conecta proovedores y retailers"
+};