contentoh-components-library 21.4.102 → 21.4.104

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

@@ -1,21 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.NotificationDefault = 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 = exports.default = {
+
+var _default = {
   title: "Components/atoms/Notification",
   component: _index.Notification
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Notification, {
-  ...args
-});
-const NotificationDefault = exports.NotificationDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Notification, (0, _objectSpread2.default)({}, args));
+};
+
+var NotificationDefault = Template.bind({});
+exports.NotificationDefault = NotificationDefault;
 NotificationDefault.args = {
   profilePicture: _defaultProfileImage.default,
   notification: "ODT 23441244",

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

@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Notification = void 0;
+
 var _styles = require("./styles");
+
 var _index = require("../../atoms/Avatar/index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const Notification = _ref => {
-  let {
-    profilePicture,
-    notification,
-    newNotification
-  } = _ref;
+
+var Notification = function Notification(_ref) {
+  var profilePicture = _ref.profilePicture,
+      notification = _ref.notification,
+      newNotification = _ref.newNotification;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: newNotification && "new-notification",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
@@ -27,4 +29,5 @@ const Notification = _ref => {
     }) : "ODT 23441244"]
   });
 };
+
 exports.Notification = Notification;

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

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f9f9fc;\n  border-radius: 25px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n  width: 360px;\n  height: auto;\n  border: none;\n  &.new-notification {\n    border: 1px solid #ff009a;\n  }\n  .profile-image {\n    & + * {\n      margin-left: 10px;\n    }\n  }\n  p {\n    font-family: ", ";\n    color: #342b3f;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 18px;\n    letter-spacing: -0.015em;\n    & + * {\n      margin-left: 4px;\n    }\n  }\n  .bolder {\n    font-weight: 900;\n    max-width: 185px;\n    max-height: 40px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), _variables.FontFamily.AvenirNext);
+
+var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #f9f9fc;\n  border-radius: 25px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px;\n  width: 360px;\n  height: auto;\n  border: none;\n  &.new-notification {\n    border: 1px solid #ff009a;\n  }\n  .profile-image {\n    & + * {\n      margin-left: 10px;\n    }\n  }\n  p {\n    font-family: ", ";\n    color: #342b3f;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 18px;\n    letter-spacing: -0.015em;\n    & + * {\n      margin-left: 4px;\n    }\n  }\n  .bolder {\n    font-weight: 900;\n    max-width: 185px;\n    max-height: 40px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), _variables.FontFamily.AvenirNext);
+
+exports.Container = Container;

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

@@ -1,21 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Template = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/NumberMandatory",
   component: _.NumberMandatory,
   argTypes: {}
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NumberMandatory, {
-  ...args
-});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NumberMandatory, (0, _objectSpread2.default)({}, args));
+};
+
 exports.Template = Template;
-const NumberMandatoryDefault = Template.bind({});
+var NumberMandatoryDefault = Template.bind({});
 NumberMandatoryDefault.args = {
   description_small: "Descripción del campo",
   required: true,

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

@@ -1,21 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberMandatory = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _TooltipLight = require("../TooltipLight");
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const NumberMandatory = _ref => {
-  let {
-    required,
-    number,
-    typeImage,
-    typeSingle
-  } = _ref;
+
+var NumberMandatory = function NumberMandatory(_ref) {
+  var required = _ref.required,
+      number = _ref.number,
+      typeImage = _ref.typeImage,
+      typeSingle = _ref.typeSingle;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLight.TooltipLight, {
       description_small: "Este producto necesita ".concat(number, " ").concat(number === 1 ? 'imagen' : 'imágenes', " ").concat(number === 1 ? typeSingle : typeImage, " para esta cadena."),
@@ -27,4 +31,5 @@ const NumberMandatory = _ref => {
     })]
   });
 };
+
 exports.NumberMandatory = NumberMandatory;

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

