@lideralia/alife-uikit 1.2.35 → 1.2.37

package/dist/atoms/Icons/IconTree.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SvgIconTree(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    stroke: props.stroke
+  }, props), React.createElement("g", {
+    clipPath: "url(#icon-tree_svg__clip0_8099_2736)",
+    stroke: props.stroke,
+    strokeWidth: 1.5,
+    strokeLinejoin: "round"
+  }, React.createElement("path", {
+    d: "M1.5 16.5h15M4.5 16.5V9.75M12 16.5V6.75",
+    strokeLinecap: "round"
+  }), React.createElement("circle", {
+    cx: 12,
+    cy: 6,
+    r: 4.5
+  }), React.createElement("circle", {
+    cx: 4.5,
+    cy: 9,
+    r: 3
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "icon-tree_svg__clip0_8099_2736"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h18v18H0z"
+  }))));
+}
+
+var _default = SvgIconTree;
+exports.default = _default;

package/dist/atoms/imgs/Tree.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SvgTree(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    stroke: props.stroke
+  }, props), React.createElement("g", {
+    clipPath: "url(#tree_svg__clip0_8096_2721)"
+  }, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.92 47.136l.265-1.287c.24-1.43.477-3.793-.114-5.725-3.253-2.148-4.398-5.78-4.402-5.792l1.624-.527c.442 1.817 2.262 2.975 3.775 3.085 1.22-1.657.2-2.749.2-2.749-2.26-1.727-2.253-4.138-2.254-4.148l2.044-.142c.777 2.536 3.722 2.662 3.892-.758 0 0-.609-3.61-2.701-6.308l1.918-.522s1.04 3.237 2.218 5.934c0 0 2.272-1.367 4.103-1.019l.175 1.045s-2.9.996-2.944 1.322c-.006.051-.052.102-.122.15-4.647 5.72 2.325 8.548 4.298 1.604l1.468.41c-1.092 3.844-3.966 7.706-4.887 8.144l1.455 7.005-10.011.279v-.001z",
+    fill: "#BF6426"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.828 29.678s-1.965 3.174.093 5.04c2.058 1.866 4.957 1.772 5.986.933 0 0 1.262 1.307 2.244-.326 0 0 5.331.933 5.705-3.128 3.497-.766 1.368-9.272-4.677-7.932-9.544-7.698-13.59 1.99-9.82 2.988 0 0-1.028 1.26-.56 1.912.468.654 1.029.513 1.029.513zM47.725 31.058c-.079-1.065-.632-2.331-2.487-3.245 0 0-2.913-9.424-9.975-4.996-5.077-1.533-5.972 5.044-4.343 5.991-4.1.976 2.469 7.413 10.668 4.7 1.668 2.486 3.788 1.31 2.629-.736 3.592 1.014 3.52-1.485 3.508-1.714z",
+    fill: "#ACC64E"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.449 16.328s-6.387.962-3.856 5.17c2.531 4.209 6.471 3.049 9.307 2.86 0 0 4.43 4.114 8.647 1.589 0 0 5.38 5.1 14.86-1.958 0 0 5.2.603 6.617-4.07 10.076.016 10.802-7.066 1.056-6.476 0 0 1.326-4.329-2.048-3.246 1.338-6.248-4.627-7.229-8.616-6.434 0 0-5.964-6.01-11.628-.3-7.082-2.1-10.217 2.793-7.473 5.305-3.993-1.707-6.143.15-5.662 4.794 0 0-2.23 1.443-1.204 2.766z",
+    fill: "#8A9C49"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.058 16.762s-4.502-2.512-.687-5.71c-.743-2.31 2.04-3.332 3.47-1.903 4.662-6.532 12.765-.553 10.719 3.921 3.537-1.107.181 4.792-1.107 4.643 0 0 2.212.19 1.487 1.447-1.102 1.91-15.07 1.154-13.884-2.398h.002z",
+    fill: "#ACC64E"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M37.906 16.748c-3.275 1.393-4.723-1.874-4.723-1.874-4.777.429-4.812-3.822-4.812-3.822-3.814 3.198.686 5.71.686 5.71-.45 1.344 1.272 2.287 3.645 2.837.687.16 1.429.286 2.189.38 3.549.437 7.486.158 8.051-.82.69-1.194-1.279-1.424-1.473-1.445h.002a.642.642 0 00.31-.066c-1.996.266-3.783.173-3.875-.899zm3.563.966h-.016.016z",
+    fill: "#74823D"
+  }), React.createElement("path", {
+    d: "M35.79 17.704c-.416 1.796-1.833 3.92-3.272 5.113h-2.454c1.45-.645 4.17-3.985 4.475-5.304l1.251.19z",
+    fill: "#BF6426"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.606 31.789c-4.098.957-4.202-1.242-4.202-1.242-.433 1.075-.865 2.918.517 4.17 2.058 1.867 4.956 1.773 5.985.934 0 0 1.263 1.307 2.245-.326 0 0 .88.154 1.951.064.556-.046 1.164-.159 1.726-.392.942-.392 1.756-1.127 1.985-2.465.019-.108.033-.218.044-.334.814-.177 1.322-.775 1.549-1.57.116-.41.158-.874.126-1.36-.107.278-.248.528-.415.756-.456.618-1.109 1.056-1.832 1.367-2.17.93-4.97.703-4.97.703-2.136 2.566-4.708-.305-4.708-.305h-.001zM9.295 17.085c-3.4.175-3.642-3.523-3.642-3.523s-1.244.806-1.446 1.765c.51.404.685.763.242 1-2.148 1.151-2.646 5.895 2.58 5.282.236.191.473.364.711.521 2.649 1.74 5.377 1.422 7.405.696 1.924-.687 3.218-1.739 3.218-1.739-6.364 2.176-9.067-4.002-9.067-4.002z",
+    fill: "#74823D"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "tree_svg__clip0_8096_2721"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h48v48H0z"
+  }))));
+}
+
+var _default = SvgTree;
+exports.default = _default;

