@appquality/unguess-design-system 3.1.87 → 3.1.88-bookmark-tooltip-changes

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v3.1.88 (Mon May 13 2024)
+
+#### 🐛 Bug Fix
+
+- Player fixes [#343](https://github.com/AppQuality/unguess-design-system/pull/343) ([@cannarocks](https://github.com/cannarocks))
+- Fix undefined state in player and reduce renders [#342](https://github.com/AppQuality/unguess-design-system/pull/342) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v3.1.87 (Mon May 13 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2978,10 +2978,17 @@ const FloatingMenu = (props) => {
 const TooltipComponent = (props) => {
     var _a;
     const theme = React.useContext(styled.ThemeContext);
-    return jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
+    return (jsxRuntime.jsx(reactTooltips.Tooltip, Object.assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front })));
 };
 const Tooltip = styled__default["default"](TooltipComponent) `
   box-shadow: ${({ theme }) => theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor("neutralHue", 600, theme, 0.15))};
+
+  ${({ isTransparent }) => isTransparent &&
+    `
+      box-shadow: none;
+      background-color: transparent;
+      border: none;
+    `};
 `;
 
 var _path$t;
@@ -3911,6 +3918,10 @@ const SvgVolumeUnmutedFill = props => /*#__PURE__*/React__namespace.createElemen
   d: "M11.77 9.77c.45-.45.73-1.08.73-1.77s-.28-1.31-.73-1.77m2.17 5.6c.97-.99 1.56-2.34 1.56-3.83 0-1.52-.62-2.89-1.61-3.89"
 })));
 
