@appquality/unguess-design-system 3.1.88-beta-attachments → 3.1.88-bookmark-tooltip-changes-2

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');
@@ -37,13 +38,13 @@ var Mention = require('@tiptap/extension-mention');
 var tippy = require('tippy.js');
 var Image$2 = require('@tiptap/extension-image');
 var Dropcursor = require('@tiptap/extension-dropcursor');
+var reactGrid = require('@zendeskgarden/react-grid');
 var reactModals = require('@zendeskgarden/react-modals');
 var SlickSlider = require('react-slick');
 var Video = require('@appquality/stream-player');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
-var reactGrid = require('@zendeskgarden/react-grid');
 var formik = require('formik');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var reactPagination = require('@zendeskgarden/react-pagination');
@@ -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),
@@ -841,48 +842,48 @@ Tag.Avatar = StyledAvatar;
 Tag.Close = StyledClose;
 Tag.SecondaryText = StyledSpan;
 
-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 SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+var _path$F;
+function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+const SvgUgSquare = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19Z",
   fill: "#E80C7A"
 })));
 
-var _path$C;
-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 SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+var _path$E;
+function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+const SvgUgCircle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12 2C6.47 2 2 6.47 2 12C2 17.53 6.47 22 12 22C17.53 22 22 17.53 22 12C22 6.47 17.53 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z",
   fill: "#FFCD1A"
 })));
 
-var _path$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 SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+var _path$D;
+function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+const SvgUgTriangle = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M11.9993 7.32625L18.3893 17.5563H5.60929L11.9993 7.32625ZM11.1493 4.91625L2.94929 18.0262C2.53929 18.6962 3.01929 19.5563 3.79929 19.5563H20.1993C20.9893 19.5563 21.4593 18.6962 21.0493 18.0262L12.8493 4.91625C12.4593 4.28625 11.5393 4.28625 11.1493 4.91625Z",
   fill: "#7B0DFF"
 })));
 
-var _rect$4, _path$A, _path2$b, _path3$4;
-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 SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+var _rect$4, _path$C, _path2$c, _path3$4;
+function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -893,10 +894,10 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M20.6953 5.73905C21.0148 5.41953 21.0148 4.90149 20.6953 4.58197C20.3758 4.26245 19.8577 4.26245 19.5382 4.58197L11.88 12.2402L10.0849 9.95981C9.80539 9.60476 9.29098 9.54352 8.93593 9.82303C8.58088 10.1025 8.51963 10.6169 8.79914 10.972L11.1642 13.9763C11.3089 14.16 11.5252 14.2731 11.7586 14.2869C11.9921 14.3008 12.2203 14.2141 12.3856 14.0487L20.6953 5.73905Z",
   fill: "#50BF95"
-})), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M3 12C3 7.02944 7.02944 3 12 3C13.3602 3 14.6521 3.3023 15.8102 3.84415C16.2195 4.03565 16.396 4.52268 16.2045 4.93196C16.013 5.34125 15.526 5.5178 15.1167 5.3263C14.1712 4.88391 13.1156 4.63636 12 4.63636C7.93318 4.63636 4.63636 7.93318 4.63636 12C4.63636 16.0668 7.93318 19.3636 12 19.3636C16.0668 19.3636 19.3636 16.0668 19.3636 12C19.3636 11.3631 19.283 10.7462 19.1317 10.1585C19.0191 9.72084 19.2826 9.27479 19.7202 9.16218C20.1578 9.04957 20.6038 9.31303 20.7165 9.75064C20.9017 10.4705 21 11.2243 21 12C21 16.9705 16.9705 21 12 21C7.02944 21 3 16.9705 3 12Z",
   fill: "#50BF95"
 })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -904,9 +905,9 @@ const SvgCampaignCompleted = props => /*#__PURE__*/React__namespace.createElemen
   fill: "#007345"
 })));
 
