contentoh-components-library 21.5.36 → 21.5.37

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

@@ -17,6 +17,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0eef2;\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 26px;\n  padding: 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 14px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 18px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 24px;\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f0eef2;\n  border-radius: 3px;\n  display: flex;\n  width: fit-content;\n  height: 26px;\n  padding: 5px;\n  align-items: center;\n\n  .feature-name {\n    font-size: 14px;\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 18px;\n    color: ", ";\n\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .feature-value {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 400;\n    font-size: 12px;\n    line-height: 16px;\n    height: 12px;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &:last-of-type {\n    p {\n      font-size: 24px;\n    }\n  }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.original_magenta, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray);
 
 exports.Container = Container;

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

@@ -47,8 +47,8 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #e33aa9;\n  border: none;\n  border-radius: 30px;\n  color: #fff;\n  font-family: ", ";\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  line-height: 22px;\n  padding: 10px 25px;\n  cursor: pointer;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &.general-purple-button {\n    background-color: #603888;\n  }\n\n  &.general-transparent-button {\n    background-color: transparent;\n    border: 1px solid #503d66;\n    color: #503d66;\n  }\n  &.general-white-button {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.general-green-button {\n    background-color: #71de56;\n  }\n\n  &.circular-button {\n    width: 25px;\n    height: 25px;\n    padding: 0;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n\n    &.accept-button {\n      background-image: url(", ");\n    }\n\n    &.reject-button {\n      background-image: url(", ");\n    }\n\n    &.null-button {\n      background-image: url(", ");\n    }\n\n    &.save-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.delete-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        background-image: url(", ");\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.download-button {\n      background-image: url(", ");\n      border: 1px solid ", ";\n      border-radius: 15px;\n      background-size: 15px;\n\n      &:hover {\n        color: white;\n        background-color: ", ";\n        border: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      opacity: 0.5;\n    }\n\n    img {\n      width: 100%;\n    }\n\n    &.version-button {\n      color: ", ";\n      border: 1px solid ", ";\n      border-radius: 15px;\n      font-size: 12px;\n      line-height: 25px;\n      text-align: center;\n      filter: brightness(.35);\n    }\n  }\n\n  &.general-arrow-button {\n    background-image: url(", ");\n    width: 27px;\n    height: 27px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n  }\n\n  &.close-button {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-buttonv2 {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.close-button-white {\n    width: 52px;\n    height: 52px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url(", ");\n  }\n\n  &.open-modal-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    position: absolute;\n    right: 10px;\n    bottom: 10px;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    background-position: center;\n    width: 21px;\n    height: 21px;\n    padding: 0;\n    border-radius: 0;\n    background-image: url(", ");\n  }\n\n  &.grid-layout,\n  &.row-layout {\n    background-color: transparent;\n    background-repeat: no-repeat;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n  }\n\n  &.grid-layout {\n    background-image: url(", ");\n  }\n\n  &.row-layout {\n    background-image: url(", ");\n  }\n\n  &.general-button-disabled {\n    background-color: grey;\n    color: ", ";\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n  &.general-button-rec {\n    background:#85BC5B;\n    color: ", ";\n    padding: 4px 5px;\n    border-radius: 3px;\n    font-size: 10px;\n    height: 20px;\n    line-height: 12px;\n    text-align: center;\n  }\n\n  &.general-button-sol {\n    background-color: #e33aa9;\n    border: none;\n    border-radius: 50px;\n    color: ", ";\n    height: 34px;\n    font-family: Avenir Next;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 14px;\n    padding: 10px 15px;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.buttonFont;
-}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.s3, _saveIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s3, _variables.GlobalColors.s3, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
+}, _variables.GlobalColors.s1, _variables.GlobalColors.original_purpura, _acceptIcon.default, _rejectIcon.default, _nullIcon.default, _saveIcon.default, _variables.GlobalColors.color_gray, _saveIconHover.default, _variables.GlobalColors.color_pink, _variables.GlobalColors.color_pink, _deleteIcon.default, _variables.GlobalColors.s3, _deleteIconHover.default, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _downloadIcon.default, _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.color_purple, _variables.GlobalColors.color_purple, _arrowIcon.default, _closeIcon.default, _closeIconv.default, _closeIconWhite.default, _openModal.default, _rowLayout.default, _gridLayout.default, _variables.GlobalColors.white, _variables.GlobalColors.white, _variables.GlobalColors.white);
 
 exports.Container = Container;

