contentoh-components-library 6.0.0 → 7.0.0

package/dist/components/molecules/GalleryHeader/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalleryHeader = void 0;
+
+var _styles = require("./styles");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var GalleryHeader = function GalleryHeader() {
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_CheckBox.CheckBox, null)), /*#__PURE__*/React.createElement("p", {
+    className: "image-header"
+  }, "Image"), /*#__PURE__*/React.createElement("p", {
+    className: "image-name"
+  }, "Nombre"), /*#__PURE__*/React.createElement("p", {
+    className: "image-size"
+  }, "Tama\xF1o"), /*#__PURE__*/React.createElement("p", {
+    className: "image-format"
+  }, "Formato"), /*#__PURE__*/React.createElement("p", {
+    className: ""
+  }, "Tipo de toma"), /*#__PURE__*/React.createElement("p", {
+    className: ""
+  }, "Tipo de imagen"), /*#__PURE__*/React.createElement("p", {
+    className: ""
+  }, "Tipo de empaque"));
+};
+
+exports.GalleryHeader = GalleryHeader;

package/dist/components/molecules/GalleryHeader/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  padding: 10px;\n  padding-left: 0;\n  align-items: center;\n\n  p {\n    font-family: ", ";\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n    flex: 1;\n    text-align: center;\n\n    &.value-header {\n      max-width: 60px;\n    }\n\n    &.image-header {\n      max-width: 60px;\n    }\n\n    &.image-name {\n      min-width: 20%;\n    }\n\n    &.image-format {\n      max-width: 60px;\n    }\n\n    &.image-size {\n      max-width: 90px;\n    }\n\n    &.image-identifier {\n      max-width: 80px;\n    }\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5);
+
+exports.Container = Container;

package/dist/components/molecules/ImageSelector/index.js

@@ -10,22 +10,25 @@ var _styles = require("./styles");
 var _index = require("../../atoms/ProductImage/index");
 
 var ImageSelector = function ImageSelector(_ref) {
-  var images = _ref.images,
+  var _images$values;
+
+  var _ref$images = _ref.images,
+      images = _ref$images === void 0 ? [] : _ref$images,
       setActiveImage = _ref.setActiveImage,
       modalSelector = _ref.modalSelector;
   return /*#__PURE__*/React.createElement(_styles.Container, {
     className: modalSelector && "modal-image-selector"
-  }, images.length > 0 && (images === null || images === void 0 ? void 0 : images.map(function (image, index) {
+  }, 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(_index.ProductImage, {
       key: index,
-      img: image.img,
+      img: image.src,
       altText: image.altText,
       imageType: modalSelector ? "catalogue-modal-image" : "carousel-image",
       onClick: function onClick() {
-        return setActiveImage(images[index]);
+        return setActiveImage(index);
       }
     });
-  })));
+  }));
 };
 
 exports.ImageSelector = ImageSelector;

package/dist/components/molecules/ParentComponent/ParentComponent.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ParentComponentDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ParentComponent",
+  component: _index.ParentComponent,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(_index.ParentComponent, null, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ParentComponent, args);
+};
+
+var ParentComponentDefault = Template.bind({});
+exports.ParentComponentDefault = ParentComponentDefault;
+ParentComponentDefault.args = {};

package/dist/components/molecules/ParentComponent/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParentComponent = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../SidebarNotification/index");
+
+var _react = require("react");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var ParentComponent = function ParentComponent() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showSidebar = _useState2[0],
+      setShowSidebar = _useState2[1];
+
+  var array = [{
+    dates: "2/16/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/14/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }, {
+    dates: "2/17/2022",
+    notifications: [{
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }, {
+      profilePicture: _defaultProfileImage.default,
+      notification: "ODT 23441244",
+      newNotification: true
+    }]
+  }];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, showSidebar && /*#__PURE__*/React.createElement(_index.SidebarNotification, {
+    array: array,
+    showSidebar: showSidebar,
+    setShowSidebar: setShowSidebar
+  }));
+};
+
+exports.ParentComponent = ParentComponent;

package/dist/components/molecules/ParentComponent/styles.js

@@ -0,0 +1,18 @@
+"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 _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  height: 100vh;\n  width: 100%;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/PayMethod/PayMethod.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PayMethodDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/PayMethod",
+  component: _index.PayMethod
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.PayMethod, args);
+};
+
+var PayMethodDefault = Template.bind({});
+exports.PayMethodDefault = PayMethodDefault;
+PayMethodDefault.args = {};

package/dist/components/molecules/PayMethod/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PayMethod = void 0;
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _Card = require("../../atoms/Card");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _masterCardIcon = _interopRequireDefault(require("../../../assets/images/card/masterCardIcon.svg"));
+
+var PayMethod = function PayMethod(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    key: "pay"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "master"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    headerType: "input-name-header",
+    text: "Agrega tarjeta de credito"
+  }), /*#__PURE__*/React.createElement(_Card.Card, {
+    cardIcon: _masterCardIcon.default,
+    altText: "master-card-icon"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-number"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Número de tarjeta de credito",
+    inputPlaceHolder: "1234 5678 1234 5678"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "card-data"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Nombre del titular",
+    inputPlaceHolder: "Bart Simpson"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "Expira",
+    inputPlaceHolder: "22/27"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    label: "CVV",
+    inputPlaceHolder: "***"
+  })));
+};
+
+exports.PayMethod = PayMethod;

package/dist/components/molecules/PayMethod/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  border: 2px solid ", ";\n  border-radius: 7px;\n  padding: 15px 25px;\n\n  .card-number{ \n    & + * {\n        margin-top: 5px;\n      }\n  }\n  .master {\n    display: flex;\n    justify-content: space-between;\n  }\n  .card-data {\n    display: flex;\n    justify-content: space-between;\n    .input-container {\n      flex: 1;\n      &:first-child {\n        flex: 3;\n      }\n      & + * {\n        margin-left: 10px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/PlanSelection/PlanSelection.stories.js

@@ -7,9 +7,6 @@ exports.default = exports.PlanSelectionDefault = void 0;
 
 var _index = require("./index");
 
-// import { number } from "prop-types";
-// import { GeneralTextBox } from "../../atoms/GeneralTextBox";
-// import { GeneralTextBoxDefault } from "../../atoms/GeneralTextBox/GeneralTextBox.stories";
 var _default = {
   title: "Components/molecules/PlanSelection",
   component: _index.PlanSelection

package/dist/components/molecules/PlanSelection/index.js

@@ -22,7 +22,7 @@ var PlanSelection = function PlanSelection(_ref) {
     setbuttonActive(true);
   };
 
-  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection.map(function (plan, index) {
+  return /*#__PURE__*/React.createElement(_styles.Container, null, planSelection === null || planSelection === void 0 ? void 0 : planSelection.map(function (plan, index) {
     return /*#__PURE__*/React.createElement(_index.GeneralTextBox, {
       className: "button-plan",
       onClick: function onClick(e) {

package/dist/components/molecules/PlanSelection/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  display: grid;\n  row-gap: 30px;\n  column-gap: 30px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  row-gap: 15px;\n  column-gap: 15px;\n  grid-template-columns: repeat(3, 1fr);\n  button:nth-child(4) {\n    grid-column-start: 1;\n    grid-column-end: 4;\n  }\n  & + * {\n    margin-top: 90px;\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/ProductNameHeader/index.js

@@ -19,7 +19,6 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
   var productName = _ref.productName,
       statusType = _ref.statusType,
       percent = _ref.percent,
-      backgroundColor = _ref.backgroundColor,
       priority = _ref.priority,
       date = _ref.date;
   return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
@@ -29,7 +28,7 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
     statusType: statusType
   }), /*#__PURE__*/React.createElement(_index3.ProgressBar, {
     percent: percent,
-    backgroundColor: backgroundColor
+    progressBarType: statusType
   }), /*#__PURE__*/React.createElement(_index4.PriorityFlag, {
     priority: priority
   }), /*#__PURE__*/React.createElement(_index.ScreenHeader, {

package/dist/components/molecules/ProductNotification/ProductNotification.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProductNotificationDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/ProductNotification",
+  component: _index.ProductNotification
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ProductNotification, args);
+};
+
+var ProductNotificationDefault = Template.bind({});
+exports.ProductNotificationDefault = ProductNotificationDefault;
+ProductNotificationDefault.args = {
+  notification: false
+};

package/dist/components/molecules/ProductNotification/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductNotification = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Avatar/index");
+
+var _react = require("react");
+
+var _MenuNotification = require("../../atoms/MenuNotification");
+
+var _productNotification = _interopRequireDefault(require("../../../assets/images/productNotification/productNotification.svg"));
+
+var ProductNotification = function ProductNotification(_ref) {
+  var notification = _ref.notification;
+
+  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-notification") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  var content = [{
+    notificationType: "productComment",
+    label: "Asignaron el producto 23441244"
+  }, {
+    notificationType: "productAssignation",
+    label: "Ajustaron el nombre del producto"
+  }, {
+    notificationType: "productAssignation",
+    label: "Agregaron comentario en producto 123"
+  }];
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setShowMenu(!showMenu);
+
+      if (showMenu) {
+        document.removeEventListener("click", closeMenu, false);
+      }
+    },
+    className: notification && "new-notification"
+  }, /*#__PURE__*/React.createElement(_index.Avatar, {
+    image: _productNotification.default,
+    imageType: "big-image",
+    altText: "Notification Picture"
+  }), showMenu && /*#__PURE__*/React.createElement(_MenuNotification.MenuNotification, {
+    content: content
+  }));
+};
+
+exports.ProductNotification = ProductNotification;

package/dist/components/molecules/ProductNotification/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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 3px;\n  width: 50px;\n  height: 50px;\n  border: none;\n  position: relative;\n  &.new-notification::before {\n    content: \"\";\n    width: 10px;\n    height: 10px;\n    display: block;\n    border-radius: 100%;\n    background-color: #ff0094;\n    position: absolute;\n    left: 56%;\n    top: 11px;\n    z-index: 1;\n    animation: pulse 0.4s alternate infinite;\n    @keyframes pulse {\n      from {\n        transform: scale(1);\n      }\n      to {\n        transform: scale(1.1);\n      }\n    }\n  }\n"])), _variables.GlobalColors.s2);
+
+exports.Container = Container;

package/dist/components/molecules/ProfileHeader/ProfileHeader.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProfileHeaderDefault = void 0;
+
+var _index = require("./index");
+
+var _profilePicture = _interopRequireDefault(require("../../../assets/images/profileHeader/profilePicture.svg"));
+
+var _default = {
+  title: "Components/molecules/ProfileHeader",
+  component: _index.ProfileHeader
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.ProfileHeader, args);
+};
+
+var ProfileHeaderDefault = Template.bind({});
+exports.ProfileHeaderDefault = ProfileHeaderDefault;
+ProfileHeaderDefault.args = {
+  customerProfileImg: _profilePicture.default,
+  customerName: "Name default",
+  customer: "Customer default"
+};

package/dist/components/molecules/ProfileHeader/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileHeader = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/ScreenHeader/index");
+
+var _variables = require("../../../global-files/variables");
+
+var _index2 = require("../../atoms/Avatar/index");
+
+var _react = require("react");
+
+var _MenuProfile = require("../../atoms/MenuProfile");
+
+var ProfileHeader = function ProfileHeader(_ref) {
+  var customerProfileImg = _ref.customerProfileImg,
+      customerName = _ref.customerName,
+      customer = _ref.customer;
+
+  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-profile") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  var MenuInfo = {
+    user: "Administrador"
+  };
+  return /*#__PURE__*/React.createElement(_styles.Container, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setShowMenu(!showMenu);
+
+      if (showMenu) {
+        document.removeEventListener("click", closeMenu, false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(_index2.Avatar, {
+    image: customerProfileImg,
+    imageType: "profile-image",
+    altText: "Profile Picture"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "user-info"
+  }, /*#__PURE__*/React.createElement(_index.ScreenHeader, {
+    headerType: "retailer-name-header",
+    text: customerName,
+    color: _variables.GlobalColors.original_magenta
+  }), customer && /*#__PURE__*/React.createElement("p", null, customer)), showMenu && /*#__PURE__*/React.createElement(_MenuProfile.MenuProfile, {
+    user: MenuInfo.user
+  }));
+};
+
+exports.ProfileHeader = ProfileHeader;

package/dist/components/molecules/ProfileHeader/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.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: 25px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 5px 20px 6px 5px;\n  width: 195px;\n  height: 50px;\n  border: none;\n  position: relative;\n  .profile-image {\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  .user-info {\n    text-align: right;\n    p {\n      font-family: ", ";\n      color: ", ";\n      font-style: normal;\n      font-weight: normal;\n      font-size: 12px;\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/molecules/RetailerSelector/RetailerSelector.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerSelectorDefault = void 0;
+
+var _index = require("./index");
+
+var _default = {
+  title: "Components/molecules/RetailerSelector",
+  component: _index.RetailerSelector
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RetailerSelector, args);
+};
+
+var RetailerSelectorDefault = Template.bind({});
+exports.RetailerSelectorDefault = RetailerSelectorDefault;
+RetailerSelectorDefault.args = {
+  retailers: [{
+    id: 2,
+    name: "Walmart Mercancías Generales",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 3,
+    name: "Sam´s Club",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 14,
+    name: "Maskota y Petsy",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }]
+};