contentoh-components-library 21.4.26 → 21.4.27

package/dist/components/organisms/Chat/ContentChat/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: 100%;\n  max-width: 700px;\n  min-width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 0px;\n  background: white;\n  padding: 0px;\n  overflow: hidden;\n  border-radius: inherit;\n  //border: 1px solid red;\n\n  .container-chatEmpty {\n    width: 100%;\n    flex-grow: 2;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 18px;\n    background-color: transparent;\n\n    .icon-chat {\n      color: #808080;\n    }\n\n    label {\n      font-family: ", ", sans-serif;\n      font-size: 17px;\n      text-align: center;\n      color: #808080;\n    }\n  }\n  @media (max-width: 600px) {\n    min-width: 300px;\n  }\n"])), _variables.FontFamily.RobotoRegular);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-width: 700px;\n  min-width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 0px;\n  background: white;\n  padding: 0px;\n  overflow: hidden;\n  border-radius: inherit;\n  //border: 1px solid red;\n\n  .container-chatEmpty {\n    width: 100%;\n    flex-grow: 2;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 18px;\n    background-color: transparent;\n\n    .icon-chat {\n      color: #808080;\n    }\n\n    label {\n      font-family: ", ", sans-serif;\n      font-size: 17px;\n      text-align: center;\n      color: #808080;\n    }\n  }\n\n  @media (max-width: 600px) {\n    min-width: 300px;\n  }\n"])), _variables.FontFamily.RobotoRegular);
 
 exports.Container = Container;

package/dist/components/organisms/Chat/Footer/index.js

