@lideralia/alife-uikit 1.2.102 → 1.3.0

package/dist/atoms/Button/Button.js

@@ -68,14 +68,17 @@ const ButtonTabs = _ref2 => {
     action
   } = _ref2,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  const hasCustomWidth = rest.width !== undefined;
   return _react.default.createElement(_styles.ButtonTabsStyled, (0, _extends2.default)({
     justifyContent: "center"
-  }, rest), _react.default.createElement(_Layout.Flex, {
+  }, rest), _react.default.createElement(_Layout.Flex, (0, _extends2.default)({
     backgroundColor: "black12",
     borderRadius: 3,
-    padding: 1,
+    padding: "3px",
     overflow: "hidden"
-  }, items === null || items === void 0 ? void 0 : items.map(item => _react.default.createElement(Button, (0, _extends2.default)({
+  }, hasCustomWidth ? {
+    width: '100%'
+  } : {}), items === null || items === void 0 ? void 0 : items.map(item => _react.default.createElement(Button, (0, _extends2.default)({
     key: item.id,
     sizeButton: "tab",
     justifyContent: "center",
@@ -83,7 +86,8 @@ const ButtonTabs = _ref2 => {
     backgroundColor: item.isActive ? 'white' : 'none',
     tabs: true,
     isActiveTab: item.isActive,
-    action: action
+    action: action,
+    flex: hasCustomWidth ? 1 : 'initial'
   }, item)))));
 };
 

package/dist/atoms/Button/styles.js

@@ -77,7 +77,8 @@ const ButtonStyled = (0, _styledComponents.default)('button').withConfig({
     true: (0, _css.default)({
       backgroundColor: 'transparent',
       boxShadow: 'none',
-      color: 'black60'
+      color: 'black60',
+      borderRadius: '10px'
     })
   }
 }), (0, _styledSystem.variant)({
@@ -88,7 +89,7 @@ const ButtonStyled = (0, _styledComponents.default)('button').withConfig({
   variants: {
     true: (0, _css.default)({
       backgroundColor: 'none',
-      boxShadow: 'none',
+      boxShadow: '0px 4px 8px 0px #3C363A1F',
       color: 'black84'
     })
   }

package/dist/atoms/Icons/IconArrowCircleRight.js

@@ -23,11 +23,10 @@ function SvgIconArrowCircleRight(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     preserveAspectRatio: "xMidYMid meet",
-    stroke: props.stroke
+    strokeWidth: props.stroke
   }, props), React.createElement("g", {
     clipPath: "url(#icon-arrow-circle-right_svg__clip0)",
-    stroke: "inherit",
-    strokeWidth: 2,
+    strokeWidth: "inherit",
     strokeMiterlimit: 10,
     strokeLinecap: "round",
     strokeLinejoin: "round"

package/dist/atoms/Icons/IconPower.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 (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 SvgIconPower(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), React.createElement("g", {
+    stroke: "#4C4C5B",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "1.5",
+    clipPath: "url(#clip0_16918_58612)"
+  }, React.createElement("path", {
+    d: "M16.36 3.64c3.51 3.51 3.51 9.21 0 12.73s-9.21 3.51-12.73 0-3.51-9.21 0-12.73M10 1v9"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_16918_58612"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h20v20H0z"
+  }))));
+}
+
+var _default = SvgIconPower;
+exports.default = _default;

package/dist/atoms/Icons/IconSmile.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 (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 SvgIconSmile(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "17",
+    height: "18",
+    viewBox: "0 0 17 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: props.stroke
+  }, props), React.createElement("path", {
+    d: "M6.25 11.25c.587.712 1.412 1.125 2.25 1.125s1.663-.413 2.25-1.125M16 9A7.5 7.5 0 1 1 1 9a7.5 7.5 0 0 1 15 0M6.438 6.75a.563.563 0 1 1-1.126 0 .563.563 0 0 1 1.125 0m5.25 0a.562.562 0 1 1-1.125 0 .562.562 0 0 1 1.124 0",
+    stroke: "inherit",
+    strokeWidth: 1,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
+
+var _default = SvgIconSmile;
+exports.default = _default;

package/dist/atoms/Icons/index.js

@@ -617,6 +617,12 @@ Object.defineProperty(exports, "IconPlus", {
     return _IconPlus.default;
   }
 });
+Object.defineProperty(exports, "IconPower", {
+  enumerable: true,
+  get: function () {
+    return _IconPower.default;
+  }
+});
 Object.defineProperty(exports, "IconQuote", {
   enumerable: true,
   get: function () {
@@ -689,6 +695,12 @@ Object.defineProperty(exports, "IconShare", {
     return _IconShare.default;
   }
 });
+Object.defineProperty(exports, "IconSmile", {
+  enumerable: true,
+  get: function () {
+    return _IconSmile.default;
+  }
+});
 Object.defineProperty(exports, "IconStar", {
   enumerable: true,
   get: function () {
@@ -1110,6 +1122,8 @@ var _IconPlaySquare = _interopRequireDefault(require("./IconPlaySquare"));
 
 var _IconPlus = _interopRequireDefault(require("./IconPlus"));
 
+var _IconPower = _interopRequireDefault(require("./IconPower"));
+
 var _IconQuote = _interopRequireDefault(require("./IconQuote"));
 
 var _IconRedo = _interopRequireDefault(require("./IconRedo"));
@@ -1134,6 +1148,8 @@ var _IconSettings = _interopRequireDefault(require("./IconSettings"));
 
 var _IconShare = _interopRequireDefault(require("./IconShare"));
 
+var _IconSmile = _interopRequireDefault(require("./IconSmile"));
+
 var _IconStar = _interopRequireDefault(require("./IconStar"));
 
 var _IconStop = _interopRequireDefault(require("./IconStop"));

package/dist/atoms/imgs/GriefSupport.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 (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 SvgGriefSupport(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "48",
+    height: "48",
+    fill: "none",
+    viewBox: "0 0 48 48",
+    stroke: props.stroke
+  }, props), React.createElement("g", {
+    clipPath: "url(#clip0_16940_12358)"
+  }, React.createElement("path", {
+    fill: "#4C4C5B",
+    d: "M22.642 37.96c.118-3.28 1.161-6.93-2.617-10.38-4.763-4.35-6.023-6.53-7.017-8.04s-1.683-2.47-2.43-2.22-1.339 2.04 0 4.07c.954 1.44 3.493 5.02 3.119 5.4s-2.391.08-4.497-2.85c-1.496-2.09-2.195-3.84-2.834-6.21-.758-2.81-.335-8.07-2.805-8.07-.925 0-.443 6.69-.315 8.97.138 2.61 1.752 8.57 3.189 10.26 2.322 2.75 7.626 6.01 8.404 9.24.787 3.23.413 4.44.334 5.41-.335 2.21 1.771 4.46 7.961 4.46 0 0-.55-8.08-.482-10.04zM44.45 9.65c-2.47 0-2.047 5.26-2.804 8.07-.64 2.37-1.339 4.12-2.835 6.21-2.106 2.94-4.123 3.23-4.497 2.85s2.165-3.96 3.12-5.4c1.338-2.03.748-3.82 0-4.07s-1.437.71-2.431 2.22-2.254 3.69-7.016 8.04c-3.78 3.45-2.736 7.1-2.618 10.38.069 1.96-.482 10.04-.482 10.04 6.2 0 8.296-2.25 7.96-4.46-.078-.96-.452-2.18.336-5.41.787-3.23 6.09-6.49 8.403-9.24 1.427-1.69 3.041-7.65 3.189-10.26.128-2.28.61-8.97-.315-8.97z"
+  }), React.createElement("path", {
+    fill: "#E83060",
+    stroke: "#E83060",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeMiterlimit: "10",
+    d: "M35.775 2.85C34.4 1.363 32.487.5 30.5.5c-4 0-6.5 3.75-6.5 3.75S21.5.5 17.525.5c-1.988 0-3.825.775-5.275 2.35-3.125 3.35-2.213 8.125.162 11.4 5.95 8.275 9.113 11.25 11.6 11.25s5.65-2.975 11.6-11.25c2.3-3.275 3.288-8.125.163-11.4"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_16940_12358"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M3 0h42v48H3z"
+  }))));
+}
+
+var _default = SvgGriefSupport;
+exports.default = _default;

package/dist/atoms/imgs/Management.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 (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 SvgManagement(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "48",
+    height: "48",
+    fill: "none",
+    viewBox: "0 0 48 48",
+    stroke: props.stroke
+  }, props), React.createElement("g", {
+    clipPath: "url(#clip0_16940_15808)"
+  }, React.createElement("path", {
+    fill: "#0472D2",
+    d: "M48 16.498V11.51a2.494 2.494 0 0 0-2.494-2.493H24.402a2.494 2.494 0 0 0-2.494 2.493 2.494 2.494 0 0 1-2.494 2.494H7.271a2.494 2.494 0 0 0-2.493 2.494V48s39.483-.022 40.792 0A2.39 2.39 0 0 0 48 45.61z"
+  }), React.createElement("path", {
+    fill: "#2396FB",
+    d: "M48 16.497V11.51a2.494 2.494 0 0 0-2.494-2.493H24.401a2.494 2.494 0 0 0-2.493 2.493 2.494 2.494 0 0 1-2.494 2.494H7.271a2.494 2.494 0 0 0-2.494 2.494v31.501s39.483-.021 40.793 0A2.39 2.39 0 0 0 48 45.612z",
+    opacity: "0.24"
+  }), React.createElement("path", {
+    fill: "#E5E5E8",
+    d: "M39.488 2.268H11.633v38.489h27.855z"
+  }), React.createElement("path", {
+    fill: "#B2B2B9",
+    d: "M35.258 34.055H15.864v.619h19.394zM35.258 31.581H15.864v.619h19.394zM35.258 29.107H15.864v.618h19.394zM35.258 26.633H15.864v.618h19.394zM35.258 24.158H15.864v.619h19.394zM35.258 21.684H15.864v.619h19.394zM35.258 19.21H15.864v.618h19.394zM35.258 16.736H15.864v.618h19.394zM35.258 14.262H15.864v.618h19.394zM35.258 11.787H15.864v.619h19.394zM35.258 9.313H15.864v.619h19.394zM35.258 6.839H15.864v.619h19.394z"
+  }), React.createElement("path", {
+    fill: "#4C4C5B",
+    d: "M33.576 2.268H11.58v36.426h21.996z",
+    opacity: "0.24"
+  }), React.createElement("path", {
+    fill: "#E5E5E8",
+    d: "M31.712 0H3.857v38.489h27.855z"
+  }), React.createElement("path", {
+    fill: "#B2B2B9",
+    d: "M27.482 31.787H8.088v.619h19.394zM27.482 29.313H8.088v.619h19.394zM27.482 26.839H8.088v.618h19.394zM27.482 24.365H8.088v.618h19.394zM27.482 21.89H8.088v.619h19.394zM27.482 19.416H8.088v.619h19.394zM27.482 16.942H8.088v.619h19.394zM27.482 14.468H8.088v.618h19.394zM27.482 11.994H8.088v.618h19.394zM27.482 9.52H8.088v.618h19.394zM27.482 7.045H8.088v.619h19.394zM27.482 4.571H8.088v.619h19.394z"
+  }), React.createElement("path", {
+    fill: "#2A2A3C",
+    d: "M4.778 16.498V48s39.483-.022 40.792 0c.3.005.586-.048.851-.144a2.39 2.39 0 0 1-1.578-2.244V21.485a2.494 2.494 0 0 0-2.494-2.494H30.206a2.494 2.494 0 0 1-2.494-2.493 2.494 2.494 0 0 0-2.493-2.494H7.27a2.494 2.494 0 0 0-2.493 2.494",
+    opacity: "0.24"
+  }), React.createElement("path", {
+    fill: "#5FB3FC",
+    d: "M43.222 45.612V21.485a2.493 2.493 0 0 0-2.493-2.494H28.586a2.494 2.494 0 0 1-2.494-2.493 2.494 2.494 0 0 0-2.494-2.494H2.494A2.49 2.49 0 0 0 .3 15.309 2.5 2.5 0 0 0 0 16.498v29.008A2.494 2.494 0 0 0 2.494 48H45.61a2.39 2.39 0 0 1-2.389-2.388"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_16940_15808"
+  }, React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h48v48H0z"
+  }))));
+}
+
+var _default = SvgManagement;
+exports.default = _default;

package/dist/atoms/imgs/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "FlowerHome", {
     return _FlowerHome.default;
   }
 });
+Object.defineProperty(exports, "GriefSupport", {
+  enumerable: true,
+  get: function () {
+    return _GriefSupport.default;
+  }
+});
 Object.defineProperty(exports, "HeroHome", {
   enumerable: true,
   get: function () {
@@ -71,6 +77,12 @@ Object.defineProperty(exports, "LogoNextLives", {
     return _LogoNextLives.default;
   }
 });
+Object.defineProperty(exports, "Management", {
+  enumerable: true,
+  get: function () {
+    return _Management.default;
+  }
+});
 Object.defineProperty(exports, "Svg503", {
   enumerable: true,
   get: function () {
@@ -118,6 +130,8 @@ var _FamilyZoneHome = _interopRequireDefault(require("./FamilyZoneHome"));
 
 var _FlowerHome = _interopRequireDefault(require("./FlowerHome"));
 
+var _GriefSupport = _interopRequireDefault(require("./GriefSupport"));
+
 var _HeroHome = _interopRequireDefault(require("./HeroHome"));
 
 var _IphoneRotate = _interopRequireDefault(require("./IphoneRotate"));
@@ -126,6 +140,8 @@ var _LockHome = _interopRequireDefault(require("./LockHome"));
 
 var _LogoNextLives = _interopRequireDefault(require("./LogoNextLives"));
 
+var _Management = _interopRequireDefault(require("./Management"));
+
 var _ThumbnailQuote = _interopRequireDefault(require("./ThumbnailQuote"));
 
 var _TranslateHome = _interopRequireDefault(require("./TranslateHome"));

package/dist/molecules/Layout/CollapsiblePanel/CollapsiblePanel.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsiblePanel = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = require("../../../atoms/Button");
+
+var _Icon = require("../../../atoms/Icon");
+
+var _Icons = require("../../../atoms/Icons");
+
+var _Layout = require("../../../atoms/Layout");
+
+const _excluded = ["children", "isOpen", "withSideOverflow"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const CollapsiblePanel = _ref => {
+  var _header$props, _body$props;
+
+  let {
+    children,
+    isOpen: isOpenProp,
+    withSideOverflow
+  } = _ref,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const [isOpen, setIsOpen] = (0, _react.useState)(isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : false);
+  const [height, setHeight] = (0, _react.useState)('0px');
+  const contentRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (typeof isOpenProp === 'boolean') {
+      setIsOpen(isOpenProp);
+    }
+  }, [isOpenProp]);
+  (0, _react.useEffect)(() => {
+    const content = contentRef.current;
+
+    if (content) {
+      if (isOpen) {
+        setHeight("".concat(content.scrollHeight, "px"));
+      } else {
+        setHeight('0px');
+      }
+    }
+  }, [isOpen]);
+
+  const handleToggle = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const childrenArray = _react.default.Children.toArray(children);
+
+  const header = childrenArray.find(child => child.type.displayName === 'CollapsiblePanelHeader');
+  const body = childrenArray.find(child => child.type.displayName === 'CollapsiblePanelBody');
+  return _react.default.createElement(_Layout.Box, props, _react.default.createElement(_Layout.Flex, {
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, header === null || header === void 0 ? void 0 : (_header$props = header.props) === null || _header$props === void 0 ? void 0 : _header$props.children, _react.default.createElement(_Button.Button, {
+    bg: "black36",
+    boxShadow: "none",
+    rounded: true,
+    hasHover: false,
+    padding: 1,
+    width: "30px",
+    height: "30px",
+    action: handleToggle,
+    "aria-expanded": isOpen
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    style: {
+      display: 'flex',
+      transition: 'transform 0.3s ease',
+      transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)'
+    }
+  }, _react.default.createElement(_Icons.IconChevronUp, {
+    color: "white"
+  })))), _react.default.createElement(_Layout.Box, {
+    ref: contentRef,
+    marginX: withSideOverflow ? "-20px" : "0",
+    paddingX: withSideOverflow ? "20px" : "0",
+    style: {
+      height,
+      transition: 'height 0.4s ease',
+      overflowY: 'hidden'
+    }
+  }, _react.default.createElement(_Layout.Box, {
+    pb: 3
+  }, body === null || body === void 0 ? void 0 : (_body$props = body.props) === null || _body$props === void 0 ? void 0 : _body$props.children)));
+};
+
+exports.CollapsiblePanel = CollapsiblePanel;
+CollapsiblePanel.defaultProps = {
+  children: null,
+  isOpen: undefined,
+  withSideOverflow: false
+};
+
+CollapsiblePanel.Header = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return children;
+};
+
+CollapsiblePanel.Header.displayName = 'CollapsiblePanelHeader';
+
+CollapsiblePanel.Body = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return children;
+};
+
+CollapsiblePanel.Body.displayName = 'CollapsiblePanelBody';

package/dist/molecules/Layout/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Controlled = exports.AutoControlled = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("../../../atoms/Layout");
+
+var _GoneBasic = require("../../../organisms/Cards/GoneBasic");
+
+var _CollapsiblePanel = require("./CollapsiblePanel");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+var _default = {
+  title: 'Molecules/Layout/CollapsiblePanel',
+  component: _CollapsiblePanel.CollapsiblePanel,
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Si se pasa, el componente se sincroniza con este valor.'
+    },
+    withSideOverflow: {
+      control: 'boolean',
+      description: 'Permite ver 20px de contenido por los lados, para mostrar las sombras.'
+    }
+  }
+};
+exports.default = _default;
+
+const ExampleContent = () => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Layout.Box, {
+  paddingY: 1
+}, _react.default.createElement(_GoneBasic.CardGoneBasic, {
+  paddingY: 1,
+  name: "Esperanza Alegre",
+  picture: "https://picsum.photos/id/236/96/96",
+  customColor: "orange",
+  date: "1936 - 2020"
+})), _react.default.createElement(_Layout.Box, {
+  paddingY: 1
+}, _react.default.createElement(_GoneBasic.CardGoneBasic, {
+  paddingY: 1,
+  name: "Aquilino Camacho",
+  picture: "https://picsum.photos/id/236/96/96",
+  customColor: "orange",
+  date: "1929 - 2020"
+})));
+
+const AutoControlled = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_CollapsiblePanel.CollapsiblePanel, args, _react.default.createElement(_CollapsiblePanel.CollapsiblePanel.Header, null, _react.default.createElement(_Layout.Box, {
+  fontSize: 3,
+  fontWeight: "bold",
+  color: "black96"
+}, args.title || 'Título editable')), _react.default.createElement(_CollapsiblePanel.CollapsiblePanel.Body, null, _react.default.createElement(ExampleContent, null))));
+
+exports.AutoControlled = AutoControlled;
+AutoControlled.args = {
+  title: 'MIS WEBS "IN MEMORIAM"',
+  isOpen: false,
+  withSideOverflow: true
+};
+
+const Controlled = args => {
+  var _args$isOpen;
+
+  const [isOpen, setIsOpen] = (0, _react.useState)((_args$isOpen = args.isOpen) !== null && _args$isOpen !== void 0 ? _args$isOpen : true);
+  (0, _react.useEffect)(() => {
+    if (typeof args.isOpen === 'boolean') {
+      setIsOpen(args.isOpen);
+    }
+  }, [args.isOpen]);
+  return _react.default.createElement("div", null, _react.default.createElement("button", {
+    type: "button",
+    onClick: () => setIsOpen(prev => !prev),
+    style: {
+      marginBottom: '16px'
+    }
+  }, isOpen ? 'Cerrar desde fuera' : 'Abrir desde fuera'), _react.default.createElement(_CollapsiblePanel.CollapsiblePanel, {
+    isOpen: isOpen
+  }, _react.default.createElement(_CollapsiblePanel.CollapsiblePanel.Header, null, _react.default.createElement(_Layout.Box, {
+    fontSize: 3,
+    fontWeight: "bold",
+    color: "black96"
+  }, args.title || 'Título editable')), _react.default.createElement(_CollapsiblePanel.CollapsiblePanel.Body, null, _react.default.createElement(ExampleContent, null))));
+};
+
+exports.Controlled = Controlled;
+Controlled.args = {
+  title: 'Controlado externamente',
+  isOpen: true,
+  withSideOverflow: true
+};

