contentoh-components-library 21.4.136 → 21.4.138

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

@@ -0,0 +1,186 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarButtons = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _variables = require("../../../global-files/variables");
+
+var _react = require("react");
+
+var _Chatv = require("../Chatv2");
+
+var _material = require("@mui/material");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+// import { Button } from "../../atoms/GeneralButton/index";
+var BarButtons = function BarButtons(_ref) {
+  var showSaveButton = _ref.showSaveButton,
+      imagesSection = _ref.imagesSection,
+      onClickSave = _ref.onClickSave,
+      withChat = _ref.withChat,
+      chatType = _ref.chatType,
+      productSelected = _ref.productSelected,
+      token = _ref.token,
+      activeRetailer = _ref.activeRetailer,
+      setImageLayout = _ref.setImageLayout,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      askToDeleteImages = _ref.askToDeleteImages,
+      downloadImages = _ref.downloadImages;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      layout = _useState2[0],
+      setLayout = _useState2[1];
+
+  var headerTop = (0, _react.useRef)();
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      chat = _useState4[0],
+      setChat = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      chatData = _useState6[0],
+      setChatData = _useState6[1];
+
+  (0, _react.useEffect)(function () {
+    if (activeRetailer !== null && activeRetailer !== void 0 && activeRetailer.id && productSelected && token.length) {
+      var _productSelected$arti;
+
+      setChatData({
+        id: (productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article) || (productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article),
+        version: productSelected === null || productSelected === void 0 ? void 0 : productSelected.version,
+        retailerId: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
+        status: productSelected === null || productSelected === void 0 ? void 0 : productSelected.status,
+        userToken: token
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+  (0, _react.useEffect)(function () {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
+
+  var renderChat = function renderChat(chatType) {
+    switch (chatType) {
+      case "product_status":
+        chatData && setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chatv.Chatv2, {
+          chatType: "product_status",
+          chatContainerType: "popUp",
+          chatData: {
+            id: chatData === null || chatData === void 0 ? void 0 : chatData.id,
+            version: chatData === null || chatData === void 0 ? void 0 : chatData.version,
+            retailerId: chatData === null || chatData === void 0 ? void 0 : chatData.retailerId,
+            status: chatData === null || chatData === void 0 ? void 0 : chatData.status,
+            userToken: chatData === null || chatData === void 0 ? void 0 : chatData.userToken
+          },
+          size: 18,
+          activeRetailer: activeRetailer
+        }));
+        break;
+
+      default:
+        setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chatv.Chatv2, {
+          chatType: "merchant_product",
+          chatContainerType: "popUp",
+          chatData: {
+            userToken: token,
+            id: productSelected.id_article,
+            version: productSelected.version
+          },
+          size: 18,
+          activeRetailer: activeRetailer
+        }));
+        break;
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    fontFamily: _variables.FontFamily.Raleway,
+    color: _variables.GlobalColors.original_magenta,
+    ref: headerTop,
+    children: [imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+      className: "btn-gral",
+      onClick: function onClick() {
+        setLayout(!layout);
+        setImageLayout && setImageLayout(!layout);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+        className: "container-btn",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          class: "iconos-out icono-gris",
+          children: layout ? "table_chart" : "grid_view"
+        })
+      })
+    }), showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+      className: "btn-gral",
+      onClick: onClickSave,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+        className: "container-btn",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          class: "iconos-out icono-gris",
+          children: "save"
+        })
+      })
+    }) // <Button
+    //   buttonType={"circular-button save-button"}
+    //   onClick={onClickSave}
+    // />
+    , imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "images-buttons",
+      children: showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        className: "btn-gral",
+        onClick: function onClick() {
+          askToDeleteImages && askToDeleteImages();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+          className: "container-btn",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            class: "iconos-out icono-gris",
+            children: "delete_forever"
+          })
+        })
+      })
+    }), withChat && chat, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+      className: "btn-gral",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        setShowVersionSelector(true);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+        className: "container-btn",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          class: "iconos-out icono-gris",
+          children: "layers"
+        })
+      })
+    }), imagesSection && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "images-buttons",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        className: "btn-gral",
+        onClick: function onClick() {
+          downloadImages();
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ContainerIcon, {
+          className: "container-btn",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            class: "iconos-out icono-gris",
+            children: "download"
+          })
+        })
+      })
+    })]
+  });
+};
+
+exports.BarButtons = BarButtons;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContainerIcon = 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, _templateObject2;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\ndisplay:flex;\njustify-content: center;\nwidth: auto;\nheight:34px;\ngap:10px;\n\n  .btn-gral{\n    min-width: 34px;\n    min-height:34px;\n    padding:0;\n  }\n  .images-buttons{\n    display:flex;\n  }\n"])));
+
+exports.Container = Container;
+
+var ContainerIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  border-radius: 50%;\n  height: 34px;\n  width: 34px;\n  border:1px solid ", ";\n  @font-face {\n    font-family: \"Material Symbols Outlined\";\n    font-style: normal;\n    font-weight: 100 700;\n    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)\n      format(\"woff2\");\n  }\n  .container-btn {\n    height: inherit;\n    width: inherit;\n    overflow: hidden;\n  }\n  .iconos-out {\n    font-family: \"Material Symbols Outlined\";\n    font-size: 20px;\n    //line-height: 1;\n    margin-top: 10px;\n  }\n  .iconos-out {\n    font-variation-settings: \"FILL\" 0, \"wght\" 400, \"GRAD\" 0, \"opsz\" 48;\n    color:  #B64545;\n  }\n\n  .icono-gris{\n    font-size:18px;\n    color: ", ";\n  }\n"])), _variables.GlobalColors.gray_light, _variables.GlobalColors.gray);
+
+exports.ContainerIcon = ContainerIcon;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BoxDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Box",
+  component: _index.Box
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Box, (0, _objectSpread2.default)({}, args));
+};
+
+var BoxDefault = Template.bind({});
+exports.BoxDefault = BoxDefault;
+BoxDefault.args = {
+  panelImg: [_loginImage.default, _login.default, _login2.default],
+  panelText: "Elige la plataforma que conecta proovedores y retailers"
+};

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

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Box = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("./styles");
+
+var _variables = require("../../../global-files/variables");
+
+var _BoxOnboarding = require("../BoxOnboarding");
+
+var _BoxButtons = require("../../molecules/BoxButtons");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Box = function Box(_ref) {
+  var onChange = _ref.onChange,
+      dataInputs = _ref.dataInputs,
+      inputGroup = _ref.inputGroup;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isDeleteDisabled = _useState2[0],
+      setIsDeleteDisabled = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([{
+    showAdd: true,
+    value: {}
+  }]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      boxOnboardingList = _useState4[0],
+      setBoxOnboardingList = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var temp = {};
+    var maxBoxId = 0;
+    inputGroup.inputs.forEach(function (attrId) {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            boxId = _ref3[0],
+            value = _ref3[1];
+
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    var tempList = Object.values(temp);
+
+    if (tempList.length > 0) {
+      setBoxOnboardingList(tempList.map(function (value, index) {
+        return index === tempList.length - 1 ? {
+          showAdd: true,
+          value: value
+        } : {
+          value: value
+        };
+      }));
+    }
+  }, []);
+
+  var handleAddBoxOnboarding = function handleAddBoxOnboarding() {
+    var newBoxOnboarding = {
+      showAdd: false,
+      value: {}
+    };
+    setBoxOnboardingList([].concat((0, _toConsumableArray2.default)(boxOnboardingList), [newBoxOnboarding]));
+  };
+
+  var handleDeleteBoxOnboarding = function handleDeleteBoxOnboarding(index) {
+    if (index !== 0) {
+      var updatedBoxOnboardingList = (0, _toConsumableArray2.default)(boxOnboardingList);
+      updatedBoxOnboardingList.splice(index, 1);
+      setBoxOnboardingList(updatedBoxOnboardingList);
+    } else {
+      setIsDeleteDisabled(true);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    fontFamily: _variables.FontFamily.Raleway,
+    color: _variables.GlobalColors.original_magenta,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+      fontFamily: _variables.FontFamily.Raleway,
+      children: inputGroup.dataGroup
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "container-box",
+      children: boxOnboardingList.map(function (boxOnboarding, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "container-buttons",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxOnboarding.BoxOnboarding, {
+              index: index,
+              showAdd: boxOnboarding.showAdd,
+              data: boxOnboarding.value,
+              dataInputs: dataInputs,
+              inputs: inputGroup.inputs,
+              onChange: function onChange(e) {
+                setBoxOnboardingList(function (prev) {
+                  return prev.map(function (box, i) {
+                    if (i != index) {
+                      return box;
+                    }
+
+                    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, box), {}, {
+                      value: e
+                    });
+                  });
+                });
+              }
+            }, index), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxButtons.BoxButtons, {
+              index: index,
+              showAdd: boxOnboarding.showAdd,
+              onAdd: handleAddBoxOnboarding,
+              onDelete: function onDelete() {
+                return handleDeleteBoxOnboarding(index);
+              },
+              isDeleteDisabled: isDeleteDisabled
+            }, index)]
+          })
+        });
+      })
+    })]
+  });
+};
+
+exports.Box = Box;

