@appquality/unguess-design-system 3.1.89-beta-attachments → 3.1.89

package/build/index.js

@@ -25,6 +25,7 @@ var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
 var reactForms = require('@zendeskgarden/react-forms');
+var uuid = require('uuid');
 var react = require('@tiptap/react');
 var reactTooltips = require('@zendeskgarden/react-tooltips');
 var Typography = require('@tiptap/extension-typography');
@@ -333,8 +334,8 @@ const UgContainerCard = styled__default["default"](reactNotifications.Well) `
 `;
 const ContainerCard = (props) => jsxRuntime.jsx(UgContainerCard, Object.assign({}, props));
 
-var _a, _b, _c, _d, _e, _f, _g$c, _h;
-const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$c = reactTheming.DEFAULT_THEME.components) === null || _g$c === void 0 ? void 0 : _g$c.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
+var _a, _b, _c, _d, _e, _f, _g$d, _h;
+const components = Object.assign(Object.assign(Object.assign(Object.assign({}, reactTheming.DEFAULT_THEME.components), { chrome: Object.assign(Object.assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: Object.assign(Object.assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: Object.assign(Object.assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: Object.assign(Object.assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: Object.assign(Object.assign({}, (_h = (_g$d = reactTheming.DEFAULT_THEME.components) === null || _g$d === void 0 ? void 0 : _g$d.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) }), cardCmponentStyle), { "text.primary": () => ({
         color: getColor(colors.primaryHue, 600),
     }), "text.success": () => ({
         color: getColor(colors.successHue, 700),
@@ -842,8 +843,8 @@ Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
 var _path$F;
-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 SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -855,8 +856,8 @@ const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$E;
-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 SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -868,8 +869,8 @@ const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$D;
-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 SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -881,8 +882,8 @@ const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _rect$4, _path$C, _path2$c, _path3$4;
-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 SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -905,8 +906,8 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
 })));
 
 var _rect$3, _path$B, _path2$b;
-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 SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -930,8 +931,8 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
 })));
 
 var _rect$2, _path$A, _path2$a;
-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 SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -957,8 +958,8 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
 })));
 
 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$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 SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -1001,15 +1002,15 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   fill: "#FFB65A"
 })));
 
-var _g$b, _path$y, _path2$8, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-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 SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$b || (_g$b = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$c || (_g$c = /*#__PURE__*/React__namespace.createElement("g", {
   opacity: 0.3
 }, /*#__PURE__*/React__namespace.createElement("path", {
   opacity: 0.3,
@@ -1071,15 +1072,15 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
   fill: "#ECF4F2"
 })));
 
-var _g$a, _path$x;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
-const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+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({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$a || (_g$a = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$b || (_g$b = /*#__PURE__*/React__namespace.createElement("g", {
   opacity: 0.3
 }, /*#__PURE__*/React__namespace.createElement("path", {
   opacity: 0.3,
@@ -1946,15 +1947,15 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
             } }) })));
 };
 
-var _g$9, _defs$4;
-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 SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+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({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$9 || (_g$9 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$a || (_g$a = /*#__PURE__*/React__namespace.createElement("g", {
   clipPath: "url(#clip0_21_19131)"
 }, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
@@ -1970,15 +1971,15 @@ const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg"
   fill: "white"
 })))));
 
-var _g$8, _defs$3;
-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 SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+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({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$8 || (_g$8 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$9 || (_g$9 = /*#__PURE__*/React__namespace.createElement("g", {
   clipPath: "url(#clip0_21_19130)"
 }, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
@@ -1994,15 +1995,15 @@ const SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg"
   fill: "white"
 })))));
 
-var _g$7, _defs$2;
-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 SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+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({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$8 || (_g$8 = /*#__PURE__*/React__namespace.createElement("g", {
   clipPath: "url(#clip0_21_19129)"
 }, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
@@ -2024,15 +2025,15 @@ const SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg"
   fill: "white"
 })))));
 
-var _g$6, _defs$1;
-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 SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+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({
   width: 27,
   height: 26,
   viewBox: "0 0 27 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$7 || (_g$7 = /*#__PURE__*/React__namespace.createElement("g", {
   clipPath: "url(#clip0_21_19127)"
 }, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M26.5525 13C26.5525 20.1796 20.6084 26 13.2762 26C5.94481 26 0 20.1796 0 13C0 5.82111 5.94481 0 13.2762 0C20.6084 0 26.5525 5.82111 26.5525 13Z",
@@ -2054,15 +2055,15 @@ const SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg"
   fill: "white"
 })))));
 
-var _g$5, _defs;
-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 SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+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({
   width: 26,
   height: 26,
   viewBox: "0 0 26 26",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
   clipPath: "url(#clip0_21_19125)"
 }, /*#__PURE__*/React__namespace.createElement("path", {
   d: "M25.2051 13C25.2051 20.1796 19.5626 26 12.6025 26C5.64314 26 0 20.1796 0 13C0 5.82111 5.64314 0 12.6025 0C19.5626 0 25.2051 5.82111 25.2051 13Z",
@@ -2313,7 +2314,7 @@ const ChatFooter = ({ saveText, children, showShortcut, }) => {
 };
 
 const ChatContext = React.createContext(null);
-const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, children, }) => {
+const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMentionableUsers, children, }) => {
     const [editor, setEditor] = React.useState();
     const [thumbnails, setThumbnails] = React.useState([]);
     const getMentions = (editor) => {
@@ -2335,6 +2336,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         editor,
         setEditor,
         thumbnails,
+        setThumbnails,
         afterUploadCallback: (failed) => {
             setThumbnails(thumbnails.map((file) => {
                 if (failed.includes(file.name)) {
@@ -2348,13 +2350,13 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
                 return file;
             }));
         },
-        addThumbnails: ({ files, }) => {
+        addThumbnails: ({ files }) => {
             files.forEach((file) => (file.isLoadingMedia = true));
             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);
+                    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;
@@ -2370,10 +2372,19 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
                 });
             }
         },
