@appquality/unguess-design-system 3.1.91-alpha-marks → 3.1.91-highlight-obs

package/build/index.js

@@ -642,6 +642,15 @@ Alert.Close = reactNotifications.Close;
 
 var img$2 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.2597 12.9199V14.767H17.2367C17.075 17.4452 15.5974 18.969 13.127 18.969C10.4949 18.969 8.92496 17.4452 8.76335 14.767H8.74026V12.9199H5V14.767V14.7901C5.20779 19.4538 8.34777 22.4322 13.1039 22.4322C17.8139 22.4322 20.7922 19.5231 21 14.7901V12.9199H17.2597Z' fill='%23003A57'/%3e%3cpath d='M8.78629 3.5H5.02295V7.26335H8.78629V3.5Z' fill='%2370C38A'/%3e%3cpath d='M20.9768 3.5H17.1672V7.30952H20.9768V3.5Z' fill='%23003A57'/%3e%3c/svg%3e";
 
+const StyledInternalAvatar = styled__default["default"].div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const InternalAvatar = () => {
+    return (jsxRuntime.jsx(StyledInternalAvatar, { children: jsxRuntime.jsx("img", { alt: "avatar", src: img$2 }) }));
+};
+
 const UgAvatar = styled__default["default"](reactAvatars.Avatar) `
   text-transform: uppercase;
 
@@ -673,7 +682,7 @@ const Avatar = (_a) => {
         if (type === "text")
             return jsxRuntime.jsx(Avatar.Text, { children: props.children });
         if (type === "system")
-            return jsxRuntime.jsx("img", { alt: "avatar", src: img$2 });
+            return jsxRuntime.jsx(InternalAvatar, {});
     };
     return (jsxRuntime.jsx(UgAvatar, Object.assign({}, props, { badge: fixedBadge, isSystem: props.avatarType === "system" || isSystem, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
@@ -2337,40 +2346,26 @@ const ChatContextProvider = ({ onSave, onFileUpload, onDeleteThumbnail, setMenti
         setEditor,
         thumbnails,
         setThumbnails,
-        afterUploadCallback: (failed) => {
-            setThumbnails(thumbnails.map((file) => {
-                if (failed.includes(file.id)) {
-                    file.isLoadingMedia = false;
-                    //file.isError = true;
-                }
-                else {
-                    file.isLoadingMedia = false;
-                    //file.isError = false
-                }
-                return file;
-            }));
-        },
-        addThumbnails: ({ files }) => {
+        afterUploadCallback: (failed) => { },
+        addThumbnails: ({ files }) => __awaiter(void 0, void 0, void 0, function* () {
             setThumbnails((prev) => [...prev, ...files]);
-            if (onFileUpload) {
-                onFileUpload(files).then((data) => {
-                    var _a;
-                    const failed = (_a = data.failed) === null || _a === void 0 ? void 0 : _a.map((f) => f.name);
-                    setThumbnails((prev) => {
-                        return prev.map((file) => {
-                            file.isLoadingMedia = false;
-                            if ((failed === null || failed === void 0 ? void 0 : failed.length) && failed.includes(file.id)) {
-                                file.isError = true;
-                            }
-                            else {
-                                file.isError = false;
-                            }
-                            return file;
-                        });
+            if (!onFileUpload)
+                return;
+            try {
+                const data = yield onFileUpload(files);
+                setThumbnails((prev) => {
+                    return prev.map(file => {
+                        var _a, _b;
+                        file.isLoadingMedia = false;
+                        file.error = (_b = (_a = data.failed) === null || _a === void 0 ? void 0 : _a.find(f => f.name === file.name)) === null || _b === void 0 ? void 0 : _b.errorCode;
+                        return file;
                     });
                 });
             }
-        },
+            catch (e) {
+                console.log("Error uploading files", e);
+            }
+        }),
         clearInput: () => {
             if (editor && !editor.isEmpty) {
                 editor.commands.clearContent();
@@ -3115,7 +3110,7 @@ const CommentBar = ({ editor, i18n, }) => {
             }
         };
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " Max size: 5GB", " "] }))] })), placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: handleBoldClick }, { children: jsxRuntime.jsx(SvgBoldStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: handleItalicClick }, { children: jsxRuntime.jsx(SvgItalicStroke, {}) })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: handleMentionClick }, { children: jsxRuntime.jsx(SvgAtStroke, {}) })) })), jsxRuntime.jsx(Tooltip, Object.assign({ style: { textAlign: "center" }, content: (_h = (_g = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _g === void 0 ? void 0 : _g.attachment) !== null && _h !== void 0 ? _h : (jsxRuntime.jsxs("span", { children: ["Upload images and video.", " ", jsxRuntime.jsxs("span", Object.assign({ style: { color: theme.palette.grey[600] } }, { children: [" ", jsxRuntime.jsx("br", {}), " Max size: 5GB", " "] }))] })), placement: "top", type: "light", size: "small", hasArrow: true }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("attachment"), isPrimary: editor.isActive("attachment"), isPill: false, onClick: handleAttachmentClick }, { children: jsxRuntime.jsx(SvgClipboard, {}) })) }))] })) }));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -3398,6 +3393,7 @@ const StyledDeleteThumbnailX = styled__default["default"].div `
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 2;
+  color: ${({ theme }) => theme.palette.grey[800]};
 `;
 const DeleteThumbnailX = ({ deleteThumbnail }) => {
     return (jsxRuntime.jsx(StyledDeleteThumbnailX, Object.assign({ className: "deleteThumbnail" }, { children: jsxRuntime.jsx(SvgRemoveMediaIcon, { onClick: (e) => deleteThumbnail(e) }) })));
@@ -3425,19 +3421,19 @@ const ImageCard = styled__default["default"](SpecialCard) `
   padding: 0;
   position: relative;
   overflow: hidden;