-var _rect$3, _path$z, _path2$a;
-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 SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+var _rect$3, _path$B, _path2$b;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -917,21 +918,21 @@ const SvgCampaignLocked = props => /*#__PURE__*/React__namespace.createElement("
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M13.55 19.0875C14.25 19.7875 15.1063 20.1375 16.1188 20.1375C17.1313 20.1375 17.9875 19.7875 18.6875 19.0875C19.3875 18.3875 19.7375 17.5312 19.7375 16.5187C19.7375 15.5062 19.3875 14.65 18.6875 13.95C17.9875 13.25 17.1313 12.9 16.1188 12.9C15.1063 12.9 14.25 13.25 13.55 13.95C12.85 14.65 12.5 15.5062 12.5 16.5187C12.5 17.5312 12.85 18.3875 13.55 19.0875ZM17.5062 18.2812C17.4187 18.2812 17.3375 18.25 17.2625 18.1875L15.7438 16.7812C15.6813 16.6687 15.65 16.6 15.65 16.575V14.55C15.65 14.4375 15.6875 14.3437 15.7625 14.2687C15.8375 14.1937 15.9313 14.1562 16.0438 14.1562C16.1563 14.1562 16.25 14.1937 16.325 14.2687C16.4 14.3437 16.4375 14.4375 16.4375 14.55V16.4813L17.7313 17.6625C17.8063 17.725 17.8469 17.8062 17.8531 17.9062C17.8594 18.0063 17.825 18.0938 17.75 18.1688C17.675 18.2438 17.5937 18.2812 17.5062 18.2812Z",
   fill: "#D1820A"
-})), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M6.125 19.5C5.8125 19.5 5.54688 19.3906 5.32812 19.1719C5.10938 18.9531 5 18.6875 5 18.375V10.2375C5 9.925 5.10938 9.65937 5.32812 9.44062C5.54688 9.22187 5.8125 9.1125 6.125 9.1125H7.4375V7.36875C7.4375 6.36875 7.78437 5.51562 8.47812 4.80937C9.17188 4.10312 10.0125 3.75 11 3.75C11.9875 3.75 12.8281 4.10312 13.5219 4.80937C14.2156 5.51562 14.5625 6.36875 14.5625 7.36875V9.1125H15.875C16.1875 9.1125 16.4531 9.22187 16.6719 9.44062C16.8906 9.65937 17 9.925 17 10.2375V11.8687C16.8125 11.8187 16.625 11.7875 16.4375 11.775C16.25 11.7625 16.0625 11.7625 15.875 11.775C14.6 11.825 13.5312 12.3094 12.6688 13.2281C11.8063 14.1469 11.375 15.2437 11.375 16.5187C11.375 17.0687 11.4688 17.5969 11.6562 18.1031C11.8438 18.6094 12.1063 19.075 12.4438 19.5H6.125ZM13.4375 9.1125H8.5625V7.36875C8.5625 6.68125 8.8 6.09375 9.275 5.60625C9.75 5.11875 10.325 4.875 11 4.875C11.675 4.875 12.25 5.11875 12.725 5.60625C13.2 6.09375 13.4375 6.68125 13.4375 7.36875V9.1125Z",
   fill: "#F4AC1A"
 })));
 
-var _rect$2, _path$y, _path2$9;
-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 SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+var _rect$2, _path$A, _path2$a;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -942,13 +943,13 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M11.2266 13.0313H14.997M11.2266 9.26075V13.0313V9.26075ZM11.2266 13.0313L20.121 5.03906L11.2266 13.0313Z",
   stroke: "#024780",
   strokeWidth: 1.5,
   strokeLinecap: "round",
   strokeLinejoin: "round"
-})), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M15.4918 4.52347C14.4312 4.02725 13.2477 3.75003 11.9995 3.75003C7.44316 3.75003 3.74951 7.44368 3.74951 12C3.74951 16.5564 7.44316 20.25 11.9995 20.25C16.5558 20.25 20.2495 16.5564 20.2495 12C20.2495 11.2878 20.1593 10.5968 19.9896 9.93753",
   stroke: "#53AFFA",
   strokeWidth: 1.5,
@@ -956,9 +957,9 @@ const SvgCampaignIncoming = props => /*#__PURE__*/React__namespace.createElement
   strokeLinejoin: "round"
 })));
 
-var _rect$1, _path$x, _path2$8, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$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 SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+var _rect$1, _path$z, _path2$9, _path3$3, _path4$1, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
   width: 24,
   height: 24,
   viewBox: "0 0 24 24",
@@ -969,10 +970,10 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   height: 24,
   rx: 12,
   fill: "#F6F6F8"
-})), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M13.059 16.7647C13.059 16.1799 12.585 15.7059 12.0002 15.7059C11.4154 15.7059 10.9414 16.1799 10.9414 16.7647V19.9412C10.9414 20.5259 11.4154 21 12.0002 21C12.585 21 13.059 20.5259 13.059 19.9412V16.7647Z",
   fill: "#D1820A"
-})), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M16.1149 14.6183C15.7014 14.2048 15.031 14.2048 14.6175 14.6183C14.204 15.0318 14.204 15.7022 14.6175 16.1157L16.8649 18.3631C17.2783 18.7766 17.9488 18.7766 18.3623 18.3631C18.7757 17.9496 18.7757 17.2792 18.3623 16.8657L16.1149 14.6183Z",
   fill: "#D1820A"
 })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1001,25 +1002,25 @@ const SvgCampaignProgress = props => /*#__PURE__*/React__namespace.createElement
   fill: "#FFB65A"
 })));
 