package/dist/components/atoms/MetricCard/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  padding: 10px 20px;\n  border: 1px solid ", ";\n  width: fit-content;\n  text-align: center;\n  border-radius: 10px;\n\n  p {\n    color: #000;\n    font-size: 25px;\n    font-family: ", ";\n    font-size: 25px;\n    font-feature-settings: \"pnum\", \"lnum\";\n\n    &:first-of-type {\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 13px;\n    }\n\n    & + * {\n      margin-top: 3px;\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s3, _variables.FontFamily.Raleway);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px 20px;\n  border: 1px solid ", ";\n  width: fit-content;\n  text-align: center;\n  border-radius: 10px;\n\n\n  p {\n    color: ", ";\n    font-size: 25px;\n    font-family: ", ";\n    font-size: 25px;\n    font-feature-settings: \"pnum\", \"lnum\";\n\n    &:first-of-type {\n      color: ", ";\n      font-family: ", ";\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 13px;\n    }\n\n    & + * {\n      margin-top: 3px;\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Raleway_600, _variables.GlobalColors.color_purple, _variables.FontFamily.Raleway);
 
 exports.Container = Container;

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

@@ -34,5 +34,5 @@ exports.ScreenHeader = ScreenHeader;
 ScreenHeader.defaultProps = {
   text: "Header Text Default",
   fontFamily: "Raleway",
-  color: _variables.GlobalColors.s5
+  color: _variables.GlobalColors.color_gray
 };

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    margin: auto 0;\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  & + * {\n    margin-left: 10px;\n  }\n  img {\n    margin: auto 0;\n    &.small-image {\n      width: 20px;\n      height: 20px;\n    }\n    &.medium-image {\n      width: 30px;\n      height: 30px;\n      filter: brightness(.35);\n    }\n    &.big-image {\n      width: 40px;\n      height: 40px;\n    }\n  }\n"])));
 
 exports.Container = Container;
 

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

@@ -15,11 +15,11 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\n  min-width: 150px;\n\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: ", ";\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: ", ";\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\n\n    & > p {\n      max-width: 140px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n      margin-left: 10px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .select-container {\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    .search-bar-filter {\n      display: flex;\n      align-items: center;\n      border: 1px solid #f0f0f0;\n      padding-left: 10px;\n\n      img {\n        width: 15px;\n        height: 15px;\n      }\n\n      input {\n        background-color: transparent;\n        padding: 10px 10px;\n        outline: none;\n        border: none;\n      }\n    }\n    .default-option {\n      padding-top: 5px;\n      cursor: pointer;\n      padding: 5px 10px;\n      color: #817393;\n      font-family: Avenir Next;\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      &:hover {\n        background-color: #f0f0f0;\n      }\n    }\n    .filters-container {\n      overflow: auto;\n      max-height: 500px;\n      .option-container,\n      .default-option {\n        cursor: pointer;\n        padding: 5px 10px;\n        .main-item {\n          display: flex;\n          justify-content: space-between;\n\n          .arrow-item {\n            transform: rotate(-90deg);\n            cursor: pointer;\n            font-size: 10px;\n          }\n        }\n        .sub-menu {\n          margin-top: 10px;\n          padding-left: 20px;\n          .sub-filter {\n            & + * {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n        label {\n          white-space: nowrap;\n        }\n      }\n\n      .dates-select-item {\n        cursor: pointer;\n        padding: 5px 10px;\n        color: #817393;\n        font-family: Avenir Next;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 21px;\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])), _variables.FontFamily.Raleway, function (props) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  position: relative;\n  min-width: 150px;\n\n  .button-list {\n    font-family: ", ";\n    font-size: 13px;\n    display: flex;\n    padding: ", ";\n    justify-content: space-between;\n    border-radius: 50px;\n    background-color: ", ";\n    border: 1px solid #f0f0f0;\n    cursor: pointer;\n\n    & > p {\n      max-width: 140px;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    .arrow-item {\n      transform: rotate(-90deg);\n      cursor: pointer;\n      font-size: 10px;\n      margin-left: 10px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .select-container {\n    box-shadow: 0px 2px 4px #00000040;\n    border-radius: 5px;\n    background-color: #fff;\n    padding-bottom: 10px;\n    position: absolute;\n    z-index: 10;\n    .search-bar-filter {\n      display: flex;\n      align-items: center;\n      border: 1px solid #f0f0f0;\n      padding-left: 10px;\n\n      img {\n        width: 15px;\n        height: 15px;\n      }\n\n      input {\n        background-color: transparent;\n        padding: 10px 10px;\n        outline: none;\n        border: none;\n      }\n    }\n    .default-option {\n      padding-top: 5px;\n      cursor: pointer;\n      padding: 5px 10px;\n      color: #817393;\n      font-family: Avenir Next;\n      font-weight: 500;\n      font-size: 13px;\n      line-height: 21px;\n      &:hover {\n        background-color: #f0f0f0;\n      }\n    }\n    .filters-container {\n      overflow: auto;\n      max-height: 500px;\n      .option-container,\n      .default-option {\n        cursor: pointer;\n        padding: 5px 10px;\n        .main-item {\n          display: flex;\n          justify-content: space-between;\n\n          .arrow-item {\n            transform: rotate(-90deg);\n            cursor: pointer;\n            font-size: 10px;\n          }\n        }\n        .sub-menu {\n          margin-top: 10px;\n          padding-left: 20px;\n          .sub-filter {\n            & + * {\n              margin-top: 10px;\n            }\n          }\n        }\n\n        &:hover {\n          background-color: #f0f0f0;\n        }\n        label {\n          white-space: nowrap;\n        }\n      }\n\n      .dates-select-item {\n        cursor: pointer;\n        padding: 5px 10px;\n        color: ", ";\n        font-family: Avenir Next;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 21px;\n        &:hover {\n          background-color: #f0f0f0;\n        }\n      }\n    }\n  }\n"])), _variables.FontFamily.Raleway, function (props) {
   return props.selectLabel !== "" ? "10px 15px" : "5px 5px";
 }, function (_ref) {
   var filterActive = _ref.filterActive;
   return filterActive ? "#F7F7FC" : "#fff";
-});
+}, _variables.GlobalColors.color_purple);
 
 exports.Container = Container;

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