package/dist/molecules/Layout/CollapsiblePanel/index.js

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

package/dist/organisms/Cards/GoneBasic.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardGoneBasic = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _Card = require("../../atoms/Card");
+
+var _Layout = require("../../atoms/Layout");
+
+var _PlaceholderLoad = require("../../atoms/PlaceholderLoad");
+
+var _Typography = require("../../atoms/Typography");
+
+var _useWindowSize = _interopRequireDefault(require("../../utils/useWindowSize"));
+
+const CardGoneBasic = props => {
+  const {
+    width
+  } = (0, _useWindowSize.default)();
+  const {
+    picture,
+    name,
+    date,
+    customColor
+  } = props;
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    minWidth: "290px",
+    position: "relative",
+    width: "100%"
+  }, props), _react.default.createElement(_Layout.Flex, {
+    padding: 2,
+    width: "100%"
+  }, _react.default.createElement(_Layout.Grid, {
+    gridColumnGap: width > 500 ? 2 : 1,
+    width: "100%",
+    gridTemplateAreas: "'avatar title' 'avatar name'",
+    gridTemplateColumns: '48px auto'
+  }, _react.default.createElement(_Layout.GridItem, {
+    gridArea: "avatar",
+    display: "flex",
+    style: {
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  }, _react.default.createElement(_Avatar.Avatar, {
+    width: "48px",
+    height: "48px",
+    src: picture,
+    alt: name,
+    styleImg: {
+      objectFit: 'cover'
+    },
+    customColor: customColor
+  })), _react.default.createElement(_Layout.GridItem, {
+    gridArea: "title",
+    display: "flex",
+    style: {
+      alignItems: 'flex-end',
+      justifyContent: 'flex-start'
+    }
+  }, _react.default.createElement(_Typography.Text, {
+    sizeText: "display12",
+    color: "black36",
+    style: {
+      paddingRight: '5px'
+    }
+  }, "IN MEMORIAM"), _react.default.createElement(_Typography.Text, {
+    sizeText: "display12",
+    color: "black60",
+    fontWeight: "bold",
+    style: {
+      borderLeft: 'solid 2px #F2B440',
+      paddingLeft: '5px'
+    }
+  }, date)), _react.default.createElement(_Layout.GridItem, {
+    gridArea: "name",
+    display: "flex",
+    style: {
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      marginTop: '0px'
+    }
+  }, _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    color: "black",
+    fontWeight: "bold",
+    overflow: "hidden",
+    maxWidth: "200px"
+  }, name || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
+    height: "22px"
+  }))))));
+};
+
+exports.CardGoneBasic = CardGoneBasic;