package/dist/components/organisms/Box/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  font-family: ", ", sans-serif;\n  font-weight: 400;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  font-size: var(--size);\n  line-height: 1.2;\n  height: auto;\n  border-radius: 10px;\n  background: white;\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  text-align: center;\n  .container-buttons {\n    display: flex;\n    gap:10px;\n  }\n  .container-box{\n    display: flex;\n    flex-direction:column-reverse;\n    gap:10px;\n  }\n  #contenedor-caja {\n    display: flex;\n    justify-content: space-between;\n    color: #262626;\n    white-space: nowrap;\n    gap: 10px;\n  }\n  #atr-alto {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 6px;\n  }\n  h1 {\n    font-family: ", ", sans-serif;\n    font-size: 17px;\n    line-height: 1.2;\n    font-weight: 500;\n    text-align: left;\n  }\n"])), _variables.FontFamily.Roboto, _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BoxOnboardingDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/BoxOnboarding",
+  component: _index.BoxOnboarding
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxOnboarding, (0, _objectSpread2.default)({}, args));
+};
+
+var BoxOnboardingDefault = Template.bind({});
+exports.BoxOnboardingDefault = BoxOnboardingDefault;
+BoxOnboardingDefault.args = {
+  panelImg: [_loginImage.default, _login.default, _login2.default],
+  panelText: "Elige la plataforma que conecta proovedores y retailers"
+};

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoxOnboarding = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _variables = require("../../../global-files/variables");
+
+var _BoxAttribute = require("../../molecules/BoxAttribute");
+
+var _react = require("react");
+
+var _lodash = require("lodash");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var BoxOnboarding = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var panelColor = _ref.panelColor,
+      index = _ref.index,
+      onChange = _ref.onChange,
+      data = _ref.data,
+      dataInputs = _ref.dataInputs,
+      inputs = _ref.inputs;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      atributos = _useState2[0],
+      setAtributos = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    onChange && onChange(atributos);
+  }, [atributos]);
+  (0, _react.useEffect)(function () {
+    if (isLoading && Object.keys(data).length > 0) {
+      setAtributos(data);
+      setIsLoading(false);
+    }
+  }, [data]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    panelColor: panelColor,
+    fontFamily: _variables.FontFamily.Raleway,
+    color: _variables.GlobalColors.original_magenta,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: "contenedor-caja",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        fontFamily: _variables.FontFamily.Raleway,
+        children: ["Caja ", index + 1]
+      }), inputs.map(function (attrId) {
+        var _dataInputs$attrId, _dataInputs$attrId2, _dataInputs$attrId3;
+
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
+          id: attrId,
+          borderType: "rectangle",
+          className: "caja",
+          text: (_dataInputs$attrId = dataInputs[attrId]) === null || _dataInputs$attrId === void 0 ? void 0 : _dataInputs$attrId.name,
+          required: (_dataInputs$attrId2 = dataInputs[attrId]) === null || _dataInputs$attrId2 === void 0 ? void 0 : _dataInputs$attrId2.required,
+          description: (_dataInputs$attrId3 = dataInputs[attrId]) === null || _dataInputs$attrId3 === void 0 ? void 0 : _dataInputs$attrId3.description,
+          atributos: atributos,
+          setAtributos: setAtributos
+        }, attrId);
+      })]
+    })
+  });
+}, _lodash.isEqual);
+exports.BoxOnboarding = BoxOnboarding;