-        clearThumbnails: () => {
-            setThumbnails([]);
+        clearInput: () => {
+            if (editor && !editor.isEmpty) {
+                editor.commands.clearContent();
+            }
+            if (thumbnails.length > 0)
+                setThumbnails([]);
+        },
+        onDeleteThumbnail: (id) => {
+            onDeleteThumbnail(id);
+        },
+        removeThumbnail: (index) => {
+            setThumbnails(thumbnails.filter((_, i) => i !== index));
         },
-        removeThumbnail: (index) => setThumbnails(thumbnails.filter((_, i) => i !== index)),
         triggerSave: () => {
             if (editor && onSave && !editor.isEmpty) {
                 onSave(editor, getMentions(editor));
@@ -2389,7 +2400,8 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         setMentionableUsers,
         thumbnails,
         setThumbnails,
-        onFileUpload
+        onFileUpload,
+        onDeleteThumbnail,
     ]);
     return (jsxRuntime.jsx(ChatContext.Provider, Object.assign({ value: chatContextValue }, { children: children })));
 };
@@ -2794,8 +2806,8 @@ const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvide
 const useToast = reactNotifications.useToast;
 
 var _path$w;
-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 SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2807,8 +2819,8 @@ const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$v;
-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 SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2823,8 +2835,8 @@ const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _path$u, _path2$7;
-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 SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$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 SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2841,15 +2853,15 @@ const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg",
   d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
 })));
 
-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 SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
   transform: "translate(-464 -332)"
 }, /*#__PURE__*/React__namespace.createElement("rect", {
   width: 16,
@@ -2869,15 +2881,15 @@ const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   transform: "translate(474.469 331)"
 }))));
 
-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 SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
   transform: "translate(-464 -332)"
 }, /*#__PURE__*/React__namespace.createElement("rect", {
   width: 16,
@@ -2897,15 +2909,15 @@ const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   transform: "translate(469.359 331)"
 }))));
 
-var _g$2;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
-const SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
   transform: "translate(-464 -332)"
 }, /*#__PURE__*/React__namespace.createElement("rect", {
   width: 16,
@@ -2966,15 +2978,22 @@ 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) `
   box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
+
+  ${({ isTransparent }) => isTransparent &&
+    `
+      box-shadow: none;
+      background-color: transparent;
+      border: none;
+    `};
 `;
 
 var _path$t;
-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 SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -2986,8 +3005,8 @@ const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg"
 })));
 
 var _path$s;
-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 SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -3001,8 +3020,8 @@ const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("sv
 })));
 
 var _path$r;
-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 SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -3016,8 +3035,8 @@ const SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 
 var _path$q;
-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 SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -3084,7 +3103,10 @@ const CommentBar = ({ editor, i18n, }) => {
                     const files = fileInput.files;
                     if (files) {
                         const mediaFiles = Array.from(files).map((file) => {
-                            return Object.assign(file, { isLoadingMedia: false });
+                            return Object.assign(file, {
+                                isLoadingMedia: false,
+                                internal_id: uuid.v4(),
+                            });
                         });
                         if (mediaFiles.length === 0)
                             return;
@@ -3273,7 +3295,7 @@ const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
             },
         }),
         Dropcursor__default["default"].configure({
-            color: "#ff0000",
+            color: getColor(colors.accentHue, 700),
             width: 3,
         }),
         Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
@@ -3345,15 +3367,15 @@ const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
     ];
 };
 
-var _circle$2, _path$p, _path2$6;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
-const SvgRemoveMediaIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+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({
   width: 56,
   height: 56,
   viewBox: "0 0 56 56",
   fill: "#68737d",
   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,
@@ -3401,7 +3423,7 @@ const Preview$1 = styled__default["default"].div `
   background-position: center;
   background-repeat: no-repeat;
 `;
-const ImageThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = false, isError = false, }) => {
+const ImageThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
@@ -3416,15 +3438,15 @@ const ImageThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX
             jsxRuntime.jsx("span", { children: "error uploading media" })), !isLoadingMedia && (jsxRuntime.jsx(Preview$1, Object.assign({ url: src }, { children: showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })) })))] })));
 };
 
-var _circle$1, _path$o;
-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 SvgVideoPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+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({
   width: 56,
   height: 56,
   viewBox: "0 0 56 56",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
+}, props), _circle$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
   cx: 28,
   cy: 28,
   r: 28,
@@ -3479,7 +3501,7 @@ const Preview = styled__default["default"].div `
     height: 100%;
   }
 `;