@@ -1,12 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display:flex;\n  gap:5px;\n  span {\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display:flex;\n  gap:5px;\n  span {\n    font-family:", ", sans-serif;\n    font-size:12px;\n  }\n"])), _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

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

@@ -1,12 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PriorityFlagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/ObservationFlag",
   component: _index.ObservationFlag,
   argTypes: {
@@ -18,10 +25,14 @@ var _default = exports.default = {
     }
   }
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ObservationFlag, {
-  ...args
-});
-const PriorityFlagDefault = exports.PriorityFlagDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ObservationFlag, (0, _objectSpread2.default)({}, args));
+};
+
+var PriorityFlagDefault = Template.bind({});
+exports.PriorityFlagDefault = PriorityFlagDefault;
 PriorityFlagDefault.args = {
   observation: "no observation"
 };

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

@@ -1,101 +1,158 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ObservationFlag = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _axios = _interopRequireDefault(require("axios"));
+
 var _styles = require("./styles");
+
 var _Tooltip = require("../Tooltip");
+
 var _noPriority = _interopRequireDefault(require("../../../assets/images/flags/noPriority.svg"));
+
 var _highPriority = _interopRequireDefault(require("../../../assets/images/flags/highPriority.svg"));
+
 var _mediumPriority = _interopRequireDefault(require("../../../assets/images/flags/mediumPriority.svg"));
+
 var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
+
 var _saveIconpink = _interopRequireDefault(require("../../../assets/images/generalButton/saveIconpink.svg"));
+
 var _Modal = require("../../organisms/Modal");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const ObservationFlag = _ref => {
-  let {
-    observation,
-    contentObservation,
-    dataProduct,
-    isObservationVisible,
-    toggleObservation,
-    // handleClickOutside,
-    hideObservation
-  } = _ref;
-  const PriorityFlags = {
-    ["none"]: _noPriority.default,
-    ["low"]: _lowPriority.default,
-    ["medium"]: _mediumPriority.default,
-    ["high"]: _highPriority.default
-  };
-
-  //const [isObservationVisible, setObservationVisible] = useState(false);
-  const [material, setMaterial] = (0, _react.useState)(contentObservation || "");
-  const [currentObservation, setCurrentObservation] = (0, _react.useState)(observation);
-  const [showModal, setShowModal] = (0, _react.useState)(false);
-  const [modalData, setModalData] = (0, _react.useState)({});
-  const textareaRef = (0, _react.useRef)(null);
-  // const toggleObservation = () => {
+
+var ObservationFlag = function ObservationFlag(_ref) {
+  var _PriorityFlags;
+
+  var observation = _ref.observation,
+      contentObservation = _ref.contentObservation,
+      dataProduct = _ref.dataProduct,
+      isObservationVisible = _ref.isObservationVisible,
+      toggleObservation = _ref.toggleObservation,
+      hideObservation = _ref.hideObservation;
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags); //const [isObservationVisible, setObservationVisible] = useState(false);
+
+  var _useState = (0, _react.useState)(contentObservation || ""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      material = _useState2[0],
+      setMaterial = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(observation),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      currentObservation = _useState4[0],
+      setCurrentObservation = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showModal = _useState6[0],
+      setShowModal = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      modalData = _useState8[0],
+      setModalData = _useState8[1];
+
+  var textareaRef = (0, _react.useRef)(null); // const toggleObservation = () => {
   //   setObservationVisible(!isObservationVisible);
   // };
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = event => {
+
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
       if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
         setObservationVisible(false);
       }
     };
+
     document.addEventListener("click", handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [isObservationVisible]);
-  // useEffect(() => {
+  }, [isObservationVisible]); // useEffect(() => {
   //   document.addEventListener("click", handleClickOutside);
   //   return () => {
   //     document.removeEventListener("click", handleClickOutside);
   //   };
   // }, [isObservationVisible, handleClickOutside]);
 
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setMaterial(contentObservation || "");
   }, [contentObservation]);
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     setCurrentObservation(observation);
   }, [observation]);