-  min-width: 90px;
+  width: 90px;
 
   &:before {
     content: "";
+    font-size: ${({ theme }) => theme.fontSizes.xs};
     position: absolute;
+    padding: ${({ theme }) => theme.space.xs};
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: ${({ theme }) => theme.palette.grey[800]};
-    opacity: 0;
+    background-color: ${({ theme }) => theme.palette.grey[800]}00; // 0% opacity
     transition: opacity 0.2s;
-    z-index: 1;
   }
 
   &:hover {
@@ -3445,12 +3441,26 @@ const ImageCard = styled__default["default"](SpecialCard) `
       opacity: 1;
     }
     &:before {
-      opacity: 0.3;
+      background-color: ${({ theme }) => theme.palette.grey[800]}4d; // 30% opacity
     }
   }
-
+  ${(p) => p.error &&
+    `
+    &:before{
+      content: "Error: ${p.error}";
+      color: ${p.theme.palette.white};
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
+  ${(p) => p.isLoading &&
+    `
+    &:before{
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
   &.video {
     svg {
+      color: ${({ theme }) => theme.palette.grey[800]};
       position: absolute;
       top: 50%;
       left: 50%;
@@ -3467,8 +3477,9 @@ const Preview = styled__default["default"].div `
   align-items: center;
   height: 100px;
   width: 100%;
-
-  ${(p) => p.url &&
+  color: ${({ theme }) => theme.palette.white};
+  
+  ${p => p.url &&
     `
     background-image: url(${p.url});
     background-color: ${p.theme.palette.grey[100]};
@@ -3482,19 +3493,19 @@ const Preview = styled__default["default"].div `
     height: 100%;
   }
 `;
-const Thumbnail = ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia = true, isError = false, }) => {
+const Thumbnail = ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia, error = "", }) => {
     const handleCancel = (e) => {
         e.stopPropagation();
         if (removeThumbnail)
             removeThumbnail();
     };
-    return (jsxRuntime.jsxs(ImageCard, Object.assign({ onClick: clickThumbnail, className: type.includes("video") ? "video" : "image" }, { children: [isError && (
-            // todo: add error icon
-            jsxRuntime.jsx("span", { children: "error uploading media" })), isLoadingMedia ? (jsxRuntime.jsx(Preview, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }, size: "large" }) })) : (jsxRuntime.jsxs(Preview, Object.assign({ url: src }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), type.includes("video") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })), jsxRuntime.jsx(SvgVideoPlayIcon, {})] }))] })))] })));
+    return (jsxRuntime.jsx(ImageCard, Object.assign({ onClick: clickThumbnail, className: type.includes("video") ? "video" : "image", error: error, isLoading: isLoadingMedia }, { children: isLoadingMedia ? (jsxRuntime.jsx(Preview, Object.assign({ url: src }, { children: jsxRuntime.jsx(reactLoaders.Spinner, { style: {
+                    display: "flex",
+                    position: "absolute",
+                    color: "white",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, size: "large" }) }))) : (jsxRuntime.jsxs(Preview, Object.assign({ url: src }, { children: [showX && (jsxRuntime.jsx(DeleteThumbnailX, { deleteThumbnail: (e) => handleCancel(e) })), type.includes("video") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("video", Object.assign({ src: src }, { children: jsxRuntime.jsx("track", { kind: "captions" }) })), jsxRuntime.jsx(SvgVideoPlayIcon, { opacity: error ? "0.3" : "1" })] }))] }))) })));
 };
 
 const FlexContainer = styled.styled.div `
@@ -3511,12 +3522,13 @@ const ThumbnailContainer = ({ openLightbox }) => {
             previewUrl: file.url,
             id: file.id,
             isLoadingMedia: file.isLoadingMedia,
+            error: file.error,
         }));
     }, [thumbnails]);
     if (!mediaFiles || mediaFiles.length === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(FlexContainer, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, removeThumbnail: () => {
+    return (jsxRuntime.jsx(FlexContainer, { children: mediaFiles.map((file, index) => (jsxRuntime.jsx(Thumbnail, { src: file.previewUrl, showX: true, type: file.fileType, isLoadingMedia: file.isLoadingMedia, error: file.error, removeThumbnail: () => {
                 removeThumbnail(index);
                 onDeleteThumbnail(file.id);
             }, clickThumbnail: () => {
@@ -4037,6 +4049,9 @@ const StyledGrabber = styled.styled.div `
 const activeBookMark = styled.css `
   height: 250%;
   transform: translateY(-30%);
+  cursor: pointer;
+  z-index: 2;
+  border-radius: 4px;
 
   ${StyledGrabber} {
     display: block;
@@ -4045,17 +4060,19 @@ const activeBookMark = styled.css `
 const Rect = styled.styled.div `
   position: absolute;
   height: 110%;
-  background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
+  background-color: ${({ hue, theme }) => getColor(hue || theme.palette.grey[800], undefined, undefined, 0.8)};
   z-index: 1;
   border-radius: 2px;
+  color: white;
+  transition: width 0.1s ease;
+
   &:hover {
+    background-color: ${({ hue, theme }) => hue || theme.palette.grey[800]};
     ${activeBookMark}
-    border-radius: 4px;
   }
-  color: white;
-  ${({ isActive }) => isActive && activeBookMark}
 
-  transition: width 0.1s ease;
+  ${({ isActive }) => isActive && activeBookMark}
+  ${({ isFocused }) => isFocused && activeBookMark}
 `;
 const StyledTooltip$1 = styled.styled(Tooltip) `
   margin-bottom: ${({ theme }) => theme.space.sm};
@@ -4087,7 +4104,7 @@ const Bookmark = (props) => {
     }
     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: {
+    return (jsxRuntime.jsx(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, isFocused: props.isFocused, style: {
                 left: `${((start - videoStart) / duration) * 100}%`,
                 width: `${((end - start) / duration) * 100}%`,
             }, onClick: props.onClick }, { children: [jsxRuntime.jsx(Grabber, { observation: props }), jsxRuntime.jsx(Grabber, { isEnd: true, observation: props })] })) })));
@@ -4295,18 +4312,22 @@ const SvgPlus$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   fill: "currentColor"
 })));
 
+// Prevent button from breaking on smaller screens
+const StyledButton$2 = styled.styled(Button) `
+  overflow: visible;
+`;
 const Cutter = ({ onCutHandler, isCutting, i18n, }) => {
     var _a;
     const { context } = Video.useVideoContext();
     const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
     if (!onCutHandler)
         return null;
-    return (jsxRuntime.jsx(Button, Object.assign({ isPrimary: true, isAccent: !isCutting, size: "small", onClick: (e) => {
+    return (jsxRuntime.jsx(StyledButton$2, Object.assign({ isPrimary: true, isAccent: !isCutting, size: "small", onClick: (e) => {
             if (videoRef) {
                 onCutHandler(videoRef.currentTime);
             }
             e.stopPropagation();
-        } }, { children: isCutting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (i18n === null || i18n === void 0 ? void 0 : i18n.onHighlight) || "End observation"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgPlus$1, {}) }), (i18n === null || i18n === void 0 ? void 0 : i18n.beforeHighlight) || "Start observation"] })) })));
+        } }, { children: isCutting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), jsxRuntime.jsx(Span, { children: (i18n === null || i18n === void 0 ? void 0 : i18n.onHighlight) || "End observation" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgPlus$1, {}) }), jsxRuntime.jsx(Span, { children: (i18n === null || i18n === void 0 ? void 0 : i18n.beforeHighlight) || "Start observation" })] })) })));
 };
 
 var _path$e;