-const VideoThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = false, isError = false, }) => {
+const VideoThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
@@ -3518,28 +3540,33 @@ const StyledCol$1 = styled__default["default"](reactGrid.Col) `
 const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
 
 const ThumbnailContainer = ({ openLightbox }) => {
-    const { thumbnails, removeThumbnail } = useChatContext();
-    if (!thumbnails || thumbnails.length === 0) {
-        return null;
-    }
-    const mediaFiles = [];
-    thumbnails.forEach((file) => {
-        mediaFiles.push({
+    const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
+    const mediaFiles = React.useMemo(() => {
+        return thumbnails.map((file) => ({
             fileName: file.name,
             fileType: file.type,
-            status: file.isLoadingMedia ? "uploading" : "success",
             previewUrl: URL.createObjectURL(file),
-        });
-    });
-    console.log("mediafiles", mediaFiles);
+            internal_id: file.internal_id,
+            isLoadingMedia: file.isLoadingMedia,
+        }));
+    }, [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) => {
                 // Check if item is an image or a video
-                if (file.fileType.includes('image'))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
+                if (file.fileType.includes("image"))
+                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, xl: 3, lg: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                                removeThumbnail(index);
+                                onDeleteThumbnail(file.internal_id);
+                            }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
                             } }, index) })));
-                if (file.fileType.includes('video'))
-                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
+                if (file.fileType.includes("video"))
+                    return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 3, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.previewUrl, index: index, showX: true, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+                                removeThumbnail(index);
+                                onDeleteThumbnail(file.internal_id);
+                            }, clickThumbnail: () => {
                                 openLightbox(thumbnails[index], index);
                             } }, index) })));
                 return null;
@@ -3613,8 +3640,8 @@ Lightbox.Footer = Footer$3;
 Lightbox.Close = reactModals.Close;
 
 var _path$n;
-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 SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -3626,8 +3653,8 @@ const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElemen
 })));
 
 var _path$m;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
-const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -3856,94 +3883,274 @@ Slider.Slide = Slide;
 Slider.PrevButton = PrevButton;
 Slider.NextButton = NextButton;
 
-const UgProgress = styled__default["default"](reactLoaders.Progress) ``;
-/**
- * A Progress loader communicates progress when downloading or uploading content.
- * <hr>
- * Used for this:
- * - To communicate the amount of time left when downloading or uploading content
- *
-   Not for this:
-    - When the loading time is unknown, use a Spinner instead
-    - When loading page content, use a Skeleton loader instead
- */
-const Progress = React.forwardRef((props, ref) => (jsxRuntime.jsx(UgProgress, Object.assign({ ref: ref }, props))));
-
-const Wrapper$1 = styled__default["default"].div `
-  position: absolute;
-  bottom: ${({ theme }) => theme.space.sm};
-  z-index: 1;
-`;
-const Content$1 = styled__default["default"].div `
-  display: flex;
-  background-color: ${({ theme }) => theme.palette.grey[800]};
-  border-radius: 2px;
-  width: auto;
-  padding: 2px 4px;
-  display: inline-flex;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  min-height: 16px;
-`;
-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 }) })));
-};
+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({
+  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", {
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  d: "M11.5 10l4-4m-4 0l4 4"
+})), _path2$5 || (_path2$5 = /*#__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"
+})));
 
-var _path$l;
+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 SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
   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$k || (_path$k = /*#__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"
+  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", {
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  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"
 })));
 
-var _g$1;
+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();
+    const { player } = context;
+    const checkAudio = (video) => {
+        if (!video) {
+            return false;
+        }
+        const videohasAudio = video.mozHasAudio ||
+            Boolean(video.webkitAudioDecodedByteCount) ||
+            Boolean(video.audioTracks && video.audioTracks.length);
+        setHasAudio(videohasAudio);
+    };
+    const hasVolume = (video) => {
+        if (!video) {
+            return false;
+        }
+        return video.volume > 0;
+    };
+    React.useEffect(() => {
+        if (player && (player === null || player === void 0 ? void 0 : player.ref)) {
+            setMuted(!hasVolume(player.ref.current));
+            checkAudio(player.ref.current);
+        }
+    }, [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);
+            }
+        } }, { children: isMuted || !hasAudio ? jsxRuntime.jsx(SvgVolumeMutedFill, {}) : jsxRuntime.jsx(SvgVolumeUnmutedFill, {}) })));
+};
+
+const ProgressContext = React.createContext(null);
+const ProgressContextProvider = ({ children, }) => {
+    const [isGrabbing, setIsGrabbing] = React.useState(false);
+    const [fromEnd, setFromEnd] = React.useState(false);
+    const [activeBookmark, setactiveBookmark] = React.useState(undefined);
+    const progressContextValue = React.useMemo(() => ({
+        isGrabbing,
+        fromEnd,
+        activeBookmark,
+        setIsGrabbing,
+        setFromEnd,
+        setactiveBookmark,
+        reset: () => {
+            setIsGrabbing(false);
+            setFromEnd(false);
+            setactiveBookmark(undefined);
+        },
+    }), [isGrabbing, fromEnd, activeBookmark]);
+    return (jsxRuntime.jsx(ProgressContext.Provider, Object.assign({ value: progressContextValue }, { children: children })));
+};
+const useProgressContext = () => {
+    const context = React.useContext(ProgressContext);
+    if (!context)
+        throw new Error("Provider not found for ProgressContextProvider");
+    return context; // Now we can use the context in the component, SAFELY.
+};
+
+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 SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+const SvgGrip = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+}, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
   fill: "currentColor"
 }, /*#__PURE__*/React__namespace.createElement("rect", {
-  width: 4,
-  height: 14,
-  x: 3,
+  width: 2,
+  height: 2,
+  x: 5,
   y: 1,
-  rx: 1,
-  ry: 1
+  rx: 0.5,
+  ry: 0.5
 }), /*#__PURE__*/React__namespace.createElement("rect", {
-  width: 4,
-  height: 14,
+  width: 2,
+  height: 2,
   x: 9,
   y: 1,
-  rx: 1,
-  ry: 1
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 5,
+  y: 5,
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 9,
+  y: 5,
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 5,
+  y: 9,
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 9,
+  y: 9,
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 5,
+  y: 13,
+  rx: 0.5,
+  ry: 0.5
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 2,
+  height: 2,
+  x: 9,
+  y: 13,
+  rx: 0.5,
+  ry: 0.5
 }))));
 
-var _path$k, _path2$5, _path3$1;
+const StyledGrabber = styled.styled.div `
+  position: absolute;
+  display: none;
+  ${({ isEnd }) => isEnd
+    ? `
+    right: 0;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  `
+    : `
+    left: 0;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  `}
+  height: 100%;
+  width: 8px;
+  background-color: white;
+  z-index: 2;
+  cursor: ew-resize;
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    color: ${({ theme }) => theme.palette.grey[500]};
+    svg {
+      width: auto;
+      height: 50%;
+    }
+  }
+`;
+const activeBookMark = styled.css `
+  height: 250%;
+  transform: translateY(-30%);
+
+  ${StyledGrabber} {
+    display: block;
+  }
+`;
+const Rect = styled.styled.div `
+  position: absolute;
+  height: 110%;
+  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+  z-index: 1;
+  border-radius: 2px;
+  &:hover {
+    ${activeBookMark}
+    border-radius: 4px;
+  }
+  color: white;
+  ${({ isActive }) => isActive && activeBookMark}
+
+  transition: width 0.1s ease;
+`;
+const Grabber = (props) => {
+    const { observation } = props;
+    const { setIsGrabbing, setactiveBookmark, setFromEnd } = useProgressContext();
+    const handleDragStart = (e) => {
+        setIsGrabbing(true);
+        setactiveBookmark(observation);
+        setFromEnd(!!props.isEnd);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    return (jsxRuntime.jsx(StyledGrabber, Object.assign({ isEnd: props.isEnd, onMouseDown: handleDragStart, onMouseMove: props.handleMouseMove }, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(SvgGrip, {}) }) })));
+};
+const Bookmark = (props) => {
+    var _a, _b;
+    const { start, end, hue, label } = 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;
+    const duration = videoEnd - videoStart || ((_b = context.player) === null || _b === void 0 ? void 0 : _b.totalTime) || 0; //relative
+    const { activeBookmark } = useProgressContext();
+    if (!context.player || !context.player.ref) {
+        return null;
+    }
+    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: {
+                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 SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
   width: 16,
   height: 16,
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$j || (_path$j = /*#__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",
+  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",
   fill: "currentColor"
-})), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M5.5 7.63073V7.07008H6.67566V11H6.02566V7.63073H5.5Z",
   fill: "currentColor"
 })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3951,20 +4158,20 @@ const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createEleme
   fill: "currentColor"
 })));
 
-var _path$j, _path2$4, _path3;
+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 SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+const SvgForwardSecondsFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
   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$i || (_path$i = /*#__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",
+  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",
   fill: "currentColor"
-})), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M5.5 7.63073V7.07008H6.67566V11H6.02566V7.63073H5.5Z",
   fill: "currentColor"
 })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3972,18 +4179,57 @@ const SvgBackSecondsFill = props => /*#__PURE__*/React__namespace.createElement(
   fill: "currentColor"
 })));
 
-var _path$i, _path2$3;
+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 SvgPreviousFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+const SvgPauseFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+  fill: "currentColor"
+}, /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 4,
+  height: 14,
+  x: 3,
+  y: 1,
+  rx: 1,
+  ry: 1
+}), /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 4,
+  height: 14,
+  x: 9,
+  y: 1,
+  rx: 1,
+  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({
+  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", {
+  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({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 24 24"
-}, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$g || (_path$g = /*#__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$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M20.75 19.0526C20.75 20.4774 19.1383 21.305 17.9803 20.4748L7.51062 12.9682C6.50574 12.2477 6.54467 10.7407 7.5854 10.073L18.0551 3.35665C19.2198 2.60946 20.75 3.44583 20.75 4.82961L20.75 19.0526Z",
   fill: "currentColor"
 })));
@@ -4013,8 +4259,9 @@ const getNextPlaybackRate = (rate = 1) => {
 const StyledDiv$3 = styled__default["default"].div `
   display: flex;
   align-items: center;