package/dist/molecules/MuxPlayerContainer/MuxPlayer.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VideoMux = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _MuxPlayerContainer = require("./MuxPlayerContainer");
+
+var _default = {
+  title: 'Molecules/MuxPlayer',
+  component: _MuxPlayerContainer.MuxPlayerContainer,
+  argTypes: {
+    onChange: {
+      action: 'clicked'
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return _react.default.createElement(_Layout.Container, {
+    position: "relative"
+  }, _react.default.createElement(_Layout.Row, {
+    mb: 3
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1]
+  }, _react.default.createElement(_MuxPlayerContainer.MuxPlayerContainer, args))));
+};
+
+var VideoMux = Template.bind({});
+exports.VideoMux = VideoMux;
+VideoMux.args = {
+  id: 'r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA',
+  streamType: 'on-demand'
+};

package/dist/molecules/MuxPlayerContainer/MuxPlayerContainer.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MuxPlayerContainer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _muxPlayerReact = _interopRequireDefault(require("@mux/mux-player-react"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = require("../../atoms/Card");
+
+var _excluded = ["id", "streamType", "videoTitle", "videoId"];
+
+var MuxPlayerContainer = function MuxPlayerContainer(_ref) {
+  var id = _ref.id,
+      streamType = _ref.streamType,
+      videoTitle = _ref.videoTitle,
+      videoId = _ref.videoId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    width: "100%",
+    maxWidth: "339px",
+    minHeight: "250px",
+    position: "relative",
+    boxShadow: "none",
+    padding: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    display: "flex"
+  }, props), _react.default.createElement(_muxPlayerReact.default, {
+    autoPlay: true,
+    playbackId: id,
+    "stream-type": streamType,
+    metadata: {
+      video_title: {
+        videoTitle: videoTitle
+      },
+      video_id: {
+        videoId: videoId
+      }
+    },
+    style: {
+      position: 'absolute',
+      display: 'block',
+      height: '100%',
+      width: '100%',
+      border: '0px none',
+      transition: 'all 0.3s ease 0s, background-position 0s ease 0s, visibility 0s ease 0s'
+    }
+  }));
+};
+
+exports.MuxPlayerContainer = MuxPlayerContainer;
+MuxPlayerContainer.defaultProps = {
+  props: function props() {},
+  streamType: '',
+  videoTitle: '',
+  videoId: ''
+};