@@ -4473,13 +4494,40 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 
-const ControlsWrapper = styled__default["default"].div `
+const Pin = styled.styled.div `
+  width: 2px;
+  bottom: 0;
+  left: ${({ left }) => `${left}%`};
   position: absolute;
+  height: 250%;
+  z-index: 2;
+  background-color: ${({ theme }) => theme.palette.grey[600]};
+  margin-left: -2px; // To not override the current time marker
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.palette.grey[600]};
+  }
+`;
+const CutStart = ({ left }) => {
+    return jsxRuntime.jsx(Pin, { id: "obs-start-pin", left: left });
+};
+
+const ControlsWrapper = styled__default["default"].div `
+  ${({ showControls }) => showControls ? "position: relative;" : "position: absolute;"}
   bottom: 0;
   left: 0;
   right: 0;
   padding: ${({ theme }) => theme.space.xxs} 0;
   background-color: ${({ theme }) => theme.palette.grey[100]};
+  height: 80px;
   ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 2;
 `;
@@ -4501,7 +4549,16 @@ const StyledDiv$1 = styled__default["default"].div `
   display: flex;
   align-items: center;
 `;
-const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, }) => {
+const CurrentTimeMarker = styled__default["default"].div `
+  width: 2px;
+  top: 0;
+  left: ${({ left }) => `${left}%`};
+  position: absolute;
+  height: 110%;
+  z-index: 1;
+  background-color: white;
+`;
+const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, showControls = false, }) => {
     var _a, _b, _c;
     const [progress, setProgress] = React.useState(0);
     const [tooltipMargin, setTooltipMargin] = React.useState(0);
@@ -4511,7 +4568,11 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
     const progressRef = React.useRef(null);
     const { context, setCurrentTime } = Video.useVideoContext();
     const debouncedMark = useDebounce(updatedMark, 500);
+    const [cutStart, setCutStart] = React.useState(0);
     const { reset, isGrabbing, activeBookmark, fromEnd } = useProgressContext();
+    React.useEffect(() => {
+        setMarks(bookmarks);
+    }, [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;
@@ -4583,8 +4644,14 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
             onBookMarkUpdated === null || onBookMarkUpdated === void 0 ? void 0 : onBookMarkUpdated(debouncedMark);
         }
     }, [debouncedMark, onBookMarkUpdated]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: context.isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), !!duration &&
-                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "start" } }, { children: [jsxRuntime.jsx(AudioButton, {}), jsxRuntime.jsx(TimeLabel, { current: relCurrentTime, duration: duration })] })), jsxRuntime.jsx(ControlsGroupCenter, { style: { width: "60%" } }), jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
+    React.useEffect(() => {
+        if (isCutting) {
+            setCutStart(progress);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isCutting]);
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ showControls: showControls }, (!showControls && { isPlaying: context.isPlaying }), { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), !!duration &&
+                        (marks === null || marks === void 0 ? void 0 : marks.map((bookmark, index) => (jsxRuntime.jsx(Bookmark, Object.assign({}, bookmark), `${index}${bookmark.start}`)))), jsxRuntime.jsx(ProgressBar, { ref: progressRef, progress: progress, handleSkipAhead: handleSkipAhead, duration: duration }), isCutting && jsxRuntime.jsx(CutStart, { left: cutStart }), jsxRuntime.jsx(CurrentTimeMarker, { left: progress })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "start" } }, { children: [jsxRuntime.jsx(AudioButton, {}), jsxRuntime.jsx(TimeLabel, { current: relCurrentTime, duration: duration })] })), jsxRuntime.jsx(ControlsGroupCenter, { style: { width: "60%" } }), jsxRuntime.jsxs(StyledDiv$1, Object.assign({ style: { width: "20%", justifyContent: "end" } }, { children: [jsxRuntime.jsx(Cutter, { onCutHandler: onCutHandler, isCutting: isCutting, i18n: i18n }), jsxRuntime.jsx(FullScreenButton, { container: container })] }))] })] })));
 };
 
 var _path$c;
@@ -4606,8 +4673,9 @@ const FloatingContainer = styled__default["default"].div `
   top: 0;
   left: 0;
   right: 0;
