@appquality/unguess-design-system 3.1.91-alpha-marks → 3.1.91-multi-layers

package/build/index.js

@@ -4037,6 +4037,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 +4048,18 @@ 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}
 `;
 const StyledTooltip$1 = styled.styled(Tooltip) `
   margin-bottom: ${({ theme }) => theme.space.sm};
@@ -4501,6 +4505,15 @@ const StyledDiv$1 = styled__default["default"].div `
   display: flex;
   align-items: center;
 `;
+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, }) => {
     var _a, _b, _c;
     const [progress, setProgress] = React.useState(0);
@@ -4512,6 +4525,9 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
     const { context, setCurrentTime } = Video.useVideoContext();
     const debouncedMark = useDebounce(updatedMark, 500);
     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;
@@ -4584,7 +4600,7 @@ const Controls = ({ container, onCutHandler, bookmarks, isCutting, onBookMarkUpd
         }
     }, [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 })] }))] })] })));
+                        (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.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;
@@ -5594,24 +5610,23 @@ const Searchable = ({ text, }) => {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
 };
 
-const StyledWord = styled__default["default"](reactTypography.Span) `
+const StyledWord = styled__default["default"].div `
+  display: inline;
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
   padding: ${({ theme }) => theme.space.xxs} 0;
+  position: relative;
 
-  ${({ 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: ${theme.fontWeights.semibold};
+
       &:focus {
         outline: none;
       }
-
-      + span:not([observation]) {
-        margin-left: 2px;
-      }
     `;
 }}
 `;
@@ -5627,18 +5642,45 @@ const WordsContainer = styled__default["default"].div `
     }
   }
 `;
+const Layer = styled__default["default"].div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-color: ${({ color }) => getColor(color, 700, undefined, 0.5)};
+`;
 /**
  *  Use Highlight to use highlight interation on any text element
  */
 const Highlight = (props) => {
     const ref = React.useRef(null);
+    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) {
+        if (!activeSelection) {
             return;
         }
+        // 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 &&
@@ -5664,16 +5706,22 @@ const Highlight = (props) => {
     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, { 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, { 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/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?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | 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" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfXs?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfSm?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfMd?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfLg?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignSelfXl?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | 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?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | 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?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

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/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/_types.d.ts

@@ -31,7 +31,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/package.json

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