contentoh-components-library 8.0.0 → 11.0.0

package/dist/components/pages/OnboardPlan/index.js

@@ -9,21 +9,27 @@ var _styles = require("./styles");
 
 var _GradientPanel = require("../../atoms/GradientPanel");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var OnboardPlan = function OnboardPlan(_ref) {
   var leftPanel = _ref.leftPanel,
       planContainerData = _ref.planContainerData;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
-    className: "left"
-  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
-    componentsArray: leftPanel.componentsArray,
-    panelType: "home-panel"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "rigth"
-  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
-    panelColor: true,
-    componentsArray: planContainerData.componentsArray,
-    panelType: "home-plan"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "left",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        componentsArray: leftPanel.componentsArray,
+        panelType: "home-panel"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "rigth",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        panelColor: true,
+        componentsArray: planContainerData.componentsArray,
+        panelType: "home-plan"
+      })
+    })]
+  });
 };
 
 exports.OnboardPlan = OnboardPlan;

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

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RetailerPlanDefault = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -15,6 +19,8 @@ var _variables = require("../../../global-files/variables");
 
 var _Fullplan = require("../../organisms/Fullplan");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _default = {
   title: "Components/pages/RetailerPlan",
   Component: _index.RetailerPlan
@@ -22,25 +28,23 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.RetailerPlan, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerPlan, (0, _objectSpread2.default)({}, args));
 };
 
 var RetailerPlanDefault = Template.bind({});
 exports.RetailerPlanDefault = RetailerPlanDefault;
 RetailerPlanDefault.args = {
   retailerLeft: {
-    componentsArray: [/*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
-      key: "1",
+    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       fontFamily: _variables.FontFamily.Raleway_600,
       color: _variables.GlobalColors.white,
       text: "Benficios de crear productos"
-    }), /*#__PURE__*/React.createElement(_AtomList.AtomList, {
-      key: "2",
+    }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AtomList.AtomList, {
       content: ["Crea productos", "Solicita actualización", "Revisa, valida o rechaza productos", "Comparte con colaboradores"]
-    })]
+    }, "2")]
   },
   planRetailerData: {
-    componentsArray: [/*#__PURE__*/React.createElement(_Fullplan.FullPlan, {
+    componentsArray: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Fullplan.FullPlan, {
       title: "Elige el n\xFAmero de proveedores",
       textGeneral: "Bienvido a nuestra plataforma de cadena, para continuar elige el n\xFAmero de proveedores que tiene tu cadena",
       containerData: [{
@@ -52,8 +56,7 @@ RetailerPlanDefault.args = {
       }, {
         number: "+3000",
         name: "Proveedores"
-      }],
-      key: "1"
-    })]
+      }]
+    }, "1")]
   }
 };

package/dist/components/pages/RetailerPlan/index.js

@@ -11,21 +11,27 @@ var _GradientPanel = require("../../atoms/GradientPanel");
 
 var _Fullplan = require("../../organisms/Fullplan");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var RetailerPlan = function RetailerPlan(_ref) {
   var retailerLeft = _ref.retailerLeft,
       planRetailerData = _ref.planRetailerData;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
-    className: "left-retailer"
-  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
-    componentsArray: retailerLeft.componentsArray,
-    panelType: "home-panel"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "righ-retailer"
-  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
-    panelColor: true,
-    componentsArray: planRetailerData.componentsArray,
-    panelType: "home-plan"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "left-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        componentsArray: retailerLeft.componentsArray,
+        panelType: "home-panel"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "righ-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        panelColor: true,
+        componentsArray: planRetailerData.componentsArray,
+        panelType: "home-plan"
+      })
+    })]
+  });
 };
 
 exports.RetailerPlan = RetailerPlan;

package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.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.RetailerProductEditionDefault = 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/pages/RetailerProductEdition",
   component: _index.RetailerProductEdition
