@appquality/unguess-design-system 3.1.2-nav-beta → 3.1.2-sentiment-beta

package/build/index.js

@@ -23,6 +23,7 @@ var tooltip = require('@nivo/tooltip');
 var pie = require('@nivo/pie');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
+var line = require('@nivo/line');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactForms = require('@zendeskgarden/react-forms');
@@ -317,8 +318,8 @@ const UgContainerCard = styled__default["default"](reactNotifications.Well) `
 `;
 const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({}, props));
 
-var _a, _b, _c, _d, _e, _f, _g$8, _h;
-const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$8 = reactTheming.DEFAULT_THEME.components) === null || _g$8 === void 0 ? void 0 : _g$8.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
+var _a, _b, _c, _d, _e, _f, _g$d, _h;
+const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$d = reactTheming.DEFAULT_THEME.components) === null || _g$d === void 0 ? void 0 : _g$d.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
         color: getColor(colors.primaryHue, 600),
     }), "text.success": () => ({
         color: getColor(colors.successHue, 700),
@@ -438,7 +439,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
             "&:hover": {
                 borderColor: getColor(colors.accentHue, 800),
                 color: getColor(colors.accentHue, 800),
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
             },
             "&:active": {
                 borderColor: getColor(colors.accentHue, 800),
@@ -448,7 +449,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
         })), (isAccent && isBasic && {
             color: getColor(colors.accentHue, 700),
             "&:hover": {
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
                 color: getColor(colors.accentHue, 800),
             },
             "&:active": {
@@ -492,7 +493,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
             "&:hover": {
                 borderColor: getColor(colors.accentHue, 800),
                 color: getColor(colors.accentHue, 800),
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
             },
             "&:active": {
                 borderColor: getColor(colors.accentHue, 800),
@@ -510,7 +511,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
         })), (isAccent && isBasic && {
             color: getColor(colors.accentHue, 700),
             "&:hover": {
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
                 color: getColor(colors.accentHue, 800),
             },
             "&:active": {
@@ -553,6 +554,7 @@ const GlobalStyle = styled.createGlobalStyle `
 
   ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
   }
 
   ::-webkit-scrollbar-track {
@@ -813,9 +815,9 @@ Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
 var _path$A;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
 var SvgUgSquare = function SvgUgSquare(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -828,9 +830,9 @@ var SvgUgSquare = function SvgUgSquare(props) {
 };
 
 var _path$z;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
 var SvgUgCircle = function SvgUgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -843,9 +845,9 @@ var SvgUgCircle = function SvgUgCircle(props) {
 };
 
 var _path$y;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgUgTriangle = function SvgUgTriangle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -858,9 +860,9 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
 };
 
 var _rect$4, _path$x, _path2$b, _path3$4;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -884,9 +886,9 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
 };
 
 var _rect$3, _path$w, _path2$a;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgCampaignLocked = function SvgCampaignLocked(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -911,9 +913,9 @@ var SvgCampaignLocked = function SvgCampaignLocked(props) {
 };
 
 var _rect$2, _path$v, _path2$9;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -940,9 +942,9 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
 };
 
 var _rect$1, _path$u, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -986,16 +988,16 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
   })));
 };
 
-var _g$7, _path$t, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _g$c, _path$t, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$c || (_g$c = /*#__PURE__*/React__namespace.createElement("g", {
     opacity: 0.3
   }, /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.3,
@@ -1058,16 +1060,16 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var _g$6, _path$s;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _g$b, _path$s;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$b || (_g$b = /*#__PURE__*/React__namespace.createElement("g", {
     opacity: 0.3
   }, /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.3,
@@ -1628,7 +1630,7 @@ const Tooltip$1 = styled__default["default"].div `
   box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
   max-width: 216px;
 `;
-const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 };
+const DEFAULT_CHART_MARGINS$1 = { top: 0, right: 0, bottom: 30, left: 30 };
 const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBottomLabel, colors, tooltip, legend, }) => {
     const theme = React.useContext(styled.ThemeContext);
     const keys = [...new Set(data.map(({ keys }) => Object.keys(keys)).flat())];
@@ -1664,7 +1666,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
                             },
                         } }), colors: actualColors, layout: "horizontal", tooltip: tooltip
                         ? (node) => jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip(node) })
-                        : ({ id, value, indexValue }) => (jsxRuntime.jsx(Tooltip$1, { children: jsxRuntime.jsxs(MD, { children: [indexValue, " - ", id, ":", " ", jsxRuntime.jsx(MD, Object.assign({ tag: "span", isBold: true }, { children: value }))] }) })), padding: padding || 0.3, margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS), margin), enableGridY: false, enableLabel: false, enableGridX: true, gridXValues: 3, valueScale: {
+                        : ({ id, value, indexValue }) => (jsxRuntime.jsx(Tooltip$1, { children: jsxRuntime.jsxs(MD, { children: [indexValue, " - ", id, ":", " ", jsxRuntime.jsx(MD, Object.assign({ tag: "span", isBold: true }, { children: value }))] }) })), padding: padding || 0.3, margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS$1), margin), enableGridY: false, enableLabel: false, enableGridX: true, gridXValues: 3, valueScale: {
                         type: "linear",
                         nice: true,
                     } }, (axisBottomLabel && {
@@ -1673,7 +1675,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
                         tickPadding: 10,
                         tickValues: 3,
                         legend: axisBottomLabel,
-                        legendOffset: ((margin === null || margin === void 0 ? void 0 : margin.bottom) || DEFAULT_CHART_MARGINS.bottom) - 10,
+                        legendOffset: ((margin === null || margin === void 0 ? void 0 : margin.bottom) || DEFAULT_CHART_MARGINS$1.bottom) - 10,
                         legendPosition: "middle",
                     },
                 }), (axisLeftLabel && {
@@ -1681,7 +1683,7 @@ const BarChart = ({ data, width, height, padding, margin, axisLeftLabel, axisBot
                         tickSize: 0,
                         tickPadding: 20,
                         legend: axisLeftLabel,
-                        legendOffset: (((margin === null || margin === void 0 ? void 0 : margin.left) || DEFAULT_CHART_MARGINS.left) - 10) * -1,
+                        legendOffset: (((margin === null || margin === void 0 ? void 0 : margin.left) || DEFAULT_CHART_MARGINS$1.left) - 10) * -1,
                         legendPosition: "middle",
                     },
                 }), { layers: ["bars", "grid", "axes"] })) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: actualColors, data: keys }, (typeof legend === "object" && legend)))) : undefined }))] }));
@@ -1935,6 +1937,353 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
             } }) })));
 };
 
+var _g$a, _defs$7;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var SvgSentiment1 = function SvgSentiment1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+    width: 27,
+    height: 26,
+    viewBox: "0 0 27 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g$a || (_g$a = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#clip0_21_19131)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
+    fill: "#E9979B"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M18.7975 21.5782C18.7643 21.4489 17.9361 18.4155 13.2768 18.4155C8.61687 18.4155 7.78931 21.4489 7.75612 21.5782C7.73674 21.6544 7.74333 21.7347 7.77489 21.807C7.80644 21.8792 7.86124 21.9393 7.93093 21.9783C8.001 22.0168 8.08189 22.0322 8.1616 22.0222C8.24131 22.0121 8.3156 21.9773 8.37347 21.9227C8.38748 21.9089 9.81468 20.5822 13.2768 20.5822C16.739 20.5822 18.1669 21.9089 18.1802 21.9219C18.2373 21.9772 18.3112 22.0128 18.3907 22.0233C18.4703 22.0339 18.5512 22.0188 18.6213 21.9804C18.6916 21.9415 18.7469 21.8811 18.7787 21.8084C18.8106 21.7358 18.8172 21.6549 18.7975 21.5782ZM11.5856 12.4883C9.18479 10.1374 5.32657 10.11 5.16357 10.11C4.97366 10.1182 4.7943 10.1978 4.66285 10.3323C4.5314 10.4668 4.45798 10.6457 4.45789 10.8319C4.45779 11.018 4.53102 11.197 4.66234 11.3316C4.79365 11.4662 4.97293 11.546 5.16283 11.5544C5.18422 11.5544 6.58265 11.5703 8.10057 12.0867C7.66319 12.5489 7.37628 13.2668 7.37628 14.0822C7.37628 15.479 8.20162 16.61 9.2202 16.61C10.2388 16.61 11.0641 15.479 11.0641 14.0822C11.0641 13.9565 11.0501 13.8367 11.0368 13.716C11.0464 13.716 11.0553 13.7211 11.0641 13.7211C11.2101 13.7214 11.3529 13.6792 11.4744 13.5999C11.5959 13.5206 11.6906 13.4078 11.7465 13.2757C11.8024 13.1436 11.8169 12.9982 11.7883 12.858C11.7596 12.7178 11.6891 12.5891 11.5856 12.4883ZM21.3901 10.11C21.2271 10.11 17.3696 10.1374 14.9681 12.4883C14.8646 12.5891 14.794 12.7178 14.7654 12.858C14.7367 12.9982 14.7513 13.1436 14.8072 13.2757C14.863 13.4078 14.9577 13.5206 15.0792 13.5999C15.2007 13.6792 15.3435 13.7214 15.4895 13.7211C15.4991 13.7211 15.5072 13.716 15.5161 13.716C15.5043 13.8367 15.4895 13.9565 15.4895 14.0822C15.4895 15.479 16.3149 16.61 17.3335 16.61C18.352 16.61 19.1774 15.479 19.1774 14.0822C19.1774 13.2668 18.8905 12.5489 18.4531 12.0867C19.4008 11.77 20.3908 11.5907 21.3916 11.5544C21.4884 11.5543 21.5843 11.5356 21.6738 11.4992C21.7632 11.4628 21.8445 11.4095 21.9129 11.3424C21.9813 11.2753 22.0356 11.1956 22.0725 11.1079C22.1095 11.0203 22.1285 10.9263 22.1284 10.8315C22.1283 10.7366 22.1091 10.6427 22.072 10.5552C22.0348 10.4676 21.9804 10.388 21.9118 10.321C21.8433 10.254 21.7619 10.2009 21.6724 10.1647C21.5829 10.1285 21.4869 10.1099 21.3901 10.11Z",
+    fill: "#2F3941"
+  }))), _defs$7 || (_defs$7 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "clip0_21_19131"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.5525,
+    height: 26,
+    fill: "white"
+  })))));
+};
+
+var _g$9, _defs$6;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+var SvgSentiment2 = function SvgSentiment2(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+    width: 27,
+    height: 26,
+    viewBox: "0 0 27 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g$9 || (_g$9 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#clip0_21_19130)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
+    fill: "#F2C1C3"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M18.7975 21.5782C18.7643 21.4489 17.9361 18.4155 13.2768 18.4155C8.61687 18.4155 7.78932 21.4489 7.75612 21.5782C7.73674 21.6544 7.74333 21.7347 7.77489 21.807C7.80644 21.8792 7.86124 21.9393 7.93093 21.9783C8.001 22.0168 8.08189 22.0322 8.1616 22.0222C8.24131 22.0121 8.3156 21.9773 8.37347 21.9227C8.38748 21.9089 9.81468 20.5822 13.2768 20.5822C16.739 20.5822 18.1669 21.9089 18.1802 21.9219C18.2373 21.9772 18.3112 22.0128 18.3907 22.0233C18.4703 22.0339 18.5512 22.0188 18.6213 21.9804C18.6916 21.9415 18.7469 21.8811 18.7787 21.8084C18.8106 21.7358 18.8172 21.6549 18.7975 21.5782V21.5782ZM11.5856 12.4883C9.18479 10.1374 5.32657 10.11 5.16357 10.11C4.97366 10.1182 4.7943 10.1978 4.66285 10.3323C4.5314 10.4668 4.45798 10.6457 4.45789 10.8319C4.45779 11.018 4.53102 11.197 4.66234 11.3316C4.79365 11.4662 4.97293 11.546 5.16283 11.5544C5.18422 11.5544 6.58265 11.5703 8.10057 12.0867C7.66319 12.5489 7.37628 13.2668 7.37628 14.0822C7.37628 15.479 8.20162 16.61 9.2202 16.61C10.2388 16.61 11.0641 15.479 11.0641 14.0822C11.0641 13.9565 11.0501 13.8367 11.0368 13.716C11.0464 13.716 11.0553 13.7211 11.0641 13.7211C11.2101 13.7214 11.3529 13.6792 11.4744 13.5999C11.5959 13.5206 11.6906 13.4078 11.7465 13.2757C11.8024 13.1436 11.8169 12.9982 11.7883 12.858C11.7596 12.7178 11.6891 12.5891 11.5856 12.4883V12.4883ZM21.3901 10.11C21.2271 10.11 17.3696 10.1374 14.9681 12.4883C14.8646 12.5891 14.794 12.7178 14.7654 12.858C14.7367 12.9982 14.7513 13.1436 14.8072 13.2757C14.863 13.4078 14.9577 13.5206 15.0792 13.5999C15.2007 13.6792 15.3435 13.7214 15.4895 13.7211C15.4991 13.7211 15.5072 13.716 15.5161 13.716C15.5043 13.8367 15.4895 13.9565 15.4895 14.0822C15.4895 15.479 16.3149 16.61 17.3335 16.61C18.352 16.61 19.1774 15.479 19.1774 14.0822C19.1774 13.2668 18.8905 12.5489 18.4531 12.0867C19.4008 11.77 20.3908 11.5907 21.3916 11.5544C21.4884 11.5543 21.5843 11.5356 21.6738 11.4992C21.7632 11.4628 21.8445 11.4095 21.9129 11.3424C21.9813 11.2753 22.0356 11.1956 22.0725 11.1079C22.1095 11.0203 22.1285 10.9263 22.1284 10.8315C22.1283 10.7366 22.1091 10.6427 22.072 10.5552C22.0348 10.4676 21.9804 10.388 21.9118 10.321C21.8433 10.254 21.7619 10.2009 21.6724 10.1647C21.5829 10.1285 21.4869 10.1099 21.3901 10.11V10.11Z",
+    fill: "#2F3941"
+  }))), _defs$6 || (_defs$6 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "clip0_21_19130"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.5525,
+    height: 26,
+    fill: "white"
+  })))));
+};
+
+var _g$8, _defs$5;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var SvgSentiment3 = function SvgSentiment3(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+    width: 27,
+    height: 26,
+    viewBox: "0 0 27 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g$8 || (_g$8 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#clip0_21_19129)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
+    fill: "#FFD7A4"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.16472 13.7641C9.18309 13.7641 10.0086 12.6323 10.0086 11.2363C10.0086 9.84022 9.18309 8.7085 8.16472 8.7085C7.14635 8.7085 6.3208 9.84022 6.3208 11.2363C6.3208 12.6323 7.14635 13.7641 8.16472 13.7641Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.7531 13.7641C18.7715 13.7641 19.597 12.6323 19.597 11.2363C19.597 9.84022 18.7715 8.7085 17.7531 8.7085C16.7347 8.7085 15.9092 9.84022 15.9092 11.2363C15.9092 12.6323 16.7347 13.7641 17.7531 13.7641Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M18.122 18.0978H7.79604C7.60043 18.0978 7.41282 18.0217 7.2745 17.8862C7.13618 17.7508 7.05847 17.5671 7.05847 17.3755C7.05847 17.184 7.13618 17.0003 7.2745 16.8649C7.41282 16.7294 7.60043 16.6533 7.79604 16.6533H18.122C18.3176 16.6533 18.5052 16.7294 18.6435 16.8649C18.7819 17.0003 18.8596 17.184 18.8596 17.3755C18.8596 17.5671 18.7819 17.7508 18.6435 17.8862C18.5052 18.0217 18.3176 18.0978 18.122 18.0978Z",
+    fill: "#2F3941"
+  }))), _defs$5 || (_defs$5 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "clip0_21_19129"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.5525,
+    height: 26,
+    fill: "white"
+  })))));
+};
+
+var _g$7, _defs$4;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var SvgSentiment4 = function SvgSentiment4(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+    width: 27,
+    height: 26,
+    viewBox: "0 0 27 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#clip0_21_19127)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
+    fill: "#B3E8D9"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.75559 16.8093C7.78879 16.9386 8.61708 19.9719 13.2763 19.9719C17.9363 19.9719 18.7638 16.9386 18.797 16.8093C18.8164 16.7331 18.8098 16.6527 18.7782 16.5805C18.7467 16.5083 18.6919 16.4481 18.6222 16.4092C18.5522 16.3704 18.4713 16.3549 18.3915 16.3649C18.3117 16.3749 18.2374 16.41 18.1797 16.4648C18.1656 16.4785 16.7384 17.8052 13.2763 17.8052C9.81415 17.8052 8.38622 16.4785 8.37294 16.4655C8.31584 16.4103 8.24194 16.3747 8.16239 16.3641C8.08283 16.3536 8.00193 16.3686 7.93187 16.407C7.86156 16.4459 7.80623 16.5063 7.77439 16.579C7.74254 16.6517 7.73594 16.7326 7.75559 16.8093Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.85076 12.0267C9.86913 12.0267 10.6947 10.895 10.6947 9.49897C10.6947 8.10292 9.86913 6.97119 8.85076 6.97119C7.83239 6.97119 7.00684 8.10292 7.00684 9.49897C7.00684 10.895 7.83239 12.0267 8.85076 12.0267Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.7015 12.0267C18.7198 12.0267 19.5454 10.895 19.5454 9.49897C19.5454 8.10292 18.7198 6.97119 17.7015 6.97119C16.6831 6.97119 15.8575 8.10292 15.8575 9.49897C15.8575 10.895 16.6831 12.0267 17.7015 12.0267Z",
+    fill: "#2F3941"
+  }))), _defs$4 || (_defs$4 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "clip0_21_19127"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 26.5525,
+    height: 26,
+    fill: "white"
+  })))));
+};
+
+var _g$6, _defs$3;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var SvgSentiment5 = function SvgSentiment5(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+    width: 26,
+    height: 26,
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#clip0_21_19125)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M25.2051 13C25.2051 20.1796 19.5626 26 12.6025 26C5.64314 26 0 20.1796 0 13C0 5.82111 5.64314 0 12.6025 0C19.5626 0 25.2051 5.82111 25.2051 13Z",
+    fill: "#66D1B3"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.36209 16.8093C7.39359 16.9386 8.17985 19.9719 12.6026 19.9719C17.0261 19.9719 17.8117 16.9386 17.8432 16.8093C17.8616 16.7331 17.8553 16.6527 17.8254 16.5805C17.7954 16.5083 17.7434 16.4481 17.6773 16.4092C17.6108 16.3704 17.534 16.3549 17.4583 16.3649C17.3825 16.3749 17.312 16.41 17.2572 16.4648C17.2439 16.4785 15.8891 17.8052 12.6026 17.8052C9.31618 17.8052 7.96071 16.4785 7.94811 16.4655C7.8939 16.4103 7.82375 16.3747 7.74824 16.3641C7.67272 16.3536 7.59592 16.3686 7.52942 16.407C7.46268 16.4459 7.41016 16.5063 7.37993 16.579C7.3497 16.6517 7.34343 16.7326 7.36209 16.8093Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.4016 12.0267C9.36829 12.0267 10.152 10.895 10.152 9.49897C10.152 8.10292 9.36829 6.97119 8.4016 6.97119C7.4349 6.97119 6.65125 8.10292 6.65125 9.49897C6.65125 10.895 7.4349 12.0267 8.4016 12.0267Z",
+    fill: "#2F3941"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M16.8032 12.0267C17.7699 12.0267 18.5536 10.895 18.5536 9.49897C18.5536 8.10292 17.7699 6.97119 16.8032 6.97119C15.8365 6.97119 15.0529 8.10292 15.0529 9.49897C15.0529 10.895 15.8365 12.0267 16.8032 12.0267Z",
+    fill: "#2F3941"
+  }))), _defs$3 || (_defs$3 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "clip0_21_19125"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 25.2051,
+    height: 26,
+    fill: "white"
+  })))));
+};
+
+const Point = styled__default["default"].g `
+  transform: translate(-13px, -13px);
+`;
+const ScrollingContainer$1 = styled__default["default"].div `
+  width: 100%;
+  overflow-x: scroll;
+`;
+const SentimentContainer = styled__default["default"](ChartContainer) `
+  /* Show dotted lines */
+  svg > g > g:nth-child(2) > line {
+    stroke-dasharray: 2;
+  }
+
+  /* Show first and last vertical lines */
+  svg > g > g:first-child > line:first-child {
+    transform: translate(2px, 0);
+    stroke-dasharray: 2;
+  }
+
+  svg > g > g:first-child > line:last-child {
+    transform: translate(-2px, 0);
+    stroke-dasharray: 2;
+  }
+
+  /* Show first and last horizontal lines */
+  svg > g > g:nth-child(2) > line:first-child {
+    transform: translate(0, -6px);
+  }
+
+  svg > g > g:nth-child(2) > line:last-child {
+    transform: translate(0, 2px);
+  }
+`;
+const DEFAULT_CHART_MARGINS = { top: 0, right: 0, bottom: 30, left: 30 };
+const formatSentiment = (value, i18n) => {
+    var _a, _b, _c, _d, _e;
+    switch (value) {
+        case 1:
+            return (_a = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.veryNegative) !== null && _a !== void 0 ? _a : "Very Negative";
+        case 2:
+            return (_b = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.negative) !== null && _b !== void 0 ? _b : "Negative";
+        case 3:
+            return (_c = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.neutral) !== null && _c !== void 0 ? _c : "Neutral";
+        case 4:
+            return (_d = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.positive) !== null && _d !== void 0 ? _d : "Positive";
+        case 5:
+            return (_e = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.veryPositive) !== null && _e !== void 0 ? _e : "Very Positive";
+        default:
+            return "";
+    }
+};
+const formatPoint = (value) => {
+    switch (value) {
+        case 1:
+            return jsxRuntime.jsx(SvgSentiment1, { style: { width: "16px" } });
+        case 2:
+            return jsxRuntime.jsx(SvgSentiment2, { style: { width: "16px" } });
+        case 3:
+            return jsxRuntime.jsx(SvgSentiment3, { style: { width: "16px" } });
+        case 4:
+            return jsxRuntime.jsx(SvgSentiment4, { style: { width: "16px" } });
+        case 5:
+            return jsxRuntime.jsx(SvgSentiment5, { style: { width: "16px" } });
+        default:
+            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+};
+const formatAxisX = (value) => {
+    // This is to avoid printing the first and last value of the axis to make room for the chart (2 empty columns)
+    if (!value || value === "start" || value === "end")
+        return "";
+    //Print only the first 10 characters
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [value.toString().length > 15 ? value.toString().substring(0, 15) + "..." : value.toString(), jsxRuntime.jsx("title", { children: value })] }));
+};
+const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
+    var _a;
+    const theme = React.useContext(styled.ThemeContext);
+    return (jsxRuntime.jsx(ScrollingContainer$1, { children: jsxRuntime.jsx(SentimentContainer, Object.assign({ width: width, height: height, id: "chart-container", style: { overflow: "hidden" } }, { children: jsxRuntime.jsx(line.ResponsiveLine, { theme: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { fontSize: theme.fontSizes.sm, axis: {
+                        legend: {
+                            text: {
+                                fill: getColor(theme.colors.primaryHue, 600),
+                                fontSize: theme.fontSizes.md,
+                            },
+                        },
+                    }, grid: {
+                        line: {
+                            stroke: theme.palette.grey[400],
+                            strokeWidth: 1,
+                        },
+                    } }), curve: "monotoneX", colors: theme.palette.grey[600], data: [{
+                        id: data.id,
+                        data: [
+                            {
+                                x: "start",
+                            },
+                            ...data.data,
+                            {
+                                x: "end",
+                            }
+                        ]
+                    }
+                ], margin: Object.assign(Object.assign({}, DEFAULT_CHART_MARGINS), margin), gridXValues: 1, gridYValues: 5, yScale: {
+                    type: "linear",
+                    min: 0,
+                    max: 6,
+                }, axisBottom: {
+                    tickSize: 0,
+                    tickPadding: 10,
+                    format: (value) => formatAxisX(value),
+                }, axisLeft: {
+                    tickSize: 0,
+                    tickPadding: 10,
+                    format: () => "",
+                }, pointSymbol: ({ datum }) => {
+                    var _a;
+                    return jsxRuntime.jsx(Point, { children: formatPoint((_a = datum.y) !== null && _a !== void 0 ? _a : "") });
+                }, 
+                // To use the tooltip, we need to set "useMesh" to true and "enableSlices" to "false"
+                tooltip: tooltip ? (node) => {
+                    var _a, _b;
+                    const point = node.point.data;
+                    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
+                            value: formatSentiment(point.y, i18n),
+                            label: point.x.toString(),
+                            data: {
+                                customData: (_a = data.data[node.point.index].custom_data) !== null && _a !== void 0 ? _a : undefined,
+                                yValue: (_b = point.y.toString()) !== null && _b !== void 0 ? _b : "",
+                                icon: formatPoint(point.y),
+                                sentimentText: formatSentiment(point.y, i18n),
+                            }
+                        }) }));
+                } : undefined, sliceTooltip: tooltip ? (e) => {
+                    var _a;
+                    const point = e.slice.points[0].data;
+                    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
+                            value: formatSentiment(point.y, i18n),
+                            label: point.xFormatted,
+                            data: {
+                                customData: (_a = point.custom_data) !== null && _a !== void 0 ? _a : undefined,
+                                yValue: point.yFormatted,
+                                icon: formatPoint(point.y),
+                                sentimentText: formatSentiment(point.y, i18n),
+                            }
+                        }) }));
+                } : undefined, markers: [
+                    {
+                        axis: 'y',
+                        legend: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.sentimentsValues.neutral) !== null && _a !== void 0 ? _a : "Neutral",
+                        legendPosition: 'bottom-left',
+                        lineStyle: {
+                            stroke: theme.palette.blue[600],
+                            strokeWidth: 1,
+                            strokeDasharray: 2,
+                        },
+                        textStyle: {
+                            fill: theme.palette.blue[600],
+                            fontSize: theme.fontSizes.sm,
+                        },
+                        value: 3
+                    },
+                    {
+                        axis: 'y',
+                        legendPosition: 'bottom-left',
+                        lineStyle: {
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        value: 0
+                    },
+                    {
+                        axis: 'y',
+                        legendPosition: 'bottom-left',
+                        lineStyle: {
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        value: 6
+                    },
+                    {
+                        axis: 'x',
+                        legendPosition: 'bottom-left',
+                        lineStyle: {
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        value: "start"
+                    },
+                    {
+                        axis: 'x',
+                        legendPosition: 'bottom-left',
+                        lineStyle: {
+                            stroke: "white",
+                            strokeWidth: 2,
+                        },
+                        value: "end"
+                    }
+                ], enableCrosshair: false, isInteractive: true, enableSlices: "x" }) })) }));
+};
+
 const UgClose$1 = styled__default["default"](reactNotifications.Close) `
     display: flex;
     align-items: center;
@@ -2930,12 +3279,12 @@ const UgToggle = styled__default["default"](reactForms.Toggle) ``;
    **/
 const Toggle = (props) => jsxRuntime.jsx(UgToggle, Object.assign({}, props));
 
-const StyledCol$1 = styled__default["default"](reactGrid.Col) `
-  margin-bottom: ${theme.space.lg};
-
-  @media screen and (max-width: ${theme.breakpoints.sm}) {
-    margin-bottom: ${theme.space.md};
-  }
+const StyledCol$1 = styled__default["default"](reactGrid.Col) `
+  margin-bottom: ${theme.space.lg};
+
+  @media screen and (max-width: ${theme.breakpoints.sm}) {
+    margin-bottom: ${theme.space.md};
+  }
 `;
 const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
 
@@ -3348,11 +3697,12 @@ const UgProjectSubtitle = styled__default["default"](NavItemText) `
   font-size: ${(props) => props.theme.fontSizes.sm};
 `;
 const UgNavItem = styled__default["default"](NavItem) `
+  display: flex;
   flex-flow: column;
-  align-items: flex-start;
-  padding: 12px 8px;
-  opacity: 1;
-  padding-left: ${({ theme }) => theme.space.xxl}; //Accordion Alingment
+  width: 100%;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.space.sm} ${({ theme }) => theme.space.xs};
+  padding-left: ${({ theme }) => theme.space.xxl};
 `;
 const NavItemComponent = React.forwardRef((props, ref) => jsxRuntime.jsx(UgNavItem, Object.assign({ ref: ref }, props)));
 const NavItemProject = NavItemComponent;
@@ -3360,42 +3710,30 @@ NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 
 const NavAccordionItem = styled__default["default"](Accordion) `
-  opacity: 1;
   ${sidebarNavItemExpanded}
-  ${(props) => !props.isExpanded && sidebarNavItemHidden}
+  ${props => !props.isExpanded && sidebarNavItemHidden}
   order: 1;
-  margin-top: ${({ theme }) => theme.space.xs}px;
+  margin: ${({ theme }) => theme.space.xs} 0;
+  padding-left: 8.5px;
 `;
 const AccordionItemHeader = styled__default["default"](Accordion.Header) `
-  flex-direction: row;
-  border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
-  border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
-
-  > button {
-    padding-right: 2px;
-  }
-
-  svg {
-    width: 26px;
+  > svg {
+    flex-shrink: 0;
+    
+    &:first-of-type {
+      margin: 0 8.5px;
+    }
   }
 `;
 const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
   max-height: 180px;
-  padding: 0;
-  padding-left: 5px;
-  overflow-y: hidden;
-  opacity: 1;
-  &:hover {
-    overflow-y: auto;
-  }
+  overflow-y: auto;
 `;
 const AccordionItemLabel = styled__default["default"](Accordion.Label) `
-  padding: 12px 9px;
-  ${({ theme }) => `
-    fill: ${getColor(theme.colors.primaryHue, 600)};
-    font-weight: ${theme.fontWeights.medium};
-  `}
   ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  padding: 0;
+  margin: 0 8.5px;
 `;
 NavAccordionItem.Panel = AccordionItemPanel;
 NavAccordionItem.Header = AccordionItemHeader;
@@ -3405,14 +3743,16 @@ var _path$j;
 function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z",
+    fill: "#336179"
   })));
 };
 
