@veltdev/react 4.5.0-beta.3 → 4.5.0-beta.31

package/cjs/index.js

@@ -99,7 +99,7 @@ function useVeltClient() {
     return React.useContext(VeltContext);
 }
 
-var loadVelt = function (callback, version, staging, develop, proxyDomain) {
+var loadVelt = function (callback, version, staging, develop, proxyDomain, integrity, integrityValue) {
     if (version === void 0) { version = 'latest'; }
     if (staging === void 0) { staging = false; }
     if (develop === void 0) { develop = false; }
@@ -126,6 +126,10 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
         }
         script.id = 'veltScript';
         script.type = 'module';
+        if (integrity && integrityValue) {
+            script.integrity = integrityValue;
+            script.crossOrigin = 'anonymous';
+        }
         document.body.appendChild(script);
         script.onload = function () {
             if (callback) {
@@ -140,18 +144,40 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '4.5.0-beta.3';
+var VELT_SDK_VERSION = '4.5.0-beta.31';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
+// integrity map for the Velt SDK
+// Note: generate integrity hashes with: https://www.srihash.org/
+var INTEGRITY_MAP = {
+    '4.5.0-beta.31': 'sha384-+hSPdGKeOvneNEDniDQ4sBKVtiGpUlqKI4jiCUOBqtggGCh7rWOkkVjBciPMKAVT',
+};
 
 var SnippylyProvider = function (props) {
     var apiKey = props.apiKey, user = props.user, config = props.config, documentId = props.documentId, language = props.language, translations = props.translations, autoTranslation = props.autoTranslation, userDataProvider = props.userDataProvider, dataProviders = props.dataProviders, onClientLoad = props.onClientLoad, children = props.children;
     var _a = React.useState(null), client = _a[0], setClient = _a[1];
     React.useEffect(function () {
         if (apiKey) {
+            var staging = config === null || config === void 0 ? void 0 : config.staging;
+            var develop = config === null || config === void 0 ? void 0 : config.develop;
+            var version = (config === null || config === void 0 ? void 0 : config.version) || VELT_SDK_VERSION;
+            var integrity = !!(config === null || config === void 0 ? void 0 : config.integrity);
+            var integrityValue = '';
+            if (integrity) {
+                if (develop || staging) {
+                    if (config === null || config === void 0 ? void 0 : config.sriv) {
+                        integrityValue = config === null || config === void 0 ? void 0 : config.sriv;
+                    }
+                }
+                else {
+                    if (INTEGRITY_MAP[version]) {
+                        integrityValue = INTEGRITY_MAP[version];
+                    }
+                }
+            }
             loadVelt(function () {
                 initVelt();
-            }, (config === null || config === void 0 ? void 0 : config.version) || VELT_SDK_VERSION, config === null || config === void 0 ? void 0 : config.staging, config === null || config === void 0 ? void 0 : config.develop, config === null || config === void 0 ? void 0 : config.proxyDomain);
+            }, version, staging, develop, config === null || config === void 0 ? void 0 : config.proxyDomain, integrity, integrityValue);
         }
     }, []);
     React.useEffect(function () {
@@ -243,12 +269,12 @@ var SnippylyProvider = function (props) {
 };
 
 var SnippylyCommentBubble = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant, darkMode = props.darkMode, commentCountType = props.commentCountType;
-    return (React__default["default"].createElement("velt-comment-bubble", { "comment-count-type": commentCountType, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, variant: variant }, children));
+    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, avatar = props.avatar, showAvatar = props.showAvatar, commentBubbleTargetPinHover = props.commentBubbleTargetPinHover, children = props.children, shadowDom = props.shadowDom, variant = props.variant, darkMode = props.darkMode, commentCountType = props.commentCountType, context = props.context, contextOptions = props.contextOptions, annotationId = props.annotationId, documentId = props.documentId, folderId = props.folderId;
+    return (React__default["default"].createElement("velt-comment-bubble", { "annotation-id": annotationId, "comment-count-type": commentCountType, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, context: JSON.stringify(context), "context-options": JSON.stringify(contextOptions), "document-id": documentId, "folder-id": folderId, "show-avatar": [true, false].includes(showAvatar) ? (showAvatar ? 'true' : 'false') : undefined, avatar: [true, false].includes(avatar) ? (avatar ? 'true' : 'false') : undefined, "comment-bubble-target-pin-hover": commentBubbleTargetPinHover ? 'true' : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, variant: variant }, children));
 };
 
 var SnippylyComments = function (props) {
-    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, minimapPosition = props.minimapPosition, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, resolvedCommentsOnDom = props.resolvedCommentsOnDom, bubbleOnPin = props.bubbleOnPin, bubbleOnPinHover = props.bubbleOnPinHover, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingTranscription = props.recordingTranscription, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, persistentCommentShadowDom = props.persistentCommentShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, areaComment = props.areaComment, pinCursorImage = props.pinCursorImage, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customListDataOnAnnotation = props.customListDataOnAnnotation, customListDataOnComment = props.customListDataOnComment, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom, dialogDarkMode = props.dialogDarkMode, pinDarkMode = props.pinDarkMode, textCommentToolDarkMode = props.textCommentToolDarkMode, textCommentToolbarDarkMode = props.textCommentToolbarDarkMode, composerMode = props.composerMode, atHereLabel = props.atHereLabel, atHereDescription = props.atHereDescription, multiThreadMode = props.multiThreadMode, multiThread = props.multiThread, onCopyLink = props.onCopyLink, deleteReplyConfirmation = props.deleteReplyConfirmation, collapsedComments = props.collapsedComments, shortUserName = props.shortUserName, resolveStatusAccessAdminOnly = props.resolveStatusAccessAdminOnly, svgAsImg = props.svgAsImg, seenByUsers = props.seenByUsers, readOnly = props.readOnly, atHereEnabled = props.atHereEnabled, customAutocompleteSearch = props.customAutocompleteSearch, deleteThreadWithFirstComment = props.deleteThreadWithFirstComment, expandMentionGroups = props.expandMentionGroups, showMentionGroupsFirst = props.showMentionGroupsFirst, showMentionGroupsOnly = props.showMentionGroupsOnly, fullExpanded = props.fullExpanded, commentToNearestAllowedElement = props.commentToNearestAllowedElement, draftMode = props.draftMode;
+    var autoCategorize = props.autoCategorize, streamViewContainerId = props.streamViewContainerId, onSignIn = props.onSignIn, onUpgrade = props.onUpgrade, textMode = props.textMode, popoverMode = props.popoverMode, popoverTriangleComponent = props.popoverTriangleComponent, floatingCommentDialog = props.floatingCommentDialog, moderatorMode = props.moderatorMode, streamMode = props.streamMode, signInButton = props.signInButton, upgradeButton = props.upgradeButton, attachments = props.attachments, recordings = props.recordings, reactions = props.reactions, deviceInfo = props.deviceInfo, commentIndex = props.commentIndex, dialogOnHover = props.dialogOnHover, dialogOnTargetElementClick = props.dialogOnTargetElementClick, priority = props.priority, inboxMode = props.inboxMode, suggestionMode = props.suggestionMode, mobileMode = props.mobileMode, inlineCommentMode = props.inlineCommentMode, privateCommentMode = props.privateCommentMode, minimap = props.minimap, minimapPosition = props.minimapPosition, persistentCommentMode = props.persistentCommentMode, ghostComments = props.ghostComments, ghostCommentsIndicator = props.ghostCommentsIndicator, commentsOnDom = props.commentsOnDom, resolvedCommentsOnDom = props.resolvedCommentsOnDom, filterCommentsOnDom = props.filterCommentsOnDom, bubbleOnPin = props.bubbleOnPin, bubbleOnPinHover = props.bubbleOnPinHover, commentTool = props.commentTool, sidebarButtonOnCommentDialog = props.sidebarButtonOnCommentDialog, deviceIndicatorOnCommentPins = props.deviceIndicatorOnCommentPins, scrollToComment = props.scrollToComment, userMentions = props.userMentions, deleteOnBackspace = props.deleteOnBackspace, hotkey = props.hotkey, recordingSummary = props.recordingSummary, recordingTranscription = props.recordingTranscription, recordingCountdown = props.recordingCountdown, unreadIndicatorMode = props.unreadIndicatorMode, enterKeyToSubmit = props.enterKeyToSubmit, pinShadowDom = props.pinShadowDom, dialogShadowDom = props.dialogShadowDom, persistentCommentShadowDom = props.persistentCommentShadowDom, shadowDom = props.shadowDom, changeDetectionInCommentMode = props.changeDetectionInCommentMode, areaComment = props.areaComment, pinCursorImage = props.pinCursorImage, allowedElementIds = props.allowedElementIds, allowedElementClassNames = props.allowedElementClassNames, allowedElementQuerySelectors = props.allowedElementQuerySelectors, commentPinHighlighter = props.commentPinHighlighter, customReactions = props.customReactions, onCommentAdd = props.onCommentAdd, onCommentUpdate = props.onCommentUpdate, onCommentAccept = props.onCommentAccept, onCommentReject = props.onCommentReject, onSidebarButtonOnCommentDialogClick = props.onSidebarButtonOnCommentDialogClick, onCommentSelectionChange = props.onCommentSelectionChange, customStatus = props.customStatus, customListDataOnAnnotation = props.customListDataOnAnnotation, customListDataOnComment = props.customListDataOnComment, customPriority = props.customPriority, customCategory = props.customCategory, status = props.status, resolveButton = props.resolveButton, darkMode = props.darkMode, onCustomPinInject = props.onCustomPinInject, children = props.children, textCommentToolShadowDom = props.textCommentToolShadowDom, textCommentToolbarShadowDom = props.textCommentToolbarShadowDom, dialogDarkMode = props.dialogDarkMode, pinDarkMode = props.pinDarkMode, textCommentToolDarkMode = props.textCommentToolDarkMode, textCommentToolbarDarkMode = props.textCommentToolbarDarkMode, composerMode = props.composerMode, atHereLabel = props.atHereLabel, atHereDescription = props.atHereDescription, multiThreadMode = props.multiThreadMode, multiThread = props.multiThread, groupMultipleMatch = props.groupMultipleMatch, groupMatchedComments = props.groupMatchedComments, onCopyLink = props.onCopyLink, deleteReplyConfirmation = props.deleteReplyConfirmation, collapsedComments = props.collapsedComments, shortUserName = props.shortUserName, resolveStatusAccessAdminOnly = props.resolveStatusAccessAdminOnly, svgAsImg = props.svgAsImg, seenByUsers = props.seenByUsers, readOnly = props.readOnly, atHereEnabled = props.atHereEnabled, customAutocompleteSearch = props.customAutocompleteSearch, deleteThreadWithFirstComment = props.deleteThreadWithFirstComment, expandMentionGroups = props.expandMentionGroups, showMentionGroupsFirst = props.showMentionGroupsFirst, showMentionGroupsOnly = props.showMentionGroupsOnly, fullExpanded = props.fullExpanded, commentToNearestAllowedElement = props.commentToNearestAllowedElement, draftMode = props.draftMode;
     var ref = React.useRef();
     var onSignInRef = React.useRef(onSignIn);
     var onUpgradeRef = React.useRef(onUpgrade);
@@ -373,7 +399,7 @@ var SnippylyComments = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-comments", { ref: ref, "at-here-label": atHereLabel, "at-here-description": atHereDescription, "at-here-enabled": [true, false].includes(atHereEnabled) ? (atHereEnabled ? 'true' : 'false') : undefined, "composer-mode": composerMode, "seen-by-users": [true, false].includes(seenByUsers) ? (seenByUsers ? 'true' : 'false') : undefined, "collapsed-comments": [true, false].includes(collapsedComments) ? (collapsedComments ? 'true' : 'false') : undefined, "short-user-name": [true, false].includes(shortUserName) ? (shortUserName ? 'true' : 'false') : undefined, "resolve-status-access-admin-only": [true, false].includes(resolveStatusAccessAdminOnly) ? (resolveStatusAccessAdminOnly ? 'true' : 'false') : undefined, "delete-reply-confirmation": [true, false].includes(deleteReplyConfirmation) ? (deleteReplyConfirmation ? 'true' : 'false') : undefined, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "minimap-position": minimapPosition, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "bubble-on-pin": [true, false].includes(bubbleOnPin) ? (bubbleOnPin ? 'true' : 'false') : undefined, "bubble-on-pin-hover": [true, false].includes(bubbleOnPinHover) ? (bubbleOnPinHover ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-transcription": [true, false].includes(recordingTranscription) ? (recordingTranscription ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "persistent-comment-shadow-dom": [true, false].includes(persistentCommentShadowDom) ? (persistentCommentShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "area-comment": [true, false].includes(areaComment) ? (areaComment ? 'true' : 'false') : undefined, "pin-cursor-image": pinCursorImage, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "custom-status": JSON.stringify(customStatus), "custom-list-data-on-annotation": JSON.stringify(customListDataOnAnnotation), "custom-list-data-on-comment": JSON.stringify(customListDataOnComment), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined, "multi-thread-mode": [true, false].includes(multiThreadMode) ? (multiThreadMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "read-only": [true, false].includes(readOnly) ? (readOnly ? 'true' : 'false') : undefined, "custom-autocomplete-search": [true, false].includes(customAutocompleteSearch) ? (customAutocompleteSearch ? 'true' : 'false') : undefined, "delete-thread-with-first-comment": [true, false].includes(deleteThreadWithFirstComment) ? (deleteThreadWithFirstComment ? 'true' : 'false') : undefined, "svg-as-img": [true, false].includes(svgAsImg) ? (svgAsImg ? 'true' : 'false') : undefined, "expand-mention-groups": [true, false].includes(expandMentionGroups) ? (expandMentionGroups ? 'true' : 'false') : undefined, "show-mention-groups-first": [true, false].includes(showMentionGroupsFirst) ? (showMentionGroupsFirst ? 'true' : 'false') : undefined, "show-mention-groups-only": [true, false].includes(showMentionGroupsOnly) ? (showMentionGroupsOnly ? 'true' : 'false') : undefined, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined, "comment-to-nearest-allowed-element": [true, false].includes(commentToNearestAllowedElement) ? (commentToNearestAllowedElement ? 'true' : 'false') : undefined, "draft-mode": [true, false].includes(draftMode) ? (draftMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comments", { ref: ref, "at-here-label": atHereLabel, "at-here-description": atHereDescription, "at-here-enabled": [true, false].includes(atHereEnabled) ? (atHereEnabled ? 'true' : 'false') : undefined, "composer-mode": composerMode, "seen-by-users": [true, false].includes(seenByUsers) ? (seenByUsers ? 'true' : 'false') : undefined, "collapsed-comments": [true, false].includes(collapsedComments) ? (collapsedComments ? 'true' : 'false') : undefined, "short-user-name": [true, false].includes(shortUserName) ? (shortUserName ? 'true' : 'false') : undefined, "resolve-status-access-admin-only": [true, false].includes(resolveStatusAccessAdminOnly) ? (resolveStatusAccessAdminOnly ? 'true' : 'false') : undefined, "delete-reply-confirmation": [true, false].includes(deleteReplyConfirmation) ? (deleteReplyConfirmation ? 'true' : 'false') : undefined, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "minimap-position": minimapPosition, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "filter-comments-on-dom": [true, false].includes(filterCommentsOnDom) ? (filterCommentsOnDom ? 'true' : 'false') : undefined, "bubble-on-pin": [true, false].includes(bubbleOnPin) ? (bubbleOnPin ? 'true' : 'false') : undefined, "bubble-on-pin-hover": [true, false].includes(bubbleOnPinHover) ? (bubbleOnPinHover ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-transcription": [true, false].includes(recordingTranscription) ? (recordingTranscription ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "persistent-comment-shadow-dom": [true, false].includes(persistentCommentShadowDom) ? (persistentCommentShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "area-comment": [true, false].includes(areaComment) ? (areaComment ? 'true' : 'false') : undefined, "pin-cursor-image": pinCursorImage, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "custom-status": JSON.stringify(customStatus), "custom-list-data-on-annotation": JSON.stringify(customListDataOnAnnotation), "custom-list-data-on-comment": JSON.stringify(customListDataOnComment), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined, "multi-thread-mode": [true, false].includes(multiThreadMode) ? (multiThreadMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "group-multiple-match": [true, false].includes(groupMultipleMatch) ? (groupMultipleMatch ? 'true' : 'false') : undefined, "group-matched-comments": [true, false].includes(groupMatchedComments) ? (groupMatchedComments ? 'true' : 'false') : undefined, "read-only": [true, false].includes(readOnly) ? (readOnly ? 'true' : 'false') : undefined, "custom-autocomplete-search": [true, false].includes(customAutocompleteSearch) ? (customAutocompleteSearch ? 'true' : 'false') : undefined, "delete-thread-with-first-comment": [true, false].includes(deleteThreadWithFirstComment) ? (deleteThreadWithFirstComment ? 'true' : 'false') : undefined, "svg-as-img": [true, false].includes(svgAsImg) ? (svgAsImg ? 'true' : 'false') : undefined, "expand-mention-groups": [true, false].includes(expandMentionGroups) ? (expandMentionGroups ? 'true' : 'false') : undefined, "show-mention-groups-first": [true, false].includes(showMentionGroupsFirst) ? (showMentionGroupsFirst ? 'true' : 'false') : undefined, "show-mention-groups-only": [true, false].includes(showMentionGroupsOnly) ? (showMentionGroupsOnly ? 'true' : 'false') : undefined, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined, "comment-to-nearest-allowed-element": [true, false].includes(commentToNearestAllowedElement) ? (commentToNearestAllowedElement ? 'true' : 'false') : undefined, "draft-mode": [true, false].includes(draftMode) ? (draftMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -454,7 +480,7 @@ var SnippylyCommentsSidebar = function (props) {
 };
 
 var SnippylyCommentTool = function (props) {
-    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, onCommentModeChange = props.onCommentModeChange, sourceId = props.sourceId, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom;
+    var targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, onCommentModeChange = props.onCommentModeChange, sourceId = props.sourceId, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, context = props.context, contextOptions = props.contextOptions, documentId = props.documentId, folderId = props.folderId;
     var ref = React.useRef();
     var onCommentModeChangeRef = React.useRef(onCommentModeChange);
     // Update the ref to always point to the latest callback function
@@ -480,7 +506,7 @@ var SnippylyCommentTool = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, "source-id": sourceId, variant: variant, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comment-tool", { ref: ref, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, "source-id": sourceId, variant: variant, context: JSON.stringify(context), "context-options": JSON.stringify(contextOptions), "document-id": documentId, "folder-id": folderId, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyCursor = function (props) {
@@ -849,7 +875,7 @@ var VeltCommentThread = function (props) {
 };
 
 var VeltNotificationsTool = function (props) {
-    var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, panelShadowDom = props.panelShadowDom, variant = props.variant, maxDays = props.maxDays, tabConfig = props.tabConfig, panelOpenMode = props.panelOpenMode, panelVariant = props.panelVariant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab;
+    var children = props.children, darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, panelShadowDom = props.panelShadowDom, variant = props.variant, maxDays = props.maxDays, tabConfig = props.tabConfig, panelOpenMode = props.panelOpenMode, panelVariant = props.panelVariant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, settings = props.settings;
     var ref = React.useRef();
     var onNotificationClickRef = React.useRef(onNotificationClick);
     // Update the ref to always point to the latest callback function
@@ -875,11 +901,11 @@ var VeltNotificationsTool = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref, "panel-open-mode": panelOpenMode, panelVariant: panelVariant, "tab-config": JSON.stringify(tabConfig), variant: variant, "max-days": (maxDays && maxDays > 0) ? maxDays + '' : undefined, "panel-shadow-dom": [true, false].includes(panelShadowDom) ? (panelShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-notifications-tool", { ref: ref, "panel-open-mode": panelOpenMode, panelVariant: panelVariant, "tab-config": JSON.stringify(tabConfig), variant: variant, "max-days": (maxDays && maxDays > 0) ? maxDays + '' : undefined, "panel-shadow-dom": [true, false].includes(panelShadowDom) ? (panelShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, settings: [true, false].includes(settings) ? (settings ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined }, children));
 };
 
 var VeltNotificationsPanel = function (props) {
-    var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, tabConfig = props.tabConfig, variant = props.variant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, panelOpenMode = props.panelOpenMode;
+    var darkMode = props.darkMode, onNotificationClick = props.onNotificationClick, shadowDom = props.shadowDom, tabConfig = props.tabConfig, variant = props.variant, readNotificationsOnForYouTab = props.readNotificationsOnForYouTab, panelOpenMode = props.panelOpenMode, settings = props.settings;
     var ref = React.useRef();
     var onNotificationClickRef = React.useRef(onNotificationClick);
     // Update the ref to always point to the latest callback function
@@ -905,7 +931,7 @@ var VeltNotificationsPanel = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref, variant: variant, "tab-config": JSON.stringify(tabConfig), "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined, "panel-open-mode": panelOpenMode }));
+    return (React__default["default"].createElement("velt-notifications-panel", { ref: ref, variant: variant, "tab-config": JSON.stringify(tabConfig), "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, settings: [true, false].includes(settings) ? (settings ? 'true' : 'false') : undefined, "read-notifications-on-for-you-tab": [true, false].includes(readNotificationsOnForYouTab) ? (readNotificationsOnForYouTab ? 'true' : 'false') : undefined, "panel-open-mode": panelOpenMode }));
 };
 
 var VeltNotificationsHistoryPanel = function (props) {
@@ -1408,13 +1434,13 @@ var VeltAutocomplete = function (props) {
 };
 
 var VeltInlineCommentsSection = function (props) {
-    var config = props.config, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, dialogVariant = props.dialogVariant, targetInlineCommentElementId = props.targetInlineCommentElementId, targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, multiThread = props.multiThread, sortData = props.sortData, composerVariant = props.composerVariant, composerPosition = props.composerPosition, sortBy = props.sortBy, sortOrder = props.sortOrder, fullExpanded = props.fullExpanded;
-    return (React__default["default"].createElement("velt-inline-comments-section", { "target-inline-comment-element-id": targetInlineCommentElementId, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, config: JSON.stringify(config), variant: variant, "dialog-variant": dialogVariant, "sort-data": sortData, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "composer-variant": composerVariant, "composer-position": composerPosition, "sort-by": sortBy, "sort-order": sortOrder, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined }, children));
+    var config = props.config, children = props.children, darkMode = props.darkMode, variant = props.variant, shadowDom = props.shadowDom, dialogVariant = props.dialogVariant, targetInlineCommentElementId = props.targetInlineCommentElementId, targetCommentElementId = props.targetCommentElementId, targetElementId = props.targetElementId, multiThread = props.multiThread, sortData = props.sortData, composerVariant = props.composerVariant, composerPosition = props.composerPosition, sortBy = props.sortBy, sortOrder = props.sortOrder, fullExpanded = props.fullExpanded, context = props.context, contextOptions = props.contextOptions, documentId = props.documentId, folderId = props.folderId;
+    return (React__default["default"].createElement("velt-inline-comments-section", { "target-inline-comment-element-id": targetInlineCommentElementId, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, config: JSON.stringify(config), variant: variant, "dialog-variant": dialogVariant, "sort-data": sortData, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "composer-variant": composerVariant, "composer-position": composerPosition, "sort-by": sortBy, "sort-order": sortOrder, "full-expanded": [true, false].includes(fullExpanded) ? (fullExpanded ? 'true' : 'false') : undefined, context: JSON.stringify(context), "context-options": JSON.stringify(contextOptions), "document-id": documentId, "folder-id": folderId }, children));
 };
 
 var VeltCommentPin = function (props) {
-    var children = props.children, annotationId = props.annotationId, multiThreadAnnotationId = props.multiThreadAnnotationId, variant = props.variant;
-    return (React__default["default"].createElement("velt-comment-pin", { "annotation-id": annotationId, "multi-thread-annotation-id": multiThreadAnnotationId, variant: variant }, children));
+    var children = props.children, annotationId = props.annotationId, multiThreadAnnotationId = props.multiThreadAnnotationId, variant = props.variant, context = props.context, contextOptions = props.contextOptions, documentId = props.documentId, folderId = props.folderId;
+    return (React__default["default"].createElement("velt-comment-pin", { "annotation-id": annotationId, "multi-thread-annotation-id": multiThreadAnnotationId, variant: variant, context: JSON.stringify(context), "context-options": JSON.stringify(contextOptions), "document-id": documentId, "folder-id": folderId }, children));
 };
 
 var VeltCommentText = function (props) {
@@ -1494,7 +1520,7 @@ var VeltWireframe = function (props) {
     return (React__default["default"].createElement("velt-wireframe", { style: { display: 'none' } }, children));
 };
 
-var validProps = ['veltIf', 'veltClass', 'className'];
+var validProps = ['veltIf', 'veltClass', 'className', 'variant'];
 var transformWireframeProps = function (props) {
     try {
         var transformedProps_1 = {};
@@ -2686,6 +2712,25 @@ VeltCommentsSidebarFilterTagged.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterTagged.Item = VeltCommentsSidebarFilterItem;
 VeltCommentsSidebarFilterTagged.Search = VeltCommentsSidebarFilterSearch;
 
+var VeltCommentsSidebarFilterDocument = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-document-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarFilterDocument.Name = VeltCommentsSidebarFilterName;
+VeltCommentsSidebarFilterDocument.Item = VeltCommentsSidebarFilterItem;
+VeltCommentsSidebarFilterDocument.ViewAll = VeltCommentsSidebarFilterViewAll;
+VeltCommentsSidebarFilterDocument.Search = VeltCommentsSidebarFilterSearch;
+
+var VeltCommentsSidebarFilterCustom = function (props) {
+    var children = props.children, id = props.id, remainingProps = __rest(props, ["children", "id"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-custom-wireframe", __assign({ id: id }, transformedProps), children));
+};
+VeltCommentsSidebarFilterCustom.Name = VeltCommentsSidebarFilterName;
+VeltCommentsSidebarFilterCustom.Item = VeltCommentsSidebarFilterItem;
+VeltCommentsSidebarFilterCustom.Search = VeltCommentsSidebarFilterSearch;
+
 var VeltCommentsSidebarFilter = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -2707,6 +2752,8 @@ VeltCommentsSidebarFilter.Item = VeltCommentsSidebarFilterItem;
 VeltCommentsSidebarFilter.Status = VeltCommentsSidebarFilterStatus;
 VeltCommentsSidebarFilter.ResetButton = VeltCommentsSidebarFilterResetButton;
 VeltCommentsSidebarFilter.Search = VeltCommentsSidebarFilterSearch;
+VeltCommentsSidebarFilter.Document = VeltCommentsSidebarFilterDocument;
+VeltCommentsSidebarFilter.Custom = VeltCommentsSidebarFilterCustom;
 
 var VeltCommentsSidebarFilterButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -2795,6 +2842,33 @@ var VeltCommentsSidebarLocationFilterDropdown = function (props) {
 VeltCommentsSidebarLocationFilterDropdown.Trigger = VeltCommentsSidebarLocationFilterDropdownTrigger;
 VeltCommentsSidebarLocationFilterDropdown.Content = VeltCommentsSidebarLocationFilterDropdownContent;
 
+var VeltCommentsSidebarDocumentFilterDropdownContent = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltCommentsSidebarDocumentFilterDropdownTriggerLabel = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-trigger-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltCommentsSidebarDocumentFilterDropdownTrigger = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarDocumentFilterDropdownTrigger.Label = VeltCommentsSidebarDocumentFilterDropdownTriggerLabel;
+
+var VeltCommentsSidebarDocumentFilterDropdownWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-document-filter-dropdown-wireframe", __assign({}, transformedProps), children));
+};
+VeltCommentsSidebarDocumentFilterDropdownWireframe.Trigger = VeltCommentsSidebarDocumentFilterDropdownTrigger;
+VeltCommentsSidebarDocumentFilterDropdownWireframe.Content = VeltCommentsSidebarDocumentFilterDropdownContent;
+
 var VeltCommentsSidebarMinimalActionsDropdownContentMarkAllReadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -3062,6 +3136,7 @@ VeltCommentsSidebarWireframe.Skeleton = VeltCommentsSidebarSkeleton;
 VeltCommentsSidebarWireframe.Panel = VeltCommentsSidebarPanel;
 VeltCommentsSidebarWireframe.MinimalFilterDropdown = VeltCommentsSidebarMinimalFilterDropdown;
 VeltCommentsSidebarWireframe.LocationFilterDropdown = VeltCommentsSidebarLocationFilterDropdown;
+VeltCommentsSidebarWireframe.DocumentFilterDropdown = VeltCommentsSidebarDocumentFilterDropdownWireframe;
 VeltCommentsSidebarWireframe.MinimalActionsDropdown = VeltCommentsSidebarMinimalActionsDropdownWireframe;
 VeltCommentsSidebarWireframe.ResetFilterButton = VeltCommentsSidebarResetFilterButtonWireframe;
 VeltCommentsSidebarWireframe.ActionButton = VeltCommentsSidebarActionButton;
@@ -3771,6 +3846,151 @@ var VeltNotificationsPanelSkeletonWireframe = function (props) {
     return (React__default["default"].createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltNotificationsPanelSettingsButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsDescriptionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-description-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsBackButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-back-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsFooterWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-footer-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsHeaderTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-header-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsHeaderWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-header-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsHeaderWireframe.Title = VeltNotificationsPanelSettingsHeaderTitleWireframe;
+
+var VeltNotificationsPanelSettingsAccordionTriggerSelectedValueWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-selected-value-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerLabelWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionTriggerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-trigger-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.SelectedValue = VeltNotificationsPanelSettingsAccordionTriggerSelectedValueWireframe;
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.Label = VeltNotificationsPanelSettingsAccordionTriggerLabelWireframe;
+VeltNotificationsPanelSettingsAccordionTriggerWireframe.Icon = VeltNotificationsPanelSettingsAccordionTriggerIconWireframe;
+
+var VeltNotificationsPanelSettingsAccordionContentItemLabelWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-label-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionContentItemIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsAccordionContentItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-item-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionContentItemWireframe.Icon = VeltNotificationsPanelSettingsAccordionContentItemIconWireframe;
+VeltNotificationsPanelSettingsAccordionContentItemWireframe.Label = VeltNotificationsPanelSettingsAccordionContentItemLabelWireframe;
+
+var VeltNotificationsPanelSettingsAccordionContentWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-content-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionContentWireframe.Item = VeltNotificationsPanelSettingsAccordionContentItemWireframe;
+
+var VeltNotificationsPanelSettingsAccordionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-accordion-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsAccordionWireframe.Trigger = VeltNotificationsPanelSettingsAccordionTriggerWireframe;
+VeltNotificationsPanelSettingsAccordionWireframe.Content = VeltNotificationsPanelSettingsAccordionContentWireframe;
+
+var VeltNotificationsPanelSettingsListWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-list-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsListWireframe.Accordion = VeltNotificationsPanelSettingsAccordionWireframe;
+
+var VeltNotificationsPanelSettingsMuteAllDescriptionWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-description-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsMuteAllTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsMuteAllToggleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-mute-all-toggle-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsTitleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-title-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltNotificationsPanelSettingsWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-settings-wireframe", __assign({}, transformedProps), children));
+};
+VeltNotificationsPanelSettingsWireframe.BackButton = VeltNotificationsPanelSettingsBackButtonWireframe;
+VeltNotificationsPanelSettingsWireframe.Description = VeltNotificationsPanelSettingsDescriptionWireframe;
+VeltNotificationsPanelSettingsWireframe.Footer = VeltNotificationsPanelSettingsFooterWireframe;
+VeltNotificationsPanelSettingsWireframe.Header = VeltNotificationsPanelSettingsHeaderWireframe;
+VeltNotificationsPanelSettingsWireframe.List = VeltNotificationsPanelSettingsListWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllDescription = VeltNotificationsPanelSettingsMuteAllDescriptionWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllTitle = VeltNotificationsPanelSettingsMuteAllTitleWireframe;
+VeltNotificationsPanelSettingsWireframe.MuteAllToggle = VeltNotificationsPanelSettingsMuteAllToggleWireframe;
+VeltNotificationsPanelSettingsWireframe.Title = VeltNotificationsPanelSettingsTitleWireframe;
+
 var VeltNotificationsPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -3783,6 +4003,8 @@ VeltNotificationsPanelWireframe.Title = VeltNotificationsPanelTitleWireframe;
 VeltNotificationsPanelWireframe.ViewAllButton = VeltNotificationsPanelViewAllButtonWireframe;
 VeltNotificationsPanelWireframe.CloseButton = VeltNotificationsPanelCloseButtonWireframe;
 VeltNotificationsPanelWireframe.Skeleton = VeltNotificationsPanelSkeletonWireframe;
+VeltNotificationsPanelWireframe.SettingsButton = VeltNotificationsPanelSettingsButtonWireframe;
+VeltNotificationsPanelWireframe.Settings = VeltNotificationsPanelSettingsWireframe;
 
 var VeltNotificationsToolIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -4690,6 +4912,12 @@ var VeltRecorderPlayerVideoWireframe = function (props) {
     return (React__default["default"].createElement("velt-recorder-player-video-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltRecorderPlayerEditButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-edit-button-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltRecorderPlayerVideoContainerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
@@ -4708,6 +4936,7 @@ VeltRecorderPlayerVideoContainerWireframe.Transcription = VeltRecorderPlayerTran
 VeltRecorderPlayerVideoContainerWireframe.CopyLink = VeltRecorderPlayerCopyLinkWireframe;
 VeltRecorderPlayerVideoContainerWireframe.Delete = VeltRecorderPlayerDeleteWireframe;
 VeltRecorderPlayerVideoContainerWireframe.Avatar = VeltRecorderPlayerAvatarWireframe;
+VeltRecorderPlayerVideoContainerWireframe.EditButton = VeltRecorderPlayerEditButtonWireframe;
 
 var VeltRecorderPlayerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -4965,11 +5194,94 @@ var VeltVideoEditorPlayerDeleteButtonWireframe = function (props) {
     return (React__default["default"].createElement("velt-video-editor-player-delete-button-wireframe", __assign({}, transformedProps), children));
 };
 
+var VeltVideoEditorPlayerTimelineMarkerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-marker-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonTriggerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-trigger-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsListItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-list-item-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsListWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-list-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonOptionsListWireframe.Item = VeltVideoEditorPlayerZoomButtonOptionsListItemWireframe;
+
+var VeltVideoEditorPlayerZoomButtonOptionsInputWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-input-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerZoomButtonOptionsWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-options-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonOptionsWireframe.List = VeltVideoEditorPlayerZoomButtonOptionsListWireframe;
+VeltVideoEditorPlayerZoomButtonOptionsWireframe.Input = VeltVideoEditorPlayerZoomButtonOptionsInputWireframe;
+
+var VeltVideoEditorPlayerZoomButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-zoom-button-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerZoomButtonWireframe.Trigger = VeltVideoEditorPlayerZoomButtonTriggerWireframe;
+VeltVideoEditorPlayerZoomButtonWireframe.Options = VeltVideoEditorPlayerZoomButtonOptionsWireframe;
+
+var VeltVideoEditorPlayerTimelineScaleWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-scale-wireframe", __assign({}, transformedProps), children));
+};
+VeltVideoEditorPlayerTimelineScaleWireframe.ZoomButton = VeltVideoEditorPlayerZoomButtonWireframe;
+
+var VeltVideoEditorPlayerTimelineTrimWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-trim-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerTimelineContainerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-container-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltVideoEditorPlayerTimelinePlayheadWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-timeline-playhead-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltVideoEditorPlayerTimelineWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
     var transformedProps = transformWireframeProps(remainingProps);
     return (React__default["default"].createElement("velt-video-editor-player-timeline-wireframe", __assign({}, transformedProps), children));
 };
+VeltVideoEditorPlayerTimelineWireframe.Marker = VeltVideoEditorPlayerTimelineMarkerWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Scale = VeltVideoEditorPlayerTimelineScaleWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Trim = VeltVideoEditorPlayerTimelineTrimWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Container = VeltVideoEditorPlayerTimelineContainerWireframe;
+VeltVideoEditorPlayerTimelineWireframe.Playhead = VeltVideoEditorPlayerTimelinePlayheadWireframe;
+
+var VeltVideoEditorPlayerDownloadButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-editor-player-download-button-wireframe", __assign({}, transformedProps), children));
+};
 
 var VeltVideoEditorPlayerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -4987,6 +5299,7 @@ VeltVideoEditorPlayerWireframe.TotalTime = VeltVideoEditorPlayerTotalTimeWirefra
 VeltVideoEditorPlayerWireframe.SplitButton = VeltVideoEditorPlayerSplitButtonWireframe;
 VeltVideoEditorPlayerWireframe.DeleteButton = VeltVideoEditorPlayerDeleteButtonWireframe;
 VeltVideoEditorPlayerWireframe.Timeline = VeltVideoEditorPlayerTimelineWireframe;
+VeltVideoEditorPlayerWireframe.DownloadButton = VeltVideoEditorPlayerDownloadButtonWireframe;
 
 var VeltSubtitlesTextWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
@@ -5253,6 +5566,74 @@ VeltSingleEditorModePanelWireframe.Countdown = VeltSingleEditorModePanelCountdow
 VeltSingleEditorModePanelWireframe.CancelRequest = VeltSingleEditorModePanelCancelRequestWireframe;
 VeltSingleEditorModePanelWireframe.AcceptRequest = VeltSingleEditorModePanelAcceptRequestWireframe;
 
+var VeltPresenceAvatarListItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-avatar-list-item-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceAvatarListWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-avatar-list-wireframe", __assign({}, transformedProps), children));
+};
+VeltPresenceAvatarListWireframe.Item = VeltPresenceAvatarListItemWireframe;
+
+var VeltPresenceAvatarRemainingCountWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-avatar-remaining-count-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-wireframe", __assign({}, transformedProps), children));
+};
+VeltPresenceWireframe.AvatarList = VeltPresenceAvatarListWireframe;
+VeltPresenceWireframe.AvatarRemainingCount = VeltPresenceAvatarRemainingCountWireframe;
+
+var VeltPresenceTooltipAvatarWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-avatar-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceTooltipUserActiveWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-user-active-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceTooltipUserInactiveWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-user-inactive-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceTooltipUserNameWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-user-name-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceTooltipStatusContainerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-status-container-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltPresenceTooltipWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-presence-tooltip-wireframe", __assign({}, transformedProps), children));
+};
+VeltPresenceTooltipWireframe.Avatar = VeltPresenceTooltipAvatarWireframe;
+VeltPresenceTooltipWireframe.UserActive = VeltPresenceTooltipUserActiveWireframe;
+VeltPresenceTooltipWireframe.UserInactive = VeltPresenceTooltipUserInactiveWireframe;
+VeltPresenceTooltipWireframe.UserName = VeltPresenceTooltipUserNameWireframe;
+VeltPresenceTooltipWireframe.StatusContainer = VeltPresenceTooltipStatusContainerWireframe;
+
 function useClient() {
     var client = useVeltClient().client;
     var _a = React__default["default"].useState(), veltClient = _a[0], setVeltClient = _a[1];
@@ -5304,15 +5685,15 @@ function useSetDocuments() {
     var client = useVeltClient().client;
     var _a = React__default["default"].useState(undefined), data = _a[0], setData = _a[1];
     // Memoize the setDocuments call
-    var memoizedData = React__default["default"].useMemo(function () {
-        return data;
-    }, [JSON.stringify(data === null || data === void 0 ? void 0 : data.documents), JSON.stringify(data === null || data === void 0 ? void 0 : data.options)]);
+    // const memoizedData = React.useMemo(() => {
+    //   return data;
+    // }, [JSON.stringify(data?.documents), JSON.stringify(data?.options)]);
     React__default["default"].useEffect(function () {
         var _a;
-        if (client && ((_a = memoizedData === null || memoizedData === void 0 ? void 0 : memoizedData.documents) === null || _a === void 0 ? void 0 : _a.length)) {
-            client.setDocuments(memoizedData.documents, memoizedData.options);
+        if ((client === null || client === void 0 ? void 0 : client.setDocuments) && ((_a = data === null || data === void 0 ? void 0 : data.documents) === null || _a === void 0 ? void 0 : _a.length)) {
+            client.setDocuments(data.documents, data.options);
         }
-    }, [client === null || client === void 0 ? void 0 : client.setDocuments, memoizedData]);
+    }, [client === null || client === void 0 ? void 0 : client.setDocuments, data]);
     // Memoize the setDocuments callback
     var setDocumentsCallback = React__default["default"].useCallback(function (documents, options) {
         setData({ documents: documents, options: options });
@@ -5321,6 +5702,22 @@ function useSetDocuments() {
         setDocuments: setDocumentsCallback
     };
 }
+function useSetRootDocument() {
+    var client = useVeltClient().client;
+    var _a = React__default["default"].useState(undefined), data = _a[0], setData = _a[1];
+    React__default["default"].useEffect(function () {
+        if ((client === null || client === void 0 ? void 0 : client.setRootDocument) && data) {
+            client.setRootDocument(data);
+        }
+    }, [client === null || client === void 0 ? void 0 : client.setRootDocument, data]);
+    // Memoize the setRootDocument callback
+    var setRootDocumentCallback = React__default["default"].useCallback(function (document) {
+        setData(document);
+    }, []); // Empty dependency array since it only uses setState which is stable
+    return {
+        setRootDocument: setRootDocumentCallback
+    };
+}
 function useUnsetDocumentId() {
     var client = useVeltClient().client;
     React__default["default"].useEffect(function () {
@@ -5345,6 +5742,39 @@ function useSetLocation(location, appendLocation) {
         }
     }, [client, shouldSetLocation]);
 }
+function useSetLocations() {
+    var client = useVeltClient().client;
+    var _a = React__default["default"].useState(undefined), data = _a[0], setData = _a[1];
+    React__default["default"].useEffect(function () {
+        var _a;
+        if ((client === null || client === void 0 ? void 0 : client.setLocations) && ((_a = data === null || data === void 0 ? void 0 : data.locations) === null || _a === void 0 ? void 0 : _a.length)) {
+            client.setLocations(data.locations, data.options);
+        }
+    }, [client === null || client === void 0 ? void 0 : client.setLocations, data]);
+    // Memoize the setLocations callback
+    var setLocationsCallback = React__default["default"].useCallback(function (locations, options) {
+        setData({ locations: locations, options: options });
+    }, []); // Empty dependency array since it only uses setState which is stable
+    return {
+        setLocations: setLocationsCallback
+    };
+}
+function useSetRootLocation() {
+    var client = useVeltClient().client;
+    var _a = React__default["default"].useState(undefined), data = _a[0], setData = _a[1];
+    React__default["default"].useEffect(function () {
+        if ((client === null || client === void 0 ? void 0 : client.setRootLocation) && data) {
+            client.setRootLocation(data);
+        }
+    }, [client === null || client === void 0 ? void 0 : client.setRootLocation, data]);
+    // Memoize the setRootLocation callback
+    var setRootLocationCallback = React__default["default"].useCallback(function (location) {
+        setData(location);
+    }, []); // Empty dependency array since it only uses setState which is stable
+    return {
+        setRootLocation: setRootLocationCallback
+    };
+}
 function useVeltInitState() {
     var client = useVeltClient().client;
     var _a = React__default["default"].useState(), data = _a[0], setData = _a[1];
@@ -6415,6 +6845,9 @@ function usePresenceUtils() {
     }, [client, setPresenceElement, presenceElement]);
     return presenceElement;
 }
+/**
+ * @deprecated Use `usePresenceData` hook instead.
+ */
 function usePresenceUsers() {
     var presenceElement = usePresenceUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -6430,6 +6863,41 @@ function usePresenceUsers() {
     }, [presenceElement]);
     return data;
 }
+function usePresenceData(query) {
+    var presenceElement = usePresenceUtils();
+    var _a = React.useState({ data: null }), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef();
+    // Memoize the inputs
+    var memoizedData = React.useMemo(function () {
+        return query;
+    }, [JSON.stringify(query)]);
+    React.useEffect(function () {
+        if (!(presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.getData))
+            return;
+        // Unsubscribe from the previous subscription if it exists
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = presenceElement.getData(memoizedData)
+            .subscribe(function (res) {
+            if (res) {
+                setData(res);
+            }
+            else {
+                setData({ data: null });
+            }
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [presenceElement === null || presenceElement === void 0 ? void 0 : presenceElement.getData, memoizedData]);
+    return data;
+}
 
 function usePresenceEventCallback(action) {
     var presenceElement = usePresenceUtils();
@@ -6738,6 +7206,74 @@ function useUnreadNotificationsCount() {
     }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getUnreadNotificationsCount]);
     return data;
 }
+function useNotificationSettings() {
+    var notificationElement = useNotificationUtils();
+    var _a = React__default["default"].useState(null), settings = _a[0], setSettings = _a[1];
+    var _b = React__default["default"].useState(undefined), settingsData = _b[0], setSettingsData = _b[1];
+    var _c = React__default["default"].useState(undefined), settingsInitialConfigData = _c[0], setSettingsInitialConfigData = _c[1];
+    React.useEffect(function () {
+        if ((notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.setSettingsInitialConfig) && settingsInitialConfigData) {
+            notificationElement.setSettingsInitialConfig(settingsInitialConfigData);
+        }
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.setSettingsInitialConfig, settingsInitialConfigData]);
+    React.useEffect(function () {
+        if ((notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.setSettings) && settingsData) {
+            notificationElement.setSettings(settingsData);
+        }
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.setSettings, settingsData]);
+    React.useEffect(function () {
+        var _a;
+        if (!(notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getSettings))
+            return;
+        // Added this check to make is backward compatible with the old version of the SDK where getSettings() returns value instead of observable
+        if (!((_a = notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getSettings()) === null || _a === void 0 ? void 0 : _a.subscribe))
+            return;
+        var subscription = notificationElement.getSettings().subscribe(function (res) {
+            setSettings(res);
+        });
+        return function () {
+            subscription.unsubscribe();
+        };
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.getSettings]);
+    var setSettingsInitialConfigCallback = React__default["default"].useCallback(function (settingsInitialConfig) {
+        setSettingsInitialConfigData(settingsInitialConfig);
+    }, []);
+    var setSettingsCallback = React__default["default"].useCallback(function (settings) {
+        setSettingsData(settings);
+    }, []);
+    return {
+        settings: settings,
+        setSettings: setSettingsCallback,
+        setSettingsInitialConfig: setSettingsInitialConfigCallback,
+    };
+}
+
+function useNotificationEventCallback(action) {
+    var notificationElement = useNotificationUtils();
+    var _a = React.useState(null), data = _a[0], setData = _a[1];
+    var subscriptionRef = React.useRef(null);
+    var memoizedAction = React.useMemo(function () { return action; }, [action]);
+    React.useEffect(function () {
+        var _a;
+        if (!(notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on))
+            return;
+        if (subscriptionRef.current) {
+            subscriptionRef.current.unsubscribe();
+        }
+        var subscription = (_a = notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on(memoizedAction)) === null || _a === void 0 ? void 0 : _a.subscribe(function (data) {
+            setData(data);
+        });
+        // Store the new subscription
+        subscriptionRef.current = subscription;
+        // Cleanup function
+        return function () {
+            if (subscriptionRef.current) {
+                subscriptionRef.current.unsubscribe();
+            }
+        };
+    }, [notificationElement === null || notificationElement === void 0 ? void 0 : notificationElement.on, memoizedAction]);
+    return data;
+}
 
 function useAutocompleteUtils() {
     var _a = React__default["default"].useState(), autocompleteElement = _a[0], setAutocompleteElement = _a[1];
@@ -7008,6 +7544,8 @@ exports.VeltNotificationsTool = VeltNotificationsTool;
 exports.VeltNotificationsToolWireframe = VeltNotificationsToolWireframe;
 exports.VeltPersistentCommentModeWireframe = VeltPersistentCommentModeWireframe;
 exports.VeltPresence = SnippylyPresence;
+exports.VeltPresenceTooltipWireframe = VeltPresenceTooltipWireframe;
+exports.VeltPresenceWireframe = VeltPresenceWireframe;
 exports.VeltProvider = SnippylyProvider;
 exports.VeltReactionPinTooltipWireframe = VeltReactionPinTooltipWireframe;
 exports.VeltReactionPinWireframe = VeltReactionPinWireframe;
@@ -7097,8 +7635,11 @@ exports.useLiveState = useLiveState;
 exports.useLiveStateData = useLiveStateData;
 exports.useLiveStateSyncEventCallback = useLiveStateSyncEventCallback;
 exports.useLiveStateSyncUtils = useLiveStateSyncUtils;
+exports.useNotificationEventCallback = useNotificationEventCallback;
+exports.useNotificationSettings = useNotificationSettings;
 exports.useNotificationUtils = useNotificationUtils;
 exports.useNotificationsData = useNotificationsData;
+exports.usePresenceData = usePresenceData;
 exports.usePresenceEventCallback = usePresenceEventCallback;
 exports.usePresenceUsers = usePresenceUsers;
 exports.usePresenceUtils = usePresenceUtils;
@@ -7115,6 +7656,9 @@ exports.useSetDocumentId = useSetDocumentId;
 exports.useSetDocuments = useSetDocuments;
 exports.useSetLiveStateData = useSetLiveStateData;
 exports.useSetLocation = useSetLocation;
+exports.useSetLocations = useSetLocations;
+exports.useSetRootDocument = useSetRootDocument;
+exports.useSetRootLocation = useSetRootLocation;
 exports.useSubscribeCommentAnnotation = useSubscribeCommentAnnotation;
 exports.useTagAnnotations = useTagAnnotations;
 exports.useTagUtils = useTagUtils;