@@ -168,7 +168,7 @@ var Footer = function Footer(props) {
           switch (_context.prev = _context.next) {
             case 0:
               if (!createItemsChat) {
-                _context.next = 88;
+                _context.next = 90;
                 break;
               }
 
@@ -200,7 +200,7 @@ var Footer = function Footer(props) {
 
             case 12:
               if ((_step = _iterator.n()).done) {
-                _context.next = 39;
+                _context.next = 41;
                 break;
               }
 
@@ -228,7 +228,7 @@ var Footer = function Footer(props) {
 
               fileKey = "chat/";
               _context.t0 = chatType;
-              _context.next = _context.t0 === "merchant_product" ? 26 : _context.t0 === "order_product" ? 28 : _context.t0 === "ticket" ? 30 : 32;
+              _context.next = _context.t0 === "merchant_product" ? 26 : _context.t0 === "order_product" ? 28 : _context.t0 === "ticket" ? 30 : _context.t0 === "product_status" ? 32 : 34;
               break;
 
             case 26:
@@ -238,7 +238,7 @@ var Footer = function Footer(props) {
                 errorMessage = "El ID o la version del producto no es valido";
               }
 
-              return _context.abrupt("break", 33);
+              return _context.abrupt("break", 35);
 
             case 28:
               if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id) && (0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version)) {
@@ -247,7 +247,7 @@ var Footer = function Footer(props) {
                 errorMessage = "El ID o la version del producto no es valido";
               }
 
-              return _context.abrupt("break", 33);
+              return _context.abrupt("break", 35);
 
             case 30:
               if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id)) {
@@ -256,12 +256,21 @@ var Footer = function Footer(props) {
                 errorMessage = "El ID del ticket no es valido";
               }
 
-              return _context.abrupt("break", 33);
+              return _context.abrupt("break", 35);
 
             case 32:
+              if ((0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.id) && (0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version) && (0, _utils.isValidNaturalNumber)(dataChat === null || dataChat === void 0 ? void 0 : dataChat.retailerId)) {
+                fileKey += "productStatus/".concat(dataChat.id, "-").concat(dataChat === null || dataChat === void 0 ? void 0 : dataChat.version, "-").concat(dataChat === null || dataChat === void 0 ? void 0 : dataChat.retailerId, "/");
+              } else {
+                errorMessage = "El ID del ticket no es valido";
+              }
+
+              return _context.abrupt("break", 35);
+
+            case 34:
               errorMessage = "El tipo de chat no se especifico de manera correcta";
 
-            case 33:
+            case 35:
               if (!errorMessage) {
                 today = new Date();
                 fileKey += "".concat((0, _uuid.v4)(), "-").concat(today.getTime(), ".").concat((0, _utils.getFileExtension)(file.name));
@@ -283,32 +292,32 @@ var Footer = function Footer(props) {
               };
               fileUploadRequests.push(myBucket.putObject(paramsCreate).promise());
 
-            case 37:
+            case 39:
               _context.next = 12;
               break;
 
-            case 39:
-              _context.next = 44;
+            case 41:
+              _context.next = 46;
               break;
 
-            case 41:
-              _context.prev = 41;
+            case 43:
+              _context.prev = 43;
               _context.t1 = _context["catch"](10);
 
               _iterator.e(_context.t1);
 
-            case 44:
-              _context.prev = 44;
+            case 46:
+              _context.prev = 46;
 
               _iterator.f();
 
-              return _context.finish(44);
+              return _context.finish(46);
 
-            case 47:
-              _context.next = 49;
+            case 49:
+              _context.next = 51;
               return Promise.allSettled(fileUploadRequests);
 
-            case 49:
+            case 51:
               responseAWS = _context.sent;
               responseAWS.forEach(function (responseFile, index) {
                 if (responseFile.status === "rejected") {
@@ -318,11 +327,11 @@ var Footer = function Footer(props) {
                   customFiles[index].uploaded = true;
                 }
               });
-              _context.next = 59;
+              _context.next = 61;
               break;
 
-            case 53:
-              _context.prev = 53;
+            case 55:
+              _context.prev = 55;
               _context.t2 = _context["catch"](7);
               console.log(_context.t2);
               disableSecondaryContainer(false);
@@ -334,21 +343,21 @@ var Footer = function Footer(props) {
               });
               return _context.abrupt("return");
 
-            case 59:
+            case 61:
               // obtener las keys de los files subidos
               items = [];
               index = 0;
 
-            case 61:
+            case 63:
               if (!(index < customFiles.length)) {
-                _context.next = 74;
+                _context.next = 76;
                 break;
               }
 
               _file = customFiles[index];
 
               if (!_file.uploaded) {
-                _context.next = 71;
+                _context.next = 73;
                 break;
               }
 
@@ -358,14 +367,14 @@ var Footer = function Footer(props) {
               }; // caso imagen -> obtener width y height
 
               if (!(_file.itemType === "img")) {
-                _context.next = 70;
+                _context.next = 72;
                 break;
               }
 
-              _context.next = 68;
+              _context.next = 70;
               return (0, _utils.getImageSize)(files[index]);
 
-            case 68:
+            case 70:
               imgSize = _context.sent;
 
               if (imgSize) {
@@ -373,31 +382,31 @@ var Footer = function Footer(props) {
                 valueItem.height = imgSize.height;
               }
 
-            case 70:
+            case 72:
               items.push({
                 type: _file.itemType,
                 value: JSON.stringify(valueItem)
               });
 
-            case 71:
+            case 73:
               index++;
-              _context.next = 61;
+              _context.next = 63;
               break;
 
-            case 74:
+            case 76:
               if (!items.length) {
-                _context.next = 82;
+                _context.next = 84;
                 break;
               }
 
-              _context.next = 77;
+              _context.next = 79;
               return createItemsChat(items);
 
-            case 77:
+            case 79:
               responseError = _context.sent;
 
               if (!responseError) {
-                _context.next = 82;
+                _context.next = 84;
                 break;
               }
 
@@ -410,7 +419,7 @@ var Footer = function Footer(props) {
               disableSecondaryContainer(false);
               return _context.abrupt("return");
 
-            case 82:
+            case 84:
               // obtener los errores de los files no subidos a AWS
               failedFiles = [];
               errorDetailFiles = "";
@@ -439,12 +448,12 @@ var Footer = function Footer(props) {
               disableSecondaryContainer(false);
               setFilesPreview(failedFiles);
 
-            case 88:
+            case 90:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[7, 53], [10, 41, 44, 47]]);
+      }, _callee, null, [[7, 55], [10, 43, 46, 49]]);
     }));
 
     return function sendFilesPreview() {

package/dist/components/organisms/Chat/Footer/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../../global-files/variables");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  //height: 100%; // modo dev\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  background: white;\n  padding: 15px 14px 14px 14px;\n  //border: 1px solid red;\n\n  .container-chatDisabled {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    background-color: #f7f7f7;\n    border-radius: 17px;\n    padding: 10px 15px;\n\n    .label-chatDisabled {\n      flex-grow: 2;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: center;\n      color: #a2a2a2;\n    }\n  }\n\n  .tooltipErrorUpdate {\n    > div {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 5px;\n\n      .label-title {\n        font-family: ", ", sans-serif;\n        font-size: 13px;\n        text-align: center;\n        color: #262626;\n      }\n\n      .label-detail {\n        font-family: ", ", sans-serif;\n        font-size: 11px;\n        text-align: center;\n        color: #262626;\n      }\n    }\n  }\n\n  .container-ErrorUpdate {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n\n  @media (max-width: 600px) { \n    width: 90%;\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  //height: 100%; // modo dev\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  background: white;\n  padding: 15px 14px 14px 14px;\n  //border: 1px solid red;\n\n  .container-chatDisabled {\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    background-color: #f7f7f7;\n    border-radius: 17px;\n    padding: 10px 15px;\n\n    .label-chatDisabled {\n      flex-grow: 2;\n      font-family: ", ", sans-serif;\n      font-size: 12px;\n      text-align: center;\n      color: #a2a2a2;\n    }\n  }\n\n  .tooltipErrorUpdate {\n    > div {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 5px;\n\n      .label-title {\n        font-family: ", ", sans-serif;\n        font-size: 13px;\n        text-align: center;\n        color: #262626;\n      }\n\n      .label-detail {\n        font-family: ", ", sans-serif;\n        font-size: 11px;\n        text-align: center;\n        color: #262626;\n      }\n    }\n  }\n\n  .container-ErrorUpdate {\n    width: 20px;\n    height: 20px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    padding: 0px;\n  }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
 
 exports.Container = Container;
 

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

@@ -30,7 +30,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var Chat = function Chat(props) {
   var chatType = props.chatType,
       chatContainerType = props.chatContainerType,
-      chatData = props.chatData,
+      _props$chatData = props.chatData,
+      chatData = _props$chatData === void 0 ? {} : _props$chatData,
       classNameContainerFixed = props.classNameContainerFixed,
       _props$size = props.size,
       size = _props$size === void 0 ? 14 : _props$size;
@@ -46,7 +47,8 @@ var Chat = function Chat(props) {
       setData = _useState4[1];
 
   var _ref = chatData || {},
-      ticketCompany = _ref.ticketCompany;
+      ticketCompany = _ref.ticketCompany,
+      retailerId = _ref.retailerId;
 
   (0, _react.useEffect)(function () {
     switch (chatType) {
@@ -62,6 +64,10 @@ var Chat = function Chat(props) {
         validateChatTicket();
         break;
 
+      case "product_status":
+        validateProductStatus();
+        break;
+
       default:
         setData({
           code: 404,
@@ -71,6 +77,41 @@ var Chat = function Chat(props) {
     }
   }, [chatType]);
 
+  var validateProductStatus = function validateProductStatus() {
+    var userToken = chatData.userToken,
+        id = chatData.id,
+        version = chatData.version,
+        retailerId = chatData.retailerId,
+        status = chatData.status,
+        orderId = chatData.orderId;
+    if (!isValidGeneral(userToken, id)) return; // validar el ID de la cadena asociada al producto en la OT
+
+    if (!(0, _utils.isValidNaturalNumber)(retailerId)) {
+      setDataError("La cadena relacionada al producto no es válida");
+      return;
+    } // validar el ID de la version asociada al producto en la OT
+
+
+    if (!(0, _utils.isValidNaturalNumber)(version)) {
+      setDataError("La versión del producto no es válida");
+      return;
+    }
+
+    if (orderId && !(0, _utils.isValidNaturalNumber)(orderId)) {
+      setDataError("La orden del producto no es válida");
+      return;
+    }
+
+    setData({
+      userToken: userToken,
+      id: id,
+      version: version,
+      retailerId: retailerId,
+      orderId: orderId,
+      status: status
+    });
+  };
+
   var isValidGeneral = function isValidGeneral(userToken, id) {
     // validar token del user
     if ((0, _utils.isStringEmpty)(userToken)) {
@@ -217,7 +258,9 @@ var Chat = function Chat(props) {
         dataChat: data,
         showBtnClose: false,
         ticketCompany: ticketCompany,
-        activeRetailer: props.activeRetailer
+        activeRetailer: props.activeRetailer || {
+          id: retailerId
+        }
       })
     });
   } else {
@@ -249,7 +292,9 @@ var Chat = function Chat(props) {
             onClickBtnClose: function onClickBtnClose() {
               setShowPopUpChat(false);
             },
-            activeRetailer: props.activeRetailer
+            activeRetailer: props.activeRetailer || {
+              id: retailerId
+            }
           })
         })
       })]