-  ${({ isPlaying }) => isPlaying && "display: none;"}
   z-index: 1;
+  ${({ isPlaying }) => isPlaying && "display: none;"}
+  ${({ showControls }) => showControls ? "height: 100%" : "height: calc(100% - 80px)"};
 `;
 const PlayIcon = styled__default["default"](SvgPlayIcon) ``;
 const BigButton = styled__default["default"](IconButton) `
@@ -4632,8 +4700,8 @@ const ButtonsContainer = styled__default["default"].div `
   height: 100%;
 `;
 const FloatingControls = (props) => {
-    const { isPlaying, onClick } = props;
-    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isPrimary: true, size: "large" }, { children: jsxRuntime.jsx(PlayIcon, { color: "red" }) }))) }) })));
+    const { isPlaying, showControls, onClick } = props;
+    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, showControls: showControls, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isPrimary: true, size: "large" }, { children: jsxRuntime.jsx(PlayIcon, { color: "red" }) }))) }) })));
 };
 
 const VideoStyle = styled.css `
@@ -4659,9 +4727,13 @@ const VideoStyle = styled.css `
 
 const Container$1 = styled__default["default"].div `
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  ${({ showControls }) => !showControls ? `
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  ` : `
+    margin-bottom: 80px;
+  `}
   height: 100%;
   width: 100%;
   video {
@@ -4737,7 +4809,7 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
             }
         };
     }, [setIsPlaying, videoRef]);
-    return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, onClick: togglePlay })), jsxRuntime.jsx(Video__default["default"].Player, { className: "player-container" }), jsxRuntime.jsx(ProgressContextProvider, { children: jsxRuntime.jsx(Controls, { container: containerRef.current, onCutHandler: onCutHandler, bookmarks: bookmarks, isCutting: isCutting, onBookMarkUpdated: props.handleBookmarkUpdate, i18n: props.i18n }) })] })));
+    return (jsxRuntime.jsxs(Container$1, Object.assign({ isLoaded: isLoaded, isPlaying: context.isPlaying, ref: containerRef, showControls: props.showControls }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: context.isPlaying, showControls: props.showControls, 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, showControls: props.showControls }) })] })));
 });
 
 const MediaLightBox = ({ header, onClose, slideChange, selectedImageIndex, thumbnails, videoRefs, isOpen, details }) => {
@@ -5594,65 +5666,139 @@ const Searchable = ({ text, }) => {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
 };
 
-const StyledWord = styled__default["default"](reactTypography.Span) `
+const CreateObservationButton = styled.styled(Button) `
+  user-select: none;
+  position: absolute;
+  left: ${({ position: { x } }) => x}px;
+  top: ${({ position: { y } }) => y}px;
+  transform: translate(-50%, 0);
+  z-index: ${({ theme }) => theme.levels.front};
+`;
+
+const getFocusedObs = (observations) => {
+    return observations.find((obs) => obs.isFocused);
+};
+const StyledWord = styled__default["default"].div `
+  display: inline-block;
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
   padding: ${({ theme }) => theme.space.xxs} 0;
+  position: relative;
+  color: ${({ theme }) => theme.palette.grey[700]};
+  white-space: pre;
 
-  ${({ observation, theme }) => {
-    var _a, _b;
-    return observation &&
-        ` user-select: none;
-      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"};
+  ${({ observations, theme }) => {
+    var _a;
+    return observations && observations.length > 0 &&
+        `
+      color: ${(_a = observations[observations.length - 1].color) !== null && _a !== void 0 ? _a : theme.palette.grey[600]};
       box-sizing: border-box;
+      font-weight: ${getFocusedObs(observations) ? theme.fontWeights.extrabold : theme.fontWeights.semibold};
+      font-style: ${getFocusedObs(observations) ? 'italic' : 'normal'};
+      z-index: 1;
       &:focus {
         outline: none;
       }
-
-      + span:not([observation]) {
-        margin-left: 2px;
-      }
     `;
 }}
 `;
 const ActiveWord = styled__default["default"].span `