@@ -37,6 +37,8 @@ var _slide3 = _interopRequireDefault(require("../../../assets/images/sliderToolT
 
 var _FinancedCompanies = require("./FinancedCompanies");
 
+var _variables = require("../../../global-files/variables");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
@@ -161,7 +163,7 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       text: "Asig.",
-      color: "#969696",
+      color: _variables.GlobalColors.color_gray,
       fontFamily: "Avenir Next",
       headerType: "input-name-header"
     }), showAsignationPanel && canAssign && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/molecules/StripeCardForm/paymentForm.js

@@ -155,7 +155,7 @@ var PaymentForm = function PaymentForm(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "element card-name",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: "Nombre en la tarjeta"
+          children: "Nombre en la tarjeta:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
           className: "card-input",
           value: cardName,
@@ -164,7 +164,7 @@ var PaymentForm = function PaymentForm(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "element card-number",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: "No. de tarjeta"
+          children: "No. de tarjeta:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardNumberElement, {
           className: "card-input",
           onChange: function onChange(e) {
@@ -174,7 +174,7 @@ var PaymentForm = function PaymentForm(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "element expiration-date",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: "Fecha de expiraci\xF3n"
+          children: "Fecha de expiraci\xF3n:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardExpiryElement, {
           className: "card-input",
           onChange: function onChange(e) {
@@ -184,7 +184,7 @@ var PaymentForm = function PaymentForm(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "element cvc-code ",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          children: "CVC"
+          children: "CVC:"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactStripeJs.CardCvcElement, {
           className: "card-input",
           onChange: function onChange(e) {

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

@@ -19,7 +19,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 exports.Container = Container;
 
-var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px;\n  border: 1px solid #f0f0f0;\n  border-radius: 10px;\n\n  h2 {\n    font-size: 15px;\n    line-height: 20px;\n    color: #262626;\n    font-family: ", ";\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .card-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    .element {\n      display: flex;\n      align-items: center;\n\n      label {\n        color: #808080;\n        font-family: ", ";\n        font-size: 12px;\n        display: flex;\n\n        & + * {\n          margin-left: 6px;\n        }\n      }\n\n      .card-input {\n        border: 1px solid #f0f0f0 !important;\n        border-radius: 5px;\n        padding: 3px;\n        font-family: ", ";\n        font-size: 12px;\n        flex: 1;\n        background-color: #fff;\n      }\n\n      &.card-name {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 6px;\n        }\n      }\n\n      &.card-number {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 43px;\n        }\n      }\n\n      &.expiration-date,\n      &.cvc-code {\n        flex: 1 1 49%;\n        label + * {\n          margin-left: 9px;\n        }\n      }\n    }\n  }\n  position: relative;\n  ", "\n  img {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
+var PaymentFormContainer = _styledComponents.default.form(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px;\n  border: 1px solid #f0f0f0;\n  border-radius: 10px;\n\n  h2 {\n    font-size: 15px;\n    line-height: 20px;\n    color: #262626;\n    font-family: ", ";\n\n    & + * {\n      margin-top: 10px;\n    }\n  }\n\n  .card-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    .element {\n      display: flex;\n      align-items: center;\n\n      label {\n        color: ", ";\n        font-family: ", ";\n        font-size: 12px;\n        display: flex;\n\n        & + * {\n          margin-left: 6px;\n        }\n      }\n\n      .card-input {\n        border: 1px solid #f0f0f0 !important;\n        border-radius: 5px;\n        padding: 3px;\n        font-family: ", ";\n        font-size: 12px;\n        flex: 1;\n        background-color: #fff;\n      }\n\n      &.card-name {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 6px;\n        }\n      }\n\n      &.card-number {\n        flex: 1 0 100%;\n        label + * {\n          margin-left: 43px;\n        }\n      }\n\n      &.expiration-date,\n      &.cvc-code {\n        flex: 1 1 49%;\n        label + * {\n          margin-left: 9px;\n        }\n      }\n    }\n  }\n  position: relative;\n  ", "\n  img {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.GlobalColors.color_gray, _variables.FontFamily.Lato, _variables.FontFamily.Lato, function (_ref) {
   var isSelected = _ref.isSelected;
   return isSelected && "border-color: #8A6CAA;\n  background: #F7F7FC;";
 });

package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -31,48 +31,43 @@ ProviderProductEditionDefault.args = {
     "Ficha técnica": true,
     Imágenes: false
   },
-  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjNTA5YzI2ZS05OTZkLTQyMWMtOWY2ZS0wOTdhMWI0NjE3YjMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImM1MDljMjZlLTk5NmQtNDIxYy05ZjZlLTA5N2ExYjQ2MTdiMyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIzN2E3OWZhMS1iMjJmLTRiNDUtODlhZC0wNTkwMDE4ZjlmYWMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc0NjcxOTU3MiwibmFtZSI6IlByb3ZlZWRvciBOb3JtYWwiLCJwaG9uZV9udW1iZXIiOiIrNTI4NDQ3MzgzMyIsImV4cCI6MTc0NjcyMzE3MiwiaWF0IjoxNzQ2NzE5NTcyLCJlbWFpbCI6ImZ1bGFuaXRvaHByb3ZlZWRvckBhbGxmcmVlbWFpbC5uZXQifQ.WxDwiEQuEB2TNY8l3fE-P3lOabmZSWSXOCN7wDM9N47mbmsNy5Y9fBsKqydlzK7AVeZoWKaVJO55NckiQsr46SqlAEpD2Jcru98CGIpCaQUYCbr6qcqb90-UOPlCArvLdVXnKxBEnMrZLmz42Qfoqar_d7z2GNGXaWPruR2wBHthGMMGVF1rYnoKxszW1ZHKxgYVW0JuheiAD-sfTYCH6iH9MSJoB_LefbZ1pOd71oNOLw0TgbyUjJkhm0WRXGmXi2WUDBheAd7vgq86SNMXQvM6jtK1xpE2JWMfp5Fg0ciaslj6T4kBe6C-OL6P97LzwnOaz_Z6yKWGi-Hqq0zY7Q",
-  articleId: 121611,
-  category: 225,
+  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwYmJjMWJjYi0yODJkLTRjYzYtYjcwZS0wNWNhY2JiYjU1NjMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBiYmMxYmNiLTI4MmQtNGNjNi1iNzBlLTA1Y2FjYmJiNTU2MyIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJmMTdlYTVlOS0wZmE2LTQ1YmUtYjE5MS1iNTViZjgxYWRiNzkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxOTUwNDg0OSwibmFtZSI6IlByb3ZlZWRvciBSYWRpb3NoYWNrIiwicGhvbmVfbnVtYmVyIjoiKzUyMTIzNDU2Nzg5NzgiLCJleHAiOjE3MTk1MDg0NDksImlhdCI6MTcxOTUwNDg0OSwiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrQGFsbGZyZWVtYWlsLm5ldCJ9.M0Pm70YhdG1JARzamruJKSzJPjGl_tXAYCwQHGiIRYLHo4X05B95VgCLXVvetadrH7dsp6PviJ3MuF2JPzBVXMAP_N26zSeJFIx1ywqVp-nehwE3TUiF8L0P_MTLCBJzHcHf41HzTDHr546nBBgF64W3bZNd_J-jSFW3xZxgu6dq_RZ5fywVlzs6sZgDAenOtzcB9-Ig97mpdTil8ag8wgbf2LlcypaWGsEESbHhus-_hx58tosjwQ_a0rvsz47X9HI9YMe6rD0xFR9cQCub6WG7d65fMyqaCl-X4DsFE1a4z2AnWcmgXmAdwZTqCjvo8TPKJjxMBvptlShL753UaQ",
+  articleId: 128483,
+  category: "1139",
   version: 1,
   productSelected: {
-    id_article: 121611,
-    upc: "094",
-    sku: "093",
-    name: "Carga M 3",
-    timestamp: "2025-05-07T23:18:02.000Z",
-    categoryName: "Electrodomésticos y Línea Blanca|Electrodomésticos|Accesorios Electrodomésticos",
-    id_category: 225,
+    id_article: 128483,
+    upc: "1010101010122",
+    name: "Prueba 26-jun-24",
+    timestamp: "2024-06-26T17:06:17.000Z",
+    categoryName: "Audio|Audífonos|In Ear",
+    id_category: 1139,
     version: 1,
+    reviewState: "rejected_to_provider",
     retailersAvailable: [{
-      name: "Amazon",
-      id: 9
-    }, {
-      name: "Rappi",
-      id: 16
+      name: "Radioshack",
+      id: 74
     }],
-    percentage: 5.21
+    percentage: 100
   },
   productToEdit: {
-    idCategory: 225,
-    ArticleId: 121611,
+    idCategory: 1139,
+    ArticleId: 128483,
     product: [{
-      id_article: 121611,
-      upc: "094",
-      sku: "093",
-      name: "Carga M 3",
-      timestamp: "2025-05-07T23:18:02.000Z",
-      categoryName: "Electrodomésticos y Línea Blanca|Electrodomésticos|Accesorios Electrodomésticos",
-      id_category: 225,
+      id_article: 128483,
+      upc: "1010101010122",
+      name: "Prueba 26-jun-24",
+      timestamp: "2024-06-26T17:06:17.000Z",
+      categoryName: "Audio|Audífonos|In Ear",
+      id_category: 1139,
       version: 1,
+      reviewState: "rejected_to_provider",
       retailersAvailable: [{
-        name: "Amazon",
-        id: 9
-      }, {
-        name: "Rappi",
-        id: 16
+        name: "Radioshack",
+        id: 74,
+        percentage: 100
       }],
-      percentage: 5.21
+      percentage: 100
     }]
   },
   location: {
@@ -87,56 +82,63 @@ ProviderProductEditionDefault.args = {
     key: "24vwut"
   },
   user: {
-    id_user: 410,
+    id_user: 2130,
     name: "Proveedor",
-    last_name: "Normal",
-    email: "fulanitohproveedor@allfreemail.net",
-    position: "CEO",
-    telephone: "+5284473833",
+    last_name: "Radioshack",
+    email: "proveedorradioshack@allfreemail.net",
+    position: "Onboarding",
+    telephone: "+5212345678978",
     country: "México",
-    id_company: 1015,
-    id_role: null,
+    id_company: 1169,
+    id_cognito: "0bbc1bcb-282d-4cc6-b70e-05cacbbb5563",
+    birth_Date: null,
     about_me: null,
+    zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
+    id_role: 0,
     active: 1,
-    email_notify: 1,
-    id_cognito: "c509c26e-996d-421c-9f6e-097a1b4617b3",
-    birth_Date: null,
-    zip_code: null,
     is_retailer: 0,
-    is_onboarding: 0,
+    email_notify: 1,
     is_user_tech: null,
-    profile_picture_ext: null,
+    is_onboarding: 0,
     membership: {
-      id: 199,
-      start_date: "2025-03-31T17:04:43.000Z",
-      end_date: "2026-03-31T17:04:43.000Z",
-      planID: 5,
-      plan: "prod_Ktl6B5Ou2gqTB2",
+      id: 1649,
+      start_date: "2023-11-09T19:57:43.000Z",
+      end_date: "2024-11-09T19:57:43.000Z",
+      planID: 8,
+      plan: "prod_KvGeJs0E9cSO4y",
       name: "Plan Pro",
-      user_limit: "5",
-      products_limit: "500",
-      type: "PyMES"
+      user_limit: "50",
+      products_limit: "5000",
+      type: "Enterprise"
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-410/410.png?1746719575081"
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-2130/2130.png?1719504850190"
   },
   company: {
-    id_company: 1015,
-    trade_name: "Prueba proveedor normal",
-    company_name: "72uheudehf",
-    rfc: "nefeo",
-    adress: "iwhdede",
+    id_company: 1169,
+    trade_name: "Radioshack Onboarding",
+    company_name: "Onboarding",
+    rfc: "ASDASD",
+    adress: "CDMX",
     about_company: null,
     telephone: null,
     web_site: null,
     zip_code: null,
     email: null,
     social_link: null,
-    is_retailer: 0,
-    financedRetailers: [],
-    retailers: []
+    is_retailer: 1,
+    financedRetailers: [{
+      id: 74,
+      name: "Radioshack",
+      country: "México"
+    }],
+    retailers: [{
+      id: 74,
+      name: "Radioshack",
+      country: "México"
+    }]
   },
   showSurvey: function showSurvey(v) {
     return v && alert("se muestra");

package/dist/components/pages/ProviderProductEdition/styles.js

@@ -18,6 +18,6 @@ var _templateObject;
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray);
 
 exports.Container = Container;

package/dist/global-files/variables.js

@@ -1,33 +1,47 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlobalStatus = exports.GlobalColors = exports.FontFamily = void 0;
-var GlobalColors = {
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _GlobalColors;
+
+var GlobalColors = (_GlobalColors = {
   s1: "#FAFAFA",
   s2: "#F0EEF2",
   s3: "#D4D1D7",
   s4: "#817393",
   s5: "#503D66",
-  original_magenta: "#B12D84",
-  secondary_magenta: "#BA0070",
+  // COLORES DE ESTATUS
   rejected_status: "#D74DED",
-  magenta_s2: "#E33AA9",
-  original_purpura: "#603888",
   in_progress: "#ED9A4D",
-  deep_gray: "#281F33",
   reception: "#E57432",
   finished: "#18A0FB",
   exported: "#71DE56",
-  white: "#FFFFFF",
-  gray_light: "#F0F0F0",
+  // ESCALA DE GRISES
+  black: "#262626",
   gray: "#707070",
-  blue_light: "#F7F7FC",
-  purple: "#8A6CAA",
+  deep_gray: "#281F33",
   gray_medium: "#CBCBCB",
-  black: "#262626"
-};
+  gray_light: "#F0F0F0",
+  white: "#FFFFFF",
+  // COLORES
+  color_purple: "#503D65",
+  original_purpura: "#603888",
+  purple: "#8A6CAA",
+  original_magenta: "#B12D84",
+  secondary_magenta: "#BA0070",
+  magenta_s2: "#E33AA9",
+  blue_light: "#F7F7FC",
+  color_black: "#000",
+  color_gray: "#333",
+  color_gray_medium: "#808080"
+}, (0, _defineProperty2.default)(_GlobalColors, "color_purple", "#503D65"), (0, _defineProperty2.default)(_GlobalColors, "color_pink", "#e33aa9"), (0, _defineProperty2.default)(_GlobalColors, "rgb_color_pink", "227, 58, 169"), _GlobalColors);
 exports.GlobalColors = GlobalColors;
 var FontFamily = {
   AvenirNext: "Avenir Next",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.36",
+  "version": "21.5.37",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/FeatureTag/styles.js

@@ -32,7 +32,7 @@ export const Container = styled.div`
     line-height: 16px;
     height: 12px;
     letter-spacing: -0.015em;
-    color: ${GlobalColors.s4};
+    color: ${GlobalColors.color_gray};
   }
 
   &:last-of-type {

package/src/components/atoms/GeneralButton/styles.js

@@ -74,13 +74,13 @@ export const Container = styled.button`
 
     &.save-button {
       background-image: url(${saveIcon});
-      border: 1px solid ${GlobalColors.s3};
+      border: 1px solid ${GlobalColors.color_gray};
       border-radius: 15px;
 
       &:hover {
         background-image: url(${saveIconHover});
-        background-color: ${GlobalColors.magenta_s2};
-        border: 1px solid ${GlobalColors.magenta_s2};
+        background-color: ${GlobalColors.color_pink};
+        border: 1px solid ${GlobalColors.color_pink};
       }
     }
 
@@ -119,12 +119,13 @@ export const Container = styled.button`
     }
 
     &.version-button {
-      color: ${GlobalColors.s3};
-      border: 1px solid ${GlobalColors.s3};
+      color: ${GlobalColors.color_purple};
+      border: 1px solid ${GlobalColors.color_purple};
       border-radius: 15px;
       font-size: 12px;
       line-height: 25px;
       text-align: center;
+      filter: brightness(.35);
     }
   }
 

package/src/components/atoms/MetricCard/styles.js

@@ -8,15 +8,16 @@ export const Container = styled.div`
   text-align: center;
   border-radius: 10px;
 
+
   p {
-    color: #000;
+    color: ${GlobalColors.color_purple};
     font-size: 25px;
     font-family: ${FontFamily.Raleway_600};
     font-size: 25px;
     font-feature-settings: "pnum", "lnum";
 
     &:first-of-type {
-      color: ${GlobalColors.s3};
+      color: ${GlobalColors.color_purple};
       font-family: ${FontFamily.Raleway};
       font-weight: 500;
       font-size: 13px;

package/src/components/atoms/ScreenHeader/index.js

@@ -25,5 +25,5 @@ export const ScreenHeader = ({
 ScreenHeader.defaultProps = {
   text: "Header Text Default",
   fontFamily: "Raleway",
-  color: GlobalColors.s5,
+  color: GlobalColors.color_gray,
 };

package/src/components/atoms/SliderToolTip/styles.js

@@ -20,6 +20,7 @@ export const Container = styled.div`
     &.medium-image {
       width: 30px;
       height: 30px;
+      filter: brightness(.35);
     }
     &.big-image {
       width: 40px;

package/src/components/molecules/CustomSelect/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   width: fit-content;
@@ -112,7 +112,7 @@ export const Container = styled.div`
       .dates-select-item {
         cursor: pointer;
         padding: 5px 10px;
-        color: #817393;
+        color: ${GlobalColors.color_purple};
         font-family: Avenir Next;
         font-weight: 500;
         font-size: 13px;

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -12,6 +12,7 @@ import Slide1 from "../../../assets/images/sliderToolTip/slide21.svg";
 import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
 import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
 import { FinancedCompanies } from "./FinancedCompanies";
+import { GlobalColors } from "../../../global-files/variables";
 
 export const StatusAsignationInfo = ({
   status = "-",
@@ -138,7 +139,7 @@ export const StatusAsignationInfo = ({
       </div>
       <ScreenHeader
         text={"Asig."}
-        color={"#969696"}
+        color={GlobalColors.color_gray}
         fontFamily={"Avenir Next"}
         headerType={"input-name-header"}
       />

package/src/components/molecules/StripeCardForm/paymentForm.js

@@ -92,7 +92,7 @@ export const PaymentForm = ({
       <h2>{labelForm}</h2>
       <div className="card-fields">
         <div className="element card-name">
-          <label>Nombre en la tarjeta</label>
+          <label>Nombre en la tarjeta:</label>
           <input
             className="card-input"
             value={cardName}
@@ -100,21 +100,21 @@ export const PaymentForm = ({
           />
         </div>
         <div className="element card-number">
-          <label>No. de tarjeta</label>
+          <label>No. de tarjeta:</label>
           <CardNumberElement
             className="card-input"
             onChange={(e) => handleIputChange(e, "number")}
           />
         </div>
         <div className="element expiration-date">
-          <label>Fecha de expiración</label>
+          <label>Fecha de expiración:</label>
           <CardExpiryElement
             className="card-input"
             onChange={(e) => handleIputChange(e, "exp")}
           />
         </div>
         <div className="element cvc-code ">
-          <label>CVC</label>
+          <label>CVC:</label>
           <CardCvcElement
             className="card-input"
             onChange={(e) => handleIputChange(e, "cvc")}

package/src/components/molecules/StripeCardForm/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { FontFamily } from "../../../global-files/variables";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div``;
 
@@ -28,7 +28,7 @@ export const PaymentFormContainer = styled.form`
       align-items: center;
 
       label {
-        color: #808080;
+        color: ${GlobalColors.color_gray};
         font-family: ${FontFamily.Lato};
         font-size: 12px;
         display: flex;

package/src/components/pages/ProviderProductEdition/styles.js

@@ -92,7 +92,7 @@ export const Container = styled.div`
       .required-inputs-message {
         font-family: ${FontFamily.AvenirNext};
         font-size: 13px;
-        color: ${GlobalColors.s4};
+        color: ${GlobalColors.color_gray};
         padding: 10px;
         display: flex;
         align-items: center;

package/src/global-files/variables.js

@@ -1,27 +1,42 @@
 export const GlobalColors = {
+
   s1: "#FAFAFA",
   s2: "#F0EEF2",
   s3: "#D4D1D7",
   s4: "#817393",
   s5: "#503D66",
-  original_magenta: "#B12D84",
-  secondary_magenta: "#BA0070",
+
+  // COLORES DE ESTATUS
   rejected_status: "#D74DED",
-  magenta_s2: "#E33AA9",
-  original_purpura: "#603888",
   in_progress: "#ED9A4D",
-  deep_gray: "#281F33",
   reception: "#E57432",
   finished: "#18A0FB",
   exported: "#71DE56",
-  white: "#FFFFFF",
-  gray_light: "#F0F0F0",
+
+  // ESCALA DE GRISES
+  black:"#262626",
   gray:"#707070",
-  blue_light:"#F7F7FC",
-  purple:"#8A6CAA",
+  deep_gray: "#281F33",
   gray_medium:"#CBCBCB",
-  black:"#262626",
-};
+  gray_light: "#F0F0F0",
+  white: "#FFFFFF",
+
+  // COLORES
+  color_purple: "#503D65",
+  original_purpura: "#603888",
+  purple:"#8A6CAA",
+  original_magenta: "#B12D84",
+  secondary_magenta: "#BA0070",
+  magenta_s2: "#E33AA9",
+  blue_light:"#F7F7FC",
+
+  color_black: "#000",
+  color_gray: "#333",
+  color_gray_medium: "#808080",
+  color_purple: "#503D65",
+  color_pink: "#e33aa9",
+  rgb_color_pink: "227, 58, 169"
+}
 
 export const FontFamily = {
   AvenirNext: "Avenir Next",