-  const saveRequest = async () => {
-    let dataToSend = {
-      orderId: parseInt(dataProduct.orderId),
-      articleId: dataProduct.article.id_article,
-      observation: textareaRef.current.value
+
+  var saveRequest = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var dataToSend, response, succesResponse, errorResponse;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              dataToSend = {
+                orderId: parseInt(dataProduct.orderId),
+                articleId: dataProduct.article.id_article,
+                observation: textareaRef.current.value
+              };
+              _context.prev = 1;
+              _context.next = 4;
+              return _axios.default.put(process.env.REACT_APP_UPDATE_OBSERVATION, dataToSend);
+
+            case 4:
+              response = _context.sent;
+              succesResponse = {
+                status: true,
+                message: "Información guardada correctamente",
+                detail: "",
+                img: true
+              };
+              errorResponse = {
+                status: false,
+                message: "Error al guardar la información",
+                detail: "",
+                img: false
+              };
+              setShowModal(true);
+              setModalData(response.data.statusCode === 200 ? succesResponse : errorResponse);
+              setCurrentObservation(material !== "" ? "high" : "low");
+              hideObservation();
+              return _context.abrupt("return", response);
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](1);
+              console.log(_context.t0);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 14]]);
+    }));
+
+    return function saveRequest() {
+      return _ref2.apply(this, arguments);
     };
-    try {
-      const response = await _axios.default.put(process.env.REACT_APP_UPDATE_OBSERVATION, dataToSend);
-      const succesResponse = {
-        status: true,
-        message: "Información guardada correctamente",
-        detail: "",
-        img: true
-      };
-      const errorResponse = {
-        status: false,
-        message: "Error al guardar la información",
-        detail: "",
-        img: false
-      };
-      setShowModal(true);
-      setModalData(response.data.statusCode === 200 ? succesResponse : errorResponse);
-      setCurrentObservation(material !== "" ? "high" : "low");
-      hideObservation();
-      return response;
-    } catch (err) {
-      console.log(err);
-    }
-  };
+  }();
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -106,12 +163,12 @@ const ObservationFlag = _ref => {
         },
         onClick: toggleObservation
       }), isObservationVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Observation, {
-        onClick: evt => {
+        onClick: function onClick(evt) {
           evt.stopPropagation();
         },
         className: "Observation",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ServTab, {
-          onClick: evt => {
+          onClick: function onClick(evt) {
             evt.stopPropagation();
           },
           className: "close-Container",
@@ -131,11 +188,15 @@ const ObservationFlag = _ref => {
                 padding: "5px"
               },
               value: material,
-              onChange: e => setMaterial(e.target.value),
-              onClick: e => e.stopPropagation()
+              onChange: function onChange(e) {
+                return setMaterial(e.target.value);
+              },
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SaveButton, {
-            onClick: evt => {
+            onClick: function onClick(evt) {
               evt.stopPropagation();
               saveRequest();
             },
@@ -150,8 +211,11 @@ const ObservationFlag = _ref => {
       show: showModal,
       title: modalData.title,
       message: modalData.message,
-      onClickBtnDefault: event => setShowModal(false)
+      onClickBtnDefault: function onClickBtnDefault(event) {
+        return setShowModal(false);
+      }
     })]
   });
 };
+
 exports.ObservationFlag = ObservationFlag;

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

@@ -1,25 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ServTab = exports.SaveButton = exports.Observation = exports.Content = exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* position: relative;\n  height: 100%;\n  width: 100%; */\n"])));
-const Observation = exports.Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n  z-index: 10000;\n"])));
-const Content = exports.Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  & > div {\n    width: 30px;\n    height: 20px;\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    border-radius: 3px;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), _ref => {
-  let {
-    cont
-  } = _ref;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* position: relative;\n  height: 100%;\n  width: 100%; */\n"])));
+
+exports.Container = Container;
+
+var Observation = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  /* height: 100%;\n  width: 100%; */\n  z-index: 10000;\n"])));
+
+exports.Observation = Observation;
+
+var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  width: 100%;\n  & > div {\n    width: 30px;\n    height: 20px;\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    border-radius: 3px;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (_ref) {
+  var cont = _ref.cont;
   return cont === "-" || cont === "Pt" ? "#817393" : "#FFF";
-}, _ref2 => {
-  let {
-    cont
-  } = _ref2;
+}, function (_ref2) {
+  var cont = _ref2.cont;
   return backgroundContent(cont);
 });
-const ServTab = exports.ServTab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 10%;\n  z-index: 2;\n  width: 300px;\n  max-height: 280px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: #281f33;\n  padding: 8px;\n  white-space: normal;\n  font-family: Avenir Next;\n  font-style: normal;\n  > div {\n    background-color: #503d66;\n    margin-bottom: 8px;\n    color: #f0eef2;\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    > span {\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 19px;\n    }\n    > p {\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 16px;\n    }\n  }\n  .flex {\n    display: flex;\n    width: 100%;\n    background-color: #503d6644;\n    margin-left: 0px;\n    p {\n      width: 16%;\n      &:first-child {\n        width: 50%;\n      }\n    }\n  }\n  .title {\n    position: sticky;\n    top: -9px;\n    background-color: #503d66;\n  }\n  .ignore-background {\n    background-color: #1111;\n    margin: 0;\n  }\n"])));
-const SaveButton = exports.SaveButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: sticky;\n  bottom: 0;\n  left: 100%;\n  background-color: #fbfbfb;\n  border: 2px solid #e33aa9;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  cursor: pointer;\n  min-height: initial;\n"])));
+
+exports.Content = Content;
+
+var ServTab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 10%;\n  z-index: 2;\n  width: 300px;\n  max-height: 280px;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: #281f33;\n  padding: 8px;\n  white-space: normal;\n  font-family: Avenir Next;\n  font-style: normal;\n  > div {\n    background-color: #503d66;\n    margin-bottom: 8px;\n    color: #f0eef2;\n    box-sizing: border-box;\n    padding: 8px;\n    text-align: left;\n    > span {\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 19px;\n    }\n    > p {\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 16px;\n    }\n  }\n  .flex {\n    display: flex;\n    width: 100%;\n    background-color: #503d6644;\n    margin-left: 0px;\n    p {\n      width: 16%;\n      &:first-child {\n        width: 50%;\n      }\n    }\n  }\n  .title {\n    position: sticky;\n    top: -9px;\n    background-color: #503d66;\n  }\n  .ignore-background {\n    background-color: #1111;\n    margin: 0;\n  }\n"])));
+
+exports.ServTab = ServTab;
+
+var SaveButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: sticky;\n  bottom: 0;\n  left: 100%;\n  background-color: #fbfbfb;\n  border: 2px solid #e33aa9;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  cursor: pointer;\n  min-height: initial;\n"])));
+
+exports.SaveButton = SaveButton;

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

@@ -1,19 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PercentTagDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _ = require(".");
+
 var _jsxRuntime = require("react/jsx-runtime");
-var _default = exports.default = {
+
+var _default = {
   title: "Components/atoms/PercentTag",
   component: _.PercentTag
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PercentTag, {
-  ...args
-});
-const PercentTagDefault = exports.PercentTagDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PercentTag, (0, _objectSpread2.default)({}, args));
+};
+
+var PercentTagDefault = Template.bind({});
+exports.PercentTagDefault = PercentTagDefault;
 PercentTagDefault.args = {
   percent: 88,
   progressBarType: "AA"

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

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PercentTag = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const PercentTag = _ref => {
-  let {
-    percent,
-    progressBarType
-  } = _ref;
+
+var PercentTag = function PercentTag(_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", {
@@ -18,4 +19,5 @@ const PercentTag = _ref => {
     })
   });
 };
+
 exports.PercentTag = PercentTag;

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

@@ -1,12 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Container = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _variables = require("../../../global-files/variables");
+
 var _templateObject;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: inline-block;\n  padding: 0 10px;\n  border-radius: 5px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 20px;\n  color: ", ";\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\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.Lato, backgroundColor => 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  display: inline-block;\n  padding: 0 10px;\n  border-radius: 5px;\n  font-family: ", ";\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 20px;\n  color: ", ";\n\n  &.status-CA,\n  &.status-IE {\n    background-color: ", ";\n  }\n\n  &.status-R,\n  &.status-AS,\n  &.status-PA {\n    background-color: ", ";\n  }\n\n  &.status-AA,\n  &.status-AP,\n  &.status-ACA,\n  &.status-AC {\n    background-color: ", ";\n  }\n\n  &.status-RA,\n  &.status-RC,\n  &.status-RP,\n  &.status-RCA {\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.Lato, 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);
+
+exports.Container = Container;