package/dist/organisms/Cards/Service.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardService = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../../atoms/Button");
+
+var _Card = require("../../atoms/Card");
+
+var _Icon = require("../../atoms/Icon");
+
+var _Icons = require("../../atoms/Icons");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+const _excluded = ["titleLabel", "colorButton", "customTextColor", "actionButton", "children", "icon"];
+
+const CardService = props => {
+  const {
+    titleLabel,
+    colorButton,
+    customTextColor,
+    actionButton,
+    children,
+    icon
+  } = props,
+        rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    minWidth: "290px",
+    position: "relative",
+    maxWidth: "339px",
+    width: "100%"
+  }, rest), _react.default.createElement(_Layout.Flex, {
+    padding: 3,
+    width: "100%"
+  }, _react.default.createElement(_Layout.Grid, {
+    gridColumnGap: 2,
+    width: "100%",
+    gridTemplateAreas: "'avatar title go'",
+    gridTemplateColumns: "48px auto 1fr",
+    gridTemplateRows: "auto",
+    alignItems: "center"
+  }, _react.default.createElement(_Layout.GridItem, {
+    gridArea: "avatar"
+  }, icon), _react.default.createElement(_Layout.GridItem, {
+    gridArea: "title",
+    display: "flex",
+    style: {
+      alignItems: 'center'
+    }
+  }, _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    fontWeight: "bold",
+    color: customTextColor || "black96"
+  }, titleLabel.split('\n').map(line => _react.default.createElement("span", {
+    key: "".concat(line)
+  }, line, _react.default.createElement("br", null))))), _react.default.createElement(_Layout.GridItem, {
+    gridArea: "go",
+    display: "flex",
+    style: {
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  }, _react.default.createElement(_Button.Button, {
+    rounded: true,
+    width: "36px",
+    height: "36px",
+    padding: 0,
+    action: () => {
+      actionButton();
+    },
+    colorType: "none"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display36",
+    color: colorButton || 'orange'
+  }, _react.default.createElement(_Icons.IconArrowCircleRight, {
+    stroke: "1"
+  })))))), children);
+};
+
+exports.CardService = CardService;
+CardService.defaultProps = {
+  customTextColor: '',
+  colorButton: '',
+  icon: null
+};