+  position: relative;
+  z-index: 2;
   background-color: ${({ theme }) => getColor(theme.palette.fuschia, 400, undefined, 0.4)};
-  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)};
+      background-color: ${({ theme }) => getColor(theme.palette.grey, 400, undefined, 0.5)};
     }
   }
 `;
+const Layer = styled__default["default"].div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-color: ${({ color }) => getColor(color, undefined, undefined, 0.2)};
+`;
 /**
  *  Use Highlight to use highlight interation on any text element
  */
 const Highlight = (props) => {
+    var _a;
+    const { onSelectionButtonClick, search, i18n, children } = props;
     const ref = React.useRef(null);
+    const [isSelecting, setIsSelecting] = React.useState(false);
+    const [position, setPosition] = React.useState();
+    const [selection, setSelection] = React.useState();
+    const activeSelection = document.getSelection();
+    const extractText = (selection) => {
+        if (selection.anchorNode === null || selection.focusNode === null)
+            return "";
+        var range = selection.getRangeAt(0);
+        var tempDiv = document.createElement("div");
+        tempDiv.appendChild(range.cloneContents());
+        var items = tempDiv.querySelectorAll("div");
+        items.forEach(function (item) {
+            if (item.getAttribute("data-unselectable")) {
+                item.remove();
+            }
+        });
+        var filteredText = tempDiv.textContent || tempDiv.innerText;
+        return filteredText.length ? filteredText.trim() : selection.toString();
+    };
     const handleSelectionChange = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const activeSelection = document.getSelection();
-        const text = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.toString();
-        if (!activeSelection || !text) {
-            return;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (activeSelection && activeSelection.toString().length > 0) {
+            // Extract the text from the selection cleaning unselectable items
+            const text = extractText(activeSelection);
+            if (!text)
+                return;
+            const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
+            const focusNode = (_b = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.focusNode) === null || _b === void 0 ? void 0 : _b.parentElement;
+            if (anchorNode &&
+                focusNode &&
+                ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.contains(anchorNode)) && // Selection starts inside the ref
+                ((_d = ref.current) === null || _d === void 0 ? void 0 : _d.contains(focusNode)) // Selection ends inside the ref
+            ) {
+                if (onSelectionButtonClick) {
+                    setIsSelecting(true);
+                    const range = activeSelection.getRangeAt(0);
+                    const rects = range.getClientRects();
+                    const lastRect = rects[rects.length - 1];
+                    const containerRect = ref && ref.current
+                        ? ref.current.getBoundingClientRect()
+                        : null;
+                    if (!lastRect || !containerRect)
+                        return;
+                    const relativeY = lastRect.bottom - containerRect.top + ref.current.scrollTop;
+                    const relativeX = lastRect.right - containerRect.left + ref.current.scrollLeft;
+                    if (relativeY > 0 || relativeX > 0)
+                        // Fix to avoid the button to be placed sometimes at the top left corner of the screen (X: 0, Y: 0)
+                        setPosition({
+                            x: relativeX,
+                            y: relativeY + 15,
+                        });
+                }
+                else {
+                    setIsSelecting(false);
+                }
+                const selectionPart = {
+                    from: Math.min(Number.parseFloat((_e = anchorNode.getAttribute("data-start")) !== null && _e !== void 0 ? _e : "0"), Number.parseFloat((_f = focusNode.getAttribute("data-start")) !== null && _f !== void 0 ? _f : "0")),
+                    to: Math.max(Number.parseFloat((_g = anchorNode.getAttribute("data-end")) !== null && _g !== void 0 ? _g : "0"), Number.parseFloat((_h = focusNode.getAttribute("data-end")) !== null && _h !== void 0 ? _h : "0")),
+                };
+                setSelection(Object.assign(Object.assign({}, selectionPart), { text }));
+            }
+            else {
+                setIsSelecting(false);
+            }
         }
-        const anchorNode = (_a = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.anchorNode) === null || _a === void 0 ? void 0 : _a.parentElement;
-        const focusNode = (_b = activeSelection === null || activeSelection === void 0 ? void 0 : activeSelection.focusNode) === null || _b === void 0 ? void 0 : _b.parentElement;
-        if (anchorNode &&
-            focusNode &&
-            ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.contains(anchorNode)) && // Selection starts inside the ref
-            ((_d = ref.current) === null || _d === void 0 ? void 0 : _d.contains(focusNode)) // Selection ends inside the ref
-        ) {
-            const selectionPart = {
-                from: Math.min(Number.parseFloat((_e = anchorNode.getAttribute("data-start")) !== null && _e !== void 0 ? _e : "0"), Number.parseFloat((_f = focusNode.getAttribute("data-start")) !== null && _f !== void 0 ? _f : "0")),
-                to: Math.max(Number.parseFloat((_g = anchorNode.getAttribute("data-end")) !== null && _g !== void 0 ? _g : "0"), Number.parseFloat((_h = focusNode.getAttribute("data-end")) !== null && _h !== void 0 ? _h : "0")),
-            };
-            (_j = props === null || props === void 0 ? void 0 : props.handleSelection) === null || _j === void 0 ? void 0 : _j.call(props, Object.assign(Object.assign({}, selectionPart), { text }));
+        else {
+            setIsSelecting(false);
         }
-    }, [props]);
+    }, [onSelectionButtonClick, activeSelection]);
     React.useEffect(() => {
         if (ref.current === null)
             return;
@@ -5661,19 +5807,28 @@ const Highlight = (props) => {
             document.removeEventListener("selectionchange", handleSelectionChange);
         };
     }, [ref, props, handleSelectionChange]);