-var _g$b, _path$w, _path2$7, _path3$2, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
-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 SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+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,
   d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
   fill: "#50BF95"
-}))), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M12.487 3.19652C8.68003 3.19652 5.59895 6.27761 5.59895 10.0846C5.59895 10.2597 5.59895 10.4348 5.62438 10.5855C5.29857 11.1863 4.82307 12.013 4.24678 12.514C3.82117 12.8897 3.92096 13.2908 3.97085 13.4405C4.09609 13.7663 4.44635 14.0413 5.02265 14.2418C5.22322 14.3172 5.44825 14.3671 5.64883 14.417L5.67427 16.8464C5.67427 17.7984 6.47559 18.6251 7.45304 18.6251L8.93044 18.1496L9.08111 19.0263C9.18091 19.6026 9.68185 20.0282 10.2836 20.0282C10.3589 20.0282 10.4343 20.0282 10.5086 20.0028L15.1424 19.177C15.8185 19.0517 16.2441 18.4256 16.1443 17.7495L15.8185 16.1214C17.9974 14.9189 19.375 12.5892 19.375 10.0845C19.375 6.30279 16.2696 3.19641 12.4869 3.19641L12.487 3.19652Z",
   fill: "#2B8473",
   stroke: "#2B8473"
-})), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M6.39343 10.7683V10.1215H8.06761V10.7683H6.39343Z",
@@ -1071,21 +1072,21 @@ const SvgCampaignExperiential = props => /*#__PURE__*/React__namespace.createEle
   fill: "#ECF4F2"
 })));
 
-var _g$a, _path$v;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
-const SvgCampaignFunctional = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+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,
   d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
   fill: "#003A57"
-}))), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+}))), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
   d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
   fill: "#003A57"
 })));
@@ -1946,15 +1947,15 @@ const WaffleChart = ({ height, width, data, total, tooltip, }) => {
             } }) })));
 };
 
-var _g$9, _defs$4;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
-const SvgSentiment1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+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$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 SvgSentiment2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+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$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 SvgSentiment3 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+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$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 SvgSentiment4 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+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$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 SvgSentiment5 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+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,10 +2314,9 @@ 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 [isMediaUploading, setIsMediaUploading] = useState<boolean>(false);
     const getMentions = (editor) => {
         const result = [];
         editor.state.doc.descendants((node) => {
@@ -2336,6 +2336,7 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
         editor,
         setEditor,
         thumbnails,
+        setThumbnails,
         afterUploadCallback: (failed) => {
             setThumbnails(thumbnails.map((file) => {
                 if (failed.includes(file.name)) {
@@ -2349,15 +2350,13 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
                 return file;
             }));
         },
-        //isMediaUploading, // Incluso nel valore del contesto
-        //setIsMediaUploading, // Incluso nel valore del contesto
-        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;
@@ -2373,7 +2372,19 @@ const ChatContextProvider = ({ onSave, onFileUpload, setMentionableUsers, childr
                 });
             }
         },
-        removeThumbnail: (index) => setThumbnails(thumbnails.filter((_, i) => i !== index)),
+        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));
+        },
         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 })));
 };
@@ -2725,28 +2737,96 @@ const ChatTitle = styled__default["default"](Title$1) `
   padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
 `;
 
-var _path$u;
-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 SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+const UgClose$1 = styled__default["default"](reactNotifications.Close) `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({ theme }) => theme.space.xl};
+    height: ${({ theme }) => theme.space.xl};
+`;
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
+
+const NOTIFICATION_COMPONENT_ID = "notifications.notification";
+const CLOSE_COMPONENT_ID = "notifications.notification.close";
+const CLOSE_ICON_COMPONENT_ID = "notifications.notification.close-icon";
+const TITLE_COMPONENT_ID = "notifications.notification.title";
+const UgClose = styled__default["default"](Close).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_ICON_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_ICON_COMPONENT_ID, props)};
+`;
+const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
+`;
+const UgTitle = styled__default["default"](Title$1).attrs((props) => {
+    var _a;
+    return ({
+        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : TITLE_COMPONENT_ID,
+    });
+}) `
+  ${(props) => reactTheming.retrieveComponentStyles(TITLE_COMPONENT_ID, props)};
+`;
+const UgNotification = styled__default["default"](reactNotifications.Notification) `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: ${({ theme }) => theme.space.md};
+  white-space: pre;
+
+  ${UgAnchor} {
+    flex-shrink: 0;
+    margin-left: ${({ theme }) => theme.space.md};
+  }
+
+  ${(props) => reactTheming.retrieveComponentStyles(NOTIFICATION_COMPONENT_ID, props)};
+`;
+/**
+ * A Notification is a passive status update that keeps users informed of system progress.
+ * <hr>
+ * Used for this:
+    - For a passive status update about user or system activity
+ */
+const Notification = (_a) => {
+    var { closeText, message, onClose, type, isPrimary, isRegular } = _a, props = __rest(_a, ["closeText", "message", "onClose", "type", "isPrimary", "isRegular"]);
+    return (jsxRuntime.jsxs(UgNotification, Object.assign({ type: type, isPrimary: isPrimary }, props, { children: [jsxRuntime.jsx(UgTitle, Object.assign({ isRegular: isRegular, type: type, isPrimary: isPrimary }, { children: message })), jsxRuntime.jsx(UgAnchor, Object.assign({ type: type, isPrimary: isPrimary, onClick: onClose }, { children: closeText !== null && closeText !== void 0 ? closeText : jsxRuntime.jsx(UgClose, {}) }))] })));
+};
+// ToastProvider
+const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props)));
+const useToast = reactNotifications.useToast;
+
+var _path$w;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+const SvgBoldFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
 })));
 