package/dist/components/organisms/Chat/styles.js

@@ -16,7 +16,7 @@ var _variables = require("../../../global-files/variables");
 var _templateObject, _templateObject2, _templateObject3;
 
 // Container para chat fixed
-var ContainerFixed = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  max-width: 550px;\n  min-width: 325px;\n  height: 100%;\n  flex-grow: 2;\n  background-color: white;\n  border: 1px solid #f0f0f0;\n  z-index: 1000;\n  padding: 0px;\n  @media (max-width: 600px) {\n    width: 90%;\n    min-width: 300px;\n  }\n"])));
+var ContainerFixed = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: auto;\n  max-width: 550px;\n  min-width: 325px;\n  height: 100%;\n  flex-grow: 2;\n  background-color: white;\n  border: 1px solid #f0f0f0;\n  z-index: 1000;\n  padding: 0px;\n  @media (max-width: 1024px) { \n    width: auto;\n    max-width: 100%;\n  }\n  @media (max-width: 600px) {\n    width: 90%;\n    min-width: 300px;\n  }\n"])));
 
 exports.ContainerFixed = ContainerFixed;
 

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

@@ -43,7 +43,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
 
   (0, _react.useEffect)(function () {
     var rtls = (headerData === null || headerData === void 0 ? void 0 : headerData.retailers) || (headerData === null || headerData === void 0 ? void 0 : headerData.retailersAvailable);
-    servicesData && rtls.forEach(function (rt) {
+    servicesData && (rtls === null || rtls === void 0 ? void 0 : rtls.forEach(function (rt) {
       var element = [];
       servicesData.forEach(function (sd) {
         if (sd.id_retailer === rt.id) {
@@ -52,7 +52,7 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
 
         rt["services"] = element;
       });
-    });
+    }));
     setRetailers(rtls);
   }, [servicesData]);
 

package/dist/components/organisms/Modal/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n      margin-bottom: 20px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n\n      & + * {\n        margin-top: 20px;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
 
 exports.ContainerModal = ContainerModal;

package/dist/components/organisms/PanelLayout/PanelLayout.stories.js

@@ -45,7 +45,7 @@ PanelLayoutDefault.args = {
       children: "Precio"
     })]
   }),
-  body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "first",

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

@@ -11,14 +11,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var PanelLayout = function PanelLayout(_ref) {
   var header = _ref.header,
-      body = _ref.body,
-      footer = _ref.footer;
+      children = _ref.children,
+      footer = _ref.footer,
+      className = _ref.className;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: className,
     children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Header, {
       children: header
-    }) : null, body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
-      children: body
-    }) : null, footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Footer, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
+      children: children
+    }), footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Footer, {
       children: footer
     }) : null]
   });

package/dist/components/organisms/PanelLayout/styles.js

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 1fr;\n  grid-template-rows: 34px 1fr 300px;\n  gap: 0px 0px;\n  grid-template-areas:\n    \"header\"\n    \"body\"\n    \"footer\";\n  font-family: ", ", sans-serif;\n  font-size: 12px;\n"])), _variables.FontFamily.RobotoMedium);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 1fr;\n  grid-template-rows: 34px 1fr 100%;\n  gap: 0px 0px;\n  grid-template-areas:\n    \"header\"\n    \"body\"\n    \"footer\";\n  font-family: ", ", sans-serif;\n  font-size: 12px;\n"])), _variables.FontFamily.RobotoMedium);
 
 exports.Container = Container;
 
@@ -23,10 +23,10 @@ var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2
 
 exports.Header = Header;
 
-var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: body;\n"])));
+var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: body;\n  border-left: 1px solid #f0f0f0;\n  border-right: 1px solid #f0f0f0;\n"])));
 
 exports.Body = Body;
 
-var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: footer;\n"])));
+var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: footer;\n  display: flex;\n  align-items: center;\n  border: 1px solid #f0f0f0;\n  border-radius: 0 0 5px 5px;\n"])));
 
 exports.Footer = Footer;