+  justify-content: center;
 `;
-const ControlsGroupCenter = () => {
+const ControlsGroupCenter = (props) => {
     var _a;
     const [playBackRate, setPlayBackRate] = React.useState(1);
     const { context, togglePlay } = Video.useVideoContext();
@@ -4037,133 +4284,86 @@ const ControlsGroupCenter = () => {
         const nextTime = videoRef.currentTime + 10;
         videoRef.currentTime = nextTime;
     };
-    return (jsxRuntime.jsxs(StyledDiv$3, { 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);
                         videoRef.playbackRate = newSpeed;
                     }
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] }));
+                } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] })));
 };
 
-const StyledDiv$2 = styled__default["default"].div `
-  position: absolute;
-  bottom: ${({ theme }) => theme.space.sm};
-  right: 0;
-
-  padding: 0 ${({ theme }) => theme.space.xs};
-
-  span {
-    color: ${({ theme }) => theme.palette.grey[300]};
-  }
-`;
-const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
-
-var _path$h, _path2$2;
-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 SvgVolumeMutedFill = 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$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M11.5 10l4-4m-4 0l4 4"
-})), _path2$2 || (_path2$2 = /*#__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"
-})));
-
-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 SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+var _path$f, _circle$1;
+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 SvgTagStroke = 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$g || (_path$g = /*#__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$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
-  strokeLinecap: "round",
-  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"
+  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"
 })));
 
-const AudioButton = () => {
-    const [hasAudio, setHasAudio] = React.useState(false);
-    const { isMuted, setMuted, context } = Video.useVideoContext();
-    const { player } = context;
-    const checkAudio = (video) => {
-        if (!video) {
-            return false;
-        }
-        console.log("hasAudio?", video);
-        const videohasAudio = video.mozHasAudio ||
-            Boolean(video.webkitAudioDecodedByteCount) ||
-            Boolean(video.audioTracks && video.audioTracks.length);
-        setHasAudio(videohasAudio);
-    };
-    const hasVolume = (video) => {
-        if (!video) {
-            return false;
-        }
-        return video.volume > 0;
-    };
-    React.useEffect(() => {
-        if (player && (player === null || player === void 0 ? void 0 : player.ref)) {
-            setMuted(!hasVolume(player.ref.current));
-            checkAudio(player.ref.current);
-        }
-    }, [context.isPlaying, isMuted]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, 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);
+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);
             }
-        } }, { children: isMuted || !hasAudio ? jsxRuntime.jsx(SvgVolumeMutedFill, {}) : jsxRuntime.jsx(SvgVolumeUnmutedFill, {}) })));
+            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"] })));
 };
 
-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$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 SvgMaximizeStroke = 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$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$e || (_path$e = /*#__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() { _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({
+var _path$d;
+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 SvgMinimizeStroke = 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$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -4206,7 +4406,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 ||
@@ -4231,31 +4431,77 @@ 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, {})) })));
 };
 
+const UgProgress = styled__default["default"](reactLoaders.Progress) ``;
+/**
+ * A Progress loader communicates progress when downloading or uploading content.
+ * <hr>
+ * Used for this:
+ * - To communicate the amount of time left when downloading or uploading content
+ *
+   Not for this:
+    - When the loading time is unknown, use a Spinner instead
+    - When loading page content, use a Skeleton loader instead
+ */
+const Progress = React.forwardRef((props, ref) => (jsxRuntime.jsx(UgProgress, Object.assign({ ref: ref }, props))));
+
+const StyledProgress = styled.styled(Progress) `
+  width: 100%;
+  border-radius: 0;
+  color: ${({ theme }) => theme.palette.grey[700]};
+  cursor: pointer;
+  > div {
+    border-radius: 0;
+  }
+`;
+const ProgressBar = React.forwardRef((props, ref) => {
+    const { progress, handleSkipAhead } = props;
+    return (jsxRuntime.jsx(StyledProgress, { className: "progress-bar-1", ref: ref, value: progress, onClick: (e) => handleSkipAhead(e.clientX) }));
+});
+
+const StyledDiv$2 = styled__default["default"].div `
+  display: flex;
+  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)] })) }));
+
+const Wrapper$1 = styled__default["default"].div `
+  position: absolute;
+  bottom: ${({ theme }) => theme.space.sm};
+  z-index: 1;
+`;
+const Content$1 = styled__default["default"].div `
+  display: flex;
+  background-color: ${({ theme }) => theme.palette.grey[800]};
+  border-radius: 2px;
+  width: auto;
+  padding: 2px 4px;
+  display: inline-flex;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  min-height: 16px;
+`;
+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 }) })));
+};
+
 const ControlsWrapper = styled__default["default"].div `
   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]};
   ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 2;
 `;