-var _path$t;
-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 SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+var _path$v;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2754,18 +2834,18 @@ const SvgItalicFill = props => /*#__PURE__*/React__namespace.createElement("svg"
   d: "M8 1h3M9.5 1l-3 14M5 15h3"
 })));
 
-var _path$s, _path2$6;
-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 SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+var _path$u, _path2$7;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+const SvgQuoteFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
-})), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+})), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -2773,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$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 SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+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,
@@ -2801,15 +2881,15 @@ const SvgH1Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   transform: "translate(474.469 331)"
 }))));
 
-var _g$3;
-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 SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+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,
@@ -2829,15 +2909,15 @@ const SvgH2Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   transform: "translate(469.359 331)"
 }))));
 
-var _g$2;
-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 SvgH3Fill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+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,
@@ -2898,64 +2978,71 @@ 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$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 SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+var _path$t;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+const SvgBoldStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M7 1c2.176 0 4 1.824 4 4 0 1.315-.666 2.501-1.673 3.234C10.869 8.792 12 10.287 12 12c0 2.176-1.824 4-4 4H3.5a.5.5 0 01-.5-.5v-14a.5.5 0 01.5-.5H7zM4 15h4c1.624 0 3-1.376 3-3S9.624 9 8 9H4v6zM7 2H4v6h3c1.624 0 3-1.376 3-3S8.624 2 7 2z"
 })));
 
-var _path$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 SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+var _path$s;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+const SvgItalicStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M7.5 1.5h3M9 1.5l-3 14m-1.5 0h3"
 })));
 
-var _path$p;
-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 SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+var _path$r;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+const SvgAtStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   role: "presentation"
-}, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   d: "M11.5 4.5V8h0A3.5 3.5 0 018 11.5h0A3.5 3.5 0 014.5 8h0A3.5 3.5 0 018 4.5h0A3.5 3.5 0 0111.5 8h0v1.5a2 2 0 002 2h0a2 2 0 002-2V8h0A7.5 7.5 0 008 .5h0A7.5 7.5 0 00.5 8h0A7.5 7.5 0 008 15.5h3.41"
 })));
 
-var _path$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 SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+var _path$q;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+const SvgClipboard = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   role: "presentation"
-}, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -3016,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;
@@ -3205,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 }) => {
@@ -3277,131 +3367,210 @@ const editorExtensions = ({ placeholderOptions, mentionableUsers, }) => {
     ];
 };
 
+var _circle$3, _path$p, _path2$6;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+const SvgRemoveMediaIcon = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  width: 56,
+  height: 56,
+  viewBox: "0 0 56 56",
+  fill: "#68737d",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _circle$3 || (_circle$3 = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 28,
+  cy: 28,
+  r: 28,
+  fill: "#edf7ff"
+})), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M16.929 16.929L39.071 39.071",
+  stroke: "currentColor",
+  strokeWidth: 4
+})), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M16.929 39.071L39.071 16.929",
+  stroke: "currentColor",
+  strokeWidth: 4
+})));
+
 const StyledDeleteThumbnailX = styled__default["default"].div `
   position: absolute;
   top: 0;
   right: 0;
-  color: white;
-  cursor: pointer;
-  font-size: 15px;
-  background-color: gray;
-  border-radius: 50%;
-  width: 35px;
-  height: 35px;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
   opacity: 0;
+  z-index: 2;
 `;