@@ -3420,11 +3760,11 @@ var _linearGradient, _path$i;
 function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "unguessIconGradient"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
@@ -3437,7 +3777,9 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
     stopColor: "#001825"
   }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#unguessIconGradient)",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z"
   })));
 };
 
@@ -3484,15 +3826,15 @@ var _path$h;
 function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgProjectsIcon = function SvgProjectsIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
-    width: 22,
-    height: 22,
-    viewBox: "0 0 22 22",
+    width: 26,
+    height: 26,
+    viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M18.5 5H12.25V4.375C12.25 3.34232 11.4077 2.5 10.375 2.5H4.125C3.09232 2.5 2.25 3.34232 2.25 4.375V10.005C1.53426 10.0685 1.01354 10.7329 1.1335 11.4527L2.171 17.7027C2.27098 18.3026 2.79293 18.75 3.4 18.75H18.6C19.2071 18.75 19.729 18.3026 19.829 17.7027L20.8666 11.4523C20.9865 10.7329 20.4657 10.0685 19.75 10.005V6.25C19.75 5.55482 19.1952 5 18.5 5ZM19.633 11.25H2.36695L3.404 17.4973C3.40404 17.4974 18.6 17.5 18.6 17.5C18.5929 17.5 19.633 11.25 19.633 11.25ZM3.5 10H18.5V6.25H11V4.375C11 4.03268 10.7173 3.75 10.375 3.75H4.125C3.78268 3.75 3.5 4.03268 3.5 4.375V10Z",
+    d: "M20.5 8H14.25V7.375C14.25 6.34232 13.4077 5.5 12.375 5.5H6.125C5.09232 5.5 4.25 6.34232 4.25 7.375V13.005C3.53426 13.0685 3.01354 13.7329 3.1335 14.4527L4.171 20.7027C4.27098 21.3026 4.79293 21.75 5.4 21.75H20.6C21.2071 21.75 21.729 21.3026 21.829 20.7027L22.8666 14.4523C22.9865 13.7329 22.4657 13.0685 21.75 13.005V9.25C21.75 8.55482 21.1952 8 20.5 8ZM21.633 14.25H4.36695L5.404 20.4973C5.40404 20.4974 20.6 20.5 20.6 20.5C20.5929 20.5 21.633 14.25 21.633 14.25ZM5.5 13H20.5V9.25H13V7.375C13 7.03268 12.7173 6.75 12.375 6.75H6.125C5.78268 6.75 5.5 7.03268 5.5 7.375V13Z",
     fill: "#336179",
     stroke: "#336179"
   })));
@@ -3633,7 +3975,7 @@ const Sidebar = (_a) => {
     }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, Object.assign({}, props))) : (jsxRuntime.jsxs(Nav, Object.assign({}, props, { children: [jsxRuntime.jsxs(ScrollingContainer, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
                         props.workspaces &&
-                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(NavAccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(NavAccordionItem.Section, { children: [jsxRuntime.jsxs(NavAccordionItem.Header, { children: [jsxRuntime.jsx(SvgProjectsIcon, { style: { marginLeft: theme.space.xs } }), jsxRuntime.jsxs(NavAccordionItem.Label, { children: [props.dividerLabel || "", " "] })] }), jsxRuntime.jsx(NavAccordionItem.Panel, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(NavAccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(NavAccordionItem.Section, { children: [jsxRuntime.jsxs(NavAccordionItem.Header, { children: [jsxRuntime.jsx(SvgProjectsIcon, {}), jsxRuntime.jsxs(NavAccordionItem.Label, { children: [props.dividerLabel || "", " "] })] }), jsxRuntime.jsx(NavAccordionItem.Panel, Object.assign({ style: { padding: 0 } }, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) }))] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
                                                     marginLeft: theme.space.xs,
                                                     color: theme.palette.grey[800],
                                                 } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
@@ -5221,47 +5563,47 @@ Slider.Slide = Slide;
 Slider.PrevButton = PrevButton;
 Slider.NextButton = NextButton;
 
-const UgStep = styled__default["default"](reactAccordions.Stepper.Step) `
-  svg {
-    color: ${({ theme }) => theme.palette.green[700]};
-  }
+const UgStep = styled__default["default"](reactAccordions.Stepper.Step) `
+  svg {
+    color: ${({ theme }) => theme.palette.green[700]};
+  }
 `;
 const UgLabel = styled__default["default"](reactAccordions.Stepper.Label) ``;
-const UgStepper = styled__default["default"](reactAccordions.Stepper) `
-  div[data-garden-id="accordions.step_icon"] {
-    background-color: ${({ theme }) => theme.palette.grey[200]};
-    color: ${({ theme }) => theme.palette.grey[800]};
-    font-weight: bold;
-  }
-
+const UgStepper = styled__default["default"](reactAccordions.Stepper) `
+  div[data-garden-id="accordions.step_icon"] {
+    background-color: ${({ theme }) => theme.palette.grey[200]};
+    color: ${({ theme }) => theme.palette.grey[800]};
+    font-weight: bold;
+  }
+
   ${(props) => props.activeIndex !== undefined &&
-    `
-      ${UgStep}:nth-child(${props.activeIndex + 1})  {
-        
-        div[data-garden-id="accordions.step_icon"] {
-            background-color: ${props.theme.palette.blue[600]};
-            color: white;
-        }
-
-        ${UgLabel} {
-            font-weight: 500;
-            color: ${props.theme.palette.blue[600]};
-        }
-      }
-    `}
-`;
-const UgContent = styled__default["default"](reactAccordions.Stepper.Content) `
-  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.sm} ${theme.space.sm} 24px`};
-  margin-top: 0;
-  margin-bottom: 0;
-  > div {
-    color: ${({ theme }) => theme.palette.grey[600]};
-  }
+    `
+      ${UgStep}:nth-child(${props.activeIndex + 1})  {
+        
+        div[data-garden-id="accordions.step_icon"] {
+            background-color: ${props.theme.palette.blue[600]};
+            color: white;
+        }
+
+        ${UgLabel} {
+            font-weight: 500;
+            color: ${props.theme.palette.blue[600]};
+        }
+      }
+    `}
+`;
+const UgContent = styled__default["default"](reactAccordions.Stepper.Content) `
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.sm} ${theme.space.sm} 24px`};
+  margin-top: 0;
+  margin-bottom: 0;
+  > div {
+    color: ${({ theme }) => theme.palette.grey[600]};
+  }
 `;
-const StyledAccordionHeader = styled__default["default"](Accordion.Header) `
-  button, svg {
-    padding: ${({ theme }) => `${theme.space.xs} ${theme.space.md}`};
-  }
+const StyledAccordionHeader = styled__default["default"](Accordion.Header) `
+  button, svg {
+    padding: ${({ theme }) => `${theme.space.xs} ${theme.space.md}`};
+  }
 `;
 /**
  * A Stepper guides users through steps of a task in sequential order.
@@ -5688,6 +6030,7 @@ exports.RadioCard = RadioCard;
 exports.Row = Row$1;
 exports.SM = SM;
 exports.Select = Select;
+exports.SentimentChart = SentimentChart;
 exports.Separator = Separator;
 exports.ServiceCard = ServiceCard;
 exports.Sidebar = Sidebar;