-const StyledProgress = styled__default["default"](Progress) `
-  width: 100%;
-  border-radius: 0;
-  color: ${({ theme }) => theme.palette.kale[700]};
-  cursor: pointer;
-  > div {
-    border-radius: 0;
-  }
-`;
 const StyledTooltip = styled__default["default"](PlayerTooltip) `
   display: none;
 `;
@@ -4274,18 +4520,23 @@ const StyledDiv$1 = styled__default["default"].div `
   display: flex;
   align-items: center;
 `;
-const Controls = ({ container, }) => {
+const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, }) => {
     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 progressRef = React.useRef(null);
     const { context, setCurrentTime } = Video.useVideoContext();
+    const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
+    React.useEffect(() => {
+        setMarks(bookmarks);
+    }, [bookmarks]);
     const relCurrentTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime)
         ? ((_b = context.player) === null || _b === void 0 ? void 0 : _b.currentTime) - context.part.start
         : 0;
     const duration = context.part.end - context.part.start || ((_c = context.player) === null || _c === void 0 ? void 0 : _c.totalTime) || 0; //relative
-    const getVideoPositionFromEvent = (clientX) => {
+    const getVideoPositionFromEvent = React.useCallback((clientX) => {
         if (progressRef && progressRef.current && duration) {
             const bounds = progressRef.current.getBoundingClientRect();
             const x = clientX - bounds.left;
@@ -4293,12 +4544,18 @@ const Controls = ({ container, }) => {
             return videoPositionSecs;
         }
         return 0;
-    };
+    }, [progressRef, duration]);
+    const getProgress = React.useCallback((currentTime) => {
+        const current = currentTime - (context.part.start || 0);
+        if (duration === 0)
+            return 0;
+        return (current / duration) * 100;
+    }, [context.part.start, duration]);
     const handleSkipAhead = React.useCallback((pageX) => {
         const time = getVideoPositionFromEvent(pageX) + (context.part.start || 0);
         setCurrentTime(time);
         setProgress(getProgress(time));
-    }, [context.player, context.part]);
+    }, [getVideoPositionFromEvent, context.part.start, setCurrentTime, getProgress]);
     const onMouseEvent = (e) => {
         if (progressRef && progressRef.current) {
             const tooltipWidth = 40;
@@ -4309,31 +4566,58 @@ const Controls = ({ container, }) => {
             const videoTargetDuration = getVideoPositionFromEvent(e.clientX);
             setTooltipMargin(newTooltipMargin);
             setTooltipLabel(formatDuration(videoTargetDuration));
+            if (isGrabbing) {
+                handleBookmarkUpdate(marginX, progressRef.current.clientWidth);
+            }
         }
     };
+    const handleBookmarkUpdate = React.useCallback((newX, clientW) => {
+        if (!activeBookmark || !marks)
+            return;
+        const currentObsIndex = marks.findIndex((mark) => mark.id === activeBookmark.id);
+        const value = (newX / clientW) * duration + context.part.start;
+        const updatedMark = Object.assign(Object.assign({}, marks[currentObsIndex]), (!!fromEnd ? { end: value } : { start: value }));
+        const newMarks = [
+            ...marks.slice(0, currentObsIndex),
+            updatedMark,
+            ...marks.slice(currentObsIndex + 1),
+        ];
+        setMarks(newMarks);
+        onBookMarkUpdated === null || onBookMarkUpdated === void 0 ? void 0 : onBookMarkUpdated(updatedMark);
+    }, [
+        activeBookmark,
+        context.part.start,
+        duration,
+        fromEnd,
+        onBookMarkUpdated,
+        marks,
+    ]);
     React.useEffect(() => {
         var _a;
         const currentTime = ((_a = context.player) === null || _a === void 0 ? void 0 : _a.currentTime) || 0;
         setProgress(getProgress(currentTime));
-    }, [context.player]);
-    const getProgress = React.useCallback((currentTime) => {
-        const current = currentTime - (context.part.start || 0);
-        if (duration === 0)
-            return 0;
-        return (current / duration) * 100;
-    }, [context.player]);
-    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 })), jsxRuntime.jsx(TimeLabel, { current: formatDuration(relCurrentTime), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv$1, { children: jsxRuntime.jsx(AudioButton, {}) }), jsxRuntime.jsx(ControlsGroupCenter, {}), jsxRuntime.jsx(StyledDiv$1, { children: jsxRuntime.jsx(FullScreenButton, { container: container }) })] })] })));
+    }, [context.player, getProgress]);
+    React.useEffect(() => {
+        if (!marks)
+            return;
+        document.addEventListener("mouseup", reset);
+        return () => {
+            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 })] }))] })] })));
 };
 
