@appquality/unguess-design-system 3.1.109-attachments → 3.1.110

package/build/index.js

@@ -21,9 +21,9 @@ var bullet = require('@nivo/bullet');
 var web = require('@react-spring/web');
 var tooltip = require('@nivo/tooltip');
 var pie = require('@nivo/pie');
+var line = require('@nivo/line');
 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');
@@ -38,10 +38,10 @@ var Mention = require('@tiptap/extension-mention');
 var tippy = require('tippy.js');
 var Image$2 = require('@tiptap/extension-image');
 var Dropcursor = require('@tiptap/extension-dropcursor');
-var reactGrid = require('@zendeskgarden/react-grid');
 var reactModals = require('@zendeskgarden/react-modals');
 var SlickSlider = require('react-slick');
 var Video = require('@appquality/stream-player');
+var reactGrid = require('@zendeskgarden/react-grid');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
@@ -49,6 +49,10 @@ var formik = require('formik');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var reactPagination = require('@zendeskgarden/react-pagination');
 var reactTables = require('@zendeskgarden/react-tables');
+var SearchAndReplace = require('@sereneinserenade/tiptap-search-and-replace');
+var Document = require('@tiptap/extension-document');
+var Text$2 = require('@tiptap/extension-text');
+var model = require('@tiptap/pm/model');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -85,6 +89,9 @@ var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$2);
 var Dropcursor__default = /*#__PURE__*/_interopDefaultLegacy(Dropcursor);
 var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 var Video__default = /*#__PURE__*/_interopDefaultLegacy(Video);
+var SearchAndReplace__default = /*#__PURE__*/_interopDefaultLegacy(SearchAndReplace);
+var Document__default = /*#__PURE__*/_interopDefaultLegacy(Document);
+var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text$2);
 
 /*
  * Design principles https://garden.zendesk.com/design/color (accessed 28 apr 2023)
@@ -291,7 +298,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const fontWeights = Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 });
 
@@ -642,6 +654,15 @@ 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 StyledInternalAvatar = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const InternalAvatar = () => {
+    return (jsxRuntime.jsx(StyledInternalAvatar, { children: jsxRuntime.jsx("img", { alt: "avatar", src: img$2 }) }));
+};
+
 const UgAvatar = styled__default["default"](reactAvatars.Avatar) `
   text-transform: uppercase;
 
@@ -673,7 +694,7 @@ const Avatar = (_a) => {
         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(InternalAvatar, {});
     };
     return (jsxRuntime.jsx(UgAvatar, Object.assign({}, props, { badge: fixedBadge, isSystem: props.avatarType === "system" || isSystem, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
@@ -842,48 +863,48 @@ Tag.Avatar = StyledAvatar;
 Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
-var _path$F;
-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 SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
+var _path$H;
+function _extends$U() { return _extends$U = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$U.apply(null, arguments); }
+const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$H || (_path$H = /*#__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$E;
-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 SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+var _path$G;
+function _extends$T() { return _extends$T = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$T.apply(null, arguments); }
+const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$G || (_path$G = /*#__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$D;
-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 SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+var _path$F;
+function _extends$S() { return _extends$S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$S.apply(null, arguments); }
+const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$F || (_path$F = /*#__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$C, _path2$c, _path3$4;
-function _extends$P() { _extends$P = 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$P.apply(this, arguments); }
-const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+var _rect$4, _path$E, _path2$c, _path3$4;
+function _extends$R() { return _extends$R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$R.apply(null, arguments); }
+const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -894,7 +915,7 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$E || (_path$E = /*#__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$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
@@ -905,9 +926,9 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   fill: "#007345"
 })));
 
-var _rect$3, _path$B, _path2$b;
-function _extends$O() { _extends$O = 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$O.apply(this, arguments); }
-const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+var _rect$3, _path$D, _path2$b;
+function _extends$Q() { return _extends$Q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$Q.apply(null, arguments); }
+const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -918,7 +939,7 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$D || (_path$D = /*#__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",
@@ -930,9 +951,9 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
   fill: "#F4AC1A"
 })));
 
-var _rect$2, _path$A, _path2$a;
-function _extends$N() { _extends$N = 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$N.apply(this, arguments); }
-const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+var _rect$2, _path$C, _path2$a;
+function _extends$P() { return _extends$P = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$P.apply(null, arguments); }
+const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -943,7 +964,7 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$C || (_path$C = /*#__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,
@@ -957,9 +978,9 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   strokeLinejoin: "round"
 })));
 
-var _rect$1, _path$z, _path2$9, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
-const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+var _rect$1, _path$B, _path2$9, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
+function _extends$O() { return _extends$O = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$O.apply(null, arguments); }
+const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -970,7 +991,7 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$B || (_path$B = /*#__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$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1002,9 +1023,9 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   fill: "#FFB65A"
 })));
 
-var _g$c, _path$y, _path2$8, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
-const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+var _g$c, _path$A, _path2$8, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
+function _extends$N() { return _extends$N = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$N.apply(null, arguments); }
+const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -1016,7 +1037,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$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$A || (_path$A = /*#__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"
@@ -1072,9 +1093,9 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
   fill: "#ECF4F2"
 })));
 
-var _g$b, _path$x;
-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 SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+var _g$b, _path$z;
+function _extends$M() { return _extends$M = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$M.apply(null, arguments); }
+const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -1086,7 +1107,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$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$z || (_path$z = /*#__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"
 })));
@@ -1728,59 +1749,6 @@ const BulletChart = ({ width, height, ranges, values }) => {
                 }, tooltip: CustomTooltip, rangeColors: theme.palette.grey[200], rangeBorderColor: "white", rangeBorderWidth: 2, margin: { top: 0, right: 5, bottom: -1, left: 0 } }) })) })));
 };
 
-const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeMultiplier, }) => {
-    const parameter = 6;
-    const fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
-    const spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
-        (parameter * 0.9);
-    const shift = -radius / (parameter * 2.5);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
-                        fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
-                    } }, { children: label })) }))), value && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift - (label ? spacing : spacing / 2), fill: theme.palette.blue[600], style: {
-                        fontSize: parseInt(theme.fontSizes.xxl.replace("px", "")) *
-                            fontSizeFactor,
-                        fontWeight: theme.fontWeights.semibold,
-                    } }, { children: value })) })))] }));
-};
-
-const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }) => {
-    var _a;
-    const themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
-                        ? labelFormatter({
-                            label: d.label,
-                            id: d.id,
-                            value: d.value,
-                            data: d.data,
-                            labelPosition: "arclink",
-                        })
-                        : (d.label || d.id).toString(), arcLinkLabelsDiagonalLength: 8, arcLinkLabelsStraightLength: 12, arcLinkLabelsTextOffset: 4, padAngle: 2, data: data, margin: Object.assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
-                        ? (node) => {
-                            const data = node.datum.data;
-                            const label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
-                            const value = data.value;
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label, value, data }) });
-                        }
-                        : undefined, cornerRadius: 2, innerRadius: 0.8, layers: [
-                        "arcs",
-                        "arcLabels",
-                        "arcLinkLabels",
-                        ...(centerItem
-                            ? [
-                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))),
-                            ]
-                            : []),
-                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.map((d) => labelFormatter
-                        ? labelFormatter({
-                            label: d.label,
-                            id: d.id,
-                            value: d.value,
-                            data: d,
-                            labelPosition: "legend",
-                        })
-                        : d.id.toString()) }, (typeof legend === "object" && legend)))) : undefined }))] }));
-};
-
 const AbsoluteChartContainer = styled__default["default"](ChartContainer) `
   position: absolute;
   left: 0;
@@ -1824,132 +1792,62 @@ const HalfPieChart = ({ theme, colors, width, height, data, margin, showArcLinks
                 }, mode: "back" })] })));
 };
 
-const flatten = (data) => data.reduce((acc, item) => {
-    if (item.children) {
-        return [...acc, item, ...flatten(item.children)];
-    }
-    return [...acc, item];
-}, []);
-const findChildrenByName = (data, name) => {
-    if (!data.children)
-        return undefined;
-    return flatten(data.children).find((searchedName) => searchedName.name === name);
-};
-
-const getChildrenValue = (data) => {
-    if (data.value) {
-        return data.value;
-    }
-    if (data.children) {
-        return data.children.reduce((acc, item) => {
-            return acc + getChildrenValue(item);
-        }, 0);
-    }
-    return 0;
+const CenteredItem = ({ centerX, centerY, theme, radius, label, value, fontSizeMultiplier, }) => {
+    const parameter = 6;
+    const fontSizeFactor = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) / (14 * parameter);
+    const spacing = ((fontSizeMultiplier ? fontSizeMultiplier : 1) * radius) /
+        (parameter * 0.9);
+    const shift = -radius / (parameter * 2.5);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift + (value ? spacing : spacing / 2), fill: theme.palette.grey[600], style: {
+                        fontSize: parseInt(theme.fontSizes.md.replace("px", "")) * fontSizeFactor,
+                    } }, { children: label })) }))), value && (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX},${centerY})` }, { children: jsxRuntime.jsx("text", Object.assign({ textAnchor: "middle", baselineShift: shift - (label ? spacing : spacing / 2), fill: theme.palette.blue[600], style: {
+                        fontSize: parseInt(theme.fontSizes.xxl.replace("px", "")) *
+                            fontSizeFactor,
+                        fontWeight: theme.fontWeights.semibold,
+                    } }, { children: value })) })))] }));
 };
 
-const ResetText = styled__default["default"].text `
-  font-size: ${({ radius, theme }) => (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130}px;
-  cursor: pointer;
-
-  fill: ${({ theme }) => theme.palette.blue[500]};
-  &:hover {
-    fill: ${({ theme }) => theme.palette.blue[700]};
-  }
-`;
-const ResetButton = ({ centerX, centerY, radius, theme, onClick, }) => (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX - radius},${centerY - radius})` }, { children: jsxRuntime.jsx(ResetText, Object.assign({ onClick: onClick, radius: radius }, { children: `< Reset` })) })));
-
-const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChange, tooltip, legend, }) => {
+const PieChart = ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }) => {
+    var _a;
     const themeContext = React.useContext(styled.ThemeContext);
-    const [currentData, setCurrentData] = React.useState(data);
-    const [currentColor, setCurrentColor] = React.useState();
-    const [isHovering, setIsHovering] = React.useState(false);
-    const changeDataSlice = ({ data, color, }) => {
-        setCurrentData(data);
-        setCurrentColor(color);
-    };
-    React.useEffect(() => {
-        if (onChange)
-            onChange(currentData);
-    }, [currentData]);
-    if (!data.children)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
-                        ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
-                                    padding: 0,
-                                } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
-                        ? () => currentColor
-                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
-                        if (node.data.children) {
-                            setIsHovering(true);
-                        }
-                    }, onMouseLeave: (node) => {
-                        if (node.data.children) {
-                            setIsHovering(false);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: Object.assign({}, Object.assign(Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), theme), { labels: Object.assign(Object.assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: Object.assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_a = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _a === void 0 ? void 0 : _a.text) }) })), colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, arcLinkLabelsThickness: 2, arcLinkLabel: (d) => labelFormatter
+                        ? labelFormatter({
+                            label: d.label,
+                            id: d.id,
+                            value: d.value,
+                            data: d.data,
+                            labelPosition: "arclink",
+                        })
+                        : (d.label || d.id).toString(), arcLinkLabelsDiagonalLength: 8, arcLinkLabelsStraightLength: 12, arcLinkLabelsTextOffset: 4, padAngle: 2, data: data, margin: Object.assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
+                        ? (node) => {
+                            const data = node.datum.data;
+                            const label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
+                            const value = data.value;
+                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({ label, value, data }) });
                         }
-                    }, tooltip: tooltip
-                        ? (node) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
-                                label: node.data.label || node.data.name,
-                                value: getChildrenValue(node.data),
-                                data: Object.assign(Object.assign({}, node.data), { children: undefined }),
-                            }) }))
-                        : undefined, layers: [
+                        : undefined, cornerRadius: 2, innerRadius: 0.8, layers: [
                         "arcs",
+                        "arcLabels",
+                        "arcLinkLabels",
                         ...(centerItem
                             ? [
-                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))),
-                            ]
-                            : []),
-                        ...(currentColor
-                            ? [
-                                (props) => (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: () => {
-                                        changeDataSlice({
-                                            data,
-                                        });
-                                    } })),
+                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))),
                             ]
                             : []),
-                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.6]] }, onClick: (clickedData) => {
-                        const foundObject = findChildrenByName(currentData, clickedData.id.toString());
-                        if (foundObject && foundObject.children) {
-                            changeDataSlice({
-                                data: foundObject,
-                                color: clickedData.color,
-                            });
-                        }
-                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
-};
-
-const CustomCell = ({ position, size, x, y, color, fill, opacity, borderWidth, borderColor, data, onHover, onLeave, onClick, }) => (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: event => {
-        onClick({ position, color, x, y, data }, event);
-    } }));
-
-const WaffleChart = ({ height, width, data, total, tooltip, }) => {
-    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
-                ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
-                            padding: 0,
-                        } }) }) : DEFAULT_CHARTS_THEME, data: [
-                {
-                    id: "green-circles",
-                    label: data.label,
-                    value: data.value,
-                },
-                {
-                    id: "grey-circles",
-                    label: total.label,
-                    value: total.value,
-                },
-            ], tooltip: ({ value, label }) => tooltip ? tooltip({ label, value }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: `${label}: ${value}` }), fillDirection: "bottom", total: total.value, rows: 6, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
-            // @ts-ignore property cellComponent does not exist, but it does
-            cellComponent: (_a) => {
-                var rest = __rest(_a, ["borderWidth", "borderColor"]);
-                return (jsxRuntime.jsx(CustomCell, Object.assign({ borderWidth: 2, borderColor: "white" }, rest)));
-            } }) })));
+                    ], activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.map((d) => labelFormatter
+                        ? labelFormatter({
+                            label: d.label,
+                            id: d.id,
+                            value: d.value,
+                            data: d,
+                            labelPosition: "legend",
+                        })
+                        : d.id.toString()) }, (typeof legend === "object" && legend)))) : undefined }))] }));
 };
 
 var _g$a, _defs$4;
-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 SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+function _extends$L() { return _extends$L = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$L.apply(null, arguments); }
+const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -1972,8 +1870,8 @@ const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$9, _defs$3;
-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 SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
+const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -1996,8 +1894,8 @@ const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$8, _defs$2;
-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 SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+function _extends$J() { return _extends$J = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$J.apply(null, arguments); }
+const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -2026,8 +1924,8 @@ const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$7, _defs$1;
-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 SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+function _extends$I() { return _extends$I = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$I.apply(null, arguments); }
+const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
@@ -2056,8 +1954,8 @@ const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg"
 })))));
 
 var _g$6, _defs;
-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 SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+function _extends$H() { return _extends$H = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$H.apply(null, arguments); }
+const SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
   width: 26,
   height: 26,
   viewBox: "0 0 26 26",
@@ -2285,25 +2183,148 @@ 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 }) => `0 ${theme.space.base * 4}px`};
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-  font-size: ${({ theme }) => theme.fontSizes.sm};
-`;
-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 flatten = (data) => data.reduce((acc, item) => {
+    if (item.children) {
+        return [...acc, item, ...flatten(item.children)];
+    }
+    return [...acc, item];
+}, []);
+const findChildrenByName = (data, name) => {
+    if (!data.children)
+        return undefined;
+    return flatten(data.children).find((searchedName) => searchedName.name === name);
 };
 
-const Footer$4 = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
-  align-items: center;
+const getChildrenValue = (data) => {
+    if (data.value) {
+        return data.value;
+    }
+    if (data.children) {
+        return data.children.reduce((acc, item) => {
+            return acc + getChildrenValue(item);
+        }, 0);
+    }
+    return 0;
+};
+
+const ResetText = styled__default["default"].text `
+  font-size: ${({ radius, theme }) => (parseInt(theme.fontSizes.md.replace("px", "")) * radius) / 130}px;
+  cursor: pointer;
+
+  fill: ${({ theme }) => theme.palette.blue[500]};
+  &:hover {
+    fill: ${({ theme }) => theme.palette.blue[700]};
+  }
+`;
+const ResetButton = ({ centerX, centerY, radius, theme, onClick, }) => (jsxRuntime.jsx("g", Object.assign({ transform: `translate(${centerX - radius},${centerY - radius})` }, { children: jsxRuntime.jsx(ResetText, Object.assign({ onClick: onClick, radius: radius }, { children: `< Reset` })) })));
+
+const SunburstChart = ({ colors, width, height, data, centerItem, margin, onChange, tooltip, legend, }) => {
+    const themeContext = React.useContext(styled.ThemeContext);
+    const [currentData, setCurrentData] = React.useState(data);
+    const [currentColor, setCurrentColor] = React.useState();
+    const [isHovering, setIsHovering] = React.useState(false);
+    const changeDataSlice = ({ data, color, }) => {
+        setCurrentData(data);
+        setCurrentColor(color);
+    };
+    React.useEffect(() => {
+        if (onChange)
+            onChange(currentData);
+    }, [currentData]);
+    if (!data.children)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
+                        ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
+                                    padding: 0,
+                                } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
+                        ? () => currentColor
+                        : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, borderWidth: 4, cornerRadius: 4, onMouseEnter: (node) => {
+                        if (node.data.children) {
+                            setIsHovering(true);
+                        }
+                    }, onMouseLeave: (node) => {
+                        if (node.data.children) {
+                            setIsHovering(false);
+                        }
+                    }, tooltip: tooltip
+                        ? (node) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
+                                label: node.data.label || node.data.name,
+                                value: getChildrenValue(node.data),
+                                data: Object.assign(Object.assign({}, node.data), { children: undefined }),
+                            }) }))
+                        : undefined, layers: [
+                        "arcs",
+                        ...(centerItem
+                            ? [
+                                (props) => (jsxRuntime.jsx(CenteredItem, Object.assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))),
+                            ]
+                            : []),
+                        ...(currentColor
+                            ? [
+                                (props) => (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: () => {
+                                        changeDataSlice({
+                                            data,
+                                        });
+                                    } })),
+                            ]
+                            : []),
+                    ], id: "name", value: "value", margin: Object.assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.6]] }, onClick: (clickedData) => {
+                        const foundObject = findChildrenByName(currentData, clickedData.id.toString());
+                        if (foundObject && foundObject.children) {
+                            changeDataSlice({
+                                data: foundObject,
+                                color: clickedData.color,
+                            });
+                        }
+                    } }) })), jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, Object.assign({ colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL, data: data.children.map((d) => d.label || d.name) }, (typeof legend === "object" && legend)))) : undefined }))] }));
+};
+
+const CustomCell = ({ position, size, x, y, color, fill, opacity, borderWidth, borderColor, data, onHover, onLeave, onClick, }) => (jsxRuntime.jsx("circle", { r: size / 2, cx: x + size / 2, cy: y + size / 2, fill: fill || color, strokeWidth: borderWidth, stroke: borderColor, opacity: opacity, onMouseEnter: onHover, onMouseMove: onHover, onMouseLeave: onLeave, onClick: event => {
+        onClick({ position, color, x, y, data }, event);
+    } }));
+
+const WaffleChart = ({ height, width, data, total, tooltip, }) => {
+    return (jsxRuntime.jsx(ChartContainer, Object.assign({ width: width, height: height }, { children: jsxRuntime.jsx(waffle.ResponsiveWaffle, { theme: tooltip
+                ? Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME), { tooltip: Object.assign(Object.assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
+                            padding: 0,
+                        } }) }) : DEFAULT_CHARTS_THEME, data: [
+                {
+                    id: "green-circles",
+                    label: data.label,
+                    value: data.value,
+                },
+                {
+                    id: "grey-circles",
+                    label: total.label,
+                    value: total.value,
+                },
+            ], tooltip: ({ value, label }) => tooltip ? tooltip({ label, value }) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: `${label}: ${value}` }), fillDirection: "bottom", total: total.value, rows: 6, columns: 8, colors: CHARTS_COLOR_SCHEME_MONO, 
+            // @ts-ignore property cellComponent does not exist, but it does
+            cellComponent: (_a) => {
+                var rest = __rest(_a, ["borderWidth", "borderColor"]);
+                return (jsxRuntime.jsx(CustomCell, Object.assign({ borderWidth: 2, borderColor: "white" }, rest)));
+            } }) })));
+};
+
+const ShortcutContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
+`;
+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.xs} 0px ${theme.space.sm}`};
+  align-items: center;
   margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
   gap: ${({ theme }) => theme.space.xs};
@@ -2337,40 +2358,26 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
         setEditor,
         thumbnails,
         setThumbnails,
-        afterUploadCallback: (failed) => {
-            setThumbnails(thumbnails.map((file) => {
-                if (failed.includes(file.id)) {
-                    file.isLoadingMedia = false;
-                    //file.isError = true;
-                }
-                else {
-                    file.isLoadingMedia = false;
-                    //file.isError = false
-                }
-                return file;
-            }));
-        },
-        addThumbnails: ({ files }) => {
+        afterUploadCallback: (failed) => { },
+        addThumbnails: ({ files }) => __awaiter(void 0, void 0, void 0, function* () {
             setThumbnails((prev) => [...prev, ...files]);
-            if (onFileUpload) {
-                onFileUpload(files).then((data) => {
-                    var _a;
-                    const failed = (_a = data.failed) === null || _a === void 0 ? void 0 : _a.map((f) => f.name);
-                    setThumbnails((prev) => {
-                        return prev.map((file) => {
-                            file.isLoadingMedia = false;
-                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.id)) {
-                                file.isError = true;
-                            }
-                            else {
-                                file.isError = false;
-                            }
-                            return file;
-                        });
+            if (!onFileUpload)
+                return;
+            try {
+                const data = yield onFileUpload(files);
+                setThumbnails((prev) => {
+                    return prev.map(file => {
+                        var _a, _b;
+                        file.isLoadingMedia = false;
+                        file.error = (_b = (_a = data.failed) === null || _a === void 0 ? void 0 : _a.find(f => f.name === file.name)) === null || _b === void 0 ? void 0 : _b.errorCode;
+                        return file;
                     });
                 });
             }
-        },
+            catch (e) {
+                console.log("Error uploading files", e);
+            }
+        }),
         clearInput: () => {
             if (editor && !editor.isEmpty) {
                 editor.commands.clearContent();
@@ -2736,28 +2743,28 @@ const ChatTitle = styled__default["default"](Title$1) `
   padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
 `;
 
-var _path$w;
-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 SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+var _path$y;
+function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
+const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$y || (_path$y = /*#__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$v;
-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 SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+var _path$x;
+function _extends$F() { return _extends$F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$F.apply(null, arguments); }
+const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2765,15 +2772,15 @@ const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg"
   d: "M8 1h3M9.5 1l-3 14M5 15h3"
 })));
 
-var _path$u, _path2$7;
-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 SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+var _path$w, _path2$7;
+function _extends$E() { return _extends$E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$E.apply(null, arguments); }
+const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$w || (_path$w = /*#__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$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2785,8 +2792,8 @@ const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _g$5;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
-const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
+const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2813,8 +2820,8 @@ const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$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 SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+function _extends$C() { return _extends$C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$C.apply(null, arguments); }
+const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2841,8 +2848,8 @@ const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 var _g$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 SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+function _extends$B() { return _extends$B = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$B.apply(null, arguments); }
+const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2869,7 +2876,7 @@ const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 }))));
 
 const StyledIconButton = styled__default["default"](IconButton) ``;
-const MenuContainer$1 = styled__default["default"](Card) `
+const MenuContainer$2 = styled__default["default"](Card) `
   padding: ${({ theme }) => theme.space.xxs};
 
   ${StyledIconButton} {
@@ -2888,12 +2895,12 @@ const MenuContainer$1 = styled__default["default"](Card) `
     }
   }
 `;
-const FloatingMenu = (props) => {
+const FloatingMenu$1 = (props) => {
     const { editor } = props;
     if (!editor) {
         return null;
     }
-    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") }))] })) })));
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer$2, 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") }))] })) })));
 };
 
 /**
@@ -2909,64 +2916,72 @@ const FloatingMenu = (props) => {
 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 }));
+    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) `
+const StyledTooltip$2 = 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$t;
-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 SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  ${({ isTransparent }) => isTransparent &&
+    `
+      box-shadow: none;
+      background-color: transparent;
+      border: none;
+    `};
+`;
+const Tooltip = (props) => jsxRuntime.jsx(StyledTooltip$2, Object.assign({}, props));
+
+var _path$v;
+function _extends$A() { return _extends$A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$A.apply(null, arguments); }
+const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7 1c2.176 0 4 1.824 4 4 0 1.315-.666 2.501-1.673 3.234C10.869 8.792 12 10.287 12 12c0 2.176-1.824 4-4 4H3.5a.5.5 0 01-.5-.5v-14a.5.5 0 01.5-.5H7zM4 15h4c1.624 0 3-1.376 3-3S9.624 9 8 9H4v6zM7 2H4v6h3c1.624 0 3-1.376 3-3S8.624 2 7 2z"
 })));
 
-var _path$s;
-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 SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+var _path$u;
+function _extends$z() { return _extends$z = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$z.apply(null, arguments); }
+const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M7.5 1.5h3M9 1.5l-3 14m-1.5 0h3"
 })));
 
-var _path$r;
-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 SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+var _path$t;
+function _extends$y() { return _extends$y = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$y.apply(null, arguments); }
+const SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   role: "presentation"
-}, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M11.5 4.5V8h0A3.5 3.5 0 018 11.5h0A3.5 3.5 0 014.5 8h0A3.5 3.5 0 018 4.5h0A3.5 3.5 0 0111.5 8h0v1.5a2 2 0 002 2h0a2 2 0 002-2V8h0A7.5 7.5 0 008 .5h0A7.5 7.5 0 00.5 8h0A7.5 7.5 0 008 15.5h3.41"
 })));
 
-var _path$q;
-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 SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+var _path$s;
+function _extends$x() { return _extends$x = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$x.apply(null, arguments); }
+const SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   role: "presentation"
-}, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -3065,7 +3080,7 @@ function useMedia() {
     return { getMedia };
 }
 
-const MenuContainer = styled__default["default"].div `
+const MenuContainer$1 = styled__default["default"].div `
   padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
   flex-direction: row;
@@ -3108,7 +3123,7 @@ const CommentBar = ({ editor, i18n, }) => {
             }
         };
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { 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"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), 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"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), 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", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : "Upload images and video. Max size: 5GB", placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer$1, Object.assign({ id: "menu-container" }, { 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"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), 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"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), 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", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ style: { textAlign: "center" }, content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " Max size: 5GB", " "] }))] })), placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -3357,20 +3372,20 @@ const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
     ];
 };
 
-var _circle$3, _path$p, _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 SvgRemoveMediaIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+var _circle$4, _path$r, _path2$6;
+function _extends$w() { return _extends$w = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$w.apply(null, arguments); }
+const SvgRemoveMediaIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
   width: 56,
   height: 56,
   viewBox: "0 0 56 56",
   fill: "#68737d",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
+}, props), _circle$4 || (_circle$4 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 28,
   cy: 28,
   r: 28,
   fill: "#edf7ff"
-})), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M16.929 16.929L39.071 39.071",
   stroke: "currentColor",
   strokeWidth: 4
@@ -3391,25 +3406,26 @@ const StyledDeleteThumbnailX = styled__default["default"].div `
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 2;
+  color: ${({ theme }) => theme.palette.grey[800]};
 `;
 const DeleteThumbnailX = ({ deleteThumbnail }) => {
     return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail" }, { children: jsxRuntime.jsx(SvgRemoveMediaIcon, { onClick: (e) => deleteThumbnail(e) }) })));
 };
 
-var _circle$2, _path$o;
-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 SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+var _circle$3, _path$q;
+function _extends$v() { return _extends$v = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$v.apply(null, arguments); }
+const SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
   width: 56,
   height: 56,
   viewBox: "0 0 56 56",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+}, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 28,
   cy: 28,
   r: 28,
   fill: "white"
-})), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M47 28L18.5 44.4545L18.5 11.5455L47 28Z",
   fill: "currentColor"
 })));
@@ -3418,18 +3434,19 @@ const ImageCard = styled__default["default"](SpecialCard) `
   padding: 0;
   position: relative;
   overflow: hidden;
-  
+  width: 90px;
+
   &:before {
     content: "";
+    font-size: ${({ theme }) => theme.fontSizes.xs};
     position: absolute;
+    padding: ${({ theme }) => theme.space.xs};
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: ${({ theme }) => theme.palette.grey[800]};
-    opacity: 0;
+    background-color: ${({ theme }) => theme.palette.grey[800]}00; // 0% opacity
     transition: opacity 0.2s;
-    z-index: 1;
   }
 
   &:hover {
@@ -3437,13 +3454,26 @@ const ImageCard = styled__default["default"](SpecialCard) `
       opacity: 1;
     }
     &:before {
-      opacity: 0.3;
+      background-color: ${({ theme }) => theme.palette.grey[800]}4d; // 30% opacity
     }
   }
-
-  &.video{
-    
+  ${(p) => p.error &&
+    `
+    &:before{
+      content: "Error: ${p.error}";
+      color: ${p.theme.palette.white};
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
+  ${(p) => p.isLoading &&
+    `
+    &:before{
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
+  &.video {
     svg {
+      color: ${({ theme }) => theme.palette.grey[800]};
       position: absolute;
       top: 50%;
       left: 50%;
@@ -3458,13 +3488,15 @@ const Preview = styled__default["default"].div `
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 150px;
+  height: 100px;
   width: 100%;
-
-  ${p => p.url && `
+  color: ${({ theme }) => theme.palette.white};
+  
+  ${p => p.url &&
+    `
     background-image: url(${p.url});
     background-color: ${p.theme.palette.grey[100]};
-    background-size: contain;
+    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   `}
@@ -3474,44 +3506,26 @@ const Preview = styled__default["default"].div `
     height: 100%;
   }
 `;
-const Thumbnail = ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia = true, isError = false, }) => {
+const Thumbnail = ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia, error = "", }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
             removeThumbnail();
     };
-    return (jsxRuntime.jsxs(ImageCard, Object.assign({ onClick: clickThumbnail, className: type.includes('video') ? 'video' : 'image' }, { children: [isError && (
-            // todo: add error icon
-            jsxRuntime.jsx("span", { children: "error uploading media" })), isLoadingMedia ? (jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, size: "large" }) })) : (jsxRuntime.jsxs(Preview, Object.assign({ url: src }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), type.includes('video') && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })), jsxRuntime.jsx(SvgVideoPlayIcon, {})] })] })))] })));
+    return (jsxRuntime.jsx(ImageCard, Object.assign({ onClick: clickThumbnail, className: type.includes("video") ? "video" : "image", error: error, isLoading: isLoadingMedia }, { children: isLoadingMedia ? (jsxRuntime.jsx(Preview, Object.assign({ url: src }, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
+                    display: "flex",
+                    position: "absolute",
+                    color: "white",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, size: "large" }) }))) : (jsxRuntime.jsxs(Preview, Object.assign({ url: src }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), type.includes("video") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })), jsxRuntime.jsx(SvgVideoPlayIcon, { opacity: error ? "0.3" : "1" })] }))] }))) })));
 };
 
-const UgGrid = styled__default["default"](reactGrid.Grid) `
-  padding-left: 0;
-  padding-right: 0;
-`;
-/**
- * The Grid component is a framework for building modular layouts.
- * <hr>
- * Used for this:
-    - To structure the layout of a page
- */
-const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
-
-const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
-
-const StyledCol$1 = styled__default["default"](reactGrid.Col) `
-  margin-bottom: ${theme.space.lg};
-
-  @media screen and (max-width: ${theme.breakpoints.sm}) {
-    margin-bottom: ${theme.space.md};
-  }
+const FlexContainer = styled.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.space.xs};
+  flex-wrap: wrap;
 `;
-const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
-
 const ThumbnailContainer = ({ openLightbox }) => {
     const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
     const mediaFiles = React.useMemo(() => {
@@ -3521,17 +3535,18 @@ const ThumbnailContainer = ({ openLightbox }) => {
             previewUrl: file.url,
             id: file.id,
             isLoadingMedia: file.isLoadingMedia,
+            error: file.error,
         }));
     }, [thumbnails]);
     if (!mediaFiles || mediaFiles.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
-                        removeThumbnail(index);
-                        onDeleteThumbnail(file.id);
-                    }, clickThumbnail: () => {
-                        openLightbox(index);
-                    } }, file.id) })))) })) }));
+    return (jsxRuntime.jsx(FlexContainer, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, error: file.error, removeThumbnail: () => {
+                removeThumbnail(index);
+                onDeleteThumbnail(file.id);
+            }, clickThumbnail: () => {
+                openLightbox(index);
+            } }, file.id))) }));
 };
 
 const UgModalBody = styled__default["default"](reactModals.Body) `
@@ -3600,28 +3615,28 @@ Lightbox.Body = ModalBody; // Includes Main and Details
 Lightbox.Footer = Footer$3;
 Lightbox.Close = reactModals.Close;
 
-var _path$n;
-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 SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+var _path$p;
+function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
+const SvgChevronLeftStroke = 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$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
 })));
 
-var _path$m;
-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 SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+var _path$o;
+function _extends$t() { return _extends$t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$t.apply(null, arguments); }
+const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
   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$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
 })));
@@ -3844,15 +3859,15 @@ Slider.Slide = Slide;
 Slider.PrevButton = PrevButton;
 Slider.NextButton = NextButton;
 
-var _path$l, _path2$5;
-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 SvgVolumeMutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+var _path$n, _path2$5;
+function _extends$s() { return _extends$s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$s.apply(null, arguments); }
+const SvgVolumeMutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M11.5 10l4-4m-4 0l4 4"
@@ -3861,15 +3876,15 @@ const SvgVolumeMutedFill = props => /*#__PURE__*/React__namespace.createElement(
   d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 011.71.71V14.3a.986.986 0 01-1 .99z"
 })));
 
-var _path$k, _path2$4;
-function _extends$p() { _extends$p = 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$p.apply(this, arguments); }
-const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+var _path$m, _path2$4;
+function _extends$r() { return _extends$r = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$r.apply(null, arguments); }
+const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 011.71.71V14.3a.986.986 0 01-1 .99z"
 })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3879,6 +3894,10 @@ const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElemen
   d: "M11.77 9.77c.45-.45.73-1.08.73-1.77s-.28-1.31-.73-1.77m2.17 5.6c.97-.99 1.56-2.34 1.56-3.83 0-1.52-.62-2.89-1.61-3.89"
 })));
 
+const ControlButton = styled__default["default"](IconButton) `
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+
 const AudioButton = () => {
     const [hasAudio, setHasAudio] = React.useState(false);
     const { isMuted, setMuted, context } = Video.useVideoContext();
@@ -3903,8 +3922,8 @@ const AudioButton = () => {
             setMuted(!hasVolume(player.ref.current));
             checkAudio(player.ref.current);
         }
-    }, [context.isPlaying, isMuted]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !hasAudio, onClick: () => {
+    }, [context.isPlaying, isMuted, player, setMuted]);
+    return (jsxRuntime.jsx(ControlButton, Object.assign({ disabled: !hasAudio, onClick: () => {
             if (player === null || player === void 0 ? void 0 : player.ref.current) {
                 player.ref.current.volume = player.ref.current.volume > 0 ? 0 : 1;
                 setMuted(!player.ref.current.volume);
@@ -3940,8 +3959,8 @@ const useProgressContext = () => {
 };
 
 var _g$2;
-function _extends$o() { _extends$o = 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$o.apply(this, arguments); }
-const SvgGrip = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
+const SvgGrip = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -4043,6 +4062,9 @@ const StyledGrabber = styled.styled.div `
 const activeBookMark = styled.css `
   height: 250%;
   transform: translateY(-30%);
+  cursor: pointer;
+  z-index: 2;
+  border-radius: 4px;
 
   ${StyledGrabber} {
     display: block;
@@ -4051,17 +4073,22 @@ const activeBookMark = styled.css `
 const Rect = styled.styled.div `
   position: absolute;
   height: 110%;
-  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+  background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
+  color: white;
+  transition: width 0.1s ease;
+
   &:hover {
+    background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
     ${activeBookMark}
-    border-radius: 4px;
   }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
 
-  transition: width 0.1s ease;
+  ${({ isActive }) => isActive && activeBookMark}
+  ${({ isFocused }) => isFocused && activeBookMark}
+`;
+const StyledTooltip$1 = styled.styled(Tooltip) `
+  margin-bottom: ${({ theme }) => theme.space.sm};
 `;
 const Grabber = (props) => {
     const { observation } = props;
@@ -4077,7 +4104,7 @@ const Grabber = (props) => {
 };
 const Bookmark = (props) => {
     var _a, _b;
-    const { start, end, hue, label } = props;
+    const { start, end, hue, tooltipContent } = props;
     const { context } = Video.useVideoContext();
     const videoStart = context.part.start || 0;
     const videoEnd = context.part.end || ((_a = context.player) === null || _a === void 0 ? void 0 : _a.totalTime) || 0;
@@ -4088,21 +4115,21 @@ const Bookmark = (props) => {
     }
     if (start > videoEnd || start < videoStart)
         return null;
-    return (jsxRuntime.jsx(Tooltip, Object.assign({ content: label, type: "light", size: "large" }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, style: {
+    return (jsxRuntime.jsx(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, isFocused: props.isFocused, style: {
                 left: `${((start - videoStart) / duration) * 100}%`,
                 width: `${((end - start) / duration) * 100}%`,
             }, onClick: props.onClick }, { children: [jsxRuntime.jsx(Grabber, { observation: props }), jsxRuntime.jsx(Grabber, { isEnd: true, observation: props })] })) })));
 };
 
-var _path$j, _path2$3, _path3$1;
-function _extends$n() { _extends$n = 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$n.apply(this, arguments); }
-const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+var _path$l, _path2$3, _path3$1;
+function _extends$p() { return _extends$p = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$p.apply(null, arguments); }
+const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M4.34099 3.5C5.25886 2.85974 6.34919 2.5 7.5 2.5C10.5477 2.5 13 4.95228 13 8C13 11.0477 10.5477 13.5 7.5 13.5C5.79771 13.5 4.25432 12.7171 3.18087 11.3753C2.83586 10.944 2.20657 10.8741 1.7753 11.2191C1.34404 11.5641 1.27412 12.1934 1.61913 12.6247C3.06275 14.4292 5.17372 15.5 7.5 15.5C11.6523 15.5 15 12.1523 15 8C15 3.84772 11.6523 0.5 7.5 0.5C5.84359 0.5 4.28318 1.04496 3 2.00147V1C3 0.447715 2.55229 0 2 0C1.44771 0 1 0.447715 1 1V4C1 4.85228 1.64772 5.5 2.5 5.5H5.5C6.05229 5.5 6.5 5.05228 6.5 4.5C6.5 3.94772 6.05229 3.5 5.5 3.5H4.34099Z",
@@ -4115,15 +4142,15 @@ const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement(
   fill: "currentColor"
 })));
 
-var _path$i, _path2$2, _path3;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
-const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+var _path$k, _path2$2, _path3;
+function _extends$o() { return _extends$o = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$o.apply(null, arguments); }
+const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M11.659 3.5C10.7411 2.85974 9.65081 2.5 8.5 2.5C5.45228 2.5 3 4.95228 3 8C3 11.0477 5.45228 13.5 8.5 13.5C10.2023 13.5 11.7457 12.7171 12.8191 11.3753C13.1641 10.944 13.7934 10.8741 14.2247 11.2191C14.656 11.5641 14.7259 12.1934 14.3809 12.6247C12.9372 14.4292 10.8263 15.5 8.5 15.5C4.34772 15.5 1 12.1523 1 8C1 3.84772 4.34772 0.5 8.5 0.5C10.1564 0.5 11.7168 1.04496 13 2.00147V1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V4C15 4.85228 14.3523 5.5 13.5 5.5H10.5C9.94771 5.5 9.5 5.05228 9.5 4.5C9.5 3.94772 9.94771 3.5 10.5 3.5H11.659Z",
@@ -4137,8 +4164,8 @@ const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createEleme
 })));
 
 var _g$1;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
-const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+function _extends$n() { return _extends$n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$n.apply(null, arguments); }
+const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -4162,28 +4189,28 @@ const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg",
   ry: 1
 }))));
 
-var _path$h;
-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 SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+var _path$j;
+function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
+const SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M6 15.79c-.13 0-.26-.03-.38-.08a.977.977 0 01-.62-.92V1.21a1 1 0 01.62-.93C6 .12 6.42.21 6.71.5l6.44 6.44c.58.58.58 1.54 0 2.12L6.71 15.5c-.19.19-.45.29-.71.29z"
 })));
 
-var _path$g, _path2$1;
-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 SvgPreviousFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+var _path$i, _path2$1;
+function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
+const SvgPreviousFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 24 24"
-}, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M2.75 20C2.75 20.5523 3.19772 21 3.75 21C4.30228 21 4.75 20.5523 4.75 20L4.75 4C4.75 3.44772 4.30229 3 3.75 3C3.19772 3 2.75 3.44772 2.75 4V20Z",
   fill: "currentColor"
 })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -4241,18 +4268,18 @@ const ControlsGroupCenter = (props) => {
         const nextTime = videoRef.currentTime + 10;
         videoRef.currentTime = nextTime;
     };
-    return (jsxRuntime.jsxs(StyledDiv$3, Object.assign({}, props, { children: [jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+    return (jsxRuntime.jsxs(StyledDiv$3, Object.assign({}, props, { children: [jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     if (videoRef) {
                         videoRef.currentTime = 0;
                     }
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgPreviousFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgPreviousFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     onRewind();
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgBackSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, size: "large", onClick: togglePlay }, { children: isPlaying ? (jsxRuntime.jsx(SvgPauseFill, { style: { width: "24px", height: "24px" } })) : (jsxRuntime.jsx(SvgPlayFill, { style: { width: "24px", height: "24px" } })) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgBackSecondsFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ size: "large", onClick: togglePlay }, { children: isPlaying ? (jsxRuntime.jsx(SvgPauseFill, { style: { width: "24px", height: "24px" } })) : (jsxRuntime.jsx(SvgPlayFill, { style: { width: "24px", height: "24px" } })) })), jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     onForward();
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, isPill: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ isPill: true, onClick: (e) => {
                     const newSpeed = getNextPlaybackRate(playBackRate);
                     if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.playbackRate) {
                         setPlayBackRate(newSpeed);
@@ -4262,30 +4289,82 @@ const ControlsGroupCenter = (props) => {
                 } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] })));
 };
 
-var _path$f;
-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 SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+var _path$h, _circle$2;
+function _extends$k() { return _extends$k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$k.apply(null, arguments); }
+const SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M4.5.5H1C.72.5.5.72.5 1v3.5m15 0V1c0-.28-.22-.5-.5-.5h-3.5m-11 11V15c0 .28.22.5.5.5h3.5m11-4V15c0 .28-.22.5-.5.5h-3.5m-7-11L1 1m10.5 3.5L15 1M4.5 11.5L1 15m10.5-3.5L15 15"
+  d: "M.5 1v5.3c0 .1.1.3.1.4l8.5 8.5c.2.2.5.2.7 0l5.3-5.3c.2-.2.2-.5 0-.7L6.6.6S6.4.5 6.3.5H1C.7.5.5.7.5 1z"
+})), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 4,
+  cy: 4,
+  r: 1,
+  fill: "currentColor"
 })));
 
-var _path$e;
-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 SvgMinimizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+var _path$g;
+function _extends$j() { return _extends$j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$j.apply(null, arguments); }
+const SvgPlus$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  width: 12,
+  height: 12,
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M6.5 1C6.19318 1 5.94444 1.24873 5.94444 1.55556V5.44444H2.05556C1.74873 5.44444 1.5 5.69318 1.5 6C1.5 6.30683 1.74873 6.55556 2.05556 6.55556H5.94444V10.4444C5.94444 10.7513 6.19318 11 6.5 11C6.80683 11 7.05556 10.7513 7.05556 10.4444V6.55556H10.9444C11.2513 6.55556 11.5 6.30683 11.5 6C11.5 5.69318 11.2513 5.44444 10.9444 5.44444H7.05556V1.55556C7.05556 1.24873 6.80683 1 6.5 1Z",
+  fill: "currentColor"
+})));
+
+// Prevent button from breaking on smaller screens
+const StyledButton$2 = styled.styled(Button) `
+  overflow: visible;
+`;
+const Cutter = ({ onCutHandler, isCutting, i18n, }) => {
+    var _a;
+    const { context } = Video.useVideoContext();
+    const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
+    if (!onCutHandler)
+        return null;
+    return (jsxRuntime.jsx(StyledButton$2, Object.assign({ isPrimary: true, isAccent: !isCutting, size: "small", onClick: (e) => {
+            if (videoRef) {
+                onCutHandler(videoRef.currentTime);
+            }
+            e.stopPropagation();
+        } }, { children: isCutting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), jsxRuntime.jsx(Span, { children: (i18n === null || i18n === void 0 ? void 0 : i18n.onHighlight) || "End observation" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgPlus$1, {}) }), jsxRuntime.jsx(Span, { children: (i18n === null || i18n === void 0 ? void 0 : i18n.beforeHighlight) || "Start observation" })] })) })));
+};
+
+var _path$f;
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
+const SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M4.5.5H1C.72.5.5.72.5 1v3.5m15 0V1c0-.28-.22-.5-.5-.5h-3.5m-11 11V15c0 .28.22.5.5.5h3.5m11-4V15c0 .28-.22.5-.5.5h-3.5m-7-11L1 1m10.5 3.5L15 1M4.5 11.5L1 15m10.5-3.5L15 15"
+})));
+
+var _path$e;
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+const SvgMinimizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -4328,7 +4407,7 @@ const FullScreenButton = ({ container, }) => {
                 setFullScreen(false);
             }
         }
-    }), [ref, isFullScreen]);
+    }), [ref, isFullScreen, setFullScreen]);
     const canGoFullScreen = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (ref) {
             return (requestFullscreen ||
@@ -4353,7 +4432,7 @@ const FullScreenButton = ({ container, }) => {
             }
         };
     }, [ref]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+    return (jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
             handleFullScreen();
             e.stopPropagation();
         }, disabled: !canGoFullScreen() }, { children: document.fullscreenElement || isFullScreen ? (jsxRuntime.jsx(SvgMinimizeStroke, {})) : (jsxRuntime.jsx(SvgMaximizeStroke, {})) })));
@@ -4375,7 +4454,7 @@ const Progress = React.forwardRef((props, ref) => (jsxRuntime.jsx(UgProgress, Ob
 const StyledProgress = styled.styled(Progress) `
   width: 100%;
   border-radius: 0;
-  color: ${({ theme }) => theme.palette.grey[700]};
+  color: ${({ theme }) => theme.palette.grey[400]};
   cursor: pointer;
   > div {
     border-radius: 0;
@@ -4388,7 +4467,7 @@ const ProgressBar = React.forwardRef((props, ref) => {
 
 const StyledDiv$2 = styled__default["default"].div `
   display: flex;
-  color: ${({ theme }) => theme.palette.grey[300]};
+  color: ${({ theme }) => theme.palette.grey[700]};
 `;
 const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [formatDuration(current), "/", formatDuration(duration)] })) }));
 
@@ -4397,7 +4476,7 @@ const Wrapper$1 = styled__default["default"].div `
   bottom: ${({ theme }) => theme.space.sm};
   z-index: 1;
 `;
-const Content$1 = styled__default["default"].div `
+const Content$2 = styled__default["default"].div `
   display: flex;
   background-color: ${({ theme }) => theme.palette.grey[800]};
   border-radius: 2px;
@@ -4405,57 +4484,61 @@ const Content$1 = styled__default["default"].div `
   padding: 2px 4px;
   display: inline-flex;
   color: white;
+  font-size: ${({ theme }) => theme.fontSizes.sm};
   align-items: center;
   justify-content: center;
-  min-height: 16px;
+  min-height: 14px;
 `;
 const PlayerTooltip = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (jsxRuntime.jsx(Wrapper$1, Object.assign({}, props, { children: jsxRuntime.jsx(Content$1, { children: children }) })));
+    return (jsxRuntime.jsx(Wrapper$1, Object.assign({}, props, { children: jsxRuntime.jsx(Content$2, { children: children }) })));
 };
 
-var _path$d, _circle$1;
-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 SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  d: "M.5 1v5.3c0 .1.1.3.1.4l8.5 8.5c.2.2.5.2.7 0l5.3-5.3c.2-.2.2-.5 0-.7L6.6.6S6.4.5 6.3.5H1C.7.5.5.7.5 1z"
-})), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
-  cx: 4,
-  cy: 4,
-  r: 1,
-  fill: "currentColor"
-})));
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}
 
-const Cutter = ({ onCutHandler, isCutting, i18n, }) => {
-    var _a;
-    const { context } = Video.useVideoContext();
-    const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
-    if (!onCutHandler)
-        return null;
-    return (jsxRuntime.jsxs(Button, Object.assign({ isPrimary: true, isAccent: true, size: "small", onClick: (e) => {
-            if (videoRef) {
-                onCutHandler(videoRef.currentTime);
-            }
-            e.stopPropagation();
-        } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), isCutting
-                ? (i18n === null || i18n === void 0 ? void 0 : i18n.onHighlight) || "Click again to stop"
-                : (i18n === null || i18n === void 0 ? void 0 : i18n.beforeHighlight) || "New highlight"] })));
+const Pin = styled.styled.div `
+  width: 2px;
+  bottom: 0;
+  left: ${({ left }) => `${left}%`};
+  position: absolute;
+  height: 250%;
+  z-index: 2;
+  background-color: ${({ theme }) => theme.palette.grey[600]};
+  margin-left: -2px; // To not override the current time marker
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.palette.grey[600]};
+  }
+`;
+const CutStart = ({ left }) => {
+    return jsxRuntime.jsx(Pin, { id: "obs-start-pin", left: left });
 };
 
 const ControlsWrapper = styled__default["default"].div `
-  position: absolute;
+  ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"}
   bottom: 0;
   left: 0;
   right: 0;
   padding: ${({ theme }) => theme.space.xxs} 0;
-  background-color: ${({ theme }) => reactTheming.getColor(theme.palette.grey, 700, undefined, 0.8)};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  height: 80px;
   ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 2;
 `;
@@ -4477,14 +4560,26 @@ const StyledDiv$1 = styled__default["default"].div `
   display: flex;
   align-items: center;
 `;
-const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, }) => {
+const CurrentTimeMarker = styled__default["default"].div `
+  width: 2px;
+  top: 0;
+  left: ${({ left }) => `${left}%`};
+  position: absolute;
+  height: 110%;
+  z-index: 1;
+  background-color: white;
+`;
+const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, showControls = false, }) => {
     var _a, _b, _c;
     const [progress, setProgress] = React.useState(0);
     const [tooltipMargin, setTooltipMargin] = React.useState(0);
     const [tooltipLabel, setTooltipLabel] = React.useState("00:00");
     const [marks, setMarks] = React.useState(bookmarks);
+    const [updatedMark, setUpdatedMark] = React.useState();
     const progressRef = React.useRef(null);
     const { context, setCurrentTime } = Video.useVideoContext();
+    const debouncedMark = useDebounce(updatedMark, 500);
+    const [cutStart, setCutStart] = React.useState(0);
     const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
     React.useEffect(() => {
         setMarks(bookmarks);
@@ -4540,15 +4635,8 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
             ...marks.slice(currentObsIndex + 1),
         ];
         setMarks(newMarks);
-        onBookMarkUpdated === null || onBookMarkUpdated === void 0 ? void 0 : onBookMarkUpdated(updatedMark);
-    }, [
-        activeBookmark,
-        context.part.start,
-        duration,
-        fromEnd,
-        onBookMarkUpdated,
-        marks,
-    ]);
+        setUpdatedMark(updatedMark);
+    }, [activeBookmark, context.part.start, duration, fromEnd, marks]);
     React.useEffect(() => {
         var _a;
         const currentTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime) || 0;
@@ -4562,19 +4650,30 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
             document.removeEventListener("mouseup", reset);
         };
     }, [reset, marks]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), !!duration &&
-                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "start" } }, { children: [jsxRuntime.jsx(AudioButton, {}), jsxRuntime.jsx(TimeLabel, { current: relCurrentTime, duration: duration })] })), jsxRuntime.jsx(ControlsGroupCenter, { style: { width: "60%" } }), jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
+    React.useEffect(() => {
+        if (debouncedMark) {
+            onBookMarkUpdated === null || onBookMarkUpdated === void 0 ? void 0 : onBookMarkUpdated(debouncedMark);
+        }
+    }, [debouncedMark, onBookMarkUpdated]);
+    React.useEffect(() => {
+        if (isCutting) {
+            setCutStart(progress);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isCutting]);
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ showControls: showControls }, (!showControls && { isPlaying: context.isPlaying }), { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), !!duration &&
+                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration }), isCutting && jsxRuntime.jsx(CutStart, { left: cutStart }), jsxRuntime.jsx(CurrentTimeMarker, { left: progress })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "start" } }, { children: [jsxRuntime.jsx(AudioButton, {}), jsxRuntime.jsx(TimeLabel, { current: relCurrentTime, duration: duration })] })), jsxRuntime.jsx(ControlsGroupCenter, { style: { width: "60%" } }), jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
 };
 
-var _path$c;
-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 SvgPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+var _path$d;
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
+const SvgPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
   width: 70,
   height: 70,
   viewBox: "0 0 70 70",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M60 35L17 62L17 8L60 35Z",
   fill: "#003A57"
 })));
@@ -4585,8 +4684,9 @@ const FloatingContainer = styled__default["default"].div `
   top: 0;
   left: 0;
   right: 0;
-  ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 1;
+  ${({ isPlaying }) => isPlaying && "display: none;"}
+  ${({ showControls }) => showControls ? "height: 100%" : "height: calc(100% - 80px)"};
 `;
 const PlayIcon = styled__default["default"](SvgPlayIcon) ``;
 const BigButton = styled__default["default"](IconButton) `
@@ -4595,6 +4695,10 @@ const BigButton = styled__default["default"](IconButton) `
   min-width: ${({ theme }) => theme.space.base * 15}px;
   width: 80px;
   height: 80px;
+
+  box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
+  
+
   ${PlayIcon} {
     width: 60%;
     height: 60%;
@@ -4607,8 +4711,8 @@ const ButtonsContainer = styled__default["default"].div `
   height: 100%;
 `;
 const FloatingControls = (props) => {
-    const { isPlaying, onClick } = props;
-    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isPrimary: true, size: "large" }, { children: jsxRuntime.jsx(PlayIcon, { color: "red" }) }))) }) })));
+    const { isPlaying, showControls, onClick } = props;
+    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, showControls: showControls, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isPrimary: true, size: "large" }, { children: jsxRuntime.jsx(PlayIcon, { color: "red" }) }))) }) })));
 };
 
 const VideoStyle = styled.css `
@@ -4634,9 +4738,13 @@ const VideoStyle = styled.css `
 
 const Container$1 = styled__default["default"].div `
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  ${({ showControls }) => !showControls ? `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  ` : `
+    margin-bottom: 80px;
+  `}
   height: 100%;
   width: 100%;
   video {
@@ -4661,8 +4769,7 @@ const Container$1 = styled__default["default"].div `
       }
     }
   }
-
-  background-color: ${({ theme }) => theme.palette.grey[700]};
+  background: ${({ theme }) => theme.palette.grey[400]};
 `;
 
 const UgSpinner = styled__default["default"](reactLoaders.Spinner) ``;
@@ -4684,6 +4791,79 @@ const StyledDiv = styled__default["default"].div `
 `;
 const VideoSpinner = () => (jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(Spinner, { size: "50", color: "white" }) }));
 
+const usePictureInPicture = (videoRef, pipMode, onPipChange) => {
+    const getObserver = (videoRef, isVideoPlaying) => {
+        return new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting && isVideoPlaying()) {
+                    videoRef.requestPictureInPicture();
+                }
+                if (document.pictureInPictureElement &&
+                    entry.isIntersecting &&
+                    !isVideoPlaying()) {
+                    document.exitPictureInPicture();
+                }
+            });
+        }, { threshold: 0.5 });
+    };
+    const handleManualPipMode = (videoRef, pipMode) => {
+        if (pipMode) {
+            videoRef.requestPictureInPicture();
+        }
+        if (!pipMode && document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        }
+    };
+    React.useEffect(() => {
+        // bail out if pipMode is not defined or videoRef is not defined or pip is not supported
+        if (typeof pipMode === "undefined")
+            return;
+        if (!document.pictureInPictureEnabled) {
+            console.warn("Picture-in-Picture is not supported in this browser");
+            return;
+        }
+        if (!videoRef)
+            return;
+        // if pipMode is auto, we will enter picture in picture mode when the video is not in view
+        if (pipMode === "auto") {
+            const isVideoPlaying = () => videoRef.currentTime > 0 &&
+                !videoRef.paused &&
+                !videoRef.ended &&
+                videoRef.readyState > 2;
+            const observer = getObserver(videoRef, isVideoPlaying);
+            observer.observe(videoRef);
+            return () => {
+                observer.disconnect();
+            };
+        }
+        else if (typeof pipMode === "boolean") {
+            handleManualPipMode(videoRef, pipMode);
+        }
+        else {
+            handleManualPipMode(videoRef, pipMode());
+        }
+    }, [pipMode, videoRef]);
+    React.useEffect(() => {
+        if (!document.pictureInPictureEnabled) {
+            return;
+        }
+        document.addEventListener("enterpictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+        });
+        document.addEventListener("leavepictureinpicture", () => {
+            onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+        });
+        return () => {
+            document.removeEventListener("enterpictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(true);
+            });
+            document.removeEventListener("leavepictureinpicture", () => {
+                onPipChange === null || onPipChange === void 0 ? void 0 : onPipChange(false);
+            });
+        };
+    }, [onPipChange]);
+};
+
 /**
  * The Player is a styled media tag with custom controls
  * <hr>
@@ -4694,11 +4874,14 @@ const Player = React.forwardRef((props, forwardRef) => (jsxRuntime.jsx(Video__de
 const PlayerCore = React.forwardRef((props, forwardRef) => {
     var _a;
     const { context, togglePlay, setIsPlaying } = Video.useVideoContext();
-    const { onCutHandler, bookmarks, isCutting } = props;
+    const { onCutHandler, bookmarks, isCutting, pipMode, onPipChange } = props;
     const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
     const isLoaded = !!videoRef;
     const containerRef = React.useRef(null);
-    React.useImperativeHandle(forwardRef, () => videoRef, [videoRef]);
+    React.useImperativeHandle(forwardRef, () => videoRef, [
+        videoRef,
+    ]);
+    usePictureInPicture(videoRef, pipMode, onPipChange);
     React.useEffect(() => {
         if (videoRef) {
             videoRef.addEventListener("pause", () => {
@@ -4714,7 +4897,9 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
         };
     }, [setIsPlaying, videoRef]);
     return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, onClick: togglePlay })), jsxRuntime.jsx(Video__default["default"].Player, { className: "player-container" }), jsxRuntime.jsx(ProgressContextProvider, { children: jsxRuntime.jsx(Controls, { container: containerRef.current, onCutHandler: onCutHandler, bookmarks: bookmarks, isCutting: isCutting, onBookMarkUpdated: props.handleBookmarkUpdate, i18n: props.i18n }) })] })));
-});
+});
+const PlayerProvider = (props) => (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: props.children })));
+PlayerProvider.Core = PlayerCore;
 
 const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details }) => {
     if (!isOpen) {
@@ -4799,9 +4984,32 @@ const CommentBox = (_a) => {
         return null;
     ed.on("create", ({ editor }) => setEditor(editor));
     ed.on("update", ({ editor }) => setEditor(editor));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: (_b = thumbnails[selectedImageIndex]) === null || _b === void 0 ? void 0 : _b.name, onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: thumbnails, videoRefs: videoRefs }), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: (_b = thumbnails[selectedImageIndex]) === null || _b === void 0 ? void 0 : _b.name, onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: thumbnails, videoRefs: videoRefs }), jsxRuntime.jsx(ChatBoxContainer, { children: jsxRuntime.jsxs(EditorContainer$1, Object.assign({ editable: true, style: { marginLeft: 0, paddingBottom: 12 } }, { children: [hasFloatingMenu && (jsxRuntime.jsx(FloatingMenu$1, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }), jsxRuntime.jsx(ThumbnailContainer, { openLightbox: handleOpenLightbox })] })) }), hasButtonsMenu && jsxRuntime.jsx(CommentBar, { editor: ed, i18n: i18n })] }));
 };
 
+const UgGrid = styled__default["default"](reactGrid.Grid) `
+  padding-left: 0;
+  padding-right: 0;
+`;
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
+
+const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
+
+const StyledCol$1 = styled__default["default"](reactGrid.Col) `
+  margin-bottom: ${theme.space.lg};
+
+  @media screen and (max-width: ${theme.breakpoints.sm}) {
+    margin-bottom: ${theme.space.md};
+  }
+`;
+const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
+
 const CommentCard = styled.styled(Card) `
   padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
@@ -4876,6 +5084,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
                                 handleClickThumbnail(index);
                             } }) }), index))) })) }), jsxRuntime.jsx(MediaLightBox, { isOpen: isOpen, header: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })), onClose: closeLightbox, slideChange: slideChange, selectedImageIndex: selectedImageIndex, thumbnails: media, videoRefs: videoRefs, details: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
                         avatar: author.avatar,
+                        avatarType: author.avatarType,
                         name: author.name,
                     }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };
@@ -4898,15 +5107,15 @@ Chat.Comments = MessagesContainer;
 Chat.Input = CommentBox;
 Chat.Footer = ChatFooter;
 
-var _circle;
-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 SvgCircleFullFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+var _circle$1;
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
+const SvgCircleFullFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+}, props), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 8,
   cy: 8,
   r: 8,
@@ -4982,77 +5191,19 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
 Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
 Drawer.Close = reactModals.DrawerModal.Close;
 
-const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Field: Field$1
-});
-
-const UgItem = styled__default["default"](reactDropdowns.Item) `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-
-  > div {
-    height: 100%;
-  }
-
-  &[disabled] * {
-    opacity: 0.85;
-  }
-
-  &[disabled] svg {
-    opacity: 0.5;
-  }
-
-  &[disabled]:hover {
-    background-color: transparent;
-  }
-`;
-const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
-
-const Container = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-`;
-const MetaContainer$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-`;
-const ThumbContainer = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ theme }) => theme.space.sm};
+const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
   width: 100%;
-  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
-
-  > div {
-    height: 100%;
-  }
-`;
-const Label$1 = styled__default["default"](MD) `
-  font-weight: ${({ theme }) => theme.fontWeights.medium};
-  color: ${({ theme }) => theme.palette.grey[800]};
-`;
-const Description$1 = styled__default["default"](SM) `
-  color: ${({ theme }) => theme.palette.grey[600]};
 `;
-const Image$1 = React.memo(({ src }) => {
-    return jsxRuntime.jsx("img", { src: src });
-});
-const ItemContent = (props) => {
-    const { thumbSrc, description, label } = props;
-    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
-};
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
 
 const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
   width: auto !important;
@@ -5070,26 +5221,12 @@ const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.as
 const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
 const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
 
-const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
-  width: 100%;
-`;
-/**
- * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
- * <hr>
- * Used for this:
-    - To filter down a large list of options
-    - To quickly find a known option
- * Not for this:
-    - To make more than one selection, use Multiselect instead
- */
-const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
-
 const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
 /**
  * A Label is used to specify a title for an input.
  * <hr>
  **/
-const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
+const Label$1 = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
 
 const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
 
@@ -5127,6 +5264,37 @@ const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign(
 Dropdown.HeaderItem = StyledMenuHeaderItem;
 Dropdown.Separator = Separator;
 
+const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Field: Field$1
+});
+
+const UgItem = styled__default["default"](reactDropdowns.Item) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  > div {
+    height: 100%;
+  }
+
+  &[disabled] * {
+    opacity: 0.85;
+  }
+
+  &[disabled] svg {
+    opacity: 0.5;
+  }
+
+  &[disabled]:hover {
+    background-color: transparent;
+  }
+`;
+const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
+
 const StyledAutocomplete = styled__default["default"](Autocomplete) `
   ${(props) => props.hasSelectedItems &&
     `
@@ -5164,13 +5332,54 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
             }, onStateChange: (changes) => {
                 if (changes.isOpen === false)
                     setInputValue("");
-            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label$1, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
                                 ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
                                     ? i18n.counterText(selectedItems.length)
                                     : `Items (${selectedItems.length})`
                                 : (_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 Container = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+`;
+const MetaContainer$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`;
+const ThumbContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.space.sm};
+  width: 100%;
+  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
+
+  > div {
+    height: 100%;
+  }
+`;
+const Label = styled__default["default"](MD) `
+  font-weight: ${({ theme }) => theme.fontWeights.medium};
+  color: ${({ theme }) => theme.palette.grey[800]};
+`;
+const Description$1 = styled__default["default"](SM) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;
+const Image$1 = React.memo(({ src }) => {
+    return jsxRuntime.jsx("img", { src: src });
+});
+const ItemContent = (props) => {
+    const { thumbSrc, description, label } = props;
+    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
+};
+
 const Header$1 = styled__default["default"].div `
   display: flex;
   flex-direction: column;
@@ -5274,7 +5483,7 @@ const Editor = (_a) => {
     }
     // 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 })] })));
+    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$1, { 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) ``;
@@ -5290,7 +5499,7 @@ const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
    **/
 const Checkbox = (props) => jsxRuntime.jsx(UgCheckbox, Object.assign({}, props));
 
-const StyledLabel$1 = styled__default["default"](Label) `
+const StyledLabel$1 = styled__default["default"](Label$1) `
   margin: ${({ theme }) => theme.space.base}px auto;
 `;
 const CheckboxCard = (props) => {
@@ -5327,8 +5536,8 @@ const Hint = styled__default["default"](reactForms.Hint) ``;
 const Input = React.forwardRef((props, ref) => jsxRuntime.jsx(UgInput, Object.assign({ ref: ref }, props)));
 
 var _g;
-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 SvgNotesStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
+const SvgNotesStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -5360,7 +5569,7 @@ const StyledInput = styled__default["default"](Input) `
     transition: border-color 0.2s ease-in-out 0.1s;
   }
 `;
-const StyledLabel = styled__default["default"](Label) `
+const StyledLabel = styled__default["default"](Label$1) `
   padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xxs} 0`};
   transition: opacity 0.2s ease-in-out;
 `;
@@ -5446,15 +5655,15 @@ const UgRadio = styled__default["default"](reactForms.Radio) ``;
    **/
 const Radio = (props) => jsxRuntime.jsx(UgRadio, Object.assign({}, props));
 
-var _path$b;
-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 SvgCheckLg = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+var _path$c;
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
+const SvgCheckLg = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "#68737D",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M14.6464 2.64645C14.8417 2.45118 15.1583 2.45118 15.3536 2.64645C15.5488 2.84171 15.5488 3.15829 15.3536 3.35355L5.35355 13.3536C5.15829 13.5488 4.84171 13.5488 4.64645 13.3536L0.646447 9.35355C0.451184 9.15829 0.451184 8.84171 0.646447 8.64645C0.841709 8.45118 1.15829 8.45118 1.35355 8.64645L5 12.2929L14.6464 2.64645Z"
@@ -5535,9 +5744,10 @@ const useHighlightContext = () => {
 };
 
 const StyledSearchWord = styled__default["default"].span `
-background-color: ${({ theme }) => theme.palette.product.talk};
-color: ${({ theme }) => theme.palette.grey[700]};`;
-const Searchable = ({ start, text, }) => {
+  background-color: ${({ theme }) => theme.palette.product.talk};
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+const Searchable = ({ text, }) => {
     const { searchTerm } = useHighlightContext();
     if (searchTerm) {
         const parts = text.split(new RegExp(`(${searchTerm})`, "gi"));
@@ -5546,66 +5756,143 @@ const Searchable = ({ start, text, }) => {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
 };
 
-const StyledWord = styled__default["default"](reactTypography.Span) `
+const CreateObservationButton = styled.styled(Button) `
+  user-select: none;
+  position: absolute;
+  left: ${({ position: { x } }) => x}px;
+  top: ${({ position: { y } }) => y}px;
+  transform: translate(-50%, 0);
+  z-index: ${({ theme }) => theme.levels.front};
+`;
+
+const getFocusedObs = (observations) => {
+    return observations.find((obs) => obs.isFocused);
+};
+const StyledWord = styled__default["default"].div `
+  display: inline-block;
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
   padding: ${({ theme }) => theme.space.xxs} 0;
+  position: relative;
+  color: ${({ theme }) => theme.palette.grey[700]};
+  white-space: pre;
 
-  ${({ observation, theme }) => {
-    var _a, _b;
-    return observation &&
-        ` user-select: none;
-      padding: 0;
-      background-color: ${(_a = observation.backgroundColor) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
-      color: ${(_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
+  ${({ observations, theme }) => {
+    var _a;
+    return observations &&
+        observations.length > 0 &&
+        `
+      color: ${(_a = observations[observations.length - 1].color) !== null && _a !== void 0 ? _a : theme.palette.grey[600]};
       box-sizing: border-box;
+      font-weight: ${getFocusedObs(observations)
+            ? theme.fontWeights.extrabold
+            : theme.fontWeights.semibold};
+      font-style: ${getFocusedObs(observations) ? "italic" : "normal"};
+      z-index: 1;
       &:focus {
         outline: none;
       }
-
-      + span:not([observation]) {
-        margin-left: 2px;
-      }
     `;
 }}
 `;
 const ActiveWord = styled__default["default"].span `
-  background-color: ${({ theme }) => getColor(theme.palette.fuschia, 700, undefined, 0.5)};
-  padding: 0 2px;
+  position: relative;
+  z-index: 2;
+  background-color: ${({ theme }) => getColor(theme.palette.fuschia, 400, undefined, 0.4)};
 `;
 const WordsContainer = styled__default["default"].div `
   box-sizing: border-box;
   ${StyledWord}, span {
     &::selection {
-      background-color: ${({ theme }) => getColor(theme.palette.kale, 700, undefined, 0.5)};
+      background-color: ${({ theme }) => getColor(theme.palette.grey, 400, undefined, 0.5)};
     }
   }
 `;
+const Layer = styled__default["default"].div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-color: ${({ color }) => getColor(color, undefined, undefined, 0.2)};
+`;
+const textFromSelection = (selection) => {
+    if (!selection || !selection.toString().length)
+        return "";
+    if (selection.anchorNode === null || selection.focusNode === null)
+        return "";
+    var range = selection.getRangeAt(0);
+    var tempDiv = document.createElement("div");
+    tempDiv.appendChild(range.cloneContents());
+    var items = tempDiv.querySelectorAll("div");
+    items.forEach(function (item) {
+        if (item.getAttribute("data-unselectable")) {
+            item.remove();
+        }
+    });
+    var filteredText = tempDiv.textContent || tempDiv.innerText;
+    return filteredText.length ? filteredText.trim() : selection.toString();
+};
 /**
  *  Use Highlight to use highlight interation on any text element
  */
 const Highlight = (props) => {
+    var _a;
+    const { onSelectionButtonClick, search, i18n, children } = props;
     const ref = React.useRef(null);
+    const [isSelecting, setIsSelecting] = React.useState(false);
+    const [position, setPosition] = React.useState();
+    const [selection, setSelection] = React.useState();
+    const activeSelection = document.getSelection();
+    const extractText = React.useMemo(() => textFromSelection(activeSelection), [activeSelection]);
     const handleSelectionChange = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const activeSelection = document.getSelection();
-        const text = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.toString();
-        if (!activeSelection || !text) {
-            return;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (activeSelection && activeSelection.toString().length > 0) {
+            // Extract the text from the selection cleaning unselectable items
+            const text = extractText;
+            if (!text)
+                return;
+            const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
+            const focusNode = (_b = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.focusNode) === null || _b === void 0 ? void 0 : _b.parentElement;
+            if (anchorNode &&
+                focusNode &&
+                ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.contains(anchorNode)) && // Selection starts inside the ref
+                ((_d = ref.current) === null || _d === void 0 ? void 0 : _d.contains(focusNode)) // Selection ends inside the ref
+            ) {
+                if (onSelectionButtonClick) {
+                    setIsSelecting(true);
+                    const range = activeSelection.getRangeAt(0);
+                    const rects = range.getClientRects();
+                    const lastRect = rects[rects.length - 1];
+                    const containerRect = ref && ref.current ? ref.current.getBoundingClientRect() : null;
+                    if (!lastRect || !containerRect)
+                        return;
+                    const relativeY = lastRect.bottom - containerRect.top + ref.current.scrollTop;
+                    const relativeX = lastRect.right - containerRect.left + ref.current.scrollLeft;
+                    if (relativeY > 0 || relativeX > 0)
+                        // Fix to avoid the button to be placed sometimes at the top left corner of the screen (X: 0, Y: 0)
+                        setPosition({
+                            x: relativeX,
+                            y: relativeY + 15,
+                        });
+                }
+                else {
+                    setIsSelecting(false);
+                }
+                const selectionPart = {
+                    from: Math.min(Number.parseFloat((_e = anchorNode.getAttribute("data-start")) !== null && _e !== void 0 ? _e : "0"), Number.parseFloat((_f = focusNode.getAttribute("data-start")) !== null && _f !== void 0 ? _f : "0")),
+                    to: Math.max(Number.parseFloat((_g = anchorNode.getAttribute("data-end")) !== null && _g !== void 0 ? _g : "0"), Number.parseFloat((_h = focusNode.getAttribute("data-end")) !== null && _h !== void 0 ? _h : "0")),
+                };
+                setSelection(Object.assign(Object.assign({}, selectionPart), { text }));
+            }
+            else {
+                setIsSelecting(false);
+            }
         }
-        const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
-        const focusNode = (_b = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.focusNode) === null || _b === void 0 ? void 0 : _b.parentElement;
-        if (anchorNode &&
-            focusNode &&
-            ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.contains(anchorNode)) && // Selection starts inside the ref
-            ((_d = ref.current) === null || _d === void 0 ? void 0 : _d.contains(focusNode)) // Selection ends inside the ref
-        ) {
-            const selectionPart = {
-                from: Math.min(Number.parseFloat((_e = anchorNode.getAttribute("data-start")) !== null && _e !== void 0 ? _e : "0"), Number.parseFloat((_f = focusNode.getAttribute("data-start")) !== null && _f !== void 0 ? _f : "0")),
-                to: Math.max(Number.parseFloat((_g = anchorNode.getAttribute("data-end")) !== null && _g !== void 0 ? _g : "0"), Number.parseFloat((_h = focusNode.getAttribute("data-end")) !== null && _h !== void 0 ? _h : "0")),
-            };
-            (_j = props === null || props === void 0 ? void 0 : props.handleSelection) === null || _j === void 0 ? void 0 : _j.call(props, Object.assign(Object.assign({}, selectionPart), { text }));
+        else {
+            setIsSelecting(false);
         }
-    }, [props]);
+    }, [activeSelection, extractText, onSelectionButtonClick]);
     React.useEffect(() => {
         if (ref.current === null)
             return;
@@ -5614,18 +5901,31 @@ const Highlight = (props) => {
             document.removeEventListener("selectionchange", handleSelectionChange);
         };
     }, [ref, props, handleSelectionChange]);
-    return (jsxRuntime.jsx(HighlightContextProvider, Object.assign({ term: props.search }, { children: jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })) })));
+    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: children })), onSelectionButtonClick && isSelecting && selection && (jsxRuntime.jsxs(CreateObservationButton, Object.assign({ isAccent: true, isPrimary: true, position: position !== null && position !== void 0 ? position : {
+                    x: 0,
+                    y: 0,
+                }, onClick: () => onSelectionButtonClick(selection) }, { children: [jsxRuntime.jsx(CreateObservationButton.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (_a = i18n === null || i18n === void 0 ? void 0 : i18n.selectionButtonLabel) !== null && _a !== void 0 ? _a : "Create observation"] })))] })));
 };
-const Word = (props) => {
-    var _a;
+const Word$1 = (props) => {
     const isActive = props.currentTime &&
         props.currentTime >= props.start &&
         props.currentTime < props.end;
-    // Is there an observation that contains this word?
-    const observation = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.find((obs) => props.start >= obs.start && props.end <= obs.end);
-    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), " "] })));
+    // Are there any observations containing this word?
+    const foundObservations = React.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.filter((obs) => props.start >= obs.start && props.end <= obs.end)) !== null && _b !== void 0 ? _b : [];
+    }, [props.observations, props.start, props.end]);
+    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 &&
+                foundObservations.map((obs) => {
+                    var _a;
+                    return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
+                }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
+    if (props.tooltipContent !== undefined && foundObservations.length > 0) {
+        return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(foundObservations), isTransparent: true }, { children: ObsWord })));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: ObsWord });
 };
-Highlight.Word = Word;
+Highlight.Word = Word$1;
 
 /**
  * The Dots loader communicates ongoing activity after a user takes an action.
@@ -5699,15 +5999,15 @@ const Logo = (props) => {
         }[props.type] })));
 };
 
-var _path$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 SvgPlus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+var _path$b;
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
+const SvgPlus = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M7.5 2C7.22386 2 7 2.22386 7 2.5V8H1.5C1.22386 8 1 8.22386 1 8.5C1 8.77614 1.22386 9 1.5 9H7V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V9H13.5C13.7761 9 14 8.77614 14 8.5C14 8.22386 13.7761 8 13.5 8H8V2.5C8 2.22386 7.77614 2 7.5 2Z",
@@ -5748,7 +6048,7 @@ const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuH
         setMatchingOptions(matchedOptions);
     }, [inputValue, options]);
     return (jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: options.filter((option) => option.selected), onSelect: (items) => onChange &&
-            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", renderShowMore: i18n === null || i18n === void 0 ? void 0 : i18n.showMore, isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
+            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(Label$1, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", renderShowMore: i18n === null || i18n === void 0 ? void 0 : i18n.showMore, isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
                                         onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: o.selected && o.id !== value.id })))) })] }))) })] }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
                                 const items = options
                                     .filter((o) => o.selected)
@@ -5809,18 +6109,18 @@ ModalFullScreen.Footer = StyledFooter$1;
 ModalFullScreen.Close = StyledModalClose;
 ModalFullScreen.FooterItem = FooterItem;
 
-const UgBody = styled__default["default"](reactChrome.Body) `
-  background-color: ${({ theme }) => theme.palette.white};
-`;
-/**
- * A Body defines the main content of an HTML document which displays on the browser
- */
-const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
-
-/**
- * A Content defines the main content of an HTML document which displays on the browser
- */
-const Content = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
+var _path$a;
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
+const SvgChevronDownStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
+})));
 
 const UgHeaderItem = styled__default["default"](reactChrome.HeaderItem) `
   ${(props) => props.hasLogo && `border-right: none`};
@@ -5839,7 +6139,7 @@ const HeaderItemText = (props) => jsxRuntime.jsx(UgHeaderItemText, Object.assign
 const HeaderItemIcon = (props) => (jsxRuntime.jsx(reactChrome.HeaderItemIcon, Object.assign({}, props)));
 
 var _path$9;
-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); }
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 const SvgMenuStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
@@ -5928,19 +6228,6 @@ Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
 Header.HeaderItemIcon = HeaderItemIcon;
 
-var _path$8;
-function _extends$9() { _extends$9 = 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$9.apply(this, arguments); }
-const SvgChevronDownStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
-})));
-
 const HeaderSkeleton = () => {
     return (jsxRuntime.jsxs(Header, Object.assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, Object.assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, Object.assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia(`only screen and (min-width: 576px)`).matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, Object.assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
 };
@@ -5959,6 +6246,27 @@ const AppHeader = (_a) => {
     return isLoading ? (jsxRuntime.jsx(HeaderSkeleton, {})) : (jsxRuntime.jsxs(Header, Object.assign({}, args, { style: Object.assign(Object.assign({}, style), { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) || theme.levels.front }) }, { children: [jsxRuntime.jsx(BrandItem, Object.assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, Object.assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, Object.assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, Object.assign({}, avatar)), jsxRuntime.jsx(ChevronButton, Object.assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
 };
 
+const UgBody = styled__default["default"](reactChrome.Body) `
+  background-color: ${({ theme }) => theme.palette.white};
+`;
+/**
+ * A Body defines the main content of an HTML document which displays on the browser
+ */
+const Body$1 = (props) => jsxRuntime.jsx(UgBody, Object.assign({}, props));
+
+/**
+ * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
+ * <br>
+ * Used for this:
+    - To give a consistent dashboard and navigation experience
+ */
+const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
+
+/**
+ * A Content defines the main content of an HTML document which displays on the browser
+ */
+const Content$1 = (props) => jsxRuntime.jsx(reactChrome.Content, Object.assign({}, props));
+
 const UgMain = styled__default["default"](reactChrome.Main) `
   @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
     margin: ${({ theme }) => theme.space.xxl}
@@ -6082,7 +6390,7 @@ NavItemProject.SubTitle = UgProjectSubtitle;
 
 const NavAccordionItem = styled__default["default"](Accordion) `
   ${sidebarNavItemExpanded}
-  ${props => !props.isExpanded && sidebarNavItemHidden}
+  ${(props) => !props.isExpanded && sidebarNavItemHidden}
   order: 1;
   margin: ${({ theme }) => theme.space.xs} 0;
   padding-left: 8.5px;
@@ -6090,18 +6398,24 @@ const NavAccordionItem = styled__default["default"](Accordion) `
 const AccordionItemHeader = styled__default["default"](Accordion.Header) `
   > svg {
     flex-shrink: 0;
-    
+
     &:first-of-type {
       margin: 0 8.5px;
     }
   }
 `;
-const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
-  max-height: 180px;
-  overflow-y: auto;
+const CustomPanel = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(Accordion.Panel, Object.assign({}, props, { children: jsxRuntime.jsx("div", Object.assign({ className: "panelContainer" }, { children: children })) })));
+};
+const AccordionItemPanel = styled__default["default"](CustomPanel) `
+  .panelContainer {
+    height: 100%;
+    overflow-y: auto;
+  }
 `;
 const AccordionItemLabel = styled__default["default"](Accordion.Label) `
-  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  ${(props) => reactTheming.retrieveComponentStyles("text.primary", props)}
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   padding: 0;
   margin: 0 8.5px;
@@ -6110,14 +6424,6 @@ NavAccordionItem.Panel = AccordionItemPanel;
 NavAccordionItem.Header = AccordionItemHeader;
 NavAccordionItem.Label = AccordionItemLabel;
 
-/**
- * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
- * <br>
- * Used for this:
-    - To give a consistent dashboard and navigation experience
- */
-const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
-
 const UgPagination = styled__default["default"](reactPagination.Pagination) ``;
 /**
  * Pagination separates content into pages and allows users to navigate between those pages.
@@ -6243,15 +6549,15 @@ PageHeader.Description = MainDescription;
 PageHeader.Meta = MainMeta;
 PageHeader.Footer = StyledFooter;
 
-var _path$7, _path2;
-function _extends$8() { _extends$8 = 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$8.apply(this, arguments); }
-const SvgExit = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+var _path$8, _path2;
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
+const SvgExit = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M3 15.93c-.23 0-.45-.08-.64-.23l-2-1.67a.987.987 0 01-.36-.76V2.73c0-.3.13-.58.36-.77l2-1.67c.3-.24.71-.29 1.06-.13a1 1 0 01.58.91v13.87a1 1 0 01-.58.91c-.13.05-.28.08-.42.08zM12 11V5c0-.45.54-.67.85-.35L15.5 7.3c.39.39.39 1.02 0 1.41l-2.65 2.65A.5.5 0 0112 11z"
 })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -6261,24 +6567,24 @@ const SvgExit = props => /*#__PURE__*/React__namespace.createElement("svg", _ext
   d: "M3.5 2.5H9c.28 0 .5.22.5.5v2.5m-6 8H9c.28 0 .5-.22.5-.5v-2.5M15 8H7"
 })));
 
-var _path$6;
-function _extends$7() { _extends$7 = 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$7.apply(this, arguments); }
-const SvgThumbsUp = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+var _path$7;
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
+const SvgThumbsUp = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M13.5 15C14.2828 15 14.8192 11.8284 15 7.5C15 7.22386 14.7761 7 14.5 7H9.5C9.22386 7 9 6.77614 9 6.5V2C9 1.44772 8.55229 1 8 1C7.44772 1 7 1.44772 7 2C7 4.97341 6.19918 6.46065 5.02719 6.8454C5.01015 6.85409 4.99957 6.87174 5 6.9L4.99891 15C4.99927 15 13.5 15 13.5 15ZM10 6H14.5C15.3284 6 16 6.67157 15.9996 7.52082C15.7692 13.0486 15.2701 16 13.5 16L5.03301 15.9989C4.75408 16.0174 4.48075 15.9146 4.28308 15.7169C4.08542 15.5193 3.98264 15.2459 4 15L4.00008 6.90914C3.99274 6.50762 4.21507 6.13707 4.64189 5.92566C5.41645 5.66747 6 4.58373 6 2C6 0.89543 6.89543 0 8 0C9.10457 0 10 0.89543 10 2V6ZM1 7V15H2V7H1ZM1 6H2C2.55228 6 3 6.44772 3 7V15C3 15.5523 2.55228 16 2 16H1C0.447715 16 0 15.5523 0 15V7C0 6.44772 0.447715 6 1 6Z",
   fill: "#68737D"
 })));
 
-var _rect, _path$5;
-function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
-const SvgLockLockedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+var _rect, _path$6;
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
+const SvgLockLockedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -6292,7 +6598,7 @@ const SvgLockLockedFill = props => /*#__PURE__*/React__namespace.createElement("
   fill: "currentColor",
   rx: 1,
   ry: 1
-})), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   d: "M4.5 7.5V4a3.5 3.5 0 017 0v3.5"
@@ -6403,44 +6709,44 @@ const MenuItem = (_a) => {
     return isActive && content ? (jsxRuntime.jsx(StyledBody$4, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, Object.assign({}, props, { onClick: () => props.setActive(props.value) }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
 };
 
-var _path$4;
-function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
-const SvgQuestionMark = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+var _path$5;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+const SvgQuestionMark = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M7.99997 11.5C8.55226 11.5 8.99997 11.0523 8.99997 10.5V9.4C8.99997 8.83787 9.33361 8.32072 9.92997 7.948C11.3791 7.15957 12.2479 5.53522 11.9883 3.84794C11.7161 2.21413 10.3858 0.883851 8.76437 0.613605C6.74482 0.234732 4.81137 1.36258 4.24419 3.20591C4.08177 3.73378 4.37802 4.29336 4.90589 4.45578C5.43375 4.6182 5.99333 4.32195 6.15575 3.79409C6.41982 2.93586 7.36323 2.38554 8.41568 2.58287C9.2141 2.71615 9.88382 3.38587 10.0136 4.1644C10.139 4.98036 9.70294 5.79565 8.92112 6.2221C7.72579 6.96712 6.99997 8.09213 6.99997 9.4V10.5C6.99997 11.0523 7.44769 11.5 7.99997 11.5ZM7.99997 15.5C8.8284 15.5 9.49997 14.8284 9.49997 14C9.49997 13.1716 8.8284 12.5 7.99997 12.5C7.17155 12.5 6.49997 13.1716 6.49997 14C6.49997 14.8284 7.17155 15.5 7.99997 15.5Z"
 })));
 
-var _path$3;
-function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
-const SvgCopy = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+var _path$4;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+const SvgCopy = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
   width: 12,
   height: 16,
   viewBox: "0 0 12 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M2.625 10C2.83211 10 3 10.2239 3 10.5C3 10.7761 2.83211 11 2.625 11H0.75C0.335786 11 0 10.5523 0 10V1C0 0.447715 0.335786 0 0.75 0H7.5C7.91421 0 8.25 0.447715 8.25 1V3.5C8.25 3.77614 8.08211 4 7.875 4C7.66789 4 7.5 3.77614 7.5 3.5V1H0.75V10H2.625ZM4.5 6V15H11.25V6H4.5ZM4.5 5H11.25C11.6642 5 12 5.44772 12 6V15C12 15.5523 11.6642 16 11.25 16H4.5C4.08579 16 3.75 15.5523 3.75 15V6C3.75 5.44772 4.08579 5 4.5 5Z",
   fill: "#003A57"
 })));
 
-var _path$2;
-function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
-const SvgInfoFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+var _path$3;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+const SvgInfoFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M7.5 16C3.36 16 0 12.64 0 8.5C0 4.36 3.36 1 7.5 1C11.64 1 15 4.36 15 8.5C15 12.64 11.64 16 7.5 16ZM7 12.5C7 12.78 7.22 13 7.5 13C7.78 13 8 12.78 8 12.5V8C8 7.72 7.78 7.5 7.5 7.5C7.22 7.5 7 7.72 7 8V12.5ZM7.5 4C6.95 4 6.5 4.45 6.5 5C6.5 5.55 6.95 6 7.5 6C8.05 6 8.5 5.55 8.5 5C8.5 4.45 8.05 4 7.5 4Z"
@@ -6465,7 +6771,7 @@ const UgParagraph = styled__default["default"](reactTypography.Paragraph) `
 /**
  *  Use Paragraph to render blocks of text with Garden styling.
  */
-const Paragraph = (props) => jsxRuntime.jsx(UgParagraph, Object.assign({}, props));
+const Paragraph$1 = (props) => jsxRuntime.jsx(UgParagraph, Object.assign({}, props));
 
 const getInitials = (name) => {
     const names = name.split(" ");
@@ -6493,7 +6799,7 @@ const StyledBody$3 = styled__default["default"].div `
   margin: ${({ theme }) => theme.space.base * 6}px
     ${({ theme }) => theme.space.base * 4}px;
 `;
-const StyledParagraph = styled__default["default"](Paragraph) `
+const StyledParagraph = styled__default["default"](Paragraph$1) `
   margin-top: ${({ theme }) => theme.space.base * 4}px;
 `;
 const Footer = styled__default["default"].div `
@@ -6521,16 +6827,16 @@ const HelpItem = (props) => {
     if (email.length > 24) {
         csmEmailCut = `${email.substring(0, 21)}...`;
     }
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$3, { children: [jsxRuntime.jsx(Paragraph, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, onClick: () => {
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$3, { children: [jsxRuntime.jsx(Paragraph$1, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, Object.assign({ href: `mailto:${props.csm.email}`, style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton, Object.assign({ isBasic: true, onClick: () => {
                                             var _a;
                                             copyToClipBoard();
                                             (_a = props.onCopyEmail) === null || _a === void 0 ? void 0 : _a.call(props);
-                                        }, size: "small" }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
+                                        }, size: "small" }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), props.chatSupport && (jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, Object.assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { color: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] }))] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { color: theme.palette.blue[600] }) }, { children: props.title })) }));
 };
 
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
-const SvgEmpty = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+const SvgEmpty = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
@@ -6538,15 +6844,15 @@ const SvgEmpty = props => /*#__PURE__*/React__namespace.createElement("svg", _ex
   xmlns: "http://www.w3.org/2000/svg"
 }, props));
 
-var _path$1;
-function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
-const SvgTranslationExists = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+const SvgTranslationExists = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "#68737D",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M6 8.31C6.0087 8.47711 5.93254 8.63735 5.79747 8.73613C5.6624 8.83491 5.48662 8.85893 5.33 8.8C5 8.68 4.71 8.5 4.45 8.31C3.9 8.73 3.26 9 2.5 9C2.22 9 2 8.78 2 8.5C2 8.22 2.22 8 2.5 8C2.94 8 3.34 7.86 3.69 7.63C2.9 6.73 2.55 5.72 2.53 5.66C2.44 5.4 2.58 5.11 2.84 5.03C3.1 4.94 3.39 5.08 3.47 5.34C3.47 5.35 3.78 6.21 4.43 6.95C5.19 6.04 5.64 4.75 5.86 4H2.5C2.22 4 2 3.78 2 3.5C2 3.22 2.22 3 2.5 3H4V2.5C4 2.22 4.22 2 4.5 2C4.78 2 5 2.22 5 2.5V3H6.5C6.65 3 6.79 3.07 6.89 3.18C6.98 3.3 7.02 3.45 6.99 3.6C6.98 3.65 6.91 3.98 6.77 4.43C7.11 4.17 7.53 4 8 4H9V1C9 0.45 8.55 0 8 0H1C0.45 0 0 0.45 0 1V10C0 10.55 0.45 11 1 11H6V8.31ZM5.67 7.86C5.86 7.93 5.99 8.1 6 8.29V6.35C5.77 6.79 5.5 7.22 5.18 7.61C5.33 7.71 5.49 7.79 5.67 7.86ZM15 5H8C7.45 5 7 5.45 7 6V15C7 15.55 7.45 16 8 16H15C15.55 16 16 15.55 16 15V6C16 5.45 15.55 5 15 5ZM13.7 12.96C13.4459 13.0656 13.1538 12.9505 13.04 12.7L12.73 12H10.27L9.96 12.7C9.85 12.95 9.55 13.07 9.3 12.95C9.05 12.83 8.93 12.54 9.05 12.29L11.05 7.79C11.21 7.43 11.8 7.43 11.96 7.79L13.96 12.29C14.07 12.55 13.96 12.84 13.7 12.96ZM10.71 11H12.29L11.5 9.23L10.71 11Z"
@@ -6558,14 +6864,14 @@ const StyledBody$2 = styled__default["default"].div `
 `;
 const StyledButtonContainer = styled__default["default"].div `
   ${flexStart}
