contentoh-components-library 21.0.11 → 21.0.12

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

@@ -11,15 +11,13 @@ var _styles = require("./styles");
 
 var _logoLogin = _interopRequireDefault(require("../../../assets/images/logo/logoLogin.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var LogoImage = function LogoImage() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: _logoLogin.default,
-      alt: "logo"
-    })
-  }, "logo");
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "logo"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _logoLogin.default,
+    alt: "logo"
+  }));
 };
 
 exports.LogoImage = LogoImage;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuCommercialRetailersDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/atoms/MenuCommercialRetailers",
+  component: _index.MenuCommercialRetailers
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
+};
+
+var MenuCommercialRetailersDefault = Template.bind({});
+exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
+MenuCommercialRetailersDefault.args = {
+  editType: "3",
+  retailersAvailable: [{
+    id: 54,
+    name: "Construrama",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 4,
+    name: "Walmart Super y Superama"
+  }, {
+    id: 6,
+    name: "HEB"
+  }]
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuCommercialRetailers = void 0;
+
+var _styles = require("./styles");
+
+var _StatusTag = require("../StatusTag");
+
+var _ListCommercialRetailers = require("../ListCommercialRetailers");
+
+var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
+  var editType = _ref.editType,
+      retailersAvailable = _ref.retailersAvailable;
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
+    editType: editType,
+    ovalForm: true
+  }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
+    retailersAvailable: retailersAvailable
+  }));
+};
+
+exports.MenuCommercialRetailers = MenuCommercialRetailers;

package/dist/components/{molecules/RetailerSelector → atoms/MenuCommercialRetailers}/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  position: relative;\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

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

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

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

@@ -13,29 +13,23 @@ var _menuNotificationComment = _interopRequireDefault(require("../../../assets/i
 
 var _menuNotificationProduct = _interopRequireDefault(require("../../../assets/images/menuNotification/menuNotificationProduct.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var MenuNotification = function MenuNotification(_ref) {
   var content = _ref.content;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    id: "menu-notification",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: "overall-list",
-      children: content === null || content === void 0 ? void 0 : content.map(function (item, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          onClick: function onClick() {
-            console.log(item.label);
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: (content === null || content === void 0 ? void 0 : content.notificationType) === "productComment" ? _menuNotificationComment.default : _menuNotificationProduct.default,
-            alt: item.label
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: item.label
-          })]
-        }, index);
-      })
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    id: "menu-notification"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "overall-list"
+  }, content === null || content === void 0 ? void 0 : content.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      onClick: function onClick() {
+        console.log(item.label);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: (content === null || content === void 0 ? void 0 : content.notificationType) === "productComment" ? _menuNotificationComment.default : _menuNotificationProduct.default,
+      alt: item.label
+    }), " ", /*#__PURE__*/React.createElement("p", null, item.label));
+  })));
 };
 
 exports.MenuNotification = MenuNotification;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuProductImageDefault = void 0;
+
+var _index = require("./index");
+
+var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
+
+var _default = {
+  title: "Components/atoms/MenuProductImage",
+  component: _index.MenuProductImage
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
+};
+
+var MenuProductImageDefault = Template.bind({});
+exports.MenuProductImageDefault = MenuProductImageDefault;
+MenuProductImageDefault.args = {
+  ProductImg: _menuProductImage.default
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuProductImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
+
+var _react = require("react");
+
+var _index = require("../LoadImageMenu/index");
+
+var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
+
+var MenuProductImage = function MenuProductImage(_ref) {
+  var ProductImg = _ref.ProductImg;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var closeMenu = function closeMenu(e) {
+    if (!e.target.closest(".menu-upload-product") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: "div-upload-image"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "profile-image",
+    src: ProductImg,
+    alt: "Product Image"
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick(event) {
+      if (!showMenu) {
+        setShowMenu(true);
+      } else if (showMenu && !event.target.closest(".menu-upload-product")) {
+        setShowMenu(false);
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: "upload-image-button " + (showMenu && "show-menu-upload-image")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
+    alt: "Product Image Button"
+  })), showMenu && /*#__PURE__*/React.createElement("div", {
+    className: "menu-upload-product"
+  }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de empaque ",
+    product: "Producto expuesto",
+    content: [{
+      label: "Enbalaje adicional - 0"
+    }, {
+      label: "En paquete - 1"
+    }, {
+      label: "Producto expuesto - 2"
+    }, {
+      label: "Embalaje multiforme - 3"
+    }, {
+      label: "Si no es una imagen / no corresponde - X"
+    }],
+    id: "menu-packaging-type"
+  }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
+    tipo: "Tipo de imagen ",
+    product: "Render",
+    content: [{
+      label: "fotografía del producto"
+    }],
+    id: "menu-image-type"
+  })));
+};
+
+exports.MenuProductImage = MenuProductImage;

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

@@ -0,0 +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;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  .profile-image {\n    width: 23px;\n    height: 23px;\n    & + * {\n      margin-left: 8px;\n    }\n  }\n  .upload-image-button {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 2px;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    height: 30px;\n    width: 15px;\n    left: 100%;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n    &.show-menu-upload-image {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n  .menu-upload-product {\n    background: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border-radius: 7px;\n    width: 324px;\n    padding: 8px 0px;\n    position: absolute;\n    right: 0%;\n    z-index: 1;\n    top: 30px;\n    button {\n      left: 0%;\n      border-radius: 7px;\n      span,\n      .tipo {\n        color: ", ";\n      }\n      .products {\n        color: ", ";\n      }\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.GlobalColors.s5, _variables.GlobalColors.s4);
+
+exports.Container = Container;

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

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

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

@@ -15,8 +15,6 @@ var _settings = _interopRequireDefault(require("../../../assets/images/menuProfi
 
 var _logOut = _interopRequireDefault(require("../../../assets/images/menuProfile/logOut.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var MenuProfile = function MenuProfile(_ref) {
   var user = _ref.user;
   var content = [{
@@ -29,29 +27,21 @@ var MenuProfile = function MenuProfile(_ref) {
     icon: _logOut.default,
     label: "Cerrar sesión"
   }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    id: "menu-profile",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: user
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: "overall-list",
-      children: content.map(function (item, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-          onClick: function onClick() {
-            console.log(item.label);
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            src: item.icon,
-            alt: item.label
-          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: item.label
-          })]
-        }, index);
-      })
-    })]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    id: "menu-profile"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, user)), /*#__PURE__*/React.createElement("ul", {
+    className: "overall-list"
+  }, content.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index,
+      onClick: function onClick() {
+        console.log(item.label);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.icon,
+      alt: item.label
+    }), " ", /*#__PURE__*/React.createElement("p", null, item.label));
+  })));
 };
 
 exports.MenuProfile = MenuProfile;

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

@@ -7,14 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 = {
   title: "Components/atoms/Notification",
   component: _index.Notification
@@ -22,7 +18,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Notification, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.Notification, args);
 };
 
 var NotificationDefault = Template.bind({});

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

@@ -9,25 +9,19 @@ var _styles = require("./styles");
 
 var _index = require("../../atoms/Avatar/index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 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, {
-      image: profilePicture,
-      imageType: "profile-image",
-      altText: "Profile Picture"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      children: newNotification ? "Notificación nueva" : "Notificación vista"
-    }), notification ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      className: "bolder",
-      children: notification
-    }) : "ODT 23441244"]
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: newNotification && "new-notification"
+  }, /*#__PURE__*/React.createElement(_index.Avatar, {
+    image: profilePicture,
+    imageType: "profile-image",
+    altText: "Profile Picture"
+  }), /*#__PURE__*/React.createElement("p", null, newNotification ? "Notificación nueva" : "Notificación vista"), notification ? /*#__PURE__*/React.createElement("p", {
+    className: "bolder"
+  }, notification) : "ODT 23441244");
 };
 
 exports.Notification = Notification;

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

@@ -1,18 +1,12 @@
 "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 = {
   title: "Components/atoms/PriorityFlag",
   component: _index.PriorityFlag,
@@ -28,7 +22,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PriorityFlag, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.PriorityFlag, args);
 };
 
 var PriorityFlagDefault = Template.bind({});

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

@@ -19,19 +19,15 @@ var _mediumPriority = _interopRequireDefault(require("../../../assets/images/fla
 
 var _lowPriority = _interopRequireDefault(require("../../../assets/images/flags/lowPriority.svg"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var PriorityFlag = function PriorityFlag(_ref) {
   var _PriorityFlags;
 
   var priority = _ref.priority;
-  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);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: PriorityFlags[priority],
-      alt: priority
-    })
-  });
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "no priority", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags);
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("img", {
+    src: PriorityFlags[priority],
+    alt: priority
+  }));
 };
 
 exports.PriorityFlag = PriorityFlag;

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

@@ -1,18 +1,12 @@
 "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 = {
   title: "Components/atoms/ProductImage",
   component: _.ProductImage,
@@ -28,7 +22,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ProductImage, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_.ProductImage, args);
 };
 
 exports.Template = Template;

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

@@ -13,22 +13,19 @@ var _reactImageFallback = _interopRequireDefault(require("react-image-fallback")
 
 var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var ProductImage = function ProductImage(_ref) {
   var img = _ref.img,
       imageType = _ref.imageType,
       altText = _ref.altText,
       onClick = _ref.onClick;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: imageType,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
-      src: img,
-      fallbackImage: _defaultProductImage.default,
-      alt: altText,
-      onClick: onClick
-    })
-  });
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    className: imageType
+  }, /*#__PURE__*/React.createElement(_reactImageFallback.default, {
+    src: img,
+    fallbackImage: _defaultProductImage.default,
+    alt: altText,
+    onClick: onClick
+  }));
 };
 
 exports.ProductImage = ProductImage;

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

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img {\n    object-fit: contain;\n  }\n\n  &.carousel-image {\n    img {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    img {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n\n    img {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n\n  img {\n    object-fit: cover;\n  }\n\n  &.carousel-image {\n    img {\n      width: 85px;\n      height: 55px;\n      cursor: pointer;\n    }\n\n    & + * {\n      margin-left: 1px;\n    }\n  }\n\n  &.main-image {\n    img {\n      width: 340px;\n      height: 295px;\n    }\n  }\n\n  &.catalogue-image-big-size {\n    img {\n      width: 179px;\n      height: 179px;\n    }\n  }\n\n  &.catalogue-image-small-size {\n    img {\n      width: 60px;\n      height: 60px;\n    }\n  }\n\n  &.catalogue-modal-image {\n    flex: 1 0 50%;\n    cursor: pointer;\n\n    img {\n      width: 168px;\n      height: 108px;\n    }\n  }\n\n  &.expanded-modal-image {\n    width: 710px;\n    height: 710px;\n\n    img {\n      width: 710px;\n      height: 710px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/atoms/ProductPercentCard/Percent.stories.js

@@ -1,18 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ProductPercentCardDefault = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
 var _index = require("./index");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
 var status = ["-", "Pr", "Rc", "As", "P", "QF", "AF", "AA", "AP", "AC", "RA", "RF", "RP", "RC", "Ex"];
 var _default = {
   title: "Components/atoms/ProductPercentCard",
@@ -29,7 +23,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ProductPercentCard, (0, _objectSpread2.default)({}, args));
+  return /*#__PURE__*/React.createElement(_index.ProductPercentCard, args);
 };
 
 var ProductPercentCardDefault = Template.bind({});