-    return (jsxRuntime.jsx(HighlightContextProvider, Object.assign({ term: props.search }, { children: jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })) })));
+    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: children })), onSelectionButtonClick && isSelecting && selection && (jsxRuntime.jsxs(CreateObservationButton, Object.assign({ isAccent: true, isPrimary: true, position: position !== null && position !== void 0 ? position : {
+                    x: 0,
+                    y: 0,
+                }, onClick: () => onSelectionButtonClick(selection) }, { children: [jsxRuntime.jsx(CreateObservationButton.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), (_a = i18n === null || i18n === void 0 ? void 0 : i18n.selectionButtonLabel) !== null && _a !== void 0 ? _a : "Create observation"] })))] })));
 };
 const Word = (props) => {
-    var _a;
     const 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, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] })) })));
+    // Are there any observations containing this word?
+    const foundObservations = React.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.filter((obs) => props.start >= obs.start && props.end <= obs.end)) !== null && _b !== void 0 ? _b : [];
+    }, [props.observations, props.start, props.end]);
+    const ObsWord = React.useMemo(() => (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { "data-start": props.start, "data-end": props.end, className: foundObservations.length > 0 ? "highlighted" : "" }, (foundObservations && { observations: foundObservations }), { children: [foundObservations.length > 0 && foundObservations.map((obs) => {
+                var _a;
+                return (jsxRuntime.jsx(Layer, { color: (_a = obs.hue) !== null && _a !== void 0 ? _a : theme.palette.grey[600] }, obs.id));
+            }), isActive ? (jsxRuntime.jsx(ActiveWord, Object.assign({ "data-start": props.start, "data-end": props.end }, { children: jsxRuntime.jsx(Searchable, { text: props.text }) }))) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] }))), [props, foundObservations, isActive]);
+    if (props.tooltipContent !== undefined && foundObservations.length > 0) {
+        return (jsxRuntime.jsx(Tooltip, Object.assign({ content: props.tooltipContent(foundObservations), isTransparent: true }, { children: ObsWord })));
     }
-    return (jsxRuntime.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, { text: props.text }) })) : (jsxRuntime.jsx(Searchable, { text: props.text })), " "] })));
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: ObsWord });
 };
 Highlight.Word = Word;
 

package/build/stories/avatar/InternalAvatar.d.ts

@@ -0,0 +1,2 @@
+declare const InternalAvatar: () => import("react/jsx-runtime").JSX.Element;
+export default InternalAvatar;

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
+    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
+    alignSelf?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

package/build/stories/chat/_types.d.ts

@@ -42,7 +42,7 @@ export interface CommentMedia {
     type: string;
     name?: string;
     isLoadingMedia?: boolean;
-    isError?: boolean;
+    error?: string;
     url?: string;
 }
 export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {

package/build/stories/chat/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
 import { ChatEditorArgs, CommentMedia, SuggestedUser } from "./_types";

package/build/stories/chat/parts/ThumbnailContainer/Thumbnail.d.ts

@@ -5,7 +5,7 @@ interface Props {
     isLoadingMedia?: boolean;
     removeThumbnail?: () => void;
     showX?: boolean;
-    isError?: boolean;
+    error?: string;
 }
-declare const Thumbnail: ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Thumbnail: ({ src, type, removeThumbnail, clickThumbnail, showX, isLoadingMedia, error, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Thumbnail;

package/build/stories/chat/parts/ThumbnailContainer/index.d.ts

@@ -1,11 +1,3 @@
-export interface FileElement {
-    fileName: string;
-    fileType: string;
-    errorCode?: "FILE_TOO_BIG" | "INVALID_FILE_EXTENSION" | "GENERIC_ERROR";
-    previewUrl: string;
-    internal_id: string;
-    isLoadingMedia: boolean;
-}
 interface Props {
     openLightbox: (index: number) => void;
 }

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/build/stories/highlight/CreateObservationButton.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare const CreateObservationButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("../buttons/button/_types").ButtonArgs & import("react").RefAttributes<HTMLButtonElement>, {
+    position: {
+        x: number;
+        y: number;
+    };
+}>> & import("react").ForwardRefExoticComponent<import("../buttons/button/_types").ButtonArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    EndIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+    StartIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+};
+export { CreateObservationButton };

package/build/stories/highlight/_types.d.ts

@@ -15,12 +15,15 @@ export interface HighlightArgs {
     isMonospace?: boolean;
     /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-    handleSelection?: (part: {
+    search?: string;
+    onSelectionButtonClick?: (part: {
         from: number;
         to: number;
         text: string;
     }) => void;
-    search?: string;
+    i18n?: {
+        selectionButtonLabel: string;
+    };
 }
 export interface Observation extends Omit<IBookmark, "onClick"> {
     color?: string;
@@ -31,7 +34,6 @@ export interface WordProps extends ISpanProps {
     currentTime?: number;
     observations?: Observation[];
     text: string;
-    /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-    tooltipContent?: (observation: Observation) => ReactNode;
+    tooltipContent?: (observations: Observation[]) => ReactNode;
 }

package/build/stories/highlight/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightArgs, WordProps } from "./_types";
 export interface StoryArgs extends HighlightArgs {
     words: Array<WordProps & {
@@ -7,9 +8,10 @@ export interface StoryArgs extends HighlightArgs {
     includeSearch?: boolean;
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
-export declare const VideoSync: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
-export declare const WithSearch: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const WithSelectionButton: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const WithTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const WithSearch: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const VideoSync: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const Demo: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, HighlightArgs & {
     children?: import("react").ReactNode;

package/build/stories/player/_types.d.ts

@@ -9,6 +9,7 @@ export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
     bookmarks?: IBookmark[];
     handleBookmarkUpdate?: (bookmark: IBookmark) => void;
     i18n?: PlayerI18n;
+    showControls?: boolean;
 }
 export interface PlayerI18n {
     beforeHighlight?: string;
@@ -21,12 +22,14 @@ export interface IBookmark {
     hue?: string;
     label?: string;
     tooltipContent?: ReactNode;
+    isFocused?: boolean;
     onClick?: () => void;
     tags?: VideoTag[];
 }
 export interface WrapperProps {
     isPlaying?: boolean;
     isLoaded?: boolean;
+    showControls?: boolean;
 }
 type VideoTag = {
     group: {

package/build/stories/player/index.stories.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { PlayerArgs } from "./_types";
 interface PlayerStoryArgs extends PlayerArgs {
 }
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
+export declare const ShowControls: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 export declare const Streaming: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 export declare const WithBookmarks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PlayerStoryArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PlayerArgs & import("react").RefAttributes<HTMLVideoElement>>;

package/build/stories/player/parts/CutStart.d.ts

@@ -0,0 +1,4 @@
+declare const CutStart: ({ left }: {
+    left: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export { CutStart };

package/build/stories/player/parts/controls.d.ts

@@ -268,11 +268,12 @@ export declare const ControlsBar: import("styled-components").IStyledComponent<"
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
-export declare const Controls: ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, }: {
+export declare const Controls: ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpdated, i18n, showControls, }: {
     container: HTMLDivElement | null;
     onCutHandler?: ((time: number) => void) | undefined;
     bookmarks?: IBookmark[] | undefined;
     isCutting?: boolean | undefined;
     onBookMarkUpdated?: ((bookmark: IBookmark) => void) | undefined;
     i18n?: PlayerI18n | undefined;
+    showControls?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/stories/player/parts/floatingControls.d.ts

@@ -3,5 +3,6 @@ import { WrapperProps } from "../_types";
 export declare const FloatingContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps>>;
 export declare const FloatingControls: (props: {
     isPlaying?: boolean;
+    showControls?: boolean;
     onClick?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.91-alpha-marks",
+  "version": "3.1.91-highlight-obs",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",