-  & button { 
+  & button {
     justify-content: flex-start;
   }
 `;
 const LanguageItem = (props) => {
     var _a;
     const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$2, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map((key) => (jsxRuntime.jsxs(Button, Object.assign({ isBasic: true, isStretched: true, value: key, onClick: () => props.onSelectLanguage(key) }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, Object.assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] })))) }) })] }));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
+    return props.disabled ? null : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
 };
 
 const ProfileContainer = styled__default["default"].div `
@@ -6589,15 +6895,15 @@ const UserContainer = (props) => {
     return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, Object.assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
 };
 
-var _path;
-function _extends() { _extends = 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.apply(this, arguments); }
-const SvgGearFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+const SvgGearFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M14 8C14 7.58667 13.96 7.17333 13.88 6.77333L15.2933 5.73333C15.48 5.6 15.5466 5.36 15.4666 5.14667C15.16 4.34667 14.7333 3.61333 14.2 2.96C14.057 2.78808 13.8165 2.73342 13.6133 2.82667L12 3.53333C11.3866 2.98667 10.6666 2.56 9.87996 2.30667L9.67996 0.546667C9.66789 0.32368 9.50079 0.139869 9.27996 0.106667C8.85329 0.04 8.43996 0 7.99996 0C7.57329 0 7.14662 0.04 6.73329 0.0933333C6.51996 0.133333 6.35996 0.32 6.33329 0.546667L6.13329 2.29333C5.33329 2.56 4.61329 2.98667 4.01329 3.53333L2.39996 2.81333C2.1969 2.71861 1.95546 2.77348 1.81329 2.94667C1.26662 3.6 0.839956 4.34667 0.533289 5.13333C0.453289 5.34667 0.533289 5.58667 0.706623 5.72L2.13329 6.76C2.03996 7.16 1.99996 7.57333 1.99996 8C1.99996 8.41333 2.03996 8.82667 2.11996 9.22667L0.706623 10.2667C0.519956 10.4 0.453289 10.64 0.533289 10.8533C0.839956 11.6533 1.26662 12.3867 1.79996 13.04C1.94662 13.2133 2.18662 13.2667 2.38662 13.1733L3.99996 12.4667C4.61329 13.0133 5.33329 13.44 6.11996 13.6933L6.30662 15.4533C6.33329 15.68 6.49329 15.8533 6.71996 15.8933C7.14662 15.96 7.55996 16 7.99996 16C8.42662 16 8.85329 15.96 9.26662 15.9067C9.47996 15.8667 9.65329 15.6933 9.67996 15.4667L9.87996 13.7067C10.68 13.44 11.4 13.0267 12 12.48L13.6133 13.1867C13.8133 13.28 14.0666 13.2267 14.2 13.0533C14.7333 12.4 15.16 11.6667 15.4666 10.8667C15.5421 10.6542 15.4721 10.4173 15.2933 10.28L13.8666 9.24C13.96 8.84 14 8.42667 14 8ZM7.99996 10C6.89329 10 5.99996 9.10667 5.99996 8C5.99996 6.89333 6.89329 6 7.99996 6C9.10662 6 9.99996 6.89333 9.99996 8C9.99996 9.10667 9.10662 10 7.99996 10Z",
@@ -6622,12 +6928,12 @@ const SettingsOutroText = styled__default["default"](reactNotifications.Paragrap
 `;
 const SettingsItem = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const [value, setValue] = React.useState(props.settingValue || 0);
+    const [value, setValue] = React.useState(props.settingValue || "0");
     const onToggleSettings = (value) => {
         setValue(value);
         props.onSetSettings && props.onSetSettings(value);
     };
-    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: (_a = props.i18n) === null || _a === void 0 ? void 0 : _a.settingsTitle })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$1, { children: [props.i18n && props.i18n.settingsIntroText && (jsxRuntime.jsx(SettingsIntroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsIntroText }) })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(TriggerTitle, Object.assign({ isBold: true }, { children: (_c = (_b = props.i18n) === null || _b === void 0 ? void 0 : _b.settingsToggle) === null || _c === void 0 ? void 0 : _c.title })), jsxRuntime.jsx(Toggle, Object.assign({ checked: value === 1, onChange: () => onToggleSettings(value === 1 ? 0 : 1) }, { children: jsxRuntime.jsx(Label, { children: value === 1
+    const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, Object.assign({ onClick: () => props.setActive(""), isBasic: true }, { children: (_a = props.i18n) === null || _a === void 0 ? void 0 : _a.settingsTitle })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$1, { children: [props.i18n && props.i18n.settingsIntroText && (jsxRuntime.jsx(SettingsIntroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsIntroText }) })), jsxRuntime.jsxs(Field, { children: [jsxRuntime.jsx(TriggerTitle, Object.assign({ isBold: true }, { children: (_c = (_b = props.i18n) === null || _b === void 0 ? void 0 : _b.settingsToggle) === null || _c === void 0 ? void 0 : _c.title })), jsxRuntime.jsx(Toggle, Object.assign({ checked: value === "1", onChange: () => onToggleSettings(value === "1" ? "0" : "1") }, { children: jsxRuntime.jsx(Label$1, { children: value === "1"
                                         ? (_e = (_d = props.i18n) === null || _d === void 0 ? void 0 : _d.settingsToggle) === null || _e === void 0 ? void 0 : _e.on
                                         : (_g = (_f = props.i18n) === null || _f === void 0 ? void 0 : _f.settingsToggle) === null || _g === void 0 ? void 0 : _g.off }) }))] }), props.i18n && props.i18n.settingsOutroText && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(SettingsOutroText, { children: [jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_1 }), jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_2 })] }), jsxRuntime.jsx(SettingsOutroText, { children: jsxRuntime.jsx(SM, { children: props.i18n.settingsOutroText.paragraph_3 }) })] }))] })] }));
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, Object.assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgGearFill, { color: theme.palette.blue[600] }) }, { children: (_h = props.i18n) === null || _h === void 0 ? void 0 : _h.settingsTitle })) }));
@@ -6640,6 +6946,7 @@ const StyledList = styled__default["default"].ul `
 const UserMenu = (props) => {
     var _a, _b, _c, _d, _e, _f;
     const [item, setActiveItem] = React.useState("");
+    const disableMenuLanguageSettings = props.disableMenuLanguageSettings || false;
     const toggleItem = (item) => {
         setActiveItem(item);
     };
@@ -6650,7 +6957,7 @@ const UserMenu = (props) => {
                             settingsIntroText: (_c = props.i18n) === null || _c === void 0 ? void 0 : _c.settingsIntroText,
                             settingsOutroText: (_d = props.i18n) === null || _d === void 0 ? void 0 : _d.settingsOutroText,
                             settingsToggle: (_e = props.i18n) === null || _e === void 0 ? void 0 : _e.settingsToggle,
-                        }, onSetSettings: props.onSetSettings }), jsxRuntime.jsx(LanguageItem, { title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: (i) => toggleItem(i), languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: (lang) => props.onSelectLanguage(lang) }), jsxRuntime.jsx(MenuItem, Object.assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgLockLockedFill, { color: theme.palette.blue[600] }), setActive: () => {
+                        }, onSetSettings: props.onSetSettings }), jsxRuntime.jsx(LanguageItem, { disabled: disableMenuLanguageSettings, title: props.languageTitle || "Change Language", value: "language-selector", selectedItem: item, setActive: (i) => toggleItem(i), languages: props.languages, currentLanguage: props.currentLanguage, currentLanguageLabel: props.currentLanguageLabel, onSelectLanguage: (lang) => props.onSelectLanguage(lang) }), jsxRuntime.jsx(MenuItem, Object.assign({ selectedItem: item, icon: jsxRuntime.jsx(SvgLockLockedFill, { color: theme.palette.blue[600] }), setActive: () => {
                             if (document.querySelector(".iubenda-cs-preferences-link")) {
                                 const iubendaBtn = document.querySelector(".iubenda-cs-preferences-link");
                                 if (iubendaBtn) {
@@ -6841,7 +7148,7 @@ const UgGroupRow = styled__default["default"](reactTables.GroupRow) `
 const GroupRow = (props) => jsxRuntime.jsx(UgGroupRow, Object.assign({}, props));
 const GroupRowComponent = (props) => {
     return (jsxRuntime.jsx(GroupRow, Object.assign({}, (props && props.group.items.length === 0 && { className: "empty" }), (props &&
-        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
+        props.group.items.length > 0 && { onClick: props.handleToggle }), props, { children: jsxRuntime.jsxs(Cell, Object.assign({ colSpan: props.colSpan, className: props.open ? "open" : "closed" }, { children: [props.group.groupIcon && (jsxRuntime.jsx(StyledUgIcon, { size: 12, type: props.group.groupIcon })), jsxRuntime.jsxs(Label$1, Object.assign({ isRegular: true, className: "title" }, { children: [props.group.groupName, " ", jsxRuntime.jsxs("b", { children: ["(", props.group.items.length, ")"] })] })), jsxRuntime.jsx(StyledAnimatedToggle, Object.assign({ style: { transform: props.open ? "rotate(180deg)" : "none" } }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] })) })));
 };
 const AnimatedRow = styled__default["default"](Row) `
   &.render {
@@ -7045,10 +7352,612 @@ OrderedList.Item = UgOrderedList.Item;
 const UnorderedList = (props) => jsxRuntime.jsx(UgUnorderedList, Object.assign({}, props));
 UnorderedList.Item = UgUnorderedList.Item;
 
+const DefaultActiveWrapper = ({ children }) => {
+    return jsxRuntime.jsx("span", Object.assign({ style: { background: "#ff0000" } }, { children: children }));
+};
+const DefaultWordWrapper = ({ children }) => {
+    return jsxRuntime.jsx("span", { children: children });
+};
+const DefaultObservationWrapper = ({ title, color, children, observations, }) => {
+    const background = color + "50";
+    return (jsxRuntime.jsx("span", Object.assign({ "data-title": title, style: { background } }, { children: jsxRuntime.jsx(Tooltip, Object.assign({ content: observations.map((o) => o.title).join(" and ") }, { children: jsxRuntime.jsx("span", { children: children }) })) })));
+};
+const DefaultParagraphWrapper = ({ children }) => {
+    return jsxRuntime.jsx("p", Object.assign({ style: { marginBottom: "20px" } }, { children: children }));
+};
+const formatTime = (seconds) => {
+    const date = new Date(0);
+    date.setSeconds(seconds);
+    if (seconds < 3600)
+        return date.toISOString().substring(14, 19);
+    return date.toISOString().substring(11, 19);
+};
+const DefaultSpeakerWrapper = ({ start, end, setCurrentTime, speaker, }) => {
+    return (jsxRuntime.jsxs("p", Object.assign({ style: {
+            marginBottom: "10px",
+            userSelect: "none",
+        }, onClick: () => {
+            setCurrentTime && setCurrentTime({ start, end });
+        }, contentEditable: false }, { children: [speaker, " (", formatTime(start), " - ", formatTime(end), ")"] })));
+};
+const DefaultSentencesWrapper = ({ children }) => {
+    return jsxRuntime.jsx("div", Object.assign({ style: { paddingTop: "30px" } }, { children: children }));
+};
+const DefaultSentenceWrapper = ({ setCurrentTime, children, start, end, isActive, }) => {
+    return (jsxRuntime.jsx("span", Object.assign({ onClick: () => {
+            setCurrentTime && setCurrentTime({ start, end });
+        }, style: isActive
+            ? {
+                backgroundColor: "yellow",
+            }
+            : {} }, { children: children })));
+};
+const DefaultTranslationWrapper = ({ content, translations, }) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ style: { display: "flex" } }, { children: [jsxRuntime.jsx("div", Object.assign({ style: { width: "50%" } }, { children: content })), jsxRuntime.jsx("div", Object.assign({ style: { width: "50%" } }, { children: translations }))] })));
+};
+const SearchStyleWrapper = styled.styled.span `
+  .search-result {
+    background-color: rgba(255, 217, 0, 0.5);
+
+    &-current {
+      background-color: rgba(13, 255, 0, 0.5);
+    }
+  }
+`;
+const Theme = react.Extension.create({
+    name: "theme",
+    addOptions() {
+        return {
+            activeWrapper: DefaultActiveWrapper,
+            wordWrapper: DefaultWordWrapper,
+            observationWrapper: DefaultObservationWrapper,
+            paragraphWrapper: DefaultParagraphWrapper,
+            speakerWrapper: DefaultSpeakerWrapper,
+            sentencesWrapper: DefaultSentencesWrapper,
+            sentenceWrapper: DefaultSentenceWrapper,
+            translationWrapper: DefaultTranslationWrapper,
+            searchStyleWrapper: SearchStyleWrapper,
+        };
+    },
+});
+const getTheme = (editor) => {
+    const themeExtension = editor.extensionManager.extensions.find((ext) => ext.name === "theme");
+    if (!themeExtension) {
+        throw new Error("Theme extension not found");
+    }
+    return themeExtension;
+};
+
+const MenuContainer = styled__default["default"].div `
+  box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
+  display: flex;
+`;
+const FloatingMenu = (props) => {
+    const { editor, onClick } = props;
+    const shouldShow = (props) => {
+        // At least a word selected?", props.from !== props.to);
+        return props.from !== props.to;
+    };
+    if (!editor) {
+        return null;
+    }
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({ editor: editor, shouldShow: shouldShow }, { children: jsxRuntime.jsx(MenuContainer, Object.assign({ className: "bubble-menu" }, { children: jsxRuntime.jsxs(Button, Object.assign({ isAccent: true, isPrimary: true, onClick: () => {
+                    const { from, to } = editor.state.selection;
+                    let start = 0;
+                    let end = 0;
+                    editor.state.doc.nodesBetween(from, to, (node) => {
+                        if (node.type.name === "Word") {
+                            if (!start)
+                                start = node.attrs["data-start"];
+                            end = node.attrs["data-end"];
+                        }
+                    });
+                    if (start === end)
+                        return;
+                    onClick(editor, { start, end });
+                } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), "Create Observation"] })) })) })));
+};
+
+var _circle, _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const SvgSearchStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 6,
+  cy: 6,
+  r: 5.5,
+  fill: "none",
+  stroke: "currentColor"
+})), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M15 15l-5-5"
+})));
+
+const Search = ({ editor, placeholder, }) => {
+    const [search, setSearch] = React.useState("");
+    const debouncedValue = useDebounce(search, 300);
+    const setSearchTerm = React.useCallback((term) => {
+        editor.commands.setSearchTerm(term);
+    }, [editor]);
+    React.useEffect(() => {
+        setSearchTerm(debouncedValue);
+    }, [debouncedValue, setSearchTerm]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MediaInput, { isCompact: true, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search", type: "text", start: jsxRuntime.jsx(SvgSearchStroke, {}), onChange: (e) => {
+                setSearch(e.target.value);
+            } }) }));
+};
+const SearchStyle = styled.css `
+  .search-result {
+    background-color: rgba(255, 217, 0, 0.5);
+
+    &-current {
+      background-color: rgba(13, 255, 0, 0.5);
+    }
+  }
+`;
+Search.Style = SearchStyle;
+
+class ContentParser {
+    constructor(observations, sentences) {
+        this.observations = observations;
+        this.sentences = sentences;
+    }
+    wrapWordInObservations(word) {
+        var _a;
+        const observationsInThisWord = (_a = this.observations) === null || _a === void 0 ? void 0 : _a.filter((observation) => observation.start <= word.start && observation.end >= word.end);
+        const textContent = [{ type: "text", text: `${word.word} ` }];
+        if (!observationsInThisWord || observationsInThisWord.length === 0) {
+            return textContent;
+        }
+        return observationsInThisWord.reduce((acc, observation) => [
+            {
+                type: "Observation",
+                attrs: {
+                    id: observation.id,
+                    title: observation.text,
+                    color: observation.color,
+                },
+                content: acc,
+            },
+        ], textContent);
+    }
+    getParsedWord(word) {
+        return {
+            type: "Word",
+            attrs: {
+                "data-start": word.start,
+                "data-end": word.end,
+            },
+            content: this.wrapWordInObservations(word),
+        };
+    }
+    getParsedParagraph(paragraph) {
+        var _a;
+        const s = (_a = this.sentences) === null || _a === void 0 ? void 0 : _a.filter((sentence) => sentence.start >= paragraph.start && sentence.end <= paragraph.end);
+        return {
+            type: "Paragraph",
+            attrs: {
+                speakername: `Speaker ${paragraph.speaker}`,
+                start: paragraph.start,
+                end: paragraph.end,
+                sentences: s,
+            },
+            content: paragraph.words.map((word) => this.getParsedWord(word)),
+        };
+    }
+    getParsedContent(content) {
+        if (!content)
+            return undefined;
+        return {
+            type: "doc",
+            content: content.map((paragraph) => this.getParsedParagraph(paragraph)),
+        };
+    }
+}
+function getParsedContent(content, observations, sentences) {
+    return new ContentParser(observations, sentences).getParsedContent(content);
+}
+
+const Component$3 = ({ node, editor, }) => {
+    const themeExtension = getTheme(editor);
+    const ActiveWrapper = themeExtension.options.activeWrapper;
+    return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ as: "div", style: { display: "inline" } }, { children: jsxRuntime.jsx(ActiveWrapper, { children: jsxRuntime.jsx(react.NodeViewContent, { as: "span", className: "content is-editable" }) }) })));
+};
+
+const Active = ({ onSetCurrentTime, }) => core.Node.create({
+    name: "Active",
+    content: "inline*",
+    inline: true,
+    parseHTML() {
+        return [
+            {
+                tag: "span",
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        return [
+            "active",
+            {
+                style: "background-color: #ff0000;",
+            },
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setCurrentTime: (start) => () => {
+                if (onSetCurrentTime)
+                    onSetCurrentTime(start);
+                return true;
+            },
+            updateCurrentActive: ({ currentWord }) => ({ state, view }) => {
+                const { tr } = state;
+                // trova il nodo "active"
+                state.doc.descendants((node, pos) => {
+                    if (node.type.name === "Word") {
+                        // check if the node has an "active" descendant
+                        let hasActiveDescendant = false;
+                        node.descendants((child) => {
+                            hasActiveDescendant =
+                                hasActiveDescendant || child.type.name === "Active";
+                        });
+                        if (hasActiveDescendant) {
+                            // remove the "active" descendant
+                            function removeActiveDescendant(n) {
+                                var _a;
+                                if (((_a = n.firstChild) === null || _a === void 0 ? void 0 : _a.type.name) === "Active") {
+                                    const textContent = n.textContent;
+                                    const textNode = state.schema.text(textContent);
+                                    return n.copy(model.Fragment.from(textNode));
+                                }
+                                let updatedContent = model.Fragment.empty;
+                                n.content.forEach((child) => {
+                                    updatedContent = updatedContent.addToEnd(removeActiveDescendant(child));
+                                });
+                                return n.copy(updatedContent);
+                            }
+                            tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), removeActiveDescendant(node));
+                        }
+                    }
+                    if (node.type.name === "Word" &&
+                        node.attrs["data-start"] === currentWord.start &&
+                        node.attrs["data-end"] === currentWord.end) {
+                        function getUpdatedNode(n) {
+                            var _a;
+                            if (((_a = n.firstChild) === null || _a === void 0 ? void 0 : _a.type.name) === "text" &&
+                                n.type.name !== "Active") {
+                                return n.copy(model.Fragment.from(state.schema.nodes.Active.create({}, n.content.firstChild)));
+                            }
+                            let updatedContent = model.Fragment.empty;
+                            n.content.forEach((child, index) => {
+                                updatedContent = updatedContent.addToEnd(getUpdatedNode(child));
+                            });
+                            return n.copy(updatedContent);
+                        }
+                        tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), getUpdatedNode(node));
+                    }
+                });
+                view.updateState(view.state.apply(view.state.tr));
+                return true;
+            },
+        };
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component$3);
+    },
+});
+
+function findNodePosition(doc, targetNode) {
+    let foundPos = null;
+    doc.descendants((node, pos) => {
+        if (node === targetNode) {
+            foundPos = pos;
+            return false; // Interrompe la ricerca
+        }
+        return true;
+    });
+    return foundPos;
+}
+function findAllAncestorsOfType(state, pos, nodeType) {
+    const ancestors = [];
+    let { doc } = state;
+    let currentPos = pos;
+    while (currentPos > 0) {
+        const resolvedPos = doc.resolve(currentPos);
+        const parent = resolvedPos.node(resolvedPos.depth);
+        if (parent.type === nodeType) {
+            ancestors.push(parent);
+        }
+        if (resolvedPos.depth === 0) {
+            break;
+        }
+        currentPos = resolvedPos.before(); // Move to the previous depth level
+    }
+    return ancestors;
+}
+const Component$2 = ({ node, editor, }) => {
+    const themeExtension = getTheme(editor);
+    const ObservationWrapper = themeExtension.options.observationWrapper;
+    const nodePos = findNodePosition(editor.state.doc, node);
+    if (!nodePos)
+        return null;
+    const ancestors = findAllAncestorsOfType(editor.state, nodePos, editor.state.schema.nodes.Observation);
+    const observationsNodes = ancestors.length ? [node, ...ancestors] : [node];
+    return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ as: "div", style: { display: "inline" } }, { children: jsxRuntime.jsx(ObservationWrapper, Object.assign({ title: node.attrs["title"], color: node.attrs["color"], observations: observationsNodes.map((o) => ({
+                id: o.attrs["id"],
+                title: o.attrs["title"],
+                color: o.attrs["color"],
+            })) }, { children: jsxRuntime.jsx(react.NodeViewContent, { as: "span", className: "content is-editable" }) })) })));
+};
+
+const Observation = core.Node.create({
+    name: "Observation",
+    content: "inline*",
+    inline: true,
+    addAttributes() {
+        return {
+            id: {
+                default: 0,
+            },
+            color: {
+                default: "#909090",
+            },
+            title: {
+                default: "",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "observation",
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            addObservation: ({ id, title, color }) => ({ tr, state, view }) => {
+                const { from, to } = state.selection;
+                state.doc.nodesBetween(from, to, (node, pos) => {
+                    if (node.type.name === "Word") {
+                        const annotationNode = state.schema.nodes.Observation.create({
+                            id,
+                            title,
+                            color,
+                        }, node.content);
+                        // Crea il nodo "word" aggiornato con "active" come figlio
+                        const updatedNode = node.copy(model.Fragment.from(annotationNode));
+                        // Sostituisci il nodo originale con quello aggiornato
+                        tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos + node.nodeSize), updatedNode);
+                    }
+                });
+                view.updateState(view.state.apply(view.state.tr));
+                return true;
+            },
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["observation", react.mergeAttributes(HTMLAttributes), 0];
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component$2);
+    },
+});
+
+const findActiveWord = (node) => {
+    let activeWord = null;
+    node.descendants((child) => {
+        if (activeWord !== null)
+            return false;
+        if (child.type.name === "Word") {
+            child.descendants((grandchild) => {
+                if (activeWord !== null)
+                    return false;
+                if (grandchild.type.name === "Active") {
+                    activeWord = child;
+                }
+            });
+        }
+    });
+    return activeWord;
+};
+
+const Content = ({ node, editor }) => {
+    const themeExtension = getTheme(editor);
+    const ParagraphWrapper = themeExtension.options.paragraphWrapper;
+    const SpeakerWrapper = themeExtension.options.speakerWrapper;
+    return (jsxRuntime.jsxs(ParagraphWrapper, { children: [jsxRuntime.jsx(SpeakerWrapper, { setCurrentTime: ({ start }) => {
+                    editor.commands.setCurrentTime(start);
+                }, start: node.attrs.start, end: node.attrs.end, speaker: node.attrs.speakername }), jsxRuntime.jsx(react.NodeViewContent, { className: "content is-editable" })] }));
+};
+const Component$1 = ({ node, editor, }) => {
+    if (!node.attrs.sentences || node.attrs.sentences.length === 0) {
+        return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ as: "div", style: { display: "inline" } }, { children: jsxRuntime.jsx(Content, { node: node, editor: editor }) })));
+    }
+    const themeExtension = getTheme(editor);
+    const SentencesWrapper = themeExtension.options.sentencesWrapper;
+    const SentenceWrapper = themeExtension.options.sentenceWrapper;
+    const TranslationWrapper = themeExtension.options.translationWrapper;
+    const activeWord = findActiveWord(node);
+    return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({ className: "react-component" }, { children: jsxRuntime.jsx(TranslationWrapper, { content: jsxRuntime.jsx(Content, { node: node, editor: editor }), translations: jsxRuntime.jsx(SentencesWrapper, { children: node.attrs.sentences.map((sentence, index) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(SentenceWrapper, Object.assign({ start: sentence.start, end: sentence.end, setCurrentTime: ({ start, end }) => {
+                            editor.commands.setCurrentTime(start);
+                        }, isActive: activeWord
+                            ? activeWord.attrs["data-start"] >= sentence.start &&
+                                activeWord.attrs["data-end"] <= sentence.end
+                            : false }, { children: [sentence.text, " "] }), index) }))) }) }) })));
+};
+
+const Paragraph = core.Node.create({
+    name: "Paragraph",
+    group: "block",
+    atom: false,
+    content: "inline*",
+    addAttributes() {
+        return {
+            speakername: {
+                default: "Speaker",
+            },
+            start: {
+                default: 0,
+            },
+            end: {
+                default: 0,
+            },
+            sentences: {
+                default: [],
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "speaker-paragraph",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ["speaker-paragraph", core.mergeAttributes(HTMLAttributes), 0];
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component$1);
+    },
+});
+
+const Component = ({ node, editor }) => {
+    const themeExtension = getTheme(editor);
+    const WordWrapper = themeExtension.options.wordWrapper;
+    return (jsxRuntime.jsx(react.NodeViewWrapper, Object.assign({}, node.attrs, { as: "div", style: { display: "inline" } }, { children: jsxRuntime.jsx(WordWrapper, { children: jsxRuntime.jsx("span", Object.assign({ onClick: () => {
+                    editor.commands.setCurrentTime(node.attrs["data-start"]);
+                } }, { children: jsxRuntime.jsx(react.NodeViewContent, { as: "span", className: "content is-editable" }) })) }) })));
+};
+
+const Word = core.Node.create({
+    name: "Word",
+    group: "inline",
+    content: "inline*",
+    inline: true,
+    addAttributes() {
+        return {
+            "data-start": {
+                default: null,
+            },
+            "data-end": {
+                default: null,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "span[data-start][data-end]",
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        return [
+            "span",
+            {
+                "data-start": node.attrs["data-start"],
+                "data-end": node.attrs["data-end"],
+                style: "",
+            },
+            0,
+        ];
+    },
+    addNodeView() {
+        return react.ReactNodeViewRenderer(Component, {
+            as: "span",
+        });
+    },
+});
+
+const useEditor = ({ content, observations, translations, currentTime, onSetCurrentTime, themeExtension, isEditable, }, deps) => {
+    const ed = react.useEditor({
+        editable: isEditable ? isEditable : false,
+        extensions: [
+            Document__default["default"],
+            Paragraph,
+            Text__default["default"],
+            themeExtension ? themeExtension : Theme.configure(),
+            Word,
+            SearchAndReplace__default["default"].configure(),
+            Active({
+                onSetCurrentTime,
+            }),
+            Observation,
+        ],
+        editorProps: {
+            handlePaste: () => true,
+        },
+        content: getParsedContent(content, observations, translations),
+    }, deps);
+    React.useEffect(() => {
+        if (!currentTime)
+            return;
+        if (!ed)
+            return;
+        const currentParagraph = content === null || content === void 0 ? void 0 : content.find((paragraph) => paragraph.words.some((word) => word.start * 1000 <= currentTime && word.end * 1000 >= currentTime));
+        if (!currentParagraph)
+            return;
+        const currentWord = currentParagraph.words.find((word) => word.start * 1000 <= currentTime && word.end * 1000 > currentTime);
+        if (!currentWord)
+            return;
+        ed.commands.updateCurrentActive({ currentWord });
+    }, [currentTime, content, ed]);
+    return ed;
+};
+
+const EditorWrapper = styled__default["default"].div `
+  border: none;
+  .ProseMirror {
+    background: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    min-height: 0;
+  }
+`;
+const Transcript = ({ editor }) => {
+    const ref = React.useRef(null);
+    const handleDragStart = React.useCallback((event) => {
+        const selection = window.getSelection();
+        if (selection && selection.toString()) {
+            event.preventDefault();
+        }
+    }, []);
+    React.useEffect(() => {
+        const currentRef = ref.current;
+        if (!currentRef)
+            return;
+        currentRef.addEventListener("dragstart", handleDragStart);
+        return () => {
+            currentRef.removeEventListener("dragstart", handleDragStart);
+        };
+    }, [handleDragStart]);
+    if (!editor)
+        return null;
+    const theme = getTheme(editor);
+    const SearchStyleWrapper = theme.options.searchStyleWrapper;
+    return (jsxRuntime.jsx(SearchStyleWrapper, { children: jsxRuntime.jsx(EditorWrapper, { children: jsxRuntime.jsx(react.EditorContent, { ref: ref, editor: editor }) }) }));
+};
+Transcript.useEditor = useEditor;
+Transcript.Search = Search;
+Transcript.FloatingMenu = FloatingMenu;
+
 Object.defineProperty(exports, 'ModalClose', {
   enumerable: true,
   get: function () { return reactModals.Close; }
 });
+Object.defineProperty(exports, 'useVideoContext', {
+  enumerable: true,
+  get: function () { return Video.useVideoContext; }
+});
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Anchor = Anchor;
@@ -7081,7 +7990,7 @@ exports.Col = Col;
 exports.ColorSwatch = ColorSwatch;
 exports.Comment = Comment;
 exports.ContainerCard = ContainerCard;
-exports.Content = Content;
+exports.Content = Content$1;
 exports.CounterMultiselect = CounterMultiselect;
 exports.CursorPagination = CursorPagination;
 exports.Dots = Dots;
@@ -7114,7 +8023,7 @@ exports.Item = Item$1;
 exports.ItemContent = ItemContent;
 exports.ItemMeta = ItemMeta;
 exports.LG = LG;
-exports.Label = Label;
+exports.Label = Label$1;
 exports.Lightbox = Lightbox;
 exports.LoginForm = LoginForm;
 exports.Logo = Logo;
@@ -7143,9 +8052,10 @@ exports.Notification = Notification;
 exports.OrderedList = OrderedList;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
-exports.Paragraph = Paragraph;
+exports.Paragraph = Paragraph$1;
 exports.PieChart = PieChart;
 exports.Player = Player;
+exports.PlayerProvider = PlayerProvider;
 exports.PreviousItem = PreviousItem;
 exports.ProductCard = ProductCard;
 exports.ProfileModal = ProfileModal;
@@ -7181,6 +8091,7 @@ exports.Tag = Tag;
 exports.TextDescription = TextDescription;
 exports.TextLabel = TextLabel;
 exports.Textarea = Textarea;
+exports.Theme = Theme;
 exports.Tiles = Tiles;
 exports.Timeline = Timeline;
 exports.Title = Title$1;
@@ -7188,6 +8099,7 @@ exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.TooltipModal = TooltipModal;
+exports.Transcript = Transcript;
 exports.Trigger = Trigger;
 exports.UnorderedList = UnorderedList;
 exports.WaffleChart = WaffleChart;