contentoh-components-library 21.0.19 → 21.0.22

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PlanSelectionDefault = 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/molecules/PlanSelection",
   component: _index.PlanSelection
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.PlanSelection, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PlanSelection, (0, _objectSpread2.default)({}, args));
 };
 
 var PlanSelectionDefault = Template.bind({});

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

@@ -9,6 +9,8 @@ var _styles = require("./styles");
 
 var _index = require("../../atoms/GeneralTextBox/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var PlanSelection = function PlanSelection(_ref) {
   var planSelection = _ref.planSelection,
       setbuttonActive = _ref.setbuttonActive;
@@ -22,17 +24,18 @@ var PlanSelection = function PlanSelection(_ref) {
     setbuttonActive(true);
   };
 
-  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
-    return /*#__PURE__*/React.createElement(_index.GeneralTextBox, {
-      className: "button-plan",
-      onClick: function onClick(e) {
-        return setActivePlan(e);
-      },
-      key: index,
-      number: plan === null || plan === void 0 ? void 0 : plan.number,
-      name: plan === null || plan === void 0 ? void 0 : plan.name
-    });
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GeneralTextBox, {
+        className: "button-plan",
+        onClick: function onClick(e) {
+          return setActivePlan(e);
+        },
+        number: plan === null || plan === void 0 ? void 0 : plan.number,
+        name: plan === null || plan === void 0 ? void 0 : plan.name
+      }, index);
+    })
+  });
 };
 
 exports.PlanSelection = PlanSelection;

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

@@ -1,14 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ProductNameHeaderDefault = 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 _default = {
   title: "Components/molecules/ProductNameHeader",
   component: _index.ProductNameHeader,
@@ -44,7 +50,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ProductNameHeader, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNameHeader, (0, _objectSpread2.default)({}, args));
 };
 
 var ProductNameHeaderDefault = Template.bind({});

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

@@ -15,6 +15,8 @@ var _index3 = require("../../atoms/ProgressBar/index");
 
 var _index4 = require("../../atoms/PriorityFlag/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ProductNameHeader = function ProductNameHeader(_ref) {
   var productName = _ref.productName,
       statusType = _ref.statusType,
@@ -22,20 +24,22 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       backgroundColor = _ref.backgroundColor,
       priority = _ref.priority,
       date = _ref.date;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "product-name-header",
-    text: productName
-  }), /*#__PURE__*/React.createElement(_index2.StatusTag, {
-    statusType: statusType
-  }), /*#__PURE__*/React.createElement(_index3.ProgressBar, {
-    percent: percent,
-    backgroundColor: backgroundColor
-  }), /*#__PURE__*/React.createElement(_index4.PriorityFlag, {
-    priority: priority
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "date-header",
-    text: date
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      headerType: "product-name-header",
+      text: productName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
+      statusType: statusType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.ProgressBar, {
+      percent: percent,
+      backgroundColor: backgroundColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.PriorityFlag, {
+      priority: priority
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      headerType: "date-header",
+      text: date
+    })]
+  });
 };
 
 exports.ProductNameHeader = ProductNameHeader;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ProductNotificationDefault = 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/molecules/ProductNotification",
   component: _index.ProductNotification
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ProductNotification, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductNotification, (0, _objectSpread2.default)({}, args));
 };
 
 var ProductNotificationDefault = Template.bind({});

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

@@ -19,6 +19,8 @@ var _MenuNotification = require("../../atoms/MenuNotification");
 
 var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ProductNotification = function ProductNotification(_ref) {
   var notification = _ref.notification;
 
@@ -49,7 +51,7 @@ var ProductNotification = function ProductNotification(_ref) {
     notificationType: "productAssignation",
     label: "Agregaron comentario en producto 123"
   }];
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick(e) {
       e.stopPropagation();
       setShowMenu(!showMenu);
@@ -58,14 +60,15 @@ var ProductNotification = function ProductNotification(_ref) {
         document.removeEventListener("click", closeMenu, false);
       }
     },
-    className: notification && "new-notification"
-  }, /*#__PURE__*/React.createElement(_index.Avatar, {
-    image: _productNotification.default,
-    imageType: "big-image",
-    altText: "Notification Picture"
-  }), showMenu && /*#__PURE__*/React.createElement(_MenuNotification.MenuNotification, {
-    content: content
-  }));
+    className: notification && "new-notification",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
+      image: _productNotification.default,
+      imageType: "big-image",
+      altText: "Notification Picture"
+    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuNotification.MenuNotification, {
+      content: content
+    })]
+  });
 };
 
 exports.ProductNotification = ProductNotification;

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

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

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