-const DeleteThumbnailX = ({ content, deleteThumbnail }) => {
-    return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail", onClick: (e) => deleteThumbnail(e) }, { children: jsxRuntime.jsx("span", { children: content }) })));
+const DeleteThumbnailX = ({ deleteThumbnail }) => {
+    return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail" }, { children: jsxRuntime.jsx(SvgRemoveMediaIcon, { onClick: (e) => deleteThumbnail(e) }) })));
 };
 
-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 SvgPlayFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$n || (_path$n = /*#__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"
-})));
-
-const StyledThumbnail = styled__default["default"].div `
-  border-radius: 4%;
-  height: 90px;
-  width: 80px;
-  justify-content: center;
-  padding: 1px;
-  position: relative;
-  cursor: pointer;
-  background-color: rgb(209, 207, 207);
-  img {
-    width: 100%;
-    height: 100%;
-    border-radius: 4%;
-  }
-  .thumbnailLabel {
-    position: absolute;
-    bottom: 1px;
-    left: 5px;
-    color: black;
-    font-size: 10px;
-    font-weight: 100;
+const ImageCard = styled__default["default"](SpecialCard) `
+  padding: 0;
+  :hover .deleteThumbnail {
+    opacity: 1;
   }
 `;
-const Thumbnail = ({ clickThumbnail, src, label, index = 0, removeThumbnail, showX = true, showLabel = false, mediaType, isLoadingMedia = false, isError = false, }) => {
-    //const { isMediaUploading, setIsMediaUploading } = useChatContext();
+const Preview$1 = styled__default["default"].div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  width: 100%;
+  background-image: url(${(props) => props.url});
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+`;
+const ImageThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
             removeThumbnail(index);
     };
-    return (jsxRuntime.jsxs(StyledThumbnail, Object.assign({ className: "singleThumbnail", onClick: clickThumbnail }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { content: "╳", deleteThumbnail: (e) => handleCancel(e) })), isLoadingMedia && (jsxRuntime.jsx(reactLoaders.Spinner, { style: { position: "absolute", top: "39%", left: "37%" }, size: "large" })), isError && (
+    return (jsxRuntime.jsxs(ImageCard, Object.assign({ onClick: clickThumbnail }, { children: [isLoadingMedia && (jsxRuntime.jsx(Preview$1, Object.assign({ url: "" }, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, size: "large" }) }))), isError && (
             // todo: add error icon
-            jsxRuntime.jsx("span", { children: "error uploading media" })), !isLoadingMedia && mediaType.includes("image") && (jsxRuntime.jsx("img", { src: src, alt: label })), !isLoadingMedia && mediaType.includes("video") && (jsxRuntime.jsxs("span", Object.assign({ style: {
-                    width: "100%",
-                    height: "100%",
-                    backgroundColor: "gray",
-                    zIndex: "-1",
-                    opacity: "0.5",
-                    color: "black",
-                } }, { children: [jsxRuntime.jsx(SvgPlayFill, { style: {
-                            position: "absolute",
-                            top: "35%",
-                            left: "35%",
-                            width: "30px",
-                            height: "30px",
-                            backgroundColor: "white",
-                            borderRadius: "50%",
-                        } }), jsxRuntime.jsx("video", Object.assign({ width: "80", height: "89" }, { children: jsxRuntime.jsx("source", { src: src, type: "video/mp4" }) }))] }))), showLabel && jsxRuntime.jsx("span", Object.assign({ className: "thumbnailLabel" }, { children: label }))] })));
+            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) })) })))] })));
 };
 
-const StyledThumbnailContainer$1 = styled.styled.div `
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  overflow-y: scroll;
-  justify-items: center;
-  gap: 9px;
-  background-color: white;
-  width: 100%;
-  margin-top: 10px;
-  height: 150px;
-  .singleThumbnail:hover .deleteThumbnail {
-    opacity: 1 !important;
+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$2 || (_circle$2 = /*#__PURE__*/React__namespace.createElement("circle", {
+  cx: 28,
+  cy: 28,
+  r: 28,
+  fill: "white"
+})), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M47 28L18.5 44.4545L18.5 11.5455L47 28Z",
+  fill: "currentColor"
+})));
+
+const VideoCard = styled__default["default"](SpecialCard) `
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+
+  &:hover .deleteThumbnail {
+    opacity: 1;
     z-index: 9999;
   }
-`;
-const ThumbnailContainer = ({ openLightbox }) => {
-    const { thumbnails, removeThumbnail } = useChatContext();
-    if (!thumbnails || thumbnails.length === 0) {
-        return null;
-    }
-    /* const mediaFiles: File[] = thumbnails.map((file) => {
-      // Crea un nuovo oggetto File senza la proprietà isLoadingMedia
-      const blob = new Blob([file], { type: file.type });
-  
-      // Creiamo un nuovo File utilizzando il Blob e mantenendo il nome del file originale
-      const nf = new File([blob], file.name, { type: file.type });
-  
-      return nf;
-    });*/
-    const mediaFiles = [];
-    thumbnails.forEach((file) => {
-        mediaFiles.push({
-            fileName: file.name,
-            fileType: file.type,
-            status: file.isLoadingMedia ? "uploading" : "success",
-            previewUrl: URL.createObjectURL(file),
-        });
-    });
-    console.log("mediafiles", mediaFiles);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledThumbnailContainer$1, Object.assign({ className: "thumbnailContainer" }, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, label: file.fileName, index: index, showX: true, showLabel: false, mediaType: file.fileType, isLoadingMedia: file.status === "uploading", removeThumbnail: () => removeThumbnail(index), clickThumbnail: () => {
-                    openLightbox(thumbnails[index], index);
-                } }, index))) })) }));
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${({ theme }) => theme.palette.grey[800]};
+    opacity: 0.3;
+    z-index: 1;
+  }
+
+  > svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 32px;
+    height: 32px;
+    z-index: 2;
+  }
+`;
+const Preview = styled__default["default"].div `
+  padding: ${({ theme }) => theme.space.md};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  width: 100%;
+
+  > video {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const VideoThumbnail = ({ src, index = 0, removeThumbnail, clickThumbnail, showX = true, isLoadingMedia = true, isError = false, }) => {
+    const handleCancel = (e) => {
+        e.stopPropagation();
+        if (removeThumbnail)
+            removeThumbnail(index);
+    };
+    return (jsxRuntime.jsxs(VideoCard, Object.assign({ onClick: clickThumbnail }, { children: [isLoadingMedia && (jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, size: "large" }) })), isError && (
+            // todo: add error icon
+            jsxRuntime.jsx("span", { children: "error uploading media" })), !isLoadingMedia && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })) }), jsxRuntime.jsx(SvgVideoPlayIcon, {})] }))] })));
+};
+
+const UgGrid = styled__default["default"](reactGrid.Grid) `
+  padding-left: 0;
+  padding-right: 0;
+`;
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
+
+const Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
+
+const StyledCol$1 = styled__default["default"](reactGrid.Col) `
+  margin-bottom: ${theme.space.lg};
+
+  @media screen and (max-width: ${theme.breakpoints.sm}) {
+    margin-bottom: ${theme.space.md};
+  }
+`;
+const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
+
+const ThumbnailContainer = ({ openLightbox }) => {
+    const { thumbnails, removeThumbnail, onDeleteThumbnail } = useChatContext();
+    const mediaFiles = React.useMemo(() => {
+        return thumbnails.map((file) => ({
+            fileName: file.name,
+            fileType: file.type,
+            previewUrl: URL.createObjectURL(file),
+            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, 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.isLoadingMedia, removeThumbnail: () => {
+                                removeThumbnail(index);
+                                onDeleteThumbnail(file.internal_id);
+                            }, clickThumbnail: () => {
+                                openLightbox(thumbnails[index], index);
+                            } }, index) })));
+                return null;
+            }) })) }));
 };
 
 const UgModalBody = styled__default["default"](reactModals.Body) `
@@ -3470,28 +3639,28 @@ Lightbox.Body = ModalBody; // Includes Main and Details
 Lightbox.Footer = Footer$3;
 Lightbox.Close = reactModals.Close;
 
-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 SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+var _path$n;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+const SvgChevronLeftStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
   focusable: "false",
   viewBox: "0 0 16 16"
-}, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+}, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
 })));
 
-var _path$l;
-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 SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+var _path$m;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+const SvgChevronRightStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
   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$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "currentColor",
   d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
 })));
@@ -3714,81 +3883,279 @@ 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))));
+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"
+})));
 
-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$k, _path2$4;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 16,
+  height: 16,
+  focusable: "false",
+  viewBox: "0 0 16 16"
+}, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M9 15.29c-.26 0-.51-.1-.71-.29l-4-4H1c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.29l4-4a1.002 1.002 0 011.71.71V14.3a.986.986 0 01-1 .99z"
+})), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  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"
+})));
+
+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, {}) })));
 };
 
-var _g$1;
+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 StyledTooltip$1 = styled.styled(Tooltip) `
+  margin-bottom: ${({ theme }) => theme.space.sm};
+  color: ${({ tooltipColor }) => tooltipColor};
+
+`;
+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, tooltipContent } = props;
+    const { context } = Video.useVideoContext();
+    const videoStart = context.part.start || 0;
+    const videoEnd = context.part.end || ((_a = context.player) === null || _a === void 0 ? void 0 : _a.totalTime) || 0;
+    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(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, 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", {
@@ -3796,20 +4163,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", {
@@ -3817,18 +4184,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"
 })));
@@ -3858,8 +4264,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();
@@ -3882,133 +4289,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"
-})));
-
-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);
+  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 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",
@@ -4051,7 +4411,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 ||
@@ -4076,31 +4436,78 @@ 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;
+  font-size: ${({ theme }) => theme.fontSizes.xs};
+  align-items: center;
+  justify-content: center;
+  min-height: 14px;
+`;
+const PlayerTooltip = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(Wrapper$1, Object.assign({}, props, { children: jsxRuntime.jsx(Content$1, { children: children }) })));
+};
+
 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;
 `;
@@ -4119,18 +4526,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;
@@ -4138,12 +4550,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;
@@ -4154,31 +4572,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"
 })));
@@ -4199,6 +4644,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%;
@@ -4265,8 +4714,7 @@ const Container$1 = styled__default["default"].div `
       }
     }
   }