-var _path$d;
-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 SvgPlayIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+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({
   width: 70,
   height: 70,
   viewBox: "0 0 70 70",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M60 35L17 62L17 8L60 35Z",
   fill: "#003A57"
 })));
@@ -4354,6 +4638,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%;
@@ -4420,8 +4708,7 @@ const Container$1 = styled__default["default"].div `
       }
     }
   }
-
-  background-color: ${({ theme }) => theme.palette.grey[700]};
+  background: ${({ theme }) => theme.palette.grey[100]};
 `;
 
 const UgSpinner = styled__default["default"](reactLoaders.Spinner) ``;
@@ -4449,18 +4736,15 @@ const VideoSpinner = () => (jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx
  * Used for this:
     - To display a video
  */
-const Player = React.forwardRef((props, forwardRef) => {
-    const videoRef = React.useRef(null);
-    React.useImperativeHandle(forwardRef, () => videoRef.current);
-    return (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: jsxRuntime.jsx(PlayerCore, Object.assign({ ref: videoRef }, props)) })));
-});
+const Player = React.forwardRef((props, forwardRef) => (jsxRuntime.jsx(Video__default["default"], Object.assign({ src: props.url }, props, { children: jsxRuntime.jsx(PlayerCore, Object.assign({ ref: forwardRef }, props)) }))));
 const PlayerCore = React.forwardRef((props, forwardRef) => {
     var _a;
     const { context, togglePlay, setIsPlaying } = Video.useVideoContext();
+    const { onCutHandler, bookmarks, isCutting } = 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);
+    React.useImperativeHandle(forwardRef, () => videoRef, [videoRef]);
     React.useEffect(() => {
         if (videoRef) {
             videoRef.addEventListener("pause", () => {
@@ -4474,8 +4758,8 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
                 });
             }
         };
-    }, [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(Controls, { container: containerRef.current })] })));
+    }, [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 ChatBoxContainer = styled__default["default"].div `
@@ -4499,7 +4783,7 @@ const ChatBoxContainer = styled__default["default"].div `
 const CommentBox = (_a) => {
     var { placeholderOptions } = _a, props = __rest(_a, ["placeholderOptions"]);
     const { children, hasFloatingMenu, hasButtonsMenu, bubbleOptions, i18n } = props;
-    const { editor, setEditor, mentionableUsers, triggerSave, thumbnails, addThumbnails } = useChatContext();
+    const { editor, setEditor, mentionableUsers, triggerSave, thumbnails, addThumbnails, } = useChatContext();
     const { addToast } = useToast();
     const [isOpen, setIsOpen] = React.useState(false);
     const [selectedImage, setSelectedImage] = React.useState({});
@@ -4536,12 +4820,15 @@ const CommentBox = (_a) => {
                     return false;
                 event.preventDefault();
                 const files = Array.from(event.dataTransfer.files).map((file) => {
-                    return Object.assign(file, { isLoadingMedia: false });
+                    return Object.assign(file, {
+                        isLoadingMedia: false,
+                        internal_id: uuid.v4(),
+                    });
                 });
-                const wronfFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
-                if (wronfFiles.length > 0) {
-                    for (const file of wronfFiles) {
-                        addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: 'top' });
+                const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
+                if (wrongFiles.length > 0) {
+                    for (const file of wrongFiles) {
+                        addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: "top" });
                     }
                 }
                 const mediaFiles = files.filter((file) => /^(image|video)\//.test(file.type));
@@ -4550,41 +4837,28 @@ const CommentBox = (_a) => {
                 addThumbnails({ files: mediaFiles });
                 return false;
             },
-            /*handlePaste: (view, event, slice) => {
-              if (!event.clipboardData || !event.clipboardData.items) return false;
-      
-              event.preventDefault();
-      
-              const items = Array.from(event.clipboardData.items);
-      
-              const imageItems = items.filter(
-                (item) => item.type && item.type.startsWith("image/")
-              );
-              const textItem = items.find((item) => item.type === "text/plain");
-      
-              if (imageItems.length > 0) {
-                imageItems.forEach((imageItem) => {
-                  const file = imageItem.getAsFile();
-                  if (file) {
-                    const imageUrl = URL.createObjectURL(file);
-                    const node = view.state.schema.nodes.image.create({
-                      src: imageUrl,
+            handlePaste: (view, event, slice) => {
+                if (!event.clipboardData || !event.clipboardData.items)
+                    return false;
+                event.preventDefault();
+                const files = Array.from(event.clipboardData.files).map((file) => {
+                    return Object.assign(file, {
+                        isLoadingMedia: false,
+                        internal_id: uuid.v4(),
                     });
-                    const transaction = view.state.tr.replaceSelectionWith(node);
-                    view.dispatch(transaction);
-                  }
                 });
-              } else if (textItem) {
-                textItem.getAsString(async (text) => {
-                  const node = view.state.schema.text(text);
-                  const tr = view.state.tr;
-                  tr.replaceSelectionWith(node);
-                  view.dispatch(tr);
-                });
-              }
-      
-              return true;
-            },*/
+                const wrongFiles = files.filter((file) => !/^(image|video)\//.test(file.type));
+                if (wrongFiles.length > 0) {
+                    for (const file of wrongFiles) {
+                        addToast(({ close }) => (jsxRuntime.jsx(Notification, { onClose: close, type: "error", message: `${props.messageBadFileFormat} - ${file.name}`, isPrimary: true })), { placement: "top" });
+                    }
+                }
+                const mediaFiles = files.filter((file) => /^(image|video)\//.test(file.type));
+                if (mediaFiles.length === 0)
+                    return false;
+                addThumbnails({ files: mediaFiles });
+                return false;
+            },
         } }, props));
     const onKeyDown = (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
@@ -4599,26 +4873,11 @@ const CommentBox = (_a) => {
     const mediaFiles = thumbnails.map((file) => {
         return Object.assign(file, { isLoadingMedia: file.isLoadingMedia });
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: selectedImage.name }), jsxRuntime.jsx(Lightbox.Body, { children: jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: mediaFiles.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: URL.createObjectURL(thumbnails[index]), alt: `media ${item.name}` })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: selectedImage.name }), jsxRuntime.jsx(Lightbox.Body, { children: jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 3 } }, { children: jsxRuntime.jsx(Slider, Object.assign({ prevArrow: jsxRuntime.jsx(Slider.PrevButton, { isBright: true }), nextArrow: jsxRuntime.jsx(Slider.NextButton, { isBright: true }), onSlideChange: slideChange, initialSlide: selectedImageIndex }, { children: mediaFiles.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type.includes("image") && (jsxRuntime.jsx("img", { src: URL.createObjectURL(item), alt: `media ${item.name}` })), item.type.includes("video") && (jsxRuntime.jsx(Player, { ref: (ref) => {
                                                 videoRefs.current.push(ref);
-                                            }, url: URL.createObjectURL(thumbnails[index]) }))] }))) })) })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), 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 })] }));
+                                            }, url: URL.createObjectURL(item) }))] }))) })) })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), 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 })] }));
 };
 