@@ -14,7 +20,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.RetailerProductEdition, args);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerProductEdition, (0, _objectSpread2.default)({}, args));
 };
 
 var RetailerProductEditionDefault = Template.bind({});

package/dist/components/pages/RetailerProductEdition/index.js

@@ -61,6 +61,8 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _Commentary = require("../../atoms/Commentary");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var reducerImages = function reducerImages(state, action) {
   var values = state.values,
       attrForImgs = state.attrForImgs;
@@ -492,8 +494,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       };
     });
     return images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
-      return /*#__PURE__*/React.createElement(_GalleryElement.GalleryElement, {
-        key: index,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {
         image: image,
         gridLayout: imageLayout,
         id: "gallery-element-" + index,
@@ -502,7 +503,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         imagePackagingType: imagePackagingType,
         imageInputs: imageInputs,
         changeImage: setImages
-      });
+      }, index);
     });
   };
 
@@ -1056,113 +1057,131 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     // }
     // getComments(concept);
   }, [activeTab]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    headerTop: headerTop
-  }, /*#__PURE__*/React.createElement(_HeaderTop.HeaderTop, {
-    setHeaderTop: setHeaderTop
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "data-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "image-data-panel"
-  }, /*#__PURE__*/React.createElement(_ImagePreviewer.ImagePreviewer, {
-    activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
-    imagesArray: images,
-    setActiveImage: setActiveImage,
-    setShowModal: setShowModal
-  }), /*#__PURE__*/React.createElement(_ImageDataTable.ImageDataTable, {
-    lists: images,
-    activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
-    retailerSelected: activeRetailer.id,
-    setImages: setImages,
-    assignationsImages: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator],
-    imagesStatus: productSelected === null || productSelected === void 0 ? void 0 : productSelected.images_status
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "product-information"
-  }, /*#__PURE__*/React.createElement(_FullProductNameHeader.FullProductNameHeader, {
-    headerData: product,
-    percent: activePercentage,
-    activeRetailer: activeRetailer,
-    setActiveRetailer: setActiveRetailer,
-    approveRejectButtons: approveRejectButtons,
-    sendToFacilitator: sendToFacilitator,
-    auditorAssigned: auditorAssigned,
-    userAssigned: userAssigned(activeTab, "facilitator")
-  }), /*#__PURE__*/React.createElement(_FullTabsMenu.FullTabsMenu, {
-    tabsSections: tabsSections,
-    status: {
-      Descripción: (_servicesData$filter$ = servicesData.filter(function (service) {
-        return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "description";
-      })[0]) === null || _servicesData$filter$ === void 0 ? void 0 : _servicesData$filter$.status,
-      "Ficha técnica": (_servicesData$filter$2 = servicesData.filter(function (service) {
-        return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "datasheet";
-      })[0]) === null || _servicesData$filter$2 === void 0 ? void 0 : _servicesData$filter$2.status,
-      Imágenes: product === null || product === void 0 ? void 0 : product.images_status
-    },
-    profileImage: productData.asigned,
-    activeTab: activeTab,
-    setActiveTab: setActiveTab,
-    setImageLayout: setImageLayout,
-    saveDescriptions: saveDescriptions,
-    saveDatasheets: saveDatasheets,
-    updateImages: updateImages,
-    assignations: {
-      Descripción: [productSelected.article.id_description_especialist, productSelected.article.id_description_facilitator],
-      "Ficha técnica": [productSelected.article.id_datasheet_especialist, productSelected.article.id_datasheet_facilitator],
-      Imágenes: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator]
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
-  }, !imageLayout && /*#__PURE__*/React.createElement(_GalleryHeader.GalleryHeader, null), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.datasheets) === 1 ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
-    return /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
-      key: index + "-" + activeRetailer.name,
-      articleId: productSelected.article.id_article,
-      version: version,
-      activeSection: activeTab,
-      inputGroup: dataGroup,
-      dataInputs: datasheets[1],
-      updatedDatasheets: updatedDatasheets,
-      setUpdatedDatasheets: setUpdatedDatasheets
-    });
-  }) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio")), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.descriptions) === 1 ? /*#__PURE__*/React.createElement(_InputGroup.InputGroup, {
-    activeSection: activeTab,
-    inputGroup: descriptions[0],
-    updatedDescriptions: updatedDescriptions,
-    setUpdatedDescriptions: setUpdatedDescriptions,
-    articleId: articleId,
-    version: version,
-    dinamicHeight: true
-  }) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio")), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.images) === 1 ? /*#__PURE__*/React.createElement("section", {
-    className: "container"
-  }, /*#__PURE__*/React.createElement("div", getRootProps({
-    className: "dropzone"
-  }), /*#__PURE__*/React.createElement("input", getInputProps()), /*#__PURE__*/React.createElement("aside", null, thumbs()))) : /*#__PURE__*/React.createElement("p", null, "no tienes este servicio"))), (userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/React.createElement("div", {
-    className: "commentary-box"
-  }, !comments[activeTab] ? /*#__PURE__*/React.createElement("div", {
-    className: "commentary"
-  }, /*#__PURE__*/React.createElement(_index.TagAndInput, {
-    label: "Caja de Comentario",
-    inputType: "textarea",
-    inputCols: 80,
-    inputRows: 4
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "buttons-box"
-  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: "general-transparent-button",
-    label: "Enviar comentario"
-  }), /*#__PURE__*/React.createElement(_GeneralButton.Button, {
-    buttonType: requiredNull !== 0 || !specialistValid(activeTab) || !versionMatch() ? "general-button-disabled" : "general-green-button",
-    label: "Enviar evaluación",
-    onClick: function onClick() {
-      return sendToFacilitator();
-    }
-  }))) : /*#__PURE__*/React.createElement(_Commentary.Commentary, {
-    comment: comments[activeTab].message
-  })))), showModal && /*#__PURE__*/React.createElement(_ProductImageModal.ProductImageModal, {
-    images: images,
-    setShowModal: setShowModal,
-    sendToFacilitator: sendToFacilitator,
-    approveRejectButtons: approveRejectButtons
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    headerTop: headerTop,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
+      setHeaderTop: setHeaderTop
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "data-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "image-data-panel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
+          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
+          imagesArray: images,
+          setActiveImage: setActiveImage,
+          setShowModal: setShowModal
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
+          lists: images,
+          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
+          retailerSelected: activeRetailer.id,
+          setImages: setImages,
+          assignationsImages: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator],
+          imagesStatus: productSelected === null || productSelected === void 0 ? void 0 : productSelected.images_status
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "product-information",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
+          headerData: product,
+          percent: activePercentage,
+          activeRetailer: activeRetailer,
+          setActiveRetailer: setActiveRetailer,
+          approveRejectButtons: approveRejectButtons,
+          sendToFacilitator: sendToFacilitator,
+          auditorAssigned: auditorAssigned,
+          userAssigned: userAssigned(activeTab, "facilitator")
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
+          tabsSections: tabsSections,
+          status: {
+            Descripción: (_servicesData$filter$ = servicesData.filter(function (service) {
+              return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "description";
+            })[0]) === null || _servicesData$filter$ === void 0 ? void 0 : _servicesData$filter$.status,
+            "Ficha técnica": (_servicesData$filter$2 = servicesData.filter(function (service) {
+              return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === "datasheet";
+            })[0]) === null || _servicesData$filter$2 === void 0 ? void 0 : _servicesData$filter$2.status,
+            Imágenes: product === null || product === void 0 ? void 0 : product.images_status
+          },
+          profileImage: productData.asigned,
+          activeTab: activeTab,
+          setActiveTab: setActiveTab,
+          setImageLayout: setImageLayout,
+          saveDescriptions: saveDescriptions,
+          saveDatasheets: saveDatasheets,
+          updateImages: updateImages,
+          assignations: {
+            Descripción: [productSelected.article.id_description_especialist, productSelected.article.id_description_facilitator],
+            "Ficha técnica": [productSelected.article.id_datasheet_especialist, productSelected.article.id_datasheet_facilitator],
+            Imágenes: [productSelected.article.id_images_especialist, productSelected.article.id_images_facilitator]
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : ""),
+          children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {}), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.datasheets) === 1 ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+              articleId: productSelected.article.id_article,
+              version: version,
+              activeSection: activeTab,
+              inputGroup: dataGroup,
+              dataInputs: datasheets[1],
+              updatedDatasheets: updatedDatasheets,
+              setUpdatedDatasheets: setUpdatedDatasheets
+            }, index + "-" + activeRetailer.name);
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "no tienes este servicio"
+          })), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.descriptions) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+            activeSection: activeTab,
+            inputGroup: descriptions[0],
+            updatedDescriptions: updatedDescriptions,
+            setUpdatedDescriptions: setUpdatedDescriptions,
+            articleId: articleId,
+            version: version,
+            dinamicHeight: true
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "no tienes este servicio"
+          })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : (_product$services3 = product.services) === null || _product$services3 === void 0 ? void 0 : _product$services3.images) === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+            className: "container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
+              className: "dropzone"
+            })), {}, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                children: thumbs()
+              })]
+            }))
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "no tienes este servicio"
+          }))]
+        }), (userAssigned(activeTab, "especialist" || "facilitator") || auditorAssigned()) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "commentary-box",
+          children: !comments[activeTab] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "commentary",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
+              label: "Caja de Comentario",
+              inputType: "textarea",
+              inputCols: 80,
+              inputRows: 4
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-box",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: "general-transparent-button",
+                label: "Enviar comentario"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: requiredNull !== 0 || !specialistValid(activeTab) || !versionMatch() ? "general-button-disabled" : "general-green-button",
+                label: "Enviar evaluación",
+                onClick: function onClick() {
+                  return sendToFacilitator();
+                }
+              })]
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Commentary.Commentary, {
+            comment: comments[activeTab].message
+          })
+        })]
+      })]
+    }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+      images: images,
+      setShowModal: setShowModal,
+      sendToFacilitator: sendToFacilitator,
+      approveRejectButtons: approveRejectButtons
+    })]
+  });
 };
 
 exports.RetailerProductEdition = RetailerProductEdition;