package/dist/molecules/MuxPlayerContainer/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MuxPlayerContainer", {
+  enumerable: true,
+  get: function get() {
+    return _MuxPlayerContainer.MuxPlayerContainer;
+  }
+});
+
+var _MuxPlayerContainer = require("./MuxPlayerContainer");

package/dist/molecules/Udianas/CarouselScrollTreeUdianas.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselScrollTreeUdianas = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _TreeUdianas = require("./TreeUdianas");
+
+var _excluded = ["width", "height", "customColor", "customTextColor", "products", "isOpened", "heightCard", "showDescription", "textSeeDetail", "textButtonSelect"];
+
+var CarouselScrollTreeUdianas = function CarouselScrollTreeUdianas(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      customColor = _ref.customColor,
+      customTextColor = _ref.customTextColor,
+      products = _ref.products,
+      isOpened = _ref.isOpened,
+      heightCard = _ref.heightCard,
+      showDescription = _ref.showDescription,
+      textSeeDetail = _ref.textSeeDetail,
+      textButtonSelect = _ref.textButtonSelect,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return _react.default.createElement(_Layout.Box, (0, _extends2.default)({
+    width: width,
+    height: height,
+    overflow: "hidden"
+  }, props), _react.default.createElement(_Layout.Flex, {
+    id: "scroller",
+    overflowX: "scroll",
+    overflowY: "hidden",
+    height: "109%",
+    style: {
+      scrollBehavior: 'smooth',
+      scrollSnapType: 'x mandatory',
+      gap: '18px'
+    },
+    width: width,
+    padding: "10px 0px"
+  }, products.map(function (product) {
+    return _react.default.createElement(_TreeUdianas.TreeUdianas, (0, _extends2.default)({
+      key: product.id,
+      customColor: customColor,
+      textButtonSelect: textButtonSelect,
+      customTextColor: customTextColor,
+      isOpened: isOpened,
+      height: heightCard,
+      showDescription: showDescription,
+      textSeeDetail: textSeeDetail
+    }, product));
+  })));
+};
+
+exports.CarouselScrollTreeUdianas = CarouselScrollTreeUdianas;
+CarouselScrollTreeUdianas.defaultProps = {
+  width: '250px',
+  height: '375px',
+  products: [],
+  customColor: 'green',
+  customTextColor: 'white',
+  isOpened: false,
+  heightCard: '164px',
+  textButtonSelect: 'Seleccionar',
+  showDescription: false,
+  textSeeDetail: 'Ver detalle'
+};