-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 SvgDownloadStroke = 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$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M1.5 15.5h13m-11-7l4.1 4.1c.2.2.5.2.7 0l4.1-4.1m-4.4 4V.5"
-})));
-
 const CommentCard = styled.styled(Card) `
   padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
@@ -4694,30 +4953,14 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     ed.setOptions({
         editable: false,
     });
-    const dowloadSelectedMedia = () => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            const response = yield fetch(selectedImage.url);
-            const blob = yield response.blob();
-            const link = document.createElement('a');
-            link.href = window.URL.createObjectURL(blob);
-            link.download = "media_" + selectedImage.id.toString() || 'downloadedFile';
-            document.body.appendChild(link);
-            link.click();
-            window.URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-        }
-        catch (error) {
-            console.error('An error occurred while downloading: ', error);
-        }
-    });
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => {
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text", style: { flexShrink: 0 } }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(CommentTitle, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", " ", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(EditorContainer$1, Object.assign({ editable: false }, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed }) })) })] })] }), jsxRuntime.jsx(Grid, { children: jsxRuntime.jsx(Row$1, Object.assign({ className: "responsive-container" }, { children: media.map((file, index) => {
                         // Check if item is an image or a video
-                        if (file.type.includes('image'))
-                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.url, index: index, showX: true, isLoadingMedia: false, clickThumbnail: () => {
+                        if (file.type.includes("image"))
+                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(ImageThumbnail, { src: file.url, index: index, showX: false, isLoadingMedia: false, clickThumbnail: () => {
                                         handleClickThumbnail(file, index);
                                     } }, index) })));
-                        if (file.type.includes('video'))
-                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.url, index: index, showX: true, isLoadingMedia: false, clickThumbnail: () => {
+                        if (file.type.includes("video"))
+                            return (jsxRuntime.jsx(Col, Object.assign({ xs: 12, sm: 4, className: "flex-3-sm" }, { children: jsxRuntime.jsx(VideoThumbnail, { src: file.url, index: index, showX: false, isLoadingMedia: false, clickThumbnail: () => {
                                         handleClickThumbnail(file, index);
                                     } }, index) })));
                         return null;
@@ -4726,7 +4969,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
                                                 }, url: item.url }))] }))) })) })), jsxRuntime.jsx(Lightbox.Body.Details, Object.assign({ style: { flex: 1 } }, { children: jsxRuntime.jsx(Comment, Object.assign({ header: header, author: {
                                         avatar: author.avatar,
                                         name: author.name,
-                                    }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }))] }), jsxRuntime.jsx(Lightbox.Footer, { children: jsxRuntime.jsxs(Button, Object.assign({ isBasic: true, onClick: dowloadSelectedMedia }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgDownloadStroke, {}) }), "Download"] })) }), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(Footer$2, { children: children })] }));
+                                    }, date: date, message: message }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("br", {}) }) })) }))] }), jsxRuntime.jsx(Lightbox.Footer, {}), jsxRuntime.jsx(Lightbox.Close, { "aria-label": "Close modal" })] }))), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };
 
 /**
@@ -5365,6 +5608,120 @@ const UgToggle = styled__default["default"](reactForms.Toggle) ``;
    **/
 const Toggle = (props) => jsxRuntime.jsx(UgToggle, Object.assign({}, props));
 
+const HighlightContext = React.createContext(null);
+const HighlightContextProvider = ({ term, children, }) => {
+    const [searchTerm, setsearchTerm] = React.useState(term !== null && term !== void 0 ? term : "");
+    React.useEffect(() => {
+        setsearchTerm(term !== null && term !== void 0 ? term : "");
+    }, [term]);
+    const HighlightContextValue = React.useMemo(() => ({
+        searchTerm,
+    }), [searchTerm]);
+    return (jsxRuntime.jsx(HighlightContext.Provider, Object.assign({ value: HighlightContextValue }, { children: children })));
+};
+const useHighlightContext = () => {
+    const context = React.useContext(HighlightContext);
+    if (!context)
+        throw new Error("Provider not found for HighlightContextProvider");
+    return context; // Now we can use the context in the component, SAFELY.
+};
+
+const StyledSearchWord = styled__default["default"].span `
+background-color: ${({ theme }) => theme.palette.product.talk};
+color: ${({ theme }) => theme.palette.grey[700]};`;
+const Searchable = ({ start, text, }) => {
+    const { searchTerm } = useHighlightContext();
+    if (searchTerm) {
+        const parts = text.split(new RegExp(`(${searchTerm})`, "gi"));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, index) => part.toLowerCase() === searchTerm.toLowerCase() ? (jsxRuntime.jsx(StyledSearchWord, { children: part }, index)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: part }))) }));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+};
+
+const StyledWord = styled__default["default"](reactTypography.Span) `
+  font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
+  padding: ${({ theme }) => theme.space.xxs} 0;
+
+  ${({ observation, theme }) => {
+    var _a, _b;
+    return observation &&
+        ` user-select: none;
+      padding: 0;
+      background-color: ${(_a = observation.hue) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
+      color: ${(_b = observation.color) !== null && _b !== void 0 ? _b : "white"};
+      box-sizing: border-box;
+      &: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;
+`;
+const WordsContainer = styled__default["default"].div `
+  box-sizing: border-box;
+  ${StyledWord}, span {
+    &::selection {
+      background-color: ${({ theme }) => getColor(theme.palette.kale, 700, undefined, 0.5)};
+    }
+  }
+`;
+/**
+ *  Use Highlight to use highlight interation on any text element
+ */
+const Highlight = (props) => {
+    const ref = React.useRef(null);
+    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;
+        }
+        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 }));
+        }
+    }, [props]);
+    React.useEffect(() => {
+        if (ref.current === null)
+            return;
+        document.addEventListener("selectionchange", handleSelectionChange);
+        return () => {
+            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 })) })));
+};
+const Word = (props) => {
+    var _a;
+    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);
+    if (props.tooltipContent !== undefined && !!observation) {
+        return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(observation), isTransparent: true }, { children: 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 })), " "] })) })));
+    }
+    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 })), " "] })));
+};
+Highlight.Word = Word;
+
 /**
  * The Dots loader communicates ongoing activity after a user takes an action.
  * It tells them that something is taking place.
@@ -6841,6 +7198,7 @@ exports.HeaderItem = HeaderItem;
 exports.HeaderItemIcon = HeaderItemIcon;
 exports.HeaderItemText = HeaderItemText;
 exports.HeaderRow = HeaderRow;
+exports.Highlight = Highlight;
 exports.Hint = Hint;
 exports.Icon = Icon;
 exports.IconButton = IconButton;