-
-  background-color: ${({ theme }) => theme.palette.grey[700]};
+  background: ${({ theme }) => theme.palette.grey[400]};
 `;
 
 const UgSpinner = styled__default["default"](reactLoaders.Spinner) ``;
@@ -4294,18 +4742,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", () => {
@@ -4319,8 +4764,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 `
@@ -4344,7 +4789,8 @@ 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({});
     const [selectedImageIndex, setSelectedImageIndex] = React.useState(0);
@@ -4380,65 +4826,45 @@ 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(),
+                    });
                 });
-                /*for (const f of files) {
-                  if (!/^(image|video)\//.test(f.type)) {
-                    addToast(
-                      ({ close }) => (
-                        <Notification
-                          onClose={close}
-                          type="error"
-                          message={"File type not supported"}
-                          closeText={"Close"}
-                          isPrimary
-                        />
-                      ),
-                      { 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));
                 if (mediaFiles.length === 0)
                     return false;
                 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") {
@@ -4453,26 +4879,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]};
@@ -4512,16 +4923,6 @@ const Grey600Span = styled.styled.span `
 const Grey800Span = styled.styled.span `
   color: ${({ theme }) => theme.palette.grey[800]};
 `;
-const StyledThumbnailContainer = styled.styled.div `
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  overflow-y: scroll;
-  justify-items: center;
-  gap: 9px;
-  background-color: inherit;
-  margin-top: 10px;
-  height: auto;
-`;
 const Comment = ({ author, message, children, date, media = [], header, }) => {
     var _a, _b;
     const { mentionableUsers } = useChatContext();
@@ -4541,6 +4942,7 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     };
     const videoRefs = React.useRef([]);
     const slideChange = React.useCallback((index) => {
+        setSelectedImage(media[index]);
         setSelectedImageIndex(index);
         videoRefs.current.forEach((ref) => {
             if (ref) {
@@ -4557,14 +4959,23 @@ const Comment = ({ author, message, children, date, media = [], header, }) => {
     ed.setOptions({
         editable: false,
     });
-    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(StyledThumbnailContainer, { children: media.map((item, index) => (jsxRuntime.jsx(Thumbnail, { isLoadingMedia: false, src: item.url, label: "", showLabel: false, showX: false, mediaType: item.type, clickThumbnail: () => {
-                        handleClickThumbnail(item, index);
-                    } }))) }), isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })) }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 2 } }, { 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: media.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type === "image" && (jsxRuntime.jsx("img", { src: item.url, alt: `{{${item.url}}}` })), item.type === "video" && (jsxRuntime.jsx(Player, { ref: (ref) => {
+    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: 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: false, isLoadingMedia: false, clickThumbnail: () => {
+                                        handleClickThumbnail(file, index);
+                                    } }, index) })));
+                        return null;
+                    }) })) }), isOpen && selectedImage && (jsxRuntime.jsxs(Lightbox, Object.assign({ onClose: closeLightbox }, { children: [jsxRuntime.jsx(Lightbox.Header, { children: jsxRuntime.jsxs(reactTypography.MD, Object.assign({ isBold: true }, { children: [jsxRuntime.jsx(Grey600Span, { children: header && header.title }), header && header.message && (jsxRuntime.jsxs(Grey800Span, { children: [" | ", header.message] }))] })) }), jsxRuntime.jsxs(Lightbox.Body, { children: [jsxRuntime.jsx(Lightbox.Body.Main, Object.assign({ style: { flex: 2 } }, { 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: media.map((item, index) => (jsxRuntime.jsxs(Slider.Slide, { children: [item.type === "image" && (jsxRuntime.jsx("img", { src: item.url, alt: `{{${item.url}}}` })), item.type === "video" && (jsxRuntime.jsx(Player, { ref: (ref) => {
                                                     videoRefs.current.push(ref);
                                                 }, 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: () => alert("download") }, { 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 })] }));
 };
 
 /**
@@ -4585,18 +4996,6 @@ Chat.Comments = MessagesContainer;
 Chat.Input = CommentBox;
 Chat.Footer = ChatFooter;
 
-const UgClose$1 = styled__default["default"](reactNotifications.Close) `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${({ theme }) => theme.space.xl};
-    height: ${({ theme }) => theme.space.xl};
-`;
-/**
- * Title is a basic component used to display a title. Often used in card headers.
- */
-const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
-
 var _circle;
 function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 const SvgCircleFullFill = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
