contentoh-components-library 21.0.9 → 21.0.13

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

@@ -7,17 +7,12 @@ exports.ProgressBar = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ProgressBar = function ProgressBar(_ref) {
   var percent = _ref.percent,
-      progressBarType = _ref.progressBarType;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: "status-".concat(progressBarType),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-      children: [percent, "%"]
-    })
-  });
+      backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    backgroundColor: backgroundColor
+  }, /*#__PURE__*/React.createElement("p", null, percent, "%"));
 };
 
 exports.ProgressBar = ProgressBar;

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

@@ -15,8 +15,10 @@ 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  &.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);
+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"])), function (props) {
+  return _variables.GlobalColors[props.backgroundColor];
+}, _variables.FontFamily.AvenirNext, function (props) {
+  return props.backgroundColor === "s2" || props.backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
+});
 
 exports.Container = Container;

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

@@ -1,20 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ScreenHeaderDefatult = exports.ScreenHeaderDate = exports.ScreenHeaderAndParagraph = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _ = require(".");
 
 var _variables = require("../../../global-files/variables");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/atoms/ScreenHeader",
   label: "Screen Header",
@@ -43,7 +37,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ScreenHeader, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_.ScreenHeader, args);
 };
 
 var ScreenHeaderDefatult = Template.bind({});

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

@@ -9,8 +9,6 @@ var _variables = require("../../../global-files/variables");
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ScreenHeader = function ScreenHeader(_ref) {
   var text = _ref.text,
       boldText = _ref.boldText,
@@ -18,16 +16,12 @@ var ScreenHeader = function ScreenHeader(_ref) {
       color = _ref.color,
       headerType = _ref.headerType,
       Paragraph = _ref.Paragraph;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     fontFamily: fontFamily,
     color: color,
     className: headerType,
-    children: [text, " ", boldText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      children: [" ", boldText]
-    }), Paragraph && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: Paragraph
-    })]
-  }, "title-".concat(text));
+    key: "title-".concat(text)
+  }, text, " ", boldText && /*#__PURE__*/React.createElement("span", null, " ", boldText), /*#__PURE__*/React.createElement("p", null, Paragraph));
 };
 
 exports.ScreenHeader = ScreenHeader;

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n\n    &:last-child {\n      min-width: 50px;\n      text-align: center;\n    }\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n    min-width: 50px;\n    text-align: center;\n  }\n  &.header-and-paragraph {\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p {\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
+var Container = _styledComponents.default.h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: 36px;\n  line-height: 42px;\n  font-feature-settings: \"pnum\" on, \"lnum\" on;\n  color: ", ";\n\n  &.with-bold-text {\n    span {\n      font-family: ", ";\n    }\n  }\n\n  &.product-name-header {\n    font-size: 24px;\n    line-height: 36px;\n    font-weight: 500;\n    letter-spacing: -0.015em;\n    color: ", ";\n  }\n\n  &.retailer-name-header {\n    font-size: 18px;\n    font-weight: 400;\n    line-height: 19px;\n    color: ", ";\n  }\n\n  &.input-name-header {\n    font-size: 14px;\n    line-height: 19px;\n    font-weight: 400;\n    color: ", ";\n  }\n\n  &.date-header {\n    font-family: ", ";\n    color: ", ";\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  &.table-row-text {\n    font-family: ", ";\n    color: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 18px;\n  }\n\n  &.gray-table-row {\n    font-family: ", ";\n    font-weight: 400;\n    font-size: 11px;\n    line-height: 19px;\n    color: ", ";\n    background-color: ", ";\n    padding: 1px 3px;\n    border-radius: 3px;\n  }\n  &.header-and-paragraph{\n    font-family: ", ";\n    font-size: 36px;\n    color: ", ";\n    p{\n      font-family: ", ";\n      font-size: 14px;\n      color: ", ";\n      letter-spacing: -0.015em;\n    }\n  }\n"])), function (props) {
   return props.fontFamily;
 }, function (props) {
   return props.color;

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

@@ -7,14 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.SideMenuButtonDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _dashboard = _interopRequireDefault(require("../../../assets/images/sideMenuButton/dashboard.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/atoms/SideMenuButton",
   compoment: _index.SideMenuButton
@@ -22,7 +18,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SideMenuButton, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.SideMenuButton, args);
 };
 
 var SideMenuButtonDefault = Template.bind({});

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

@@ -7,20 +7,14 @@ exports.SideMenuButton = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var SideMenuButton = function SideMenuButton(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       label = _ref.label;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: image,
-      alt: altText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: label
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, null, image && /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: altText
+  }), /*#__PURE__*/React.createElement("p", null, label));
 };
 
 exports.SideMenuButton = SideMenuButton;

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