package/dist/components/organisms/BoxOnboarding/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  font-family: ", ", sans-serif;\n  font-weight: 400;\n  font-size: var(--size);\n  line-height: 1.2;\n  background: white;\n  position: relative;\n  overflow: hidden;\n  width: 80%;\n  height: 100%;\n  text-align: center;\n  #contenedor-caja {\n    display: flex;\n    justify-content: space-between;\n    color: #262626;\n  }\n  #atr-alto {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  p {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n    align-self: center;\n  }\n  }\n  .icon-red {\n    color: #B64545;\n    height:18px;\n  }\n  .icon-gray {\n    color: #707070;\n  }\n  .icon-gray-l {\n    color: #707070;\n    height:18px;\n  }\n"])), _variables.FontFamily.Roboto, _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;

package/dist/components/organisms/Calendar/Calendar.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.CalendarDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Calendar",
+  component: _.Calendar
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Calendar, (0, _objectSpread2.default)({}, args));
+};
+
+var CalendarDefault = Template.bind({});
+exports.CalendarDefault = CalendarDefault;
+CalendarDefault.args = {};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = void 0;
+
+var _styles = require("./styles");
+
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+
+var _react = require("react");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var Calendar = function Calendar(_ref) {
+  var onChange = _ref.onChange,
+      startDate = _ref.startDate,
+      endDate = _ref.endDate;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+      selected: startDate,
+      onChange: onChange,
+      startDate: startDate,
+      endDate: endDate,
+      selectsRange: true
+    })
+  });
+};
+
+exports.Calendar = Calendar;