@@ -21,6 +21,8 @@ var _react = require("react");
 
 var _MenuProfile = require("../../atoms/MenuProfile");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var ProfileHeader = function ProfileHeader(_ref) {
   var customerProfileImg = _ref.customerProfileImg,
       customerName = _ref.customerName,
@@ -46,7 +48,7 @@ var ProfileHeader = function ProfileHeader(_ref) {
   var MenuInfo = {
     user: "Administrador"
   };
-  return /*#__PURE__*/React.createElement(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: function onClick(e) {
       e.stopPropagation();
       setShowMenu(!showMenu);
@@ -54,20 +56,24 @@ var ProfileHeader = function ProfileHeader(_ref) {
       if (showMenu) {
         document.removeEventListener("click", closeMenu, false);
       }
-    }
-  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
-    image: customerProfileImg,
-    imageType: "profile-image",
-    altText: "Profile Picture"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "user-info"
-  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "retailer-name-header",
-    text: customerName,
-    color: _variables.GlobalColors.original_magenta
-  }), customer && /*#__PURE__*/React.createElement("p", null, customer)), showMenu && /*#__PURE__*/React.createElement(_MenuProfile.MenuProfile, {
-    user: MenuInfo.user
-  }));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Avatar, {
+      image: customerProfileImg,
+      imageType: "profile-image",
+      altText: "Profile Picture"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "user-info",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+        headerType: "retailer-name-header",
+        text: customerName,
+        color: _variables.GlobalColors.original_magenta
+      }), customer && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: customer
+      })]
+    }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuProfile.MenuProfile, {
+      user: MenuInfo.user
+    })]
+  });
 };
 
 exports.ProfileHeader = ProfileHeader;

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

@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.SidebarNotificationDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/molecules/SidebarNotification",
   component: _index.SidebarNotification,
@@ -31,7 +35,7 @@ var setShowSidebar = function setShowSidebar(value) {
 };
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.SidebarNotification, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SidebarNotification, (0, _objectSpread2.default)({}, args));
 };
 
 var SidebarNotificationDefault = Template.bind({});

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

@@ -23,6 +23,8 @@ var _Notification = require("../../atoms/Notification");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var SidebarNotification = function SidebarNotification(_ref) {
   var _ref$array = _ref.array,
       array = _ref$array === void 0 ? [] : _ref$array,
@@ -63,43 +65,47 @@ var SidebarNotification = function SidebarNotification(_ref) {
     return date;
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showSidebar && /*#__PURE__*/React.createElement(_styles.Container, {
-    id: "side-bar",
-    ref: sidebar
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "notification-header"
-  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
-    image: _productNotification.default,
-    imageType: "retailer-image",
-    altText: "Notification Picture"
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    headerType: "product-name-header",
-    text: "Notificaciones",
-    color: "#867586"
-  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "close-button"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "scroll"
-  }, array === null || array === void 0 ? void 0 : array.map(function (element, index) {
-    var _element$notification;
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "date-notification",
-      key: index + "-" + (element === null || element === void 0 ? void 0 : element.dates)
-    }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-      headerType: "input-name-header",
-      text: comparisonDate(element === null || element === void 0 ? void 0 : element.dates),
-      color: "#6A5880",
-      FontFamily: _variables.FontFamily.AvenirNext
-    }), element === null || element === void 0 ? void 0 : (_element$notification = element.notifications) === null || _element$notification === void 0 ? void 0 : _element$notification.map(function (notification, index) {
-      return /*#__PURE__*/React.createElement(_Notification.Notification, {
-        key: index,
-        profilePicture: notification === null || notification === void 0 ? void 0 : notification.profilePicture,
-        notification: notification === null || notification === void 0 ? void 0 : notification.notification,
-        newNotification: notification === null || notification === void 0 ? void 0 : notification.newNotification
-      });
-    }));
-  }))), " ");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showSidebar && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      id: "side-bar",
+      ref: sidebar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "notification-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Avatar, {
+          image: _productNotification.default,
+          imageType: "retailer-image",
+          altText: "Notification Picture"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+          headerType: "product-name-header",
+          text: "Notificaciones",
+          color: "#867586"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+          buttonType: "close-button"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "scroll",
+        children: array === null || array === void 0 ? void 0 : array.map(function (element, index) {
+          var _element$notification;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "date-notification",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+              headerType: "input-name-header",
+              text: comparisonDate(element === null || element === void 0 ? void 0 : element.dates),
+              color: "#6A5880",
+              FontFamily: _variables.FontFamily.AvenirNext
+            }), element === null || element === void 0 ? void 0 : (_element$notification = element.notifications) === null || _element$notification === void 0 ? void 0 : _element$notification.map(function (notification, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.Notification, {
+                profilePicture: notification === null || notification === void 0 ? void 0 : notification.profilePicture,
+                notification: notification === null || notification === void 0 ? void 0 : notification.notification,
+                newNotification: notification === null || notification === void 0 ? void 0 : notification.newNotification
+              }, index);
+            })]
+          }, index + "-" + (element === null || element === void 0 ? void 0 : element.dates));
+        })
+      })]
+    }), " "]
+  });
 };
 
 exports.SidebarNotification = SidebarNotification;

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

