@appquality/unguess-design-system 3.1.64 → 3.1.65

package/build/index.js

@@ -24,13 +24,17 @@ var pie = require('@nivo/pie');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
+var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
+var reactTooltips = require('@zendeskgarden/react-tooltips');
 var Typography = require('@tiptap/extension-typography');
 var Link = require('@tiptap/extension-link');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var CharacterCount = require('@tiptap/extension-character-count');
-var reactForms = require('@zendeskgarden/react-forms');
+var core = require('@tiptap/core');
+var Mention = require('@tiptap/extension-mention');
+var tippy = require('tippy.js');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactModals = require('@zendeskgarden/react-modals');
@@ -42,7 +46,6 @@ var reactPagination = require('@zendeskgarden/react-pagination');
 var Video = require('@appquality/stream-player');
 var SlickSlider = require('react-slick');
 var reactTables = require('@zendeskgarden/react-tables');
-var reactTooltips = require('@zendeskgarden/react-tooltips');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -73,6 +76,8 @@ var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
 var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
+var Mention__default = /*#__PURE__*/_interopDefaultLegacy(Mention);
+var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
 var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 
@@ -630,12 +635,21 @@ const Alert = (props) => jsxRuntime.jsx(UgAlert, Object.assign({}, props));
 Alert.Title = UgAlertTitle;
 Alert.Close = reactNotifications.Close;
 
+var img$2 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.2597 12.9199V14.767H17.2367C17.075 17.4452 15.5974 18.969 13.127 18.969C10.4949 18.969 8.92496 17.4452 8.76335 14.767H8.74026V12.9199H5V14.767V14.7901C5.20779 19.4538 8.34777 22.4322 13.1039 22.4322C17.8139 22.4322 20.7922 19.5231 21 14.7901V12.9199H17.2597Z' fill='%23003A57'/%3e%3cpath d='M8.78629 3.5H5.02295V7.26335H8.78629V3.5Z' fill='%2370C38A'/%3e%3cpath d='M20.9768 3.5H17.1672V7.30952H20.9768V3.5Z' fill='%23003A57'/%3e%3c/svg%3e";
+
 const UgAvatar = styled__default["default"](reactAvatars.Avatar) `
   text-transform: uppercase;
 
   ${(props) => props.avatarType &&
     props.avatarType !== "image" &&
     `background: ${props.backgroundColor || theme.gradients.dark};`}
+
+  ${(props) => props.avatarType &&
+    props.avatarType === "system" &&
+    `
+      box-shadow: 0 0 0 2px ${getColor(theme.colors.primaryHue, 600)};
+      background: ${props.backgroundColor || theme.palette.white};
+    `}
 `;
 /**
  * An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
@@ -643,8 +657,9 @@ const UgAvatar = styled__default["default"](reactAvatars.Avatar) `
  * Used for this:
     - To visually represent a person, brand, or product
  */
-const Avatar = (props) => {
-    const fixedBadge = props.badge && Number(props.badge) > 9 ? "9+" : props.badge;
+const Avatar = (_a) => {
+    var { isSystem, badge } = _a, props = __rest(_a, ["isSystem", "badge"]);
+    const fixedBadge = badge && Number(badge) > 9 ? "9+" : badge;
     const wrapChildren = (type) => {
         if (type === "icon")
             return props.children;
@@ -652,8 +667,10 @@ const Avatar = (props) => {
             return jsxRuntime.jsx("img", { alt: "avatar", src: props.children });
         if (type === "text")
             return jsxRuntime.jsx(Avatar.Text, { children: props.children });
+        if (type === "system")
+            return jsxRuntime.jsx("img", { alt: "avatar", src: img$2 });
     };
-    return (jsxRuntime.jsx(UgAvatar, Object.assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
+    return (jsxRuntime.jsx(UgAvatar, Object.assign({}, props, { badge: fixedBadge, isSystem: props.avatarType === "system" || isSystem, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
 
@@ -820,48 +837,48 @@ Tag.Avatar = StyledAvatar;
 Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
-var _path$x;
-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); }
-const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+var _path$y;
+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); }
+const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
   fill: "#E80C7A"
 })));
 
-var _path$w;
-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); }
-const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+var _path$x;
+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); }
+const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
   fill: "#FFCD1A"
 })));
 
-var _path$v;
-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); }
-const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+var _path$w;
+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); }
+const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
   fill: "#7B0DFF"
 })));
 
-var _rect$4, _path$u, _path2$b, _path3$4;
-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); }
-const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+var _rect$4, _path$v, _path2$b, _path3$4;
+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); }
+const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -872,7 +889,7 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
   fill: "#50BF95"
 })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
@@ -883,9 +900,9 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   fill: "#007345"
 })));
 
-var _rect$3, _path$t, _path2$a;
-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); }
-const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+var _rect$3, _path$u, _path2$a;
+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); }
+const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -896,7 +913,7 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M13.55 19.0875C14.25 19.7875 15.1063 20.1375 16.1188 20.1375C17.1313 20.1375 17.9875 19.7875 18.6875 19.0875C19.3875 18.3875 19.7375 17.5312 19.7375 16.5187C19.7375 15.5062 19.3875 14.65 18.6875 13.95C17.9875 13.25 17.1313 12.9 16.1188 12.9C15.1063 12.9 14.25 13.25 13.55 13.95C12.85 14.65 12.5 15.5062 12.5 16.5187C12.5 17.5312 12.85 18.3875 13.55 19.0875ZM17.5062 18.2812C17.4187 18.2812 17.3375 18.25 17.2625 18.1875L15.7438 16.7812C15.6813 16.6687 15.65 16.6 15.65 16.575V14.55C15.65 14.4375 15.6875 14.3437 15.7625 14.2687C15.8375 14.1937 15.9313 14.1562 16.0438 14.1562C16.1563 14.1562 16.25 14.1937 16.325 14.2687C16.4 14.3437 16.4375 14.4375 16.4375 14.55V16.4813L17.7313 17.6625C17.8063 17.725 17.8469 17.8062 17.8531 17.9062C17.8594 18.0063 17.825 18.0938 17.75 18.1688C17.675 18.2438 17.5937 18.2812 17.5062 18.2812Z",
@@ -908,9 +925,9 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
   fill: "#F4AC1A"
 })));
 
-var _rect$2, _path$s, _path2$9;
-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); }
-const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+var _rect$2, _path$t, _path2$9;
+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); }
+const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -921,7 +938,7 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M11.2266 13.0313H14.997M11.2266 9.26075V13.0313V9.26075ZM11.2266 13.0313L20.121 5.03906L11.2266 13.0313Z",
   stroke: "#024780",
   strokeWidth: 1.5,
@@ -935,9 +952,9 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   strokeLinejoin: "round"
 })));
 
-var _rect$1, _path$r, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
-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); }
-const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+var _rect$1, _path$s, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
+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); }
+const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -948,7 +965,7 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M13.059 16.7647C13.059 16.1799 12.585 15.7059 12.0002 15.7059C11.4154 15.7059 10.9414 16.1799 10.9414 16.7647V19.9412C10.9414 20.5259 11.4154 21 12.0002 21C12.585 21 13.059 20.5259 13.059 19.9412V16.7647Z",
   fill: "#D1820A"
 })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -980,9 +997,9 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   fill: "#FFB65A"
 })));
 
-var _g$b, _path$q, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-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); }
-const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+var _g$b, _path$r, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+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); }
+const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -994,7 +1011,7 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
   opacity: 0.3,
   d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
   fill: "#50BF95"
-}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12.487 3.19652C8.68003 3.19652 5.59895 6.27761 5.59895 10.0846C5.59895 10.2597 5.59895 10.4348 5.62438 10.5855C5.29857 11.1863 4.82307 12.013 4.24678 12.514C3.82117 12.8897 3.92096 13.2908 3.97085 13.4405C4.09609 13.7663 4.44635 14.0413 5.02265 14.2418C5.22322 14.3172 5.44825 14.3671 5.64883 14.417L5.67427 16.8464C5.67427 17.7984 6.47559 18.6251 7.45304 18.6251L8.93044 18.1496L9.08111 19.0263C9.18091 19.6026 9.68185 20.0282 10.2836 20.0282C10.3589 20.0282 10.4343 20.0282 10.5086 20.0028L15.1424 19.177C15.8185 19.0517 16.2441 18.4256 16.1443 17.7495L15.8185 16.1214C17.9974 14.9189 19.375 12.5892 19.375 10.0845C19.375 6.30279 16.2696 3.19641 12.4869 3.19641L12.487 3.19652Z",
   fill: "#2B8473",
   stroke: "#2B8473"
@@ -1050,9 +1067,9 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
   fill: "#ECF4F2"
 })));
 
-var _g$a, _path$p;
-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); }
-const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+var _g$a, _path$q;
+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); }
+const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -1064,7 +1081,7 @@ const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createEleme
   opacity: 0.3,
   d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
   fill: "#003A57"
-}))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
   fill: "#003A57"
 })));
@@ -1376,7 +1393,7 @@ const HoverBody = styled__default["default"].div `
   justify-content: space-between;
 `;
 const HoverMetaContainer = styled__default["default"].div ``;