@@ -5215,28 +5614,118 @@ const UgToggle = styled__default["default"](reactForms.Toggle) ``;
    **/
 const Toggle = (props) => jsxRuntime.jsx(UgToggle, Object.assign({}, props));
 
-const StyledCol$1 = styled__default["default"](reactGrid.Col) `
-  margin-bottom: ${theme.space.lg};
+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.
+};
 
-  @media screen and (max-width: ${theme.breakpoints.sm}) {
-    margin-bottom: ${theme.space.md};
-  }
-`;
-const Col = (props) => jsxRuntime.jsx(StyledCol$1, Object.assign({}, props));
+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 Row$1 = (props) => jsxRuntime.jsx(reactGrid.Row, Object.assign({}, props));
+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;
 
-const UgGrid = styled__default["default"](reactGrid.Grid) `
-  padding-left: 0;
-  padding-right: 0;
+  ${({ observation, theme }) => {
+    var _a, _b;
+    return observation &&
+        ` user-select: none;
+      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)};
+    }
+  }
 `;
 /**
- * The Grid component is a framework for building modular layouts.
- * <hr>
- * Used for this:
-    - To structure the layout of a page
+ *  Use Highlight to use highlight interation on any text element
  */
-const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
+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.
@@ -5729,62 +6218,6 @@ NavAccordionItem.Label = AccordionItemLabel;
  */
 const Chrome = (props) => jsxRuntime.jsx(reactChrome.Chrome, Object.assign({}, props));
 
-const NOTIFICATION_COMPONENT_ID = "notifications.notification";
-const CLOSE_COMPONENT_ID = "notifications.notification.close";
-const CLOSE_ICON_COMPONENT_ID = "notifications.notification.close-icon";
-const TITLE_COMPONENT_ID = "notifications.notification.title";
-const UgClose = styled__default["default"](Close).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_ICON_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_ICON_COMPONENT_ID, props)};
-`;
-const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : CLOSE_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
-`;
-const UgTitle = styled__default["default"](Title$1).attrs((props) => {
-    var _a;
-    return ({
-        "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : TITLE_COMPONENT_ID,
-    });
-}) `
-  ${(props) => reactTheming.retrieveComponentStyles(TITLE_COMPONENT_ID, props)};
-`;
-const UgNotification = styled__default["default"](reactNotifications.Notification) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: ${({ theme }) => theme.space.md};
-  white-space: pre;
-
-  ${UgAnchor} {
-    flex-shrink: 0;
-    margin-left: ${({ theme }) => theme.space.md};
-  }
-
-  ${(props) => reactTheming.retrieveComponentStyles(NOTIFICATION_COMPONENT_ID, props)};
-`;
-/**
- * A Notification is a passive status update that keeps users informed of system progress.
- * <hr>
- * Used for this:
-    - For a passive status update about user or system activity
- */
-const Notification = (_a) => {
-    var { closeText, message, onClose, type, isPrimary, isRegular } = _a, props = __rest(_a, ["closeText", "message", "onClose", "type", "isPrimary", "isRegular"]);
-    return (jsxRuntime.jsxs(UgNotification, Object.assign({ type: type, isPrimary: isPrimary }, props, { children: [jsxRuntime.jsx(UgTitle, Object.assign({ isRegular: isRegular, type: type, isPrimary: isPrimary }, { children: message })), jsxRuntime.jsx(UgAnchor, Object.assign({ type: type, isPrimary: isPrimary, onClick: onClose }, { children: closeText !== null && closeText !== void 0 ? closeText : jsxRuntime.jsx(UgClose, {}) }))] })));
-};
-// ToastProvider
-const ToastProvider = (props) => (jsxRuntime.jsx(reactNotifications.ToastProvider, Object.assign({}, props)));
-const useToast = reactNotifications.useToast;
-
 const UgPagination = styled__default["default"](reactPagination.Pagination) ``;
 /**
  * Pagination separates content into pages and allows users to navigate between those pages.
@@ -6770,6 +7203,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;