@@ -1,12 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StatusAsignationInfoDefault = 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/molecules/StatusAsignationInfo",
   component: _index.StatusAsignationInfo
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.StatusAsignationInfo, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusAsignationInfo, (0, _objectSpread2.default)({}, args));
 };
 
 var StatusAsignationInfoDefault = Template.bind({});

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

@@ -23,6 +23,8 @@ var _react = require("react");
 
 var _index3 = require("../../atoms/AsignationOption/index");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
   var _ref$status = _ref.status,
       status = _ref$status === void 0 ? "-" : _ref$status,
@@ -59,76 +61,90 @@ var StatusAsignationInfo = function StatusAsignationInfo(_ref) {
       document.addEventListener("click", closeAsignations, false);
     }
   }, [showAsignationPanel]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    id: id
-  }, imagesSection && /*#__PURE__*/React.createElement("div", {
-    className: "images-buttons"
-  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "circular-button save-button",
-    onClick: function onClick() {
-      saveImages && saveImages();
-    }
-  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "circular-button delete-button",
-    onClick: function onClick() {
-      deleteImages && deleteImages();
-    }
-  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: layout ? "grid-layout" : "row-layout",
-    onClick: function onClick() {
-      setLayout(!layout);
-      setImageLayout && setImageLayout(!layout);
-    }
-  })), /*#__PURE__*/React.createElement(_index2.StatusTag, {
-    statusType: status,
-    ovalForm: true
-  }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
-    imageType: "small-image",
-    image: src,
-    altText: "user profile image",
-    onClick: function onClick() {
-      setShowAsignationPanel(true);
-    }
-  }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {
-    text: "Asig.",
-    color: "#969696",
-    fontFamily: "Avenir Next",
-    headerType: "input-name-header"
-  }), showAsignationPanel && /*#__PURE__*/React.createElement("div", {
-    className: "asignation-panel"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "asignation-header"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "asignation-status"
-  }, /*#__PURE__*/React.createElement("p", null, "Estatus"), /*#__PURE__*/React.createElement(_index2.StatusTag, {
-    statusType: status,
-    ovalForm: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "asignation-percent"
-  }, /*#__PURE__*/React.createElement("p", null, "Estatus"), /*#__PURE__*/React.createElement("p", {
-    className: "percent"
-  }, percent, "%"))), /*#__PURE__*/React.createElement("div", {
-    className: "asignations-list"
-  }, asignationsList !== undefined ? asignationsList.map(function (asigantion, index) {
-    return /*#__PURE__*/React.createElement(_index3.AsignationOption, {
-      profileImage: asignation.image,
-      asignationType: asignation.asignationType,
-      name: asignation.name,
-      team: asigantion.team
-    });
-  }) : /*#__PURE__*/React.createElement("p", {
-    className: "no-asignations"
-  }, "Sin personas para asignar")), /*#__PURE__*/React.createElement("div", {
-    className: "default-asignations-list"
-  }, /*#__PURE__*/React.createElement(_index3.AsignationOption, {
-    asignationType: "provider",
-    name: "Solicitar a",
-    team: "Proveedor"
-  }), /*#__PURE__*/React.createElement(_index3.AsignationOption, {
-    asignationType: "team",
-    name: "Solicitar a",
-    team: "Content-oh!"
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: id,
+    children: [imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "images-buttons",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "circular-button save-button",
+        onClick: function onClick() {
+          saveImages && saveImages();
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: "circular-button delete-button",
+        onClick: function onClick() {
+          deleteImages && deleteImages();
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+        buttonType: layout ? "grid-layout" : "row-layout",
+        onClick: function onClick() {
+          setLayout(!layout);
+          setImageLayout && setImageLayout(!layout);
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
+      statusType: status,
+      ovalForm: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      imageType: "small-image",
+      image: src,
+      altText: "user profile image",
+      onClick: function onClick() {
+        setShowAsignationPanel(true);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
+      text: "Asig.",
+      color: "#969696",
+      fontFamily: "Avenir Next",
+      headerType: "input-name-header"
+    }), showAsignationPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "asignation-panel",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "asignation-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "asignation-status",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "Estatus"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.StatusTag, {
+            statusType: status,
+            ovalForm: true
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "asignation-percent",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "Estatus"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            className: "percent",
+            children: [percent, "%"]
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "asignations-list",
+        children: asignationsList !== undefined ? asignationsList.map(function (asigantion, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
+            profileImage: asignation.image,
+            asignationType: asignation.asignationType,
+            name: asignation.name,
+            team: asigantion.team
+          });
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "no-asignations",
+          children: "Sin personas para asignar"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "default-asignations-list",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
+          asignationType: "provider",
+          name: "Solicitar a",
+          team: "Proveedor"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AsignationOption, {
+          asignationType: "team",
+          name: "Solicitar a",
+          team: "Content-oh!"
+        })]
+      })]
+    })]
+  });
 };
 
 exports.StatusAsignationInfo = StatusAsignationInfo;