+const ControlButton = styled__default["default"](IconButton) `
+  color: ${({ theme }) => theme.palette.grey[700]};
+`;
+
 const AudioButton = () => {
     const [hasAudio, setHasAudio] = React.useState(false);
     const { isMuted, setMuted, context } = Video.useVideoContext();
@@ -3935,8 +3946,8 @@ const AudioButton = () => {
             setMuted(!hasVolume(player.ref.current));
             checkAudio(player.ref.current);
         }
-    }, [context.isPlaying, isMuted]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !hasAudio, onClick: () => {
+    }, [context.isPlaying, isMuted, player, setMuted]);
+    return (jsxRuntime.jsx(ControlButton, Object.assign({ disabled: !hasAudio, onClick: () => {
             if (player === null || player === void 0 ? void 0 : player.ref.current) {
                 player.ref.current.volume = player.ref.current.volume > 0 ? 0 : 1;
                 setMuted(!player.ref.current.volume);
@@ -4095,6 +4106,11 @@ const Rect = styled.styled.div `
 
   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();
@@ -4109,7 +4125,7 @@ const Grabber = (props) => {
 };
 const Bookmark = (props) => {
     var _a, _b;
-    const { start, end, hue, label } = props;
+    const { start, end, hue, tooltipContent } = props;
     const { context } = Video.useVideoContext();
     const videoStart = context.part.start || 0;
     const videoEnd = context.part.end || ((_a = context.player) === null || _a === void 0 ? void 0 : _a.totalTime) || 0;
@@ -4120,7 +4136,7 @@ const Bookmark = (props) => {
     }
     if (start > videoEnd || start < videoStart)
         return null;
-    return (jsxRuntime.jsx(Tooltip, Object.assign({ content: label, type: "light", size: "large" }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, style: {
+    return (jsxRuntime.jsx(StyledTooltip$1, Object.assign({ content: tooltipContent, type: "light", size: "large", isTransparent: true }, { children: jsxRuntime.jsxs(Rect, Object.assign({ isActive: activeBookmark && activeBookmark.id === props.id, hue: hue, 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 })] })) })));
@@ -4273,18 +4289,18 @@ const ControlsGroupCenter = (props) => {
         const nextTime = videoRef.currentTime + 10;
         videoRef.currentTime = nextTime;
     };
-    return (jsxRuntime.jsxs(StyledDiv$3, Object.assign({}, props, { children: [jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+    return (jsxRuntime.jsxs(StyledDiv$3, Object.assign({}, props, { children: [jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     if (videoRef) {
                         videoRef.currentTime = 0;
                     }
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgPreviousFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgPreviousFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     onRewind();
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgBackSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, size: "large", onClick: togglePlay }, { children: isPlaying ? (jsxRuntime.jsx(SvgPauseFill, { style: { width: "24px", height: "24px" } })) : (jsxRuntime.jsx(SvgPlayFill, { style: { width: "24px", height: "24px" } })) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgBackSecondsFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ size: "large", onClick: togglePlay }, { children: isPlaying ? (jsxRuntime.jsx(SvgPauseFill, { style: { width: "24px", height: "24px" } })) : (jsxRuntime.jsx(SvgPlayFill, { style: { width: "24px", height: "24px" } })) })), jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
                     onForward();
                     e.stopPropagation();
-                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, isPill: true, onClick: (e) => {
+                } }, { children: jsxRuntime.jsx(SvgForwardSecondsFill, {}) })), jsxRuntime.jsx(ControlButton, Object.assign({ isPill: true, onClick: (e) => {
                     const newSpeed = getNextPlaybackRate(playBackRate);
                     if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.playbackRate) {
                         setPlayBackRate(newSpeed);
@@ -4294,9 +4310,9 @@ const ControlsGroupCenter = (props) => {
                 } }, { children: jsxRuntime.jsxs(SM, Object.assign({ isBold: true, style: { lineHeight: "16px" } }, { children: [playBackRate, "x"] })) }))] })));
 };
 
-var _path$f;
+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 SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+const SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
   xmlns: "http://www.w3.org/2000/svg",
   width: 16,
   height: 16,
@@ -4305,19 +4321,54 @@ const SvgMaximizeStroke = props => /*#__PURE__*/React__namespace.createElement("
 }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
-  strokeLinecap: "round",
-  d: "M4.5.5H1C.72.5.5.72.5 1v3.5m15 0V1c0-.28-.22-.5-.5-.5h-3.5m-11 11V15c0 .28.22.5.5.5h3.5m11-4V15c0 .28-.22.5-.5.5h-3.5m-7-11L1 1m10.5 3.5L15 1M4.5 11.5L1 15m10.5-3.5L15 15"
+  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);
+            }
+            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$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({
+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$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$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$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
@@ -4360,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 ||
@@ -4385,7 +4436,7 @@ const FullScreenButton = ({ container, }) => {
             }
         };
     }, [ref]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
+    return (jsxRuntime.jsx(ControlButton, Object.assign({ onClick: (e) => {
             handleFullScreen();
             e.stopPropagation();
         }, disabled: !canGoFullScreen() }, { children: document.fullscreenElement || isFullScreen ? (jsxRuntime.jsx(SvgMinimizeStroke, {})) : (jsxRuntime.jsx(SvgMaximizeStroke, {})) })));
@@ -4420,7 +4471,7 @@ const ProgressBar = React.forwardRef((props, ref) => {
 
 const StyledDiv$2 = styled__default["default"].div `
   display: flex;
-  color: ${({ theme }) => theme.palette.grey[300]};
+  color: ${({ theme }) => theme.palette.grey[700]};
 `;
 const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [formatDuration(current), "/", formatDuration(duration)] })) }));
 
@@ -4437,57 +4488,23 @@ const Content$1 = styled__default["default"].div `
   padding: 2px 4px;
   display: inline-flex;
   color: white;
+  font-size: ${({ theme }) => theme.fontSizes.xs};
   align-items: center;
   justify-content: center;
-  min-height: 16px;
+  min-height: 14px;
 `;
 const PlayerTooltip = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
     return (jsxRuntime.jsx(Wrapper$1, Object.assign({}, props, { children: jsxRuntime.jsx(Content$1, { children: children }) })));
 };
 
-var _path$d, _circle$1;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
-const SvgTagStroke = props => /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 16,
-  height: 16,
-  focusable: "false",
-  viewBox: "0 0 16 16"
-}, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "none",
-  stroke: "currentColor",
-  d: "M.5 1v5.3c0 .1.1.3.1.4l8.5 8.5c.2.2.5.2.7 0l5.3-5.3c.2-.2.2-.5 0-.7L6.6.6S6.4.5 6.3.5H1C.7.5.5.7.5 1z"
-})), _circle$1 || (_circle$1 = /*#__PURE__*/React__namespace.createElement("circle", {
-  cx: 4,
-  cy: 4,
-  r: 1,
-  fill: "currentColor"
-})));
-
-const Cutter = ({ onCutHandler, isCutting, i18n, }) => {
-    var _a;
-    const { context } = Video.useVideoContext();
-    const videoRef = (_a = context.player) === null || _a === void 0 ? void 0 : _a.ref.current;
-    if (!onCutHandler)
-        return null;
-    return (jsxRuntime.jsxs(Button, Object.assign({ isPrimary: true, isAccent: true, size: "small", onClick: (e) => {
-            if (videoRef) {
-                onCutHandler(videoRef.currentTime);
-            }
-            e.stopPropagation();
-        } }, { children: [jsxRuntime.jsx(Button.StartIcon, { children: jsxRuntime.jsx(SvgTagStroke, {}) }), isCutting
-                ? (i18n === null || i18n === void 0 ? void 0 : i18n.onHighlight) || "Click again to stop"
-                : (i18n === null || i18n === void 0 ? void 0 : i18n.beforeHighlight) || "New highlight"] })));
-};
-
 const 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;
 `;
@@ -4627,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%;
@@ -4693,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) ``;
@@ -4722,11 +4742,7 @@ 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();
@@ -4734,7 +4750,7 @@ const PlayerCore = React.forwardRef((props, forwardRef) => {
     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", () => {
@@ -5636,8 +5652,7 @@ const StyledWord = styled__default["default"](reactTypography.Span) `
     var _a, _b;
     return observation &&
         ` user-select: none;
-      padding: 0;
-      background-color: ${(_a = observation.backgroundColor) !== null && _a !== void 0 ? _a : getColor(theme.palette.azure, 700, undefined, 0.5)};
+      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 {
@@ -5705,6 +5720,9 @@ const Word = (props) => {
         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;

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/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, FileItem, 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

@@ -1,4 +1,6 @@
 import { ISpanProps } from "@zendeskgarden/react-typography";
+import { ReactNode } from "react";
+import { IBookmark } from "../player/_types";
 export interface HighlightArgs {
     /**
      * Applies a font color. Use [PALETTE](/components/palette#palette) colors
@@ -20,11 +22,7 @@ export interface HighlightArgs {
     }) => void;
     search?: string;
 }
-export interface Observation {
-    id: number;
-    start: number;
-    end: number;
-    backgroundColor?: string;
+export interface Observation extends Omit<IBookmark, "onClick"> {
     color?: string;
 }
 export interface WordProps extends ISpanProps {
@@ -35,4 +33,5 @@ export interface WordProps extends ISpanProps {
     text: string;
     /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+    tooltipContent?: (observation: Observation) => ReactNode;
 }

package/build/stories/highlight/demo-parts/data.d.ts

@@ -0,0 +1,49 @@
+export declare const DemoTranscript: {
+    metadata: {
+        transaction_key: string;
+        request_id: string;
+        sha256: string;
+        created: string;
+        duration: number;
+        channels: number;
+        models: string[];
+        model_info: {
+            "4accafca-a091-473d-8241-f5a847cb5766": {
+                name: string;
+                version: string;
+                arch: string;
+            };
+        };
+    };
+    results: {
+        channels: {
+            alternatives: {
+                transcript: string;
+                confidence: number;
+                words: {
+                    word: string;
+                    start: number;
+                    end: number;
+                    confidence: number;
+                    speaker: number;
+                    speaker_confidence: number;
+                    punctuated_word: string;
+                }[];
+                paragraphs: {
+                    transcript: string;
+                    paragraphs: {
+                        sentences: {
+                            text: string;
+                            start: number;
+                            end: number;
+                        }[];
+                        speaker: number;
+                        num_words: number;
+                        start: number;
+                        end: number;
+                    }[];
+                };
+            }[];
+        }[];
+    };
+};

package/build/stories/highlight/demo-parts/transcript-base.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const Transcript: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/stories/highlight/demo-parts/transcript-diarization.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const TDiarization: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/stories/highlight/demo-parts/transcript-paragraph.d.ts

@@ -0,0 +1,5 @@
+import { StoryArgs } from "../index.stories";
+export declare const TParagraph: (args: StoryArgs & {
+    currentTime: number;
+    offset: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,17 @@
-import { HighlightArgs } from "./_types";
-interface StoryArgs extends HighlightArgs {
-    words: {
-        start: number;
-        end: number;
-        word: string;
+/// <reference types="react" />
+import { HighlightArgs, WordProps } from "./_types";
+export interface StoryArgs extends HighlightArgs {
+    words: Array<WordProps & {
         speaker: number;
-    }[];
+    }>;
     currentTime: number;
     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 WithTooltip: 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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 export interface PlayerArgs extends HTMLAttributes<HTMLVideoElement> {
     url: string;
     start?: number;
@@ -20,6 +20,7 @@ export interface IBookmark {
     end: number;
     hue?: string;
     label?: string;
+    tooltipContent?: ReactNode;
     onClick?: () => void;
 }
 export interface WrapperProps {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PlayerArgs } from "./_types";
 interface PlayerStoryArgs extends PlayerArgs {
 }

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

@@ -0,0 +1,289 @@
+/// <reference types="react" />
+export declare const ControlButton: import("styled-components").IStyledComponent<"web", {
+    isBright?: boolean | undefined;
+    isAccent?: boolean | undefined;
+    isRotated?: boolean | undefined;
+    isDanger?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    isNeutral?: boolean | undefined;
+    isPrimary?: boolean | undefined;
+    isBasic?: boolean | undefined;
+    isPill?: boolean | undefined;
+    focusInset?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    name?: string | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | 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;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | 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;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: import("react").ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLButtonElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLButtonElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLButtonElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLButtonElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLButtonElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    ref?: import("react").Ref<HTMLButtonElement> | undefined;
+    key?: import("react").Key | null | undefined;
+}> & import("react").ForwardRefExoticComponent<import("../../buttons/icon-button/_types").IconButtonArgs & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,3 +1,4 @@
 import { ITooltipProps } from "@zendeskgarden/react-tooltips";
 export interface TooltipArgs extends ITooltipProps {
+    isTransparent?: boolean;
 }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TooltipArgs } from "./_types";
 declare const Tooltip: import("styled-components").IStyledComponent<"web", {
+    isTransparent?: boolean | undefined;
     appendToNode?: Element | undefined;
     hasArrow?: boolean | undefined;
     delayMS?: number | undefined;

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

@@ -1,4 +1,5 @@
 import { TooltipArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
+export declare const Transparent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TooltipArgs>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.87",
+  "version": "3.1.88-bookmark-tooltip-changes",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",