@@ -1,20 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StatusTagDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _variables = require("../../../global-files/variables");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var status = _variables.GlobalStatus;
 var _default = {
   title: "Components/atoms/StatusTag",
@@ -37,7 +31,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusTag, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.StatusTag, args);
 };
 
 var StatusTagDefault = Template.bind({});

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

@@ -7,52 +7,12 @@ exports.StatusTag = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var StatusTag = function StatusTag(_ref) {
   var statusType = _ref.statusType,
       ovalForm = _ref.ovalForm;
-
-  var getShortStatus = function getShortStatus(status) {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-
-      case "RECEPTION":
-        return "Pr";
-
-      case "NULL":
-        return "-";
-
-      case "RECEIVED":
-        return "Rc";
-
-      case "IN_PROGRESS":
-        return "P";
-
-      case "ASSIGNED":
-        return "As";
-
-      case "APPROVED":
-        return "Ap";
-
-      case "VALIDATING":
-        return "V";
-
-      case "PAID_OUT":
-        return "Po";
-
-      default:
-        return status;
-    }
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: getShortStatus(statusType)
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: "status-".concat(statusType, " ").concat(ovalForm && "oval-form")
+  }, /*#__PURE__*/React.createElement("p", null, statusType));
 };
 
 exports.StatusTag = StatusTag;

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  &.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);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 30px;\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    background-color: ", ";\n  }\n\n  &.status-Pr,\n  &.status-Rr {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP {\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.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/atoms/TabSection/TabSection.stories.js

@@ -1,18 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TabSectionDefault = exports.TabSectionActive = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _ = require(".");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/atoms/TabSection",
   label: "Tab Section",
@@ -22,7 +16,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TabSection, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_.TabSection, args);
 };
 
 var TabSectionDefault = Template.bind({});

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

@@ -7,19 +7,14 @@ exports.TabSection = void 0;
 
 var _styles = require("./styles");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var TabSection = function TabSection(_ref) {
   var label = _ref.label,
       active = _ref.active,
       onClick = _ref.onClick;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     className: active && "active",
-    onClick: onClick,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: label
-    })
-  });
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("p", null, label));
 };
 
 exports.TabSection = TabSection;

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

@@ -1,18 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ValidationPanelDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _ = require(".");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/atoms/ValidationPanel",
   component: _.ValidationPanel
@@ -20,7 +14,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ValidationPanel, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_.ValidationPanel, args);
 };
 
 var ValidationPanelDefault = Template.bind({});

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

@@ -15,56 +15,43 @@ var _rejectIcon = _interopRequireDefault(require("../../../assets/images/general
 
 var _nullIcon = _interopRequireDefault(require("../../../assets/images/generalButton/nullIcon.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ValidationPanel = function ValidationPanel(_ref) {
   var id = _ref.id,
       setOptionClicked = _ref.setOptionClicked,
-      setShowValidationPanel = _ref.setShowValidationPanel,
-      sendToFacilitator = _ref.sendToFacilitator;
+      setShowValidationPanel = _ref.setShowValidationPanel;
 
   var optionSelected = function optionSelected(option) {
     setOptionClicked("".concat(option, "-button"));
     setShowValidationPanel(false);
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    id: id,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      onClick: function onClick() {
-        sendToFacilitator("A");
-      },
-      className: "validation-option",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _acceptIcon.default,
-        alt: "accept button"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: "Validado"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      onClick: function onClick() {
-        sendToFacilitator("R");
-      },
-      className: "validation-option",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _rejectIcon.default,
-        alt: "reject button"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: "Rechazado"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      onClick: function onClick() {
-        optionSelected("null");
-      },
-      className: "validation-option",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _nullIcon.default,
-        alt: "null button"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: "Null"
-      })]
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    id: id
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      optionSelected("accept");
+    },
+    className: "validation-option"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _acceptIcon.default,
+    alt: "accept button"
+  }), /*#__PURE__*/React.createElement("p", null, "Validado")), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      optionSelected("reject");
+    },
+    className: "validation-option"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _rejectIcon.default,
+    alt: "reject button"
+  }), /*#__PURE__*/React.createElement("p", null, "Rechazado")), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      optionSelected("null");
+    },
+    className: "validation-option"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _nullIcon.default,
+    alt: "null button"
+  }), /*#__PURE__*/React.createElement("p", null, "Null")));
 };
 
 exports.ValidationPanel = ValidationPanel;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VerticalSideMenuMainPageDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/VerticalSideMenuMainPage",