-const StyledCard$1 = styled__default["default"](SpecialCard) `
+const StyledCard$2 = styled__default["default"](SpecialCard) `
   overflow: hidden;
   ${({ isHoverable }) => isHoverable &&
     `
@@ -1395,7 +1412,7 @@ const StyledCard$1 = styled__default["default"](SpecialCard) `
 `;
 const ServiceCard = (props) => {
     const { serviceIcon, serviceTitle, serviceSubtitle } = props;
-    return (jsxRuntime.jsxs(StyledCard$1, Object.assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map((button) => button) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$1, Object.assign({ size: "large" }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
+    return (jsxRuntime.jsxs(StyledCard$2, Object.assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map((button) => button) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, Object.assign({ justifyContent: "start", wrap: true }, { children: props.tags.map((tag, index) => (jsxRuntime.jsxs(StyledTag$1, Object.assign({ size: "large" }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index))) })))] })] })));
 };
 
 const ButtonsWrap = styled__default["default"].div `
@@ -1926,8 +1943,8 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
 };
 
 var _g$9, _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); }
-const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+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); }
+const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -1950,8 +1967,8 @@ const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$8, _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); }
-const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+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); }
+const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -1974,8 +1991,8 @@ const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$7, _defs$2;
-function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
-const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+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); }
+const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -2004,8 +2021,8 @@ const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$6, _defs$1;
-function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
-const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
+const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -2034,8 +2051,8 @@ const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$5, _defs;
-function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
-const SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
+const SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
   width: 26,
   height: 26,
   viewBox: "0 0 26 26",
@@ -2263,36 +2280,61 @@ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
                 ], enableCrosshair: false, isInteractive: true, enableSlices: "x" }) })) }));
 };
 
+const ShortcutContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.base * 4}px`};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+`;
+const Text$1 = styled__default["default"](reactTypography.SM) `
+  line-height: 1.7;
+`;
+const SendShortcut = ({ saveText }) => {
+    return (jsxRuntime.jsxs(ShortcutContainer, { children: [jsxRuntime.jsxs(reactTags.Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text$1, { children: saveText || "to save" })] }));
+};
+
 const Footer$4 = styled__default["default"].div `
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} 0`};
-  justify-content: flex-end;
+  padding: ${({ theme }) => `${theme.space.sm} 0px`};
+  align-items: center;
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
   gap: ${({ theme }) => theme.space.xs};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
 `;
-const ChatFooter = ({ saveText, children, }) => {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Footer$4, { children: children }) }));
+const ChatFooter = ({ saveText, children, showShortcut, }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Footer$4, Object.assign({ showShortcut: showShortcut }, { children: showShortcut ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SendShortcut, { saveText: saveText }), children] })) : (children) })) }));
 };
 
 const ChatContext = React.createContext(null);
-const ChatContextProvider = ({ onSave, children, }) => {
-    const [isEditing, setIsEditing] = React.useState(false);
-    const [comment, setComment] = React.useState("");
+const ChatContextProvider = ({ onSave, setMentionableUsers, children, }) => {
     const [editor, setEditor] = React.useState();
+    const getMentions = (editor) => {
+        const result = [];
+        editor.state.doc.descendants((node) => {
+            if (node.type.name === "mention") {
+                // Add only if it's not already in the array
+                if (!result.some((r) => r.id === node.attrs.id))
+                    result.push({
+                        id: node.attrs.id,
+                        name: node.attrs.name
+                    });
+            }
+        });
+        return result;
+    };
     const chatContextValue = React.useMemo(() => ({
-        isEditing,
-        setIsEditing,
-        comment,
-        setComment,
         editor,
         setEditor,
         triggerSave: () => {
             if (editor && onSave) {
-                onSave(editor);
+                onSave(editor, getMentions(editor));
                 editor.commands.clearContent();
             }
         },
-    }), [comment, setComment, isEditing, setIsEditing, editor, setEditor, onSave]);
+        mentionableUsers: setMentionableUsers,
+    }), [editor, setEditor, onSave, setMentionableUsers]);
     return (jsxRuntime.jsx(ChatContext.Provider, Object.assign({ value: chatContextValue }, { children: children })));
 };
 const useChatContext = () => {
@@ -2302,35 +2344,6 @@ const useChatContext = () => {
     return context; // Now we can use the context in the component, SAFELY.
 };
 
-const ChatContainer = styled__default["default"](Card) `
-  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
-  &:hover {
-    box-shadow: none;
-  }
-  cursor: default;
-`;
-const MessagesContainer = styled__default["default"].div `
-  padding: ${({ theme }) => `${theme.space.md} ${theme.space.sm}`};
-  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.space.xs};
-  background: ${({ chatBkg }) => chatBkg !== null && chatBkg !== void 0 ? chatBkg : `#fff`};
-  overflow-y: auto;
-  border-top: ${({ theme }) => `1px solid ${theme.palette.grey[200]}`};
-`;
-
-/**
- * Title is a basic component used to display a title. Often used in card headers.
- */
-const Title$1 = (props) => jsxRuntime.jsx(reactNotifications.Title, Object.assign({}, props));
-
-const ChatTitle = styled__default["default"](Title$1) `
-  color: ${({ theme }) => theme.palette.blue[600]};
-  margin: ${({ theme }) => `0 -${theme.space.md}`};
-  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
-`;
-
 const editorStyle = styled.css `
   > * + * {
     margin-top: 0.75em;
@@ -2567,7 +2580,7 @@ const editorStyle = styled.css `
   }
 
   /* Placeholder (at the top) */
-    /*p.is-editor-empty:first-child::before {
+  /*p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     float: left;
     color: #ced4da;
@@ -2585,30 +2598,97 @@ const editorStyle = styled.css `
   }
 
   word-break: break-word;
+
+  mention {
+    color: ${({ theme }) => theme.palette.azure[600]};
+    border-radius: ${({ theme }) => theme.borderRadii.xl};
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+    padding: ${({ theme }) => `${theme.space.xxs} 0`};
+  }
+`;
+const readOnlyStyle = styled.css `
+  border: none;
+  outline: none;
+
+  .ProseMirror {
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    min-height: 0;
+  }
 `;
 
-var _path$o;
-function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
-const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+const ChatContainer = styled__default["default"](Card) `
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
+  &:hover {
+    box-shadow: none;
+  }
+  cursor: default;
+`;
+const MessagesContainer = styled__default["default"].div `
+  padding: ${({ theme }) => `${theme.space.md} ${theme.space.sm}`};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.xs};
+  background: ${({ chatBkg }) => chatBkg !== null && chatBkg !== void 0 ? chatBkg : `#fff`};
+  overflow-y: auto;
+  border-top: ${({ theme }) => `1px solid ${theme.palette.grey[200]}`};
+`;
+const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
+  ${({ editable, theme }) => !editable
+    ? readOnlyStyle
+    : `
+    margin-left: ${theme.space.sm};
+    padding: ${`${theme.space.xxs} ${theme.space.xs}`};
+      
+    `}
+
+  .ProseMirror {
+    background-color: transparent;
+    min-height: 36px;
+    outline: none;
+    max-height: 210px;
+    overflow-y: auto;
+
+    ${editorStyle}
+  }
+`;
+
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+const Title$1 = (props) => jsxRuntime.jsx(reactNotifications.Title, Object.assign({}, props));
+
+const ChatTitle = styled__default["default"](Title$1) `
+  color: ${({ theme }) => theme.palette.blue[600]};
+  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
+`;
+
+var _path$p;
+function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
+const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
 })));
 
-var _path$n;
-function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
-const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+var _path$o;
+function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
+const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2616,15 +2696,15 @@ const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg"
   d: "M8 1h3M9.5 1l-3 14M5 15h3"
 })));
 
-var _path$m, _path2$6;
-function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
-const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+var _path$n, _path2$6;
+function _extends$u() { _extends$u = 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$u.apply(this, arguments); }
+const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
 })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2636,8 +2716,8 @@ const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _g$4;
-function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
-const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+function _extends$t() { _extends$t = 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$t.apply(this, arguments); }
+const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2664,8 +2744,8 @@ const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$3;
-function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
-const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+function _extends$s() { _extends$s = 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$s.apply(this, arguments); }
+const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2692,8 +2772,8 @@ const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$2;
-function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
-const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
+const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2720,7 +2800,7 @@ const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 const StyledIconButton = styled__default["default"](IconButton) ``;
-const MenuContainer = styled__default["default"](Card) `
+const MenuContainer$1 = styled__default["default"](Card) `
   padding: ${({ theme }) => theme.space.xxs};
 
   ${StyledIconButton} {
@@ -2744,28 +2824,309 @@ const FloatingMenu = (props) => {
     if (!editor) {
         return null;
     }
-    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer$1, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
 };
 
-const ChatBoxContainer = styled__default["default"].div `
+/**
+ * Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
+ * <hr>
+ * Used for this:
+ *    - To describe the function of an element when it might be ambiguous
+ *    - To describe the function of unlabeled icons
+ * Not for this:
+ *    - To provide information a user needs to know or remember
+ *    - To display truncated text, use a title attribute instead
+ */
+const TooltipComponent = (props) => {
+    var _a;
+    const theme = React.useContext(styled.ThemeContext);
+    return jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
+};
+const Tooltip = styled__default["default"](TooltipComponent) `
+  box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
+`;
+
+var _path$m;
+function _extends$q() { _extends$q = 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$q.apply(this, arguments); }
+const SvgAtFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeWidth: 2,
+  d: "M11 5v3h0a3 3 0 01-3 3h0a3 3 0 01-3-3h0a3 3 0 013-3h0a3 3 0 013 3h0v1a2 2 0 002 2h0a2 2 0 002-2V8h0a7 7 0 00-7-7h0a7 7 0 00-7 7h0a7 7 0 007 7h2.8"
+})));
+
+const EditorButton = ({ editor, type, }) => {
+    const isActive = editor.isActive(type);
+    const getIcon = () => {
+        switch (type) {
+            case "bold":
+                return jsxRuntime.jsx(SvgBoldFill, {});
+            case "italic":
+                return jsxRuntime.jsx(SvgItalicFill, {});
+            case "mention":
+                return jsxRuntime.jsx(SvgAtFill, {});
+        }
+    };
+    const handleClick = () => {
+        switch (type) {
+            case "bold":
+                return editor.chain().focus().toggleBold().run();
+            case "italic":
+                return editor.chain().focus().toggleItalic().run();
+            case "mention":
+                const { from } = editor.state.selection;
+                const char = from > 1 ? " @" : "@";
+                return editor.commands.insertContent(char);
+        }
+    };
+    return (jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !isActive, isPrimary: isActive, onClick: handleClick }, { children: getIcon() })));
+};
+
+const MenuContainer = styled__default["default"].div `
+  padding: ${({ theme }) => theme.space.xxs} 0;
   display: flex;
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
-  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
-  padding: ${({ theme }) => `${theme.space.base * 4}px ${theme.space.sm} 0`};
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
 `;
-const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
-  margin-left: ${({ theme }) => theme.space.sm};
-  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
-  .ProseMirror {
-    background-color: #fff;
-    min-height: 36px;
-    outline: none;
-    max-height: 210px;
-    overflow-y: auto;
+const VerticalDivider = styled__default["default"].div `
+  width: 2px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.palette.grey[300]};
+  margin: 0 ${({ theme }) => theme.space.xs};
+`;
+const CommentBar = ({ editor, i18n, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!editor)
+        return null;
+    return (jsxRuntime.jsxs(MenuContainer, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: (_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "bold" }) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "italic" }) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "mention" }) }))] }));
+};
 
-    ${editorStyle}
+const CustomMention = Mention__default["default"].extend({
+    addAttributes() {
+        return {
+            id: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("data-mention-id"),
+                renderHTML: (attributes) => {
+                    if (!attributes.id) {
+                        return {};
+                    }
+                    return {
+                        "data-mention-id": attributes.id,
+                    };
+                },
+            },
+            name: {
+                default: null,
+                parseHTML: (element) => element.getAttribute("data-mention-name"),
+                renderHTML: (attributes) => {
+                    if (!attributes.name) {
+                        return {};
+                    }
+                    return {
+                        "data-mention-name": attributes.name,
+                    };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: `mention[data-type="${this.name}"]`,
+            },
+        ];
+    },
+    renderHTML({ node, HTMLAttributes }) {
+        // In the future we can fetch other user data here, like avatar, user role, etc.
+        const user = node.attrs;
+        let outputText = "unkown";
+        if (user) {
+            outputText = `${this.options.suggestion.char}${user.name}`;
+        }
+        return [
+            "mention",
+            core.mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+            outputText,
+        ];
+    },
+    renderText({ node }) {
+        const user = node.attrs;
+        if (user) {
+            return `${this.options.suggestion.char}${user.name}`;
+        }
+        return "unkown";
+    },
+});
+
+const StyledCard$1 = styled.styled(Card) `
+  padding: ${({ theme }) => theme.space.xxs};
+
+  ::-webkit-scrollbar {
+    width: ${({ theme }) => theme.space.xs};
   }
 `;
+const List = styled.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.xs};
+  max-height: 200px;
+  overflow-y: auto;
+`;
+const Item$2 = styled.styled(Button) `
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+`;
+const MentionList = React.forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const selectItem = (index) => {
+        const item = props.items[index];
+        if (item) {
+            props.command(item);
+        }
+    };
+    const upHandler = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+        selectItem(selectedIndex);
+    };
+    React.useEffect(() => setSelectedIndex(0), [props.items]);
+    React.useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (event.key === "ArrowUp") {
+                upHandler();
+                return true;
+            }
+            if (event.key === "ArrowDown") {
+                downHandler();
+                return true;
+            }
+            if (event.key === "Enter") {
+                enterHandler();
+                return true;
+            }
+            return false;
+        },
+    }));
+    return (jsxRuntime.jsx("div", Object.assign({ className: "items" }, { children: jsxRuntime.jsx(StyledCard$1, { children: jsxRuntime.jsx(List, { children: props.items.length ? (props.items.map((item, index) => (jsxRuntime.jsx("div", Object.assign({ className: index === selectedIndex ? 'selected' : '' }, { children: jsxRuntime.jsx(Item$2, Object.assign({ isBasic: true, isStretched: true, isAccent: true, isPill: false, onClick: () => selectItem(index) }, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.black } }, { children: item.name })) }), index) }))))) : (jsxRuntime.jsx("div", Object.assign({ className: "item" }, { children: "No result" }))) }) }) })));
+});
+
+/**
+ * Workaround for the current typing incompatibility between Tippy.js and Tiptap
+ * Suggestion utility.
+ *
+ * @see https://github.com/ueberdosis/tiptap/issues/2795#issuecomment-1160623792
+ *
+ * Adopted from
+ * https://github.com/Doist/typist/blob/a1726a6be089e3e1452def641dfcfc622ac3e942/stories/typist-editor/constants/suggestions.ts#L169-L186
+ */
+const DOM_RECT_FALLBACK = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    toJSON() {
+        return {};
+    },
+};
+const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
+    return [
+        Typography__default["default"],
+        Link__default["default"],
+        StarterKit__default["default"],
+        Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
+                if (node.type.name === "heading") {
+                    return "What’s the title?";
+                }
+                return "Can you add some further context?";
+            } }, placeholderOptions)),
+        CharacterCount__default["default"],
+        CustomMention.configure({
+            suggestion: {
+                items: mentionableUsers,
+                render: () => {
+                    let component;
+                    let popup;
+                    return {
+                        onStart: (props) => {
+                            component = new react.ReactRenderer(MentionList, {
+                                props,
+                                editor: props.editor,
+                            });
+                            if (!props.clientRect) {
+                                return;
+                            }
+                            popup = tippy__default["default"]("body", {
+                                getReferenceClientRect: () => { var _a, _b; return (_b = (_a = props.clientRect) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : DOM_RECT_FALLBACK; },
+                                appendTo: () => document.body,
+                                content: component.element,
+                                showOnCreate: true,
+                                interactive: true,
+                                trigger: "manual",
+                                placement: "auto",
+                            })[0];
+                        },
+                        onUpdate(props) {
+                            component === null || component === void 0 ? void 0 : component.updateProps(props);
+                            if (!props.clientRect) {
+                                return;
+                            }
+                            popup === null || popup === void 0 ? void 0 : popup.setProps({
+                                getReferenceClientRect: () => { var _a, _b; return (_b = (_a = props.clientRect) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : DOM_RECT_FALLBACK; },
+                            });
+                        },
+                        onKeyDown(props) {
+                            if (props.event.key === "Escape") {
+                                popup === null || popup === void 0 ? void 0 : popup.hide();
+                                return true;
+                            }
+                            if (!(component === null || component === void 0 ? void 0 : component.ref)) {
+                                return false;
+                            }
+                            return component.ref.onKeyDown(props);
+                        },
+                        onExit() {
+                            popup === null || popup === void 0 ? void 0 : popup.destroy();
+                            component === null || component === void 0 ? void 0 : component.destroy();
+                            // Remove references to the old popup and component upon destruction/exit.
+                            // (This should prevent redundant calls to `popup.destroy()`, which Tippy
+                            // warns in the console is a sign of a memory leak, as the `suggestion`
+                            // plugin seems to call `onExit` both when a suggestion menu is closed after
+                            // a user chooses an option, *and* when the editor itself is destroyed.)
+                            popup = undefined;
+                            component = undefined;
+                        },
+                    };
+                },
+            },
+        }),
+    ];
+};
+
+const ChatBoxContainer = styled__default["default"].div `
+  display: flex;
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `${theme.space.base * 4}px ${theme.space.sm} 0`};
+`;
 /**
  * CommentBox is a wrapper around Editor component
  * <br>
@@ -2779,28 +3140,11 @@ const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
     - Simple text input, use textarea instead.
  */
 const CommentBox = (_a) => {
-    var _b;
     var { placeholderOptions } = _a, props = __rest(_a, ["placeholderOptions"]);
-    const { children, hasInlineMenu, bubbleOptions, author } = props;
-    const { editor, setEditor, triggerSave } = useChatContext();
-    const onKeyDown = (event) => {
-        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-            triggerSave();
-            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
-        }
-    };
-    const ed = react.useEditor(Object.assign({ extensions: [
-            Typography__default["default"],
-            Link__default["default"],
-            StarterKit__default["default"],
-            Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
-                    if (node.type.name === "heading") {
-                        return "What’s the title?";
-                    }
-                    return "Can you add some further context?";
-                } }, placeholderOptions)),
-            CharacterCount__default["default"],
-        ], content: children || "", editorProps: {
+    const { children, hasInlineMenu, hasButtonsMenu, bubbleOptions, i18n } = props;
+    const { editor, setEditor, mentionableUsers, triggerSave } = useChatContext();
+    const ext = editorExtensions({ placeholderOptions, mentionableUsers });
+    const ed = react.useEditor(Object.assign({ extensions: ext, content: children || "", editorProps: {
             handleKeyDown: (view, event) => {
                 if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
                     return true;
@@ -2808,119 +3152,16 @@ const CommentBox = (_a) => {
                 return false;
             },
         } }, props));
-    if (!ed) {
-        return null;
-    }
-    // Add here because we want to keep also the listener from the props.
-    ed.on("create", ({ editor }) => setEditor(editor));
-    ed.on("update", ({ editor }) => setEditor(editor));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsxs(ChatBoxContainer, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_b = author.avatarType) !== null && _b !== void 0 ? _b : "text" }, { children: author.avatar })) }), jsxRuntime.jsx(EditorContainer$1, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }) })] })] }));
-};
-
-const Header$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.space.xs} ${({ theme }) => theme.space.md};
-`;
-const Title = styled__default["default"](MD) `
-  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
-  ${props => props.validation === "success" && reactTheming.retrieveComponentStyles("text.success", props)}
-  ${props => props.validation === "warning" && reactTheming.retrieveComponentStyles("text.warning", props)}
-  ${props => props.validation === "error" && reactTheming.retrieveComponentStyles("text.danger", props)}
-`;
-const EditorHeader = (props) => {
-    const { title, validation } = props;
-    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
-};
-
-const Footer$3 = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => theme.space.sm} 16px;
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-const Text = styled__default["default"](SM) `
-  line-height: 1.7;
-`;
-const EditorFooter = ({ saveText }) => {
-    return jsxRuntime.jsxs(Footer$3, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
-};
-
-const EditorContainer = styled__default["default"](reactForms.FauxInput) `
-  
-  ${({ editable }) => !editable &&
-    `
-      border: none;
-      outline: none;
-      
-    `}
-
-  .ProseMirror {
-    padding: ${({ theme }) => theme.space.md};
-    background-color: #fff;
-    min-height: 100px;
-    outline: none;
-
-    ${editorStyle}
-
-    ${({ editable }) => !editable &&
-    `
-      background: transparent;
-      border: none;
-      outline: none;
-      padding: 0;
-      min-height: 0;
-      `}
-  }
-`;
-/**
- * Editor is a wrapper around TipTap/ProseMirror
- * <br>
- * It's a rich text WYSIWYG editors.
- * <hr>
- * Used for this:
-    - To allow text customization with markup supports
-    - To develop collaborative text editing
-   
-   Not for this:
-    - Simple text input, use textarea instead.
- */
-const Editor = (_a) => {
-    var { onSave, headerTitle, footerSaveText, placeholderOptions } = _a, props = __rest(_a, ["onSave", "headerTitle", "footerSaveText", "placeholderOptions"]);
-    const { children, hasInlineMenu, bubbleOptions, editable } = props;
-    const isEditable = editable !== undefined ? editable : true;
-    const [activeEditor, setActiveEditor] = React.useState();
     const onKeyDown = (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-            if (onSave && activeEditor)
-                onSave(activeEditor);
+            triggerSave();
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
         }
     };
-    const ed = react.useEditor(Object.assign({ extensions: [
-            Typography__default["default"],
-            Link__default["default"],
-            StarterKit__default["default"],
-            Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
-                    if (node.type.name === "heading") {
-                        return "What’s the title?";
-                    }
-                    return "Can you add some further context?";
-                } }, placeholderOptions)),
-            CharacterCount__default["default"],
-        ], content: children || "", editorProps: {
-            handleKeyDown: (view, event) => {
-                if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-                    return true;
-                }
-                return false;
-            },
-        } }, props));
-    if (!ed) {
+    if (!ed)
         return null;
-    }
-    // Add here because we want to keep also the listener from the props.
-    ed.on("update", ({ editor }) => setActiveEditor(editor));
-    return (jsxRuntime.jsxs(EditorContainer, Object.assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
+    ed.on("update", ({ editor }) => setEditor(editor));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0 } }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }) })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
 };
 
 const CommentCard = styled.styled(Card) `
@@ -2949,18 +3190,26 @@ const CommentDate = styled.styled.span `
   color: ${({ theme }) => theme.palette.grey[500]};
   font-weight: ${({ theme }) => theme.fontWeights.thin};
 `;
-const Footer$2 = styled.styled.div `
+const Footer$3 = styled.styled.div `
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: ${({ theme }) => theme.space.xs};
 `;
 const CommentTitle = styled.styled(Title$1) `
-color: ${({ theme }) => theme.palette.blue[600]};
+  color: ${({ theme }) => theme.palette.blue[600]};
 `;
 const Comment = ({ author, message, children, date, }) => {
     var _a, _b;
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(Editor, Object.assign({ editable: false }, { children: message })) })] })] }), jsxRuntime.jsx(Footer$2, { children: children })] }));
+    const { mentionableUsers } = useChatContext();
+    const ext = editorExtensions({ mentionableUsers });
+    const ed = react.useEditor({
+        extensions: ext,
+        content: message || "",
+    });
+    if (!ed)
+        return null;
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Footer$3, { children: children })] }));
 };
 
 /**
@@ -3266,6 +3515,112 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
                                 : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, option, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.itemId)))) }))] })) }));
 };
 
+const Header$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.space.xs} ${({ theme }) => theme.space.md};
+`;
+const Title = styled__default["default"](MD) `
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  ${props => props.validation === "success" && reactTheming.retrieveComponentStyles("text.success", props)}
+  ${props => props.validation === "warning" && reactTheming.retrieveComponentStyles("text.warning", props)}
+  ${props => props.validation === "error" && reactTheming.retrieveComponentStyles("text.danger", props)}
+`;
+const EditorHeader = (props) => {
+    const { title, validation } = props;
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
+};
+
+const Footer$2 = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => theme.space.sm} 16px;
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+`;
+const Text = styled__default["default"](SM) `
+  line-height: 1.7;
+`;
+const EditorFooter = ({ saveText }) => {
+    return jsxRuntime.jsxs(Footer$2, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
+};
+
+const EditorContainer = styled__default["default"](reactForms.FauxInput) `
+  
+  ${({ editable }) => !editable &&
+    `
+      border: none;
+      outline: none;
+      
+    `}
+
+  .ProseMirror {
+    padding: ${({ theme }) => theme.space.md};
+    background-color: #fff;
+    min-height: 100px;
+    outline: none;
+
+    ${editorStyle}
+
+    ${({ editable }) => !editable &&
+    `
+      background: transparent;
+      border: none;
+      outline: none;
+      padding: 0;
+      min-height: 0;
+      `}
+  }
+`;
+/**
+ * Editor is a wrapper around TipTap/ProseMirror
+ * <br>
+ * It's a rich text WYSIWYG editors.
+ * <hr>
+ * Used for this:
+    - To allow text customization with markup supports
+    - To develop collaborative text editing
+   
+   Not for this:
+    - Simple text input, use textarea instead.
+ */
+const Editor = (_a) => {
+    var { onSave, headerTitle, footerSaveText, placeholderOptions } = _a, props = __rest(_a, ["onSave", "headerTitle", "footerSaveText", "placeholderOptions"]);
+    const { children, hasInlineMenu, bubbleOptions, editable } = props;
+    const isEditable = editable !== undefined ? editable : true;
+    const [activeEditor, setActiveEditor] = React.useState();
+    const onKeyDown = (event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            if (onSave && activeEditor)
+                onSave(activeEditor);
+        }
+    };
+    const ed = react.useEditor(Object.assign({ extensions: [
+            Typography__default["default"],
+            Link__default["default"],
+            StarterKit__default["default"],
+            Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
+                    if (node.type.name === "heading") {
+                        return "What’s the title?";
+                    }
+                    return "Can you add some further context?";
+                } }, placeholderOptions)),
+            CharacterCount__default["default"],
+        ], content: children || "", editorProps: {
+            handleKeyDown: (view, event) => {
+                if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+                    return true;
+                }
+                return false;
+            },
+        } }, props));
+    if (!ed) {
+        return null;
+    }
+    // Add here because we want to keep also the listener from the props.
+    ed.on("update", ({ editor }) => setActiveEditor(editor));
+    return (jsxRuntime.jsxs(EditorContainer, Object.assign({ editable: isEditable, validation: props.validation }, { children: [isEditable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EditorHeader, { title: headerTitle, validation: props.validation }), hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) }))] })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), isEditable && jsxRuntime.jsx(EditorFooter, { saveText: footerSaveText })] })));
+};
+
 const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
 /**
    * A Checkbox lets users select and unselect options from a list.
@@ -3705,11 +4060,9 @@ const LoginForm = (props) => {
                         } }))] })), props.onBackClick && (jsxRuntime.jsxs(Button, Object.assign({ onClick: props.onBackClick, isBasic: true, style: { marginTop: theme.space.md } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.backToLabel || "Back to UNGUESS"] })))] }));
 };
 
-var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5b %3c!ENTITY ns_extend 'http://ns.adobe.com/Extensibility/1.0/'%3e %3c!ENTITY ns_ai 'http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c!ENTITY ns_graphs 'http://ns.adobe.com/Graphs/1.0/'%3e %3c!ENTITY ns_vars 'http://ns.adobe.com/Variables/1.0/'%3e %3c!ENTITY ns_imrep 'http://ns.adobe.com/ImageReplacement/1.0/'%3e %3c!ENTITY ns_sfw 'http://ns.adobe.com/SaveForWeb/1.0/'%3e %3c!ENTITY ns_custom 'http://ns.adobe.com/GenericCustomNamespace/1.0/'%3e %3c!ENTITY ns_adobe_xpath 'http://ns.adobe.com/XPath/1.0/'%3e%5d%3e%3csvg enable-background='new 0 0 479.42 154.1' version='1.1' viewBox='0 0 479.42 154.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cswitch%3e %3cforeignObject width='1' height='1' requiredExtensions='http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c/foreignObject%3e %3cg%3e %3cpath class='st0' d='m203.46 43.96c1.66 0 3.06 0.82 3.06 2.56 0 0.83-0.48 1.54-1.36 1.88 1.11 0.31 1.64 1.33 1.64 2.18 0 1.94-1.63 2.52-3.35 2.52h-3.99v-9.13h4zm-2.85 3.93h2.91c1.1 0 1.89-0.4 1.89-1.36 0-1.02-0.82-1.54-1.94-1.54h-2.86v2.9zm0 4.13h2.86c0.95 0 2.22-0.25 2.22-1.49-0.01-1.15-1.17-1.62-2.16-1.62h-2.91v3.11z'/%3e %3cpath class='st0' d='M212.75%2c43.96h6.41V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m235.85 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.16-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.45 1.66l-0.86 0.53c-0.48-0.79-1.54-1.15-2.55-1.17z'/%3e %3cpath class='st0' d='m250.07 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m265.37 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.22l4.09-9.13h1.28zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m278.31 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m287.15 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m313.34 43.96v1.08h-5.2v3.18h4.98v1.06h-4.98v3.82h-1.14v-9.14h6.34z'/%3e %3cpath class='st0' d='m322.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.76-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m341.26 48.55c-0.01 2.39-1.5 4.72-4.63 4.72s-4.64-2.32-4.64-4.72c0-2.65 1.77-4.75 4.65-4.75 3.1 0.02 4.64 2.34 4.62 4.75zm-4.61-3.7c-2.32 0-3.52 1.71-3.52 3.7 0 1.85 1.12 3.65 3.52 3.65s3.48-1.85 3.48-3.65c0.01-1.85-1.1-3.68-3.48-3.7z'/%3e %3cpath class='st0' d='m351.84 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m368.77 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m387.97 48.97h-5.22v4.12h-1.13v-9.13h1.13v3.95h5.22v-3.95h1.13v9.13h-1.13v-4.12z'/%3e %3cpath class='st0' d='M395.58%2c43.96H402V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m418.68 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.15-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.46 1.66l-0.86 0.53c-0.49-0.79-1.54-1.15-2.56-1.17z'/%3e %3cpath class='st0' d='m427.25 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m443.63 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.24l4.09-9.13h1.3zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m456.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m465.41 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m157.64 115.24v-24.59c0-6.81-3.65-10.72-10.03-10.72-6 0-9.44 3.91-9.44 10.72v24.59h-8.58v-24.59c0-11.51 6.93-18.66 18.08-18.66 11.26 0 18.54 7.32 18.54 18.66v24.59h-8.57z'/%3e %3cpath class='st0' d='m214.63 116.35c-16.55 0-22.44-11.2-22.44-21.67 0-15.87 11.27-22.98 22.44-22.98 5.93 0 11.53 2.3 15.77 6.49l0.34 0.34-5.54 5.67-0.35-0.33c-2.55-2.44-6.57-4.02-10.23-4.02-8.14 0-13.82 6.1-13.82 14.83 0 6.48 3.63 13.4 13.82 13.4 3.51 0 6.11-0.89 8.89-3.07v-6.64h-10.61v-7.97h19.29v17.55l-0.63 0.76c-4.49 5.14-10.03 7.64-16.93 7.64z'/%3e %3cpath class='st0' d='m277.01 115.24c-11.26 0-18.54-7.32-18.54-18.66v-24.59h8.58v24.59c0 6.81 3.65 10.72 10.02 10.72 6 0 9.44-3.91 9.44-10.72v-24.59h8.58v24.59c0 11.51-6.92 18.66-18.08 18.66z'/%3e %3cpolygon class='st0' points='321.07 115.24 321.07 72.25 354.94 72.25 354.94 80.65 329.64 80.65 329.64 90.13 350.81 90.13 350.81 98.24 329.64 98.24 329.64 106.72 354.94 106.72 354.94 115.24'/%3e %3cpath class='st0' d='m397.19 116.06c-9.41 0-15.35-3.37-18.16-10.29l-0.17-0.41 7.25-3.76 0.2 0.5c1.55 3.85 5.66 6.14 10.99 6.14 2.08 0 8.86-0.4 8.86-5.61 0-3.05-2.94-4.85-8.97-5.5-14.45-1.72-16.4-7.43-16.4-12.79 0-8.43 8.14-12.27 16.22-12.33 8.06 0 13.73 2.88 16.41 8.34l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.91-4.29-9.22-4.29-4.89 0-7.93 1.88-7.93 4.92 0 2.99 3.45 4.01 8.63 4.63 8.73 1.08 16.8 3.45 16.8 13.43-0.02 9.89-9.09 13.42-17.57 13.42z'/%3e %3cpath class='st0' d='m457.03 116.25c-9.4 0-15.33-3.36-18.14-10.28l-0.17-0.41 7.25-3.75 0.2 0.5c1.55 3.84 5.65 6.13 10.98 6.13 2.08 0 8.85-0.4 8.85-5.61 0-3.05-2.93-4.85-8.96-5.49-14.44-1.72-16.38-7.42-16.38-12.78 0-8.42 8.14-12.25 16.2-12.32 8.05 0 13.71 2.88 16.39 8.33l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.9-4.29-9.21-4.29-4.89 0-7.93 1.88-7.93 4.91 0 2.99 3.45 4.01 8.62 4.62 8.72 1.07 16.79 3.44 16.79 13.42-0.01 9.9-9.07 13.42-17.55 13.42z'/%3e %3cpath class='st0' d='m94.63 93.63v4.23h-0.03c-0.36 6.13-3.75 9.62-9.43 9.62-6.03 0-9.62-3.49-10.01-9.62h-0.03v-4.23h-8.58v4.23 0.01 0.05c0.49 10.69 7.66 17.52 18.55 17.52 10.79 0 17.63-6.68 18.09-17.52v-4.29h-8.56z'/%3e %3crect class='st1' x='66.55' y='72.02' width='8.6' height='8.6'/%3e %3crect class='st0' x='94.41' y='72.02' width='8.72' height='8.72'/%3e %3crect class='st2' transform='matrix(-1.837e-16 1 -1 -1.837e-16 103.01 7.8599)' x='43.27' y='51.13' width='8.6' height='8.6'/%3e %3crect class='st3' transform='matrix(-1.837e-16 1 -1 -1.837e-16 126.9 6.4839)' x='55.9' y='62.39' width='8.6' height='8.6'/%3e %3crect class='st4' transform='matrix(-1.837e-16 1 -1 -1.837e-16 94.995 31.397)' x='27.5' y='58.89' width='8.6' height='8.6'/%3e %3crect class='st5' transform='matrix(-1.837e-16 1 -1 -1.837e-16 64.365 27.091)' x='14.34' y='41.43' width='8.6' height='8.6'/%3e %3crect class='st6' transform='matrix(-1.837e-16 1 -1 -1.837e-16 138.08 66.268)' x='31.6' y='97.87' width='8.6' height='8.6'/%3e %3crect class='st7' transform='matrix(-1.837e-16 1 -1 -1.837e-16 137.84 35.856)' x='46.69' y='82.55' width='8.6' height='8.6'/%3e %3c/g%3e%3c/switch%3e%3c/svg%3e";
+var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' %5b %3c!ENTITY ns_extend 'http://ns.adobe.com/Extensibility/1.0/'%3e %3c!ENTITY ns_ai 'http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c!ENTITY ns_graphs 'http://ns.adobe.com/Graphs/1.0/'%3e %3c!ENTITY ns_vars 'http://ns.adobe.com/Variables/1.0/'%3e %3c!ENTITY ns_imrep 'http://ns.adobe.com/ImageReplacement/1.0/'%3e %3c!ENTITY ns_sfw 'http://ns.adobe.com/SaveForWeb/1.0/'%3e %3c!ENTITY ns_custom 'http://ns.adobe.com/GenericCustomNamespace/1.0/'%3e %3c!ENTITY ns_adobe_xpath 'http://ns.adobe.com/XPath/1.0/'%3e%5d%3e%3csvg enable-background='new 0 0 479.42 154.1' version='1.1' viewBox='0 0 479.42 154.1' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cswitch%3e %3cforeignObject width='1' height='1' requiredExtensions='http://ns.adobe.com/AdobeIllustrator/10.0/'%3e %3c/foreignObject%3e %3cg%3e %3cpath class='st0' d='m203.46 43.96c1.66 0 3.06 0.82 3.06 2.56 0 0.83-0.48 1.54-1.36 1.88 1.11 0.31 1.64 1.33 1.64 2.18 0 1.94-1.63 2.52-3.35 2.52h-3.99v-9.13h4zm-2.85 3.93h2.91c1.1 0 1.89-0.4 1.89-1.36 0-1.02-0.82-1.54-1.94-1.54h-2.86v2.9zm0 4.13h2.86c0.95 0 2.22-0.25 2.22-1.49-0.01-1.15-1.17-1.62-2.16-1.62h-2.91v3.11z'/%3e %3cpath class='st0' d='M212.75%2c43.96h6.41V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m235.85 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.16-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.45 1.66l-0.86 0.53c-0.48-0.79-1.54-1.15-2.55-1.17z'/%3e %3cpath class='st0' d='m250.07 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m265.37 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.22l4.09-9.13h1.28zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m278.31 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m287.15 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m313.34 43.96v1.08h-5.2v3.18h4.98v1.06h-4.98v3.82h-1.14v-9.14h6.34z'/%3e %3cpath class='st0' d='m322.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.76-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m341.26 48.55c-0.01 2.39-1.5 4.72-4.63 4.72s-4.64-2.32-4.64-4.72c0-2.65 1.77-4.75 4.65-4.75 3.1 0.02 4.64 2.34 4.62 4.75zm-4.61-3.7c-2.32 0-3.52 1.71-3.52 3.7 0 1.85 1.12 3.65 3.52 3.65s3.48-1.85 3.48-3.65c0.01-1.85-1.1-3.68-3.48-3.7z'/%3e %3cpath class='st0' d='m351.84 50.22h-0.23l-3.31-4.64v7.51h-1.12v-9.13h1.36l3.21 4.69 3.18-4.69h1.36v9.13h-1.12v-7.49l-3.33 4.62z'/%3e %3cpath class='st0' d='m368.77 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m387.97 48.97h-5.22v4.12h-1.13v-9.13h1.13v3.95h5.22v-3.95h1.13v9.13h-1.13v-4.12z'/%3e %3cpath class='st0' d='M395.58%2c43.96H402V45h-5.29v2.86h5.07v1.06h-5.07v3.09h5.5v1.08h-6.62V43.96z'/%3e %3cpath class='st0' d='m418.68 44.78c-1.16 0-2.4 0.46-2.4 1.56 0 0.99 1.13 1.28 2.48 1.5 1.83 0.29 3.62 0.65 3.62 2.71-0.01 2.05-1.97 2.71-3.72 2.71-1.62 0-3.15-0.59-3.86-2.11l0.94-0.55c0.59 1.08 1.81 1.6 2.93 1.6 1.11 0 2.58-0.35 2.58-1.69 0.01-1.13-1.26-1.46-2.63-1.67-1.76-0.27-3.47-0.68-3.47-2.53-0.03-1.9 1.92-2.55 3.49-2.55 1.36 0 2.65 0.27 3.46 1.66l-0.86 0.53c-0.49-0.79-1.54-1.15-2.56-1.17z'/%3e %3cpath class='st0' d='m427.25 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m443.63 43.96 4.09 9.13h-1.23l-0.9-2.01h-5.22l-0.89 2.01h-1.24l4.09-9.13h1.3zm-0.64 1.15-2.16 4.93h4.33l-2.17-4.93z'/%3e %3cpath class='st0' d='m456.57 49.8h-2.22v3.29h-1.13v-9.13h4.15c2.06 0 3.09 1.43 3.09 2.92 0.01 1.38-0.74 2.67-2.62 2.83l3.01 3.38h-1.43l-2.85-3.29zm2.75-2.89c0.01-0.91-0.64-1.93-1.96-1.93h-3.01v3.81h2.96c1.37 0 2.01-0.85 2.01-1.88z'/%3e %3cpath class='st0' d='m465.41 44.98v-1.02h7.35v1.02h-3.12v8.11h-1.12v-8.11h-3.11z'/%3e %3cpath class='st0' d='m157.64 115.24v-24.59c0-6.81-3.65-10.72-10.03-10.72-6 0-9.44 3.91-9.44 10.72v24.59h-8.58v-24.59c0-11.51 6.93-18.66 18.08-18.66 11.26 0 18.54 7.32 18.54 18.66v24.59h-8.57z'/%3e %3cpath class='st0' d='m214.63 116.35c-16.55 0-22.44-11.2-22.44-21.67 0-15.87 11.27-22.98 22.44-22.98 5.93 0 11.53 2.3 15.77 6.49l0.34 0.34-5.54 5.67-0.35-0.33c-2.55-2.44-6.57-4.02-10.23-4.02-8.14 0-13.82 6.1-13.82 14.83 0 6.48 3.63 13.4 13.82 13.4 3.51 0 6.11-0.89 8.89-3.07v-6.64h-10.61v-7.97h19.29v17.55l-0.63 0.76c-4.49 5.14-10.03 7.64-16.93 7.64z'/%3e %3cpath class='st0' d='m277.01 115.24c-11.26 0-18.54-7.32-18.54-18.66v-24.59h8.58v24.59c0 6.81 3.65 10.72 10.02 10.72 6 0 9.44-3.91 9.44-10.72v-24.59h8.58v24.59c0 11.51-6.92 18.66-18.08 18.66z'/%3e %3cpolygon class='st0' points='321.07 115.24 321.07 72.25 354.94 72.25 354.94 80.65 329.64 80.65 329.64 90.13 350.81 90.13 350.81 98.24 329.64 98.24 329.64 106.72 354.94 106.72 354.94 115.24'/%3e %3cpath class='st0' d='m397.19 116.06c-9.41 0-15.35-3.37-18.16-10.29l-0.17-0.41 7.25-3.76 0.2 0.5c1.55 3.85 5.66 6.14 10.99 6.14 2.08 0 8.86-0.4 8.86-5.61 0-3.05-2.94-4.85-8.97-5.5-14.45-1.72-16.4-7.43-16.4-12.79 0-8.43 8.14-12.27 16.22-12.33 8.06 0 13.73 2.88 16.41 8.34l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.91-4.29-9.22-4.29-4.89 0-7.93 1.88-7.93 4.92 0 2.99 3.45 4.01 8.63 4.63 8.73 1.08 16.8 3.45 16.8 13.43-0.02 9.89-9.09 13.42-17.57 13.42z'/%3e %3cpath class='st0' d='m457.03 116.25c-9.4 0-15.33-3.36-18.14-10.28l-0.17-0.41 7.25-3.75 0.2 0.5c1.55 3.84 5.65 6.13 10.98 6.13 2.08 0 8.85-0.4 8.85-5.61 0-3.05-2.93-4.85-8.96-5.49-14.44-1.72-16.38-7.42-16.38-12.78 0-8.42 8.14-12.25 16.2-12.32 8.05 0 13.71 2.88 16.39 8.33l0.21 0.43-6.92 3.56-0.23-0.39c-1.25-2.08-4.9-4.29-9.21-4.29-4.89 0-7.93 1.88-7.93 4.91 0 2.99 3.45 4.01 8.62 4.62 8.72 1.07 16.79 3.44 16.79 13.42-0.01 9.9-9.07 13.42-17.55 13.42z'/%3e %3cpath class='st0' d='m94.63 93.63v4.23h-0.03c-0.36 6.13-3.75 9.62-9.43 9.62-6.03 0-9.62-3.49-10.01-9.62h-0.03v-4.23h-8.58v4.23 0.01 0.05c0.49 10.69 7.66 17.52 18.55 17.52 10.79 0 17.63-6.68 18.09-17.52v-4.29h-8.56z'/%3e %3crect class='st1' x='66.55' y='72.02' width='8.6' height='8.6'/%3e %3crect class='st0' x='94.41' y='72.02' width='8.72' height='8.72'/%3e %3crect class='st2' transform='matrix(-1.837e-16 1 -1 -1.837e-16 103.01 7.8599)' x='43.27' y='51.13' width='8.6' height='8.6'/%3e %3crect class='st3' transform='matrix(-1.837e-16 1 -1 -1.837e-16 126.9 6.4839)' x='55.9' y='62.39' width='8.6' height='8.6'/%3e %3crect class='st4' transform='matrix(-1.837e-16 1 -1 -1.837e-16 94.995 31.397)' x='27.5' y='58.89' width='8.6' height='8.6'/%3e %3crect class='st5' transform='matrix(-1.837e-16 1 -1 -1.837e-16 64.365 27.091)' x='14.34' y='41.43' width='8.6' height='8.6'/%3e %3crect class='st6' transform='matrix(-1.837e-16 1 -1 -1.837e-16 138.08 66.268)' x='31.6' y='97.87' width='8.6' height='8.6'/%3e %3crect class='st7' transform='matrix(-1.837e-16 1 -1 -1.837e-16 137.84 35.856)' x='46.69' y='82.55' width='8.6' height='8.6'/%3e %3c/g%3e%3c/switch%3e%3c/svg%3e";
 
-var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Generator: Adobe Illustrator 26.0.1%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 532 311.3' style='enable-background:new 0 0 532 311.3%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cg%3e %3cg%3e %3cpath class='st0' d='M89.4%2c278.2c2.4%2c0%2c4.4%2c1.2%2c4.4%2c3.7c0%2c1.2-0.7%2c2.2-1.9%2c2.7c1.6%2c0.4%2c2.4%2c1.9%2c2.4%2c3.1c0%2c2.8-2.3%2c3.6-4.8%2c3.6 h-5.7v-13.1H89.4z M85.3%2c283.8h4.2c1.6%2c0%2c2.7-0.6%2c2.7-1.9c0-1.5-1.2-2.2-2.8-2.2h-4.1V283.8z M85.3%2c289.8h4.1 c1.4%2c0%2c3.2-0.4%2c3.2-2.1c0-1.6-1.7-2.3-3.1-2.3h-4.2V289.8z'/%3e %3cpath class='st0' d='M101.9%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M133.5%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C136.5%2c279.9%2c135%2c279.4%2c133.5%2c279.4z'/%3e %3cpath class='st0' d='M153.1%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L153.1%2c287.2z'/%3e %3cpath class='st0' d='M174.3%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H174.3z M173.4%2c279.8l-3.1%2c7.1h6.2 L173.4%2c279.8z'/%3e %3cpath class='st0' d='M192.1%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L192.1%2c286.6z M196%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C195.1%2c285.1%2c196%2c283.9%2c196%2c282.4z'/%3e %3cpath class='st0' d='M204%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H204z'/%3e %3cpath class='st0' d='M240%2c278.2v1.6h-7.5v4.6h7.1v1.5h-7.1v5.5h-1.6v-13.1H240z'/%3e %3cpath class='st0' d='M252.5%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L252.5%2c286.6z M256.4%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C255.5%2c285.1%2c256.4%2c283.9%2c256.4%2c282.4z'/%3e %3cpath class='st0' d='M278.5%2c284.8c0%2c3.4-2.2%2c6.8-6.6%2c6.8c-4.5%2c0-6.7-3.3-6.7-6.8c0-3.8%2c2.5-6.8%2c6.7-6.8 C276.3%2c278%2c278.5%2c281.3%2c278.5%2c284.8z M271.9%2c279.5c-3.3%2c0-5.1%2c2.5-5.1%2c5.3c0%2c2.7%2c1.6%2c5.2%2c5.1%2c5.2c3.4%2c0%2c5-2.7%2c5-5.2 C276.9%2c282.1%2c275.3%2c279.5%2c271.9%2c279.5z'/%3e %3cpath class='st0' d='M292.9%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L292.9%2c287.2z'/%3e %3cpath class='st0' d='M315.6%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H315.6z'/%3e %3cpath class='st0' d='M342.4%2c285.4h-7.5v5.9h-1.6v-13.1h1.6v5.7h7.5v-5.7h1.6v13.1h-1.6V285.4z'/%3e %3cpath class='st0' d='M352.6%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M384.1%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C387.1%2c279.9%2c385.6%2c279.4%2c384.1%2c279.4z'/%3e %3cpath class='st0' d='M395.7%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H395.7z'/%3e %3cpath class='st0' d='M418.4%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H418.4z M417.5%2c279.8l-3.1%2c7.1h6.2 L417.5%2c279.8z'/%3e %3cpath class='st0' d='M436.2%2c286.6H433v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L436.2%2c286.6z M440.1%2c282.4c0-1.3-0.9-2.8-2.8-2.8H433v5.5h4.2C439.2%2c285.1%2c440.1%2c283.9%2c440.1%2c282.4z'/%3e %3cpath class='st0' d='M448.1%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H448.1z'/%3e %3c/g%3e%3c/g%3e%3cpath class='st0' d='M144.4%2c246.7v-27.4c0-7.6-4.1-11.9-11.2-11.9c-6.7%2c0-10.5%2c4.4-10.5%2c11.9v27.4h-9.6v-27.4 c0-12.8%2c7.7-20.8%2c20.1-20.8c12.5%2c0%2c20.7%2c8.2%2c20.7%2c20.8v27.4H144.4z'/%3e%3cpath class='st0' d='M207.9%2c248c-18.4%2c0-25-12.5-25-24.1c0-17.7%2c12.6-25.6%2c25-25.6c6.6%2c0%2c12.8%2c2.6%2c17.6%2c7.2l0.4%2c0.4l-6.2%2c6.3 l-0.4-0.4c-2.8-2.7-7.3-4.5-11.4-4.5c-9.1%2c0-15.4%2c6.8-15.4%2c16.5c0%2c7.2%2c4%2c14.9%2c15.4%2c14.9c3.9%2c0%2c6.8-1%2c9.9-3.4v-7.4H206v-8.9h21.5 v19.5l-0.7%2c0.9C221.8%2c245.2%2c215.6%2c248%2c207.9%2c248z'/%3e%3cpath class='st0' d='M277.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C297.5%2c238.8%2c289.8%2c246.7%2c277.4%2c246.7z'/%3e%3cpath class='st0' d='M63.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C83.6%2c238.8%2c75.8%2c246.7%2c63.4%2c246.7z'/%3e%3cpolygon class='st0' points='326.4%2c246.7 326.4%2c198.9 364.2%2c198.9 364.2%2c208.2 336%2c208.2 336%2c218.8 359.6%2c218.8 359.6%2c227.8 336%2c227.8 336%2c237.3 364.2%2c237.3 364.2%2c246.7 '/%3e%3cpath class='st0' d='M411.2%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C430.7%2c243.7%2c420.7%2c247.6%2c411.2%2c247.6z'/%3e%3cpath class='st0' d='M477.9%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C497.4%2c243.7%2c487.3%2c247.6%2c477.9%2c247.6z'/%3e%3cg%3e %3cpath class='st0' d='M296.2%2c105.8v8h-0.1c-0.7%2c11.6-7.1%2c18.2-17.8%2c18.2c-11.4%2c0-18.2-6.6-18.9-18.2h-0.1v-8h-16.2v8h0c0%2c0%2c0%2c0%2c0%2c0 v0.1h0c0.9%2c20.2%2c14.5%2c33.1%2c35.1%2c33.1c20.4%2c0%2c33.3-12.6%2c34.2-33.1h0v-8.1H296.2z'/%3e %3crect x='243.2' y='65' class='st1' width='16.3' height='16.3'/%3e %3crect x='295.8' y='65' class='st0' width='16.5' height='16.5'/%3e %3crect x='199.1' y='25.5' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 240.8896 -173.6676)' class='st2' width='16.3' height='16.3'/%3e %3crect x='223' y='46.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 286.0495 -176.2692)' class='st3' width='16.3' height='16.3'/%3e %3crect x='169.3' y='40.2' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 225.7338 -129.1657)' class='st4' width='16.3' height='16.3'/%3e %3crect x='144.4' y='7.1' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 167.8209 -137.3073)' class='st5' width='16.3' height='16.3'/%3e %3crect x='177.1' y='113.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 307.1887 -63.2329)' class='st6' width='16.3' height='16.3'/%3e %3crect x='205.6' y='84.9' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 306.7381 -120.7343)' class='st7' width='16.3' height='16.3'/%3e%3c/g%3e%3c/svg%3e";
-
-var img = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.2597 12.9199V14.767H17.2367C17.075 17.4452 15.5974 18.969 13.127 18.969C10.4949 18.969 8.92496 17.4452 8.76335 14.767H8.74026V12.9199H5V14.767V14.7901C5.20779 19.4538 8.34777 22.4322 13.1039 22.4322C17.8139 22.4322 20.7922 19.5231 21 14.7901V12.9199H17.2597Z' fill='%23003A57'/%3e%3cpath d='M8.78629 3.5H5.02295V7.26335H8.78629V3.5Z' fill='%2370C38A'/%3e%3cpath d='M20.9768 3.5H17.1672V7.30952H20.9768V3.5Z' fill='%23003A57'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Generator: Adobe Illustrator 26.0.1%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 532 311.3' style='enable-background:new 0 0 532 311.3%3b' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%23003A57%3b%7d .st1%7bfill:%2354C38A%3b%7d .st2%7bfill:%23B2C4CD%3b%7d .st3%7bfill:%23809CAB%3b%7d .st4%7bfill:%23CCEDDC%3b%7d .st5%7bfill:%23CCD8DD%3b%7d .st6%7bfill:%23E5EBEE%3b%7d .st7%7bfill:%23A9E1C5%3b%7d%3c/style%3e%3cg%3e %3cg%3e %3cpath class='st0' d='M89.4%2c278.2c2.4%2c0%2c4.4%2c1.2%2c4.4%2c3.7c0%2c1.2-0.7%2c2.2-1.9%2c2.7c1.6%2c0.4%2c2.4%2c1.9%2c2.4%2c3.1c0%2c2.8-2.3%2c3.6-4.8%2c3.6 h-5.7v-13.1H89.4z M85.3%2c283.8h4.2c1.6%2c0%2c2.7-0.6%2c2.7-1.9c0-1.5-1.2-2.2-2.8-2.2h-4.1V283.8z M85.3%2c289.8h4.1 c1.4%2c0%2c3.2-0.4%2c3.2-2.1c0-1.6-1.7-2.3-3.1-2.3h-4.2V289.8z'/%3e %3cpath class='st0' d='M101.9%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M133.5%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C136.5%2c279.9%2c135%2c279.4%2c133.5%2c279.4z'/%3e %3cpath class='st0' d='M153.1%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L153.1%2c287.2z'/%3e %3cpath class='st0' d='M174.3%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H174.3z M173.4%2c279.8l-3.1%2c7.1h6.2 L173.4%2c279.8z'/%3e %3cpath class='st0' d='M192.1%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L192.1%2c286.6z M196%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C195.1%2c285.1%2c196%2c283.9%2c196%2c282.4z'/%3e %3cpath class='st0' d='M204%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H204z'/%3e %3cpath class='st0' d='M240%2c278.2v1.6h-7.5v4.6h7.1v1.5h-7.1v5.5h-1.6v-13.1H240z'/%3e %3cpath class='st0' d='M252.5%2c286.6h-3.2v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L252.5%2c286.6z M256.4%2c282.4c0-1.3-0.9-2.8-2.8-2.8h-4.3v5.5h4.2C255.5%2c285.1%2c256.4%2c283.9%2c256.4%2c282.4z'/%3e %3cpath class='st0' d='M278.5%2c284.8c0%2c3.4-2.2%2c6.8-6.6%2c6.8c-4.5%2c0-6.7-3.3-6.7-6.8c0-3.8%2c2.5-6.8%2c6.7-6.8 C276.3%2c278%2c278.5%2c281.3%2c278.5%2c284.8z M271.9%2c279.5c-3.3%2c0-5.1%2c2.5-5.1%2c5.3c0%2c2.7%2c1.6%2c5.2%2c5.1%2c5.2c3.4%2c0%2c5-2.7%2c5-5.2 C276.9%2c282.1%2c275.3%2c279.5%2c271.9%2c279.5z'/%3e %3cpath class='st0' d='M292.9%2c287.2h-0.3l-4.8-6.7v10.8h-1.6v-13.1h1.9l4.6%2c6.7l4.6-6.7h1.9v13.1h-1.6v-10.7L292.9%2c287.2z'/%3e %3cpath class='st0' d='M315.6%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H315.6z'/%3e %3cpath class='st0' d='M342.4%2c285.4h-7.5v5.9h-1.6v-13.1h1.6v5.7h7.5v-5.7h1.6v13.1h-1.6V285.4z'/%3e %3cpath class='st0' d='M352.6%2c278.2h9.2v1.5h-7.6v4.1h7.3v1.5h-7.3v4.4h7.9v1.6h-9.5V278.2z'/%3e %3cpath class='st0' d='M384.1%2c279.4c-1.7%2c0-3.4%2c0.7-3.4%2c2.2c0%2c1.4%2c1.6%2c1.8%2c3.6%2c2.2c2.6%2c0.4%2c5.2%2c0.9%2c5.2%2c3.9c0%2c2.9-2.8%2c3.9-5.3%2c3.9 c-2.3%2c0-4.5-0.8-5.5-3l1.3-0.8c0.8%2c1.6%2c2.6%2c2.3%2c4.2%2c2.3c1.6%2c0%2c3.7-0.5%2c3.7-2.4c0-1.6-1.8-2.1-3.8-2.4c-2.5-0.4-5-1-5-3.6 c0-2.7%2c2.8-3.7%2c5-3.7c1.9%2c0%2c3.8%2c0.4%2c5%2c2.4l-1.2%2c0.8C387.1%2c279.9%2c385.6%2c279.4%2c384.1%2c279.4z'/%3e %3cpath class='st0' d='M395.7%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H395.7z'/%3e %3cpath class='st0' d='M418.4%2c278.2l5.9%2c13.1h-1.8l-1.3-2.9h-7.5l-1.3%2c2.9h-1.8l5.9-13.1H418.4z M417.5%2c279.8l-3.1%2c7.1h6.2 L417.5%2c279.8z'/%3e %3cpath class='st0' d='M436.2%2c286.6H433v4.7h-1.6v-13.1h5.9c3%2c0%2c4.4%2c2.1%2c4.4%2c4.2c0%2c2-1.1%2c3.8-3.8%2c4.1l4.3%2c4.8h-2.1L436.2%2c286.6z M440.1%2c282.4c0-1.3-0.9-2.8-2.8-2.8H433v5.5h4.2C439.2%2c285.1%2c440.1%2c283.9%2c440.1%2c282.4z'/%3e %3cpath class='st0' d='M448.1%2c279.7v-1.5h10.6v1.5h-4.5v11.6h-1.6v-11.6H448.1z'/%3e %3c/g%3e%3c/g%3e%3cpath class='st0' d='M144.4%2c246.7v-27.4c0-7.6-4.1-11.9-11.2-11.9c-6.7%2c0-10.5%2c4.4-10.5%2c11.9v27.4h-9.6v-27.4 c0-12.8%2c7.7-20.8%2c20.1-20.8c12.5%2c0%2c20.7%2c8.2%2c20.7%2c20.8v27.4H144.4z'/%3e%3cpath class='st0' d='M207.9%2c248c-18.4%2c0-25-12.5-25-24.1c0-17.7%2c12.6-25.6%2c25-25.6c6.6%2c0%2c12.8%2c2.6%2c17.6%2c7.2l0.4%2c0.4l-6.2%2c6.3 l-0.4-0.4c-2.8-2.7-7.3-4.5-11.4-4.5c-9.1%2c0-15.4%2c6.8-15.4%2c16.5c0%2c7.2%2c4%2c14.9%2c15.4%2c14.9c3.9%2c0%2c6.8-1%2c9.9-3.4v-7.4H206v-8.9h21.5 v19.5l-0.7%2c0.9C221.8%2c245.2%2c215.6%2c248%2c207.9%2c248z'/%3e%3cpath class='st0' d='M277.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C297.5%2c238.8%2c289.8%2c246.7%2c277.4%2c246.7z'/%3e%3cpath class='st0' d='M63.4%2c246.7c-12.5%2c0-20.7-8.2-20.7-20.8v-27.4h9.6V226c0%2c7.6%2c4.1%2c11.9%2c11.2%2c11.9c6.7%2c0%2c10.5-4.4%2c10.5-11.9 v-27.4h9.6V226C83.6%2c238.8%2c75.8%2c246.7%2c63.4%2c246.7z'/%3e%3cpolygon class='st0' points='326.4%2c246.7 326.4%2c198.9 364.2%2c198.9 364.2%2c208.2 336%2c208.2 336%2c218.8 359.6%2c218.8 359.6%2c227.8 336%2c227.8 336%2c237.3 364.2%2c237.3 364.2%2c246.7 '/%3e%3cpath class='st0' d='M411.2%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C430.7%2c243.7%2c420.7%2c247.6%2c411.2%2c247.6z'/%3e%3cpath class='st0' d='M477.9%2c247.6c-10.5%2c0-17.1-3.7-20.2-11.5l-0.2-0.5l8.1-4.2l0.2%2c0.6c1.7%2c4.3%2c6.3%2c6.8%2c12.2%2c6.8 c2.3%2c0%2c9.9-0.5%2c9.9-6.2c0-3.4-3.3-5.4-10-6.1c-16.1-1.9-18.3-8.3-18.3-14.2c0-9.4%2c9.1-13.7%2c18.1-13.7c9%2c0%2c15.3%2c3.2%2c18.3%2c9.3l0.2%2c0.5 l-7.7%2c4l-0.3-0.4c-1.4-2.3-5.5-4.8-10.3-4.8c-5.4%2c0-8.8%2c2.1-8.8%2c5.5c0%2c3.3%2c3.8%2c4.5%2c9.6%2c5.2c9.7%2c1.2%2c18.7%2c3.8%2c18.7%2c15 C497.4%2c243.7%2c487.3%2c247.6%2c477.9%2c247.6z'/%3e%3cg%3e %3cpath class='st0' d='M296.2%2c105.8v8h-0.1c-0.7%2c11.6-7.1%2c18.2-17.8%2c18.2c-11.4%2c0-18.2-6.6-18.9-18.2h-0.1v-8h-16.2v8h0c0%2c0%2c0%2c0%2c0%2c0 v0.1h0c0.9%2c20.2%2c14.5%2c33.1%2c35.1%2c33.1c20.4%2c0%2c33.3-12.6%2c34.2-33.1h0v-8.1H296.2z'/%3e %3crect x='243.2' y='65' class='st1' width='16.3' height='16.3'/%3e %3crect x='295.8' y='65' class='st0' width='16.5' height='16.5'/%3e %3crect x='199.1' y='25.5' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 240.8896 -173.6676)' class='st2' width='16.3' height='16.3'/%3e %3crect x='223' y='46.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 286.0495 -176.2692)' class='st3' width='16.3' height='16.3'/%3e %3crect x='169.3' y='40.2' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 225.7338 -129.1657)' class='st4' width='16.3' height='16.3'/%3e %3crect x='144.4' y='7.1' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 167.8209 -137.3073)' class='st5' width='16.3' height='16.3'/%3e %3crect x='177.1' y='113.8' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 307.1887 -63.2329)' class='st6' width='16.3' height='16.3'/%3e %3crect x='205.6' y='84.9' transform='matrix(-1.836970e-16 1 -1 -1.836970e-16 306.7381 -120.7343)' class='st7' width='16.3' height='16.3'/%3e%3c/g%3e%3c/svg%3e";
 
 /**
  * A Logo is a visual way to represent a brand logo.
@@ -3725,9 +4078,9 @@ const Logo = (props) => {
     return (jsxRuntime.jsx("img", Object.assign({}, props, ((props === null || props === void 0 ? void 0 : props.type) === "horizontal" && { width: `${props.size}` }), ((props === null || props === void 0 ? void 0 : props.type) === "vertical" && { height: `${props.size}` }), ((props === null || props === void 0 ? void 0 : props.type) === "icon" && { width: `${props.size}` } && {
         height: `${props.size}`,
     }), { className: props.className, alt: (_a = props.alt) !== null && _a !== void 0 ? _a : "Unguess Logo", src: {
-            horizontal: img$2,
-            vertical: img$1,
-            icon: img,
+            horizontal: img$1,
+            vertical: img,
+            icon: img$2,
         }[props.type] })));
 };
 
@@ -5841,25 +6194,6 @@ const Timeline = (props) => jsxRuntime.jsx(UgTimeline, Object.assign({}, props))
 Timeline.Item = UgTimelineItem;
 Timeline.Content = UgTimelineContent;
 
-/**
- * Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
- * <hr>
- * Used for this:
- *    - To describe the function of an element when it might be ambiguous
- *    - To describe the function of unlabeled icons
- * Not for this:
- *    - To provide information a user needs to know or remember
- *    - To display truncated text, use a title attribute instead
- */
-const TooltipComponent = (props) => {
-    var _a;
-    const theme = React.useContext(styled.ThemeContext);
-    return jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
-};
-const Tooltip = styled__default["default"](TooltipComponent) `
-  box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
-`;
-
 const StyledTooltipModal = styled__default["default"](reactModals.TooltipModal) `
    border-radius: ${({ theme }) => theme.borderRadii.md};
 `;