package/dist/molecules/Udianas/CarouselScrollTreeUdianas.stories.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CarouselScrollUdianas = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _CarouselScrollTreeUdianas = require("./CarouselScrollTreeUdianas");
+
+var _default = {
+  title: 'Molecules/Udianas',
+  component: _CarouselScrollTreeUdianas.CarouselScrollTreeUdianas,
+  argTypes: {
+    onChange: {
+      action: 'clicked'
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    mb: 3
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1]
+  }, _react.default.createElement(_CarouselScrollTreeUdianas.CarouselScrollTreeUdianas, args))));
+};
+
+var CarouselScrollUdianas = Template.bind({});
+exports.CarouselScrollUdianas = CarouselScrollUdianas;
+var mockData = [{
+  id: '1',
+  title: 'La Pedregosa, ',
+  subtitle: 'Colombia',
+  actionButton: function actionButton(id) {
+    return alert(id);
+  },
+  paragraphTitle: 'Desde 4€',
+  picture: {
+    alt: 'Caraipa llanorum',
+    src: 'https://www.nicepng.com/png/detail/31-316240_freetoedit-png-flower-with-a-transparent-background-flowers.png'
+  },
+  heightTree: '25m',
+  yearsTree: '116 años',
+  weather: 'CO2 1176kg',
+  priceTree: '4,00€',
+  linkSeeDetail: function linkSeeDetail(id) {
+    return alert(id);
+  }
+}, {
+  id: '2',
+  title: 'La Pedregosa, ',
+  subtitle: 'Colombia',
+  actionButton: function actionButton(id) {
+    return alert(id);
+  },
+  paragraphTitle: 'Desde 4€',
+  picture: {
+    alt: 'Caraipa llanorum',
+    src: 'https://www.nicepng.com/png/detail/31-316240_freetoedit-png-flower-with-a-transparent-background-flowers.png'
+  },
+  heightTree: '25m',
+  yearsTree: '116 años',
+  weather: 'CO2 150kg',
+  priceTree: '4,00€',
+  linkSeeDetail: function linkSeeDetail(id) {
+    return alert(id);
+  }
+}, {
+  id: '3',
+  title: 'La Pedregosa, ',
+  subtitle: 'Colombia',
+  actionButton: function actionButton(id) {
+    return alert(id);
+  },
+  paragraphTitle: 'Desde 4€',
+  picture: {
+    alt: 'Caraipa llanorum',
+    src: 'https://www.nicepng.com/png/detail/31-316240_freetoedit-png-flower-with-a-transparent-background-flowers.png'
+  },
+  heightTree: '25m',
+  yearsTree: '116 años',
+  weather: 'CO2 150kg',
+  priceTree: '4,00€',
+  linkSeeDetail: function linkSeeDetail(id) {
+    return alert(id);
+  },
+  textButtonSelect: 'jses'
+}];
+CarouselScrollUdianas.args = {
+  width: '250px',
+  height: '375px',
+  customColor: 'red',
+  customTextColor: 'white',
+  products: mockData,
+  isOpened: true,
+  heightCard: '164px',
+  textButtonSelect: 'Seleccionar',
+  showDescription: true,
+  textSeeDetail: 'Ver detalle'
+};

package/dist/molecules/Udianas/ChartUdianas.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartUdianas = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactApexcharts = _interopRequireDefault(require("react-apexcharts"));
+
+var _Card = require("../../atoms/Card");
+
+var _Typography = require("../../atoms/Typography");
+
+var _excluded = ["dataSeries", "dataCategories", "title", "color"];
+
+var ChartUdianas = function ChartUdianas(_ref) {
+  var dataSeries = _ref.dataSeries,
+      dataCategories = _ref.dataCategories,
+      title = _ref.title,
+      color = _ref.color,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var series = [{
+    name: 'Series 1',
+    data: dataSeries,
+    stroke: color
+  }];
+  var options = {
+    chart: {
+      type: 'area',
+      zoom: {
+        enabled: false
+      },
+      toolbar: {
+        show: false
+      },
+      exporting: {
+        enabled: false,
+        svgOptions: {
+          enableDownloadSVG: false
+        }
+      }
+    },
+    colors: [color],
+    xaxis: {
+      categories: dataCategories,
+      tickAmount: 10
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'straight'
+    }
+  };
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    minWidth: "290px",
+    position: "relative",
+    width: "100%"
+  }, props), _react.default.createElement(_Typography.Text, {
+    fontWeight: "bold",
+    sizeText: "display16",
+    color: "black",
+    textAlign: "center",
+    padding: 2,
+    paddingBottom: 0
+  }, title), _react.default.createElement(_reactApexcharts.default, {
+    options: options,
+    series: series,
+    type: "area",
+    height: 270
+  }));
+};
+
+exports.ChartUdianas = ChartUdianas;