+  component: _index.VerticalSideMenuMainPage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.VerticalSideMenuMainPage, args);
+};
+
+var VerticalSideMenuMainPageDefault = Template.bind({});
+exports.VerticalSideMenuMainPageDefault = VerticalSideMenuMainPageDefault;
+VerticalSideMenuMainPageDefault.args = {};

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalSideMenuMainPage = void 0;
+
+var _styles = require("./styles");
+
+var _verticalSideMenuMainPageFAQS = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFAQS.svg"));
+
+var _verticalSideMenuMainPageFocusProduct = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFocusProduct.svg"));
+
+var _verticalSideMenuMainPageGroup = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageGroup.svg"));
+
+var _verticalSideMenuMainPageLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageLogo.svg"));
+
+var _verticalSideMenuMainPageSpeedometer = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageSpeedometer.svg"));
+
+var _verticalSideMenuMainPageTask = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageTask.svg"));
+
+var VerticalSideMenuMainPage = function VerticalSideMenuMainPage() {
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageLogo.default,
+    alt: "Logo"
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageSpeedometer.default,
+    alt: "Speed Meter"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageFocusProduct.default,
+    alt: "Focus Product"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageGroup.default,
+    alt: "Group"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageLogo.default,
+    alt: "Logo"
+  }), /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageTask.default,
+    alt: "Task"
+  })), /*#__PURE__*/React.createElement("img", {
+    src: _verticalSideMenuMainPageFAQS.default,
+    alt: "FAQS"
+  }));
+};
+
+exports.VerticalSideMenuMainPage = VerticalSideMenuMainPage;

package/dist/components/atoms/{Commentary → VerticalSideMenuMainPage}/styles.js

@@ -11,13 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 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  width: 500px;\n  height: 80px;\n  border: 1px solid ", ";\n  padding: 10px;\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 15px;\n    color: ", ";\n    text-decoration: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, function (_ref) {
-  var reviewed = _ref.reviewed;
-  return reviewed ? "line-through" : "none";
-});
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 60px;\n  height: 700px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  border-radius: 50px;\n  padding: 30px 10px 20px 10px;\n  text-align: center;\n  img {\n    cursor: pointer;\n  }\n  img + div {\n    margin-top: 100px;\n  }\n  div {\n    img + * {\n      margin-top: 20px;\n    }\n    & + * {\n      margin-top: 250px;\n    }\n  }\n"])));
 
 exports.Container = Container;

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

@@ -7,14 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.AddProvidersAndProductsDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
 var _bags = _interopRequireDefault(require("../../../assets/images/generalImage/bags.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var _default = {
   title: "Components/molecules/AddProvidersAndProducts",
   component: _index.AddProvidersAndProducts
@@ -22,7 +18,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.AddProvidersAndProducts, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.AddProvidersAndProducts, args);
 };
 
 var AddProvidersAndProductsDefault = Template.bind({});

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

@@ -13,30 +13,24 @@ var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _bags = _interopRequireDefault(require("../../../assets/images/generalImage/bags.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var AddProvidersAndProducts = function AddProvidersAndProducts(_ref) {
   var image = _ref.image,
       altText = _ref.altText,
       onClick = _ref.onClick,
       className = _ref.className;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/React.createElement(_styles.Container, {
     className: className,
-    onClick: onClick,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "add-bags",
-      children: image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: image,
-        alt: altText
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "header-and-paragraph",
-        text: "Comienza agregando Proveedores",
-        Paragraph: "O tambien puedes comenzar agregando tu productos"
-      })
-    })]
-  });
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "add-bags"
+  }, image && /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: altText
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    headerType: "header-and-paragraph",
+    text: "Comienza agregando Proveedores",
+    Paragraph: "O tambien puedes comenzar agregando tu productos"
+  })));
 };
 
 exports.AddProvidersAndProducts = AddProvidersAndProducts;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ApproveRejetPanelDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ApproveRejetPanel",
+  component: _index.ApproveRejetPanel
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ApproveRejetPanel, args);
+};
+
+var ApproveRejetPanelDefault = Template.bind({});
+exports.ApproveRejetPanelDefault = ApproveRejetPanelDefault;
+ApproveRejetPanelDefault.args = {
+  text: "113 productos",
+  check: false
+};