package/dist/organisms/Cards/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "CardGone", {
     return _Gone.CardGone;
   }
 });
+Object.defineProperty(exports, "CardGoneBasic", {
+  enumerable: true,
+  get: function () {
+    return _GoneBasic.CardGoneBasic;
+  }
+});
 Object.defineProperty(exports, "CardGoneCeremony", {
   enumerable: true,
   get: function () {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "CardPersonalData", {
     return _PersonalData.CardPersonalData;
   }
 });
+Object.defineProperty(exports, "CardService", {
+  enumerable: true,
+  get: function () {
+    return _Service.CardService;
+  }
+});
 Object.defineProperty(exports, "CardUdiana", {
   enumerable: true,
   get: function () {
@@ -122,6 +134,8 @@ var _FlowersBack = require("./FlowersBack");
 
 var _Gone = require("./Gone");
 
+var _GoneBasic = require("./GoneBasic");
+
 var _GoneCeremony = require("./GoneCeremony");
 
 var _Live = require("./Live");
@@ -138,4 +152,6 @@ var _PayInfo = require("./PayInfo");
 
 var _PersonalData = require("./PersonalData");
 
+var _Service = require("./Service");
+
 var _Udiana = require("./Udiana");

package/dist/organisms/Header/Header.js

@@ -9,18 +9,20 @@ exports.Header = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _css = _interopRequireDefault(require("@styled-system/css"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactLivechat = _interopRequireDefault(require("react-livechat"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _Button = require("../../atoms/Button");
 
 var _Icon = require("../../atoms/Icon");
 
 var _Icons = require("../../atoms/Icons");
 
-var _IconSee = _interopRequireDefault(require("../../atoms/Icons/IconSee"));
-
 var _Layout = require("../../atoms/Layout");
 
 var _Pill = require("../../atoms/Pill");
@@ -29,33 +31,42 @@ var _Typography = require("../../atoms/Typography");
 
 var _useWindowSize = _interopRequireDefault(require("../../utils/useWindowSize"));
 
-var _Cards = require("../Cards");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 
+const BadgeStyled = _styledComponents.default.span.withConfig({
+  displayName: "Header__BadgeStyled",
+  componentId: "sc-c0gxqz-0"
+})((0, _css.default)({
+  backgroundColor: 'red',
+  position: 'absolute',
+  top: 0,
+  right: 1,
+  width: '6px',
+  height: '6px',
+  borderRadius: 7
+}));
+
 const Header = (_ref, props) => {
   let {
+    profileRouteActive,
     shareAction,
-    lines,
-    onGoTo,
     goToHome,
+    goToUserProfile,
     logo,
     customColor,
     customTextColor,
     customButtonColor,
     shareLabel,
     helpLabel,
-    adminLineLabel,
-    noAdminLineLabel,
     eventAction,
     paramsLiveChat,
     allowShowLiveChat,
     notLoggedIn,
-    actionShare
+    actionShare,
+    showUserNotificationBadge
   } = _ref;
-  const [isOpened, setIsOpened] = (0, _react.useState)(false);
   const {
     width
   } = (0, _useWindowSize.default)();
@@ -160,101 +171,25 @@ const Header = (_ref, props) => {
       display: 'inline-block',
       position: 'absolute'
     }
-  }), (lines === null || lines === void 0 ? void 0 : lines.length) > 1 && _react.default.createElement(_Pill.Pill, {
+  }), _react.default.createElement(_Pill.Pill, {
     padding: 1,
     borderRadius: 7,
     marginLeft: 1,
     style: {
-      cursor: 'pointer',
+      position: 'relative',
+      cursor: !profileRouteActive ? 'pointer' : 'unset',
       backgroundColor: customButtonColor || ''
     },
-    onClick: () => {
-      if (eventAction) {
-        eventAction('navbar_eye_button_clicked');
-      }
-
-      setIsOpened(!isOpened);
-    }
+    onClick: () => profileRouteActive ? null : goToUserProfile(),
+    boxShadow: profileRouteActive ? '0px 2px 4px 0px #2626363D inset; 0px -1px 0px 0px #FFFFFF0F inset;' : ''
   }, _react.default.createElement(_Icon.Icon, {
     sizeIcon: "display24",
     color: customTextColor || 'black60'
-  }, _react.default.createElement(_IconSee.default, null))))), isOpened && _react.default.createElement(_Layout.Box, {
-    backgroundColor: "black",
-    paddingBottom: 8,
-    paddingX: 3,
-    marginTop: 1,
-    overflow: "scroll",
-    maxHeight: "calc(100vh - 36px)"
-  }, lines !== null && lines !== void 0 && lines.filter(element => element.permissionType >= 3).length ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Typography.Text, {
-    marginBottom: 3,
-    fontWeight: "bold",
-    color: "white",
-    sizeText: "display24",
-    paddingTop: 4
-  }, adminLineLabel), _react.default.createElement(_Layout.Box, null, lines === null || lines === void 0 ? void 0 : lines.filter(element => element.permissionType >= 3).map(el => {
-    var _el$pictures, _el$dateFrom, _el$dateFrom2, _el$dateTo;
-
-    return _react.default.createElement(_Layout.Box, {
-      key: el.lineId,
-      paddingY: 1,
-      onClick: () => {
-        if (onGoTo) {
-          onGoTo(el.lineId, el.nameUrl);
-        }
-
-        setIsOpened(false);
-      },
-      style: {
-        cursor: 'pointer'
-      }
-    }, _react.default.createElement(_Cards.CardGone, {
-      isOpened: false,
-      isAdmin: false,
-      id: el.lineId,
-      maxWidth: "100%",
-      customColor: customColor,
-      name: el === null || el === void 0 ? void 0 : el.name,
-      picture: (_el$pictures = el.pictures) === null || _el$pictures === void 0 ? void 0 : _el$pictures.m,
-      date: (el === null || el === void 0 ? void 0 : (_el$dateFrom = el.dateFrom) === null || _el$dateFrom === void 0 ? void 0 : _el$dateFrom.year) && "".concat(el === null || el === void 0 ? void 0 : (_el$dateFrom2 = el.dateFrom) === null || _el$dateFrom2 === void 0 ? void 0 : _el$dateFrom2.year, " - ").concat(el === null || el === void 0 ? void 0 : (_el$dateTo = el.dateTo) === null || _el$dateTo === void 0 ? void 0 : _el$dateTo.year)
-    }));
-  }))) : null, lines !== null && lines !== void 0 && lines.filter(element => element.permissionType >= 0 && element.permissionType < 3).length ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Typography.Text, {
-    marginBottom: 3,
-    fontWeight: "bold",
-    color: "white",
-    sizeText: "display24",
-    paddingTop: 4
-  }, noAdminLineLabel), _react.default.createElement(_Layout.Box, null, lines === null || lines === void 0 ? void 0 : lines.filter(element => element.permissionType >= 0 && element.permissionType < 3).map(el => {
-    var _el$pictures2, _el$dateFrom3, _el$dateFrom4, _el$dateTo2;
-
-    return _react.default.createElement(_Layout.Box, {
-      key: el.lineId,
-      paddingY: 1,
-      onClick: () => {
-        if (onGoTo) {
-          onGoTo(el.lineId, el.nameUrl);
-        }
-
-        setIsOpened(false);
-      },
-      style: {
-        cursor: 'pointer'
-      }
-    }, _react.default.createElement(_Cards.CardGone, {
-      isOpened: false,
-      isAdmin: false,
-      id: el.lineId,
-      maxWidth: "100%",
-      name: el === null || el === void 0 ? void 0 : el.name,
-      picture: (_el$pictures2 = el.pictures) === null || _el$pictures2 === void 0 ? void 0 : _el$pictures2.m,
-      customColor: customColor,
-      date: (el === null || el === void 0 ? void 0 : (_el$dateFrom3 = el.dateFrom) === null || _el$dateFrom3 === void 0 ? void 0 : _el$dateFrom3.year) && "".concat(el === null || el === void 0 ? void 0 : (_el$dateFrom4 = el.dateFrom) === null || _el$dateFrom4 === void 0 ? void 0 : _el$dateFrom4.year, " - ").concat(el === null || el === void 0 ? void 0 : (_el$dateTo2 = el.dateTo) === null || _el$dateTo2 === void 0 ? void 0 : _el$dateTo2.year)
-    }));
-  }))) : null));
+  }, _react.default.createElement(_Icons.IconUser, null)), showUserNotificationBadge && _react.default.createElement(BadgeStyled, null)))));
 };
 
 exports.Header = Header;
 Header.defaultProps = {
-  lines: [],
   logo: null,
   customColor: null,
   customTextColor: null,
@@ -266,5 +201,6 @@ Header.defaultProps = {
   shareCopy: null,
   eventAction: null,
   paramsLiveChat: null,
-  allowShowLiveChat: true
+  allowShowLiveChat: true,
+  showUserNotificationBadge: false
 };

package/dist/organisms/Navbar/Default/Navbar.js

@@ -68,7 +68,7 @@ const Navbar = props => {
     action: e => element.action && element.action(e),
     backgroundColor: element.customColorSecondary,
     colorType: element.customColorSecondary ? 'none' : element.colorType || 'none',
-    color: element.id === 'lines' && pathname !== null && pathname !== void 0 && pathname.includes('lines') && !pathname.includes('ceremony') && !pathname.includes('family-zone') ? element.customColorPrimary || 'orange' : element.id !== 'lines' && pathname !== null && pathname !== void 0 && pathname.includes(element.id) ? element.customColorPrimary || 'orange' : element.colorIcon || 'black36',
+    color: element.id === 'lines' && pathname !== null && pathname !== void 0 && pathname.includes('lines') && !pathname.includes('ceremony') && !pathname.includes('family-zone') && !pathname.includes('services') ? element.customColorPrimary || 'orange' : element.id !== 'lines' && pathname !== null && pathname !== void 0 && pathname.includes(element.id) ? element.customColorPrimary || 'orange' : element.colorIcon || 'black36',
     rounded: element.rounded,
     sizeButton: element.rounded ? 'big' : 'small',
     marginTop: element.rounded && -6 || 0,

package/dist/organisms/Navbar/mocks.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Icons = require("../../atoms/Icons");
 
 const mockNavItems = [{
-  icon: _react.default.createElement(_Icons.IconInfoCircle, null),
+  icon: _react.default.createElement(_Icons.IconLanguage, null),
   tooltip: 'lines',
   id: 'lines',
   action: () => void 0
@@ -35,9 +35,9 @@ const mockNavItems = [{
   id: 'family-zone',
   action: () => void 0
 }, {
-  icon: _react.default.createElement(_Icons.IconUser, null),
-  tooltip: 'User',
-  id: 'profile',
+  icon: _react.default.createElement(_Icons.IconViewThumbnails, null),
+  tooltip: 'Services',
+  id: 'services',
   action: () => void 0
 }];
 exports.mockNavItems = mockNavItems;
@@ -215,7 +215,7 @@ const mockMoreOptionsActiveCustom = [{
 }];
 exports.mockMoreOptionsActiveCustom = mockMoreOptionsActiveCustom;
 const mockNavItemsCustom = [{
-  icon: _react.default.createElement(_Icons.IconInfoCircle, null),
+  icon: _react.default.createElement(_Icons.IconLanguage, null),
   tooltip: 'Info',
   id: 'lines',
   customColorPrimary: 'purple',
@@ -242,9 +242,9 @@ const mockNavItemsCustom = [{
   customColorPrimary: 'purple',
   action: () => void 0
 }, {
-  icon: _react.default.createElement(_Icons.IconUser, null),
-  tooltip: 'User',
-  id: 'profile',
+  icon: _react.default.createElement(_Icons.IconViewThumbnails, null),
+  tooltip: 'Services',
+  id: 'services',
   customColorPrimary: 'purple',
   action: () => void 0
 }];

package/dist/theme.js

@@ -23,7 +23,7 @@ const theme = {
     }
   },
   opacity: ['0', '0.25', '0.5', '0.75', '1'],
-  space: ['0', '6px', '12px', '18px', '24px', '30px', '36px', '48px', '60px'],
+  space: ['0', '6px', '12px', '18px', '24px', '30px', '36px', '48px', '60px', '72px', '84px', '96px'],
   lineHeights: ['18px', '22px', '24px', '32px', '44px', '60px', '72px'],
   radii: [0, '2px', '6px', '12px', '14px', '18px', '100%', '999em'],
   borderWidths: [0, '1px', '2px', '4px'],
@@ -71,6 +71,7 @@ const theme = {
     black36: '#B9B6B8',
     black60: '#8A8689',
     black84: '#5B565A',
+    black96: '#2A2A3C',
     blue: '#54C0D4',
     blueHover: '#4AA9BA',
     blueActive: '#4091A1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.2.102",
+  "version": "1.3.0",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {