contentoh-components-library 21.4.102 → 21.4.104

package/dist/components/organisms/OrderDetail/utils/Table/styles.js

@@ -1,33 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Rows = exports.Header = exports.Column = void 0;
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _templateObject, _templateObject2, _templateObject3;
-const Header = exports.Header = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 35px;\n  width: 100%;\n  border-radius: 5px 5px 0px 0px;\n  background: #f0f0f0;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"])));
-const Column = exports.Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 35px;\n  width: ", ";\n  padding: 10px 15px;\n  font-family: Roboto;\n  font-size: 12px;\n  color: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  .flex {\n    display: flex;\n  }\n  .material-icons.small {\n    font-size: 18px;\n    color: #b3b3b3;\n  }\n  .center {\n    margin: auto;\n  }\n  &:nth-child(-n + 2) {\n    overflow: hidden;\n  }\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip .tooltiptext {\n    visibility: hidden;\n    background-color: #fff;\n    color: black;\n    text-align: center;\n    padding: 5px 0;\n    border-radius: 3px;\n\n    position: absolute;\n    z-index: 1;\n    top: -8px;\n    left: 3px;\n    font-family: Roboto;\n    font-size: 10px;\n    padding: 2px 5px;\n  }\n\n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n  }\n"])), _ref => {
-  let {
-    width
-  } = _ref;
+
+var Header = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 35px;\n  width: 100%;\n  border-radius: 5px 5px 0px 0px;\n  background: #f0f0f0;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"])));
+
+exports.Header = Header;
+
+var Column = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 35px;\n  width: ", ";\n  padding: 10px 15px;\n  font-family: Roboto;\n  font-size: 12px;\n  color: ", ";\n  font-weight: ", ";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  .flex {\n    display: flex;\n  }\n  .material-icons.small {\n    font-size: 18px;\n    color: #b3b3b3;\n  }\n  .center {\n    margin: auto;\n  }\n  &:nth-child(-n + 2) {\n    overflow: hidden;\n  }\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip .tooltiptext {\n    visibility: hidden;\n    background-color: #fff;\n    color: black;\n    text-align: center;\n    padding: 5px 0;\n    border-radius: 3px;\n\n    position: absolute;\n    z-index: 1;\n    top: -8px;\n    left: 3px;\n    font-family: Roboto;\n    font-size: 10px;\n    padding: 2px 5px;\n  }\n\n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n  }\n"])), function (_ref) {
+  var width = _ref.width;
   return "".concat(width, "px");
-}, _ref2 => {
-  let {
-    isHeader
-  } = _ref2;
+}, function (_ref2) {
+  var isHeader = _ref2.isHeader;
   return isHeader ? "#262626" : "#707070";
-}, _ref3 => {
-  let {
-    isHeader
-  } = _ref3;
+}, function (_ref3) {
+  var isHeader = _ref3.isHeader;
   return isHeader ? "600" : "500";
 });
-const Rows = exports.Rows = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  background: ", ";\n  overflow-y: auto;\n  &:hover {\n    cursor: pointer;\n    background: #d4d1d7;\n  }\n"])), _ref4 => {
-  let {
-    index
-  } = _ref4;
+
+exports.Column = Column;
+
+var Rows = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  background: ", ";\n  overflow-y: auto;\n  &:hover {\n    cursor: pointer;\n    background: #d4d1d7;\n  }\n"])), function (_ref4) {
+  var index = _ref4.index;
   return index % 2 === 0 ? "#FFFFFF" : "#FAFAFA";
-});
+});
+
+exports.Rows = Rows;

package/dist/components/organisms/OrderDetail/utils/Table/utils.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.servicesCodeIcon = void 0;
+
 var _jsxRuntime = require("react/jsx-runtime");
-const servicesCodeIcon = exports.servicesCodeIcon = {
+
+var servicesCodeIcon = {
   datasheet: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "tooltip",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -56,4 +58,5 @@ const servicesCodeIcon = exports.servicesCodeIcon = {
       children: "Construcci\xF3n"
     })]
   }, "build")
-};
+};
+exports.servicesCodeIcon = servicesCodeIcon;

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

@@ -1,25 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PanelLayoutDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _ButtonV = require("../../atoms/ButtonV2");
+
 var _index = require("./index");
+
 var _jsxRuntime = require("react/jsx-runtime");
+
 var _templateObject;
-const TwoColumns = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  width: 100%;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 85% 15%;\n  grid-template-rows: 100%;\n  gap: 0px 10px;\n  grid-template-areas: \"first second\";\n  .first {\n    grid-area: first;\n    width: 100%;\n    margin-left: 50px;\n    display: flex;\n  }\n  .second {\n    grid-area: second;\n    width: 100%;\n  }\n"])));
-var _default = exports.default = {
+
+var TwoColumns = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  width: 100%;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 85% 15%;\n  grid-template-rows: 100%;\n  gap: 0px 10px;\n  grid-template-areas: \"first second\";\n  .first {\n    grid-area: first;\n    width: 100%;\n    margin-left: 50px;\n    display: flex;\n  }\n  .second {\n    grid-area: second;\n    width: 100%;\n  }\n"])));
+
+var _default = {
   title: "Components/organisms/PanelLayout",
   component: _index.PanelLayout
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PanelLayout, {
-  ...args
-});
-const PanelLayoutDefault = exports.PanelLayoutDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PanelLayout, (0, _objectSpread2.default)({}, args));
+};
+
+var PanelLayoutDefault = Template.bind({});
+exports.PanelLayoutDefault = PanelLayoutDefault;
 PanelLayoutDefault.args = {
   header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

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

@@ -4,15 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PanelLayout = void 0;
+
 var _styles = require("./styles");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const PanelLayout = _ref => {
-  let {
-    header,
-    children,
-    footer,
-    className
-  } = _ref;
+
+var PanelLayout = function PanelLayout(_ref) {
+  var header = _ref.header,
+      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, {
@@ -24,4 +25,5 @@ const PanelLayout = _ref => {
     }) : null]
   });
 };
+
 exports.PanelLayout = PanelLayout;

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

@@ -1,15 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Header = exports.Footer = exports.Container = exports.Body = 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, _templateObject2, _templateObject3, _templateObject4;
-const Container = exports.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);
-const Header = exports.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: header;\n  background: #8a6caa;\n  color: #ffffff;\n  border-radius: 5px 5px 0px 0px;\n  display: flex;\n  align-items: center;\n"])));
-const Body = exports.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"])));
-const Footer = exports.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"])));
+
+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;
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: header;\n  background: #8a6caa;\n  color: #ffffff;\n  border-radius: 5px 5px 0px 0px;\n  display: flex;\n  align-items: center;\n"])));
+
+exports.Header = Header;
+
+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  display: flex;\n  align-items: center;\n  border: 1px solid #f0f0f0;\n  border-radius: 0 0 5px 5px;\n"])));
+
+exports.Footer = Footer;

package/dist/components/organisms/ProductImageModal/ProductImageModal.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.ProductImageModalDefault = 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/organisms/ProductImageModal",
   component: _index.ProductImageModal
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModal, {
-  ...args
-});
-const ProductImageModalDefault = exports.ProductImageModalDefault = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModal, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductImageModalDefault = Template.bind({});
+exports.ProductImageModalDefault = ProductImageModalDefault;
 ProductImageModalDefault.args = {
   headerInfo: {},
   images: {

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

@@ -1,37 +1,65 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProductImageModal = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _ProductImage = require("../../atoms/ProductImage");
+
 var _ImageDataTable = require("../ImageDataTable");
+
 var _ImageSelector = require("../../molecules/ImageSelector");
+
 var _react = require("react");
+
 var _ValidationPanel = require("../../atoms/ValidationPanel");
+
 var _GeneralButton = require("../../atoms/GeneralButton");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const ProductImageModal = _ref => {
+
+var ProductImageModal = function ProductImageModal(_ref) {
   var _images$values$active, _images$values$active2, _images$values$active3;
-  let {
-    images = [],
-    headerInfo,
-    validation,
-    setShowModal,
-    sendToFacilitator,
-    approveRejectButtons = false
-  } = _ref;
-  const [activeImage, setActiveImage] = (0, _react.useState)(0);
-  const [buttonType, setButtonType] = (0, _react.useState)(validation ? validation : "null-button");
-  const [showValidationPanel, setShowValidationPanel] = (0, _react.useState)(false);
-  const closeValidationPanel = e => {
+
+  var _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images,
+      headerInfo = _ref.headerInfo,
+      validation = _ref.validation,
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator,
+      _ref$approveRejectBut = _ref.approveRejectButtons,
+      approveRejectButtons = _ref$approveRejectBut === void 0 ? false : _ref$approveRejectBut;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeImage = _useState2[0],
+      setActiveImage = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(validation ? validation : "null-button"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      buttonType = _useState4[0],
+      setButtonType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showValidationPanel = _useState6[0],
+      setShowValidationPanel = _useState6[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
     if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
       document.removeEventListener("click", closeValidationPanel, false);
       setShowValidationPanel(false);
     }
   };
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)(function () {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
     }
@@ -54,18 +82,24 @@ const ProductImageModal = _ref => {
             className: "validation-panel",
             children: [approveRejectButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
               buttonType: "circular-button ".concat(buttonType),
-              onClick: () => setShowValidationPanel(true)
+              onClick: function onClick() {
+                return setShowValidationPanel(true);
+              }
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
               buttonType: "close-button",
-              onClick: () => {
+              onClick: function onClick() {
                 setShowModal(false);
               }
             }), showValidationPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ValidationPanel.ValidationPanel, {
               id: "validation-panel",
               setOptionClicked: setButtonType,
               setShowValidationPanel: setShowValidationPanel,
-              approve: () => sendToFacilitator && sendToFacilitator("A"),
-              reject: () => sendToFacilitator && sendToFacilitator("R")
+              approve: function approve() {
+                return sendToFacilitator && sendToFacilitator("A");
+              },
+              reject: function reject() {
+                return sendToFacilitator && sendToFacilitator("R");
+              }
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
             imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
@@ -83,4 +117,5 @@ const ProductImageModal = _ref => {
     })
   });
 };
+
 exports.ProductImageModal = ProductImageModal;

package/dist/components/organisms/ProductImageModal/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  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      background-color: ", ";\n\n      .validation-and-table-container {\n        .validation-panel {\n          position: relative;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          .close-button {\n            border-radius: 3px;\n            width: 30px;\n            height: 30px;\n            padding: 0;\n            border: 1px solid #f0eef2;\n            background-size: 30px;\n          }\n\n          & + * {\n            margin-top: 25px;\n          }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.deep_gray);
+
+exports.Container = Container;

package/dist/components/organisms/ProductImageModalv2/ProductImageModalv2.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.ProductImageModalv2Default = 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/organisms/ProductImageModalv2",
   component: _index.ProductImageModalv2
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModalv2, {
-  ...args
-});
-const ProductImageModalv2Default = exports.ProductImageModalv2Default = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductImageModalv2, (0, _objectSpread2.default)({}, args));
+};
+
+var ProductImageModalv2Default = Template.bind({});
+exports.ProductImageModalv2Default = ProductImageModalv2Default;
 ProductImageModalv2Default.args = {
   headerInfo: {},
   images: {

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

@@ -1,37 +1,65 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ProductImageModalv2 = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _styles = require("./styles");
+
 var _react = require("react");
+
 var _ValidationPanel = require("../../atoms/ValidationPanel");
+
 var _index = require("../../atoms/GeneralButton/index");
+
 var _ProductImagev = require("../../atoms/ProductImagev2");
+
 var _ImageSelectorv = require("../../molecules/ImageSelectorv2");
+
 var _ImageDataTablev = require("../ImageDataTablev2");
+
 var _jsxRuntime = require("react/jsx-runtime");
-const ProductImageModalv2 = _ref => {
+
+var ProductImageModalv2 = function ProductImageModalv2(_ref) {
   var _images$values$active, _images$values$active2, _images$values$active3;
-  let {
-    images = [],
-    headerInfo,
-    validation,
-    setShowModal,
-    sendToFacilitator,
-    approveRejectButtons = false
-  } = _ref;
-  const [activeImage, setActiveImage] = (0, _react.useState)(0);
-  const [buttonType, setButtonType] = (0, _react.useState)(validation ? validation : "null-button");
-  const [showValidationPanel, setShowValidationPanel] = (0, _react.useState)(false);
-  const closeValidationPanel = e => {
+
+  var _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images,
+      headerInfo = _ref.headerInfo,
+      validation = _ref.validation,
+      setShowModal = _ref.setShowModal,
+      sendToFacilitator = _ref.sendToFacilitator,
+      _ref$approveRejectBut = _ref.approveRejectButtons,
+      approveRejectButtons = _ref$approveRejectBut === void 0 ? false : _ref$approveRejectBut;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeImage = _useState2[0],
+      setActiveImage = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(validation ? validation : "null-button"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      buttonType = _useState4[0],
+      setButtonType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showValidationPanel = _useState6[0],
+      setShowValidationPanel = _useState6[1];
+
+  var closeValidationPanel = function closeValidationPanel(e) {
     if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
       document.removeEventListener("click", closeValidationPanel, false);
       setShowValidationPanel(false);
     }
   };
-  (0, _react.useEffect)(() => {
+
+  (0, _react.useEffect)(function () {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
     }
@@ -54,7 +82,7 @@ const ProductImageModalv2 = _ref => {
             className: "validation-panel",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
               buttonType: "general-white-button close-button-white",
-              onClick: () => {
+              onClick: function onClick() {
                 setShowModal(false);
               }
             })
@@ -74,4 +102,5 @@ const ProductImageModalv2 = _ref => {
     })
   });
 };
+
 exports.ProductImageModalv2 = ProductImageModalv2;

package/dist/components/organisms/ProductImageModalv2/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  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      gap: 25px;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      \n      h2 {\n        color: ", ";\n      }\n\n      .validation-and-table-container {\n        .validation-panel {\n          width: 100%;\n          height: 44px;\n          background-color: rgba(38,38,38,0.3);\n          padding: 0 10px;\n          position: absolute;\n          top:0;\n          right:0;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          button{\n            width: 24px;\n            height: 24px;\n            border: 1px solid #f0f0f0;\n            background-size: 12px;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          }\n\n          // & + * {\n          //   margin-top: 25px;\n          // }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.gray);
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n  width: 100%;\n  overflow: auto;\n  position: fixed;\n  background-color: rgba(59, 59, 59, 0.53);\n  backdrop-filter: blur(4px);\n  left: 0;\n  top: 0;\n  z-index: 100;\n\n  .modal-container {\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n\n    .modal-data-container {\n      display: flex;\n      flex-direction: column;\n      gap: 25px;\n      align-items: center;\n      padding: 15px;\n      min-width: 375px;\n      \n      h2 {\n        color: ", ";\n      }\n\n      .validation-and-table-container {\n        .validation-panel {\n          width: 100%;\n          height: 44px;\n          background-color: rgba(38,38,38,0.3);\n          padding: 0 10px;\n          position: absolute;\n          top:0;\n          right:0;\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          .circular-button {\n            & + * {\n              margin-left: 10px;\n            }\n          }\n\n          button{\n            width: 24px;\n            height: 24px;\n            border: 1px solid #f0f0f0;\n            background-size: 12px;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          }\n\n          // & + * {\n          //   margin-top: 25px;\n          // }\n        }\n      }\n    }\n  }\n"])), _variables.GlobalColors.gray);
+
+exports.Container = Container;

package/dist/components/organisms/RangeCalendar/RangeCalendar.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.DefaultRangeCalendar = 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/organisms/RangeCalendar",
   component: _.RangeCalendar
 };
-const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RangeCalendar, {
-  ...args
-});
-const DefaultRangeCalendar = exports.DefaultRangeCalendar = Template.bind({});
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RangeCalendar, (0, _objectSpread2.default)({}, args));
+};
+
+var DefaultRangeCalendar = Template.bind({});
+exports.DefaultRangeCalendar = DefaultRangeCalendar;
 DefaultRangeCalendar.args = {
   currentDates: {
     start: "2022-12-15T00:00:00.000Z",