package/dist/global-files/fonts.css

@@ -0,0 +1,45 @@
+@font-face {
+  font-family: "Avenir Next";
+  src: url("../assets/fonts/avenirnext/AvenirNextLTPro-Regular.otf");
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("../assets/fonts/lato/Lato-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Raleway";
+  src: url("../assets/fonts/raleway/Raleway-Regular.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Raleway-500";
+  src: url("../assets/fonts/raleway/Raleway-Medium.ttf");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Raleway-600";
+  src: url("../assets/fonts/raleway/Raleway-SemiBold.ttf");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Raleway-700";
+  src: url("../assets/fonts/raleway/Raleway-Bold.ttf");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Raleway-800";
+  src: url("../assets/fonts/raleway/Raleway-ExtraBold.ttf");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Raleway-900";
+  src: url("../assets/fonts/raleway/Raleway-Black.ttf");
+  font-weight: 900;
+}

package/dist/global-files/global-styles.css

@@ -0,0 +1,41 @@
+@import "./fonts.css";
+
+*,
+*::after,
+*::before {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body.sb-main-padded.sb-show-main {
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sb-main-padded.sb-show-main #root {
+  height: 100%;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: white;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 15px;
+  background: #f0eef2;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #d4d1d7;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "8.0.0",
+  "version": "11.0.0",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
@@ -52,6 +52,13 @@
         {
           "absoluteRuntime": false
         }
+      ],
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
       ]
     ]
   },

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

@@ -1,4 +1,5 @@
 import { Container } from "./styles";
+import React from "react";
 
 export const Button = ({
   buttonType,