package/dist/molecules/Udianas/ChartUdianas.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChartUdiana = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _ChartUdianas = require("./ChartUdianas");
+
+var _default = {
+  title: 'Molecules/Udianas',
+  component: _ChartUdianas.ChartUdianas,
+  argTypes: {
+    onChange: {
+      action: 'clicked'
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    mb: 3
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1]
+  }, _react.default.createElement(_ChartUdianas.ChartUdianas, args))));
+};
+
+var ChartUdiana = Template.bind({});
+exports.ChartUdiana = ChartUdiana;
+ChartUdiana.args = {
+  title: 'Absorción de CO2',
+  dataSeries: [23, 46, 69, 92, 115, 138, 161, 184, 207, 230, 253, 276, 299, 322, 345, 368, 391, 414, 437, 460, 483, 506, 529, 552, 575, 598, 621, 644, 667, 690, 713, 736, 759, 782, 805, 828, 851, 874, 897, 920],
+  dataCategories: [2023, 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042, 2043, 2044, 2045, 2046, 2047, 2048, 2049, 2050, 2051, 2052, 2053, 2054, 2055, 2056, 2057, 2058, 2059, 2060, 2061, 2062],
+  color: '#00FF00'
+};

package/dist/molecules/Udianas/ForestUdianas.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ForestUdianas = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = require("../../atoms/Icon");
+
+var _Icons = require("../../atoms/Icons");
+
+var _Image = require("../../atoms/Image");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+var _excluded = ["width", "height", "id", "picture", "title", "trees", "weather", "onlyOneText", "location"];
+
+var ForestUdianas = function ForestUdianas(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      id = _ref.id,
+      picture = _ref.picture,
+      title = _ref.title,
+      trees = _ref.trees,
+      weather = _ref.weather,
+      onlyOneText = _ref.onlyOneText,
+      location = _ref.location,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Layout.Box, (0, _extends2.default)({
+    id: id,
+    width: width,
+    height: height,
+    overflow: "hidden",
+    position: "relative",
+    borderRadius: 3,
+    marginBottom: 3
+  }, props), _react.default.createElement(_Image.Image, {
+    src: picture.src,
+    alt: picture.alt || 'image',
+    srcset: picture.src,
+    height: height,
+    styleImg: {
+      objectFit: 'cover'
+    }
+  }), _react.default.createElement(_Layout.Box, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "end",
+    alignItems: "center",
+    padding: "12px",
+    textAlign: "center",
+    background: "linear-gradient(180deg, rgba(24, 26, 28, 0) 52.04%, rgba(24, 26, 28, 0.96) 108.84%)"
+  }, _react.default.createElement(_Typography.Text, {
+    color: "white",
+    sizeText: "display16",
+    fontWeight: "bold",
+    marginBottom: "3px"
+  }, title), onlyOneText ? _react.default.createElement(_Layout.Flex, {
+    style: {
+      gap: '6px'
+    }
+  }, _react.default.createElement(_Typography.Text, {
+    color: "black12",
+    sizeText: "display12"
+  }, location)) : _react.default.createElement(_Layout.Flex, {
+    style: {
+      gap: '6px'
+    }
+  }, _react.default.createElement(_Layout.Flex, {
+    style: {
+      gap: '6px'
+    },
+    alignItems: "center"
+  }, _react.default.createElement(_Icon.Icon, {
+    color: "black12",
+    sizeIcon: "display16"
+  }, _react.default.createElement(_Icons.IconTree, null)), _react.default.createElement(_Typography.Text, {
+    color: "black12",
+    sizeText: "display12"
+  }, trees)), _react.default.createElement(_Layout.Flex, {
+    style: {
+      gap: '6px'
+    },
+    alignItems: "center"
+  }, _react.default.createElement(_Icon.Icon, {
+    color: "black12",
+    sizeIcon: "display16"
+  }, _react.default.createElement(_Icons.IconCloud, null)), _react.default.createElement(_Typography.Text, {
+    color: "black12",
+    sizeText: "display12"
+  }, weather))))));
+};
+
+exports.ForestUdianas = ForestUdianas;
+ForestUdianas.defaultProps = {
+  id: crypto.randomUUID(),
+  width: '100%',
+  height: '132px',
+  onlyOneText: false,
+  trees: '',
+  weather: '',
+  location: ''
+};