@veltdev/react 4.0.0-beta.8 → 4.0.0

package/esm/index.js

@@ -132,12 +132,12 @@ var loadVelt = function (callback, version, staging, develop, proxyDomain) {
     }
 };
 
-var VELT_SDK_VERSION = '4.0.0-beta.8';
+var VELT_SDK_VERSION = '4.0.0';
 var VELT_SDK_INIT_EVENT = 'onVeltInit';
 var VELT_TAB_ID = 'veltTabId';
 
 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, onClientLoad = props.onClientLoad, children = props.children;
+    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, onClientLoad = props.onClientLoad, children = props.children;
     var _a = useState(null), client = _a[0], setClient = _a[1];
     useEffect(function () {
         if (apiKey) {
@@ -146,6 +146,13 @@ var SnippylyProvider = function (props) {
             }, (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);
         }
     }, []);
+    useEffect(function () {
+        if (client && userDataProvider) {
+            if (typeof (client === null || client === void 0 ? void 0 : client.setUserDataProvider) === 'function') {
+                client === null || client === void 0 ? void 0 : client.setUserDataProvider(userDataProvider);
+            }
+        }
+    }, [client, userDataProvider]);
     var initVelt = function () { return __awaiter(void 0, void 0, void 0, function () {
         var velt, event;
         var _a, _b;
@@ -226,7 +233,7 @@ var SnippylyCommentBubble = function (props) {
 };
 
 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, seenByUsers = props.seenByUsers, readOnly = props.readOnly, atHereEnabled = props.atHereEnabled;
+    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, seenByUsers = props.seenByUsers, readOnly = props.readOnly, atHereEnabled = props.atHereEnabled, customAutocompleteSearch = props.customAutocompleteSearch, deleteThreadWithFirstComment = props.deleteThreadWithFirstComment;
     var ref = useRef();
     var onSignInRef = useRef(onSignIn);
     var onUpgradeRef = useRef(onUpgrade);
@@ -351,7 +358,7 @@ var SnippylyComments = function (props) {
             }
         };
     }, []);
-    return (React.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 }, children));
+    return (React.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 }, children));
 };
 
 var SnippylyCommentsSidebar = function (props) {
@@ -598,7 +605,8 @@ var SnippylyRecorderControlPanel = function (props) {
 };
 
 var SnippylyRecorderNotes = function (props) {
-    return (React.createElement("velt-recorder-notes", null));
+    var shadowDom = props.shadowDom, children = props.children;
+    return (React.createElement("velt-recorder-notes", { "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyRecorderPlayer = function (props) {
@@ -632,8 +640,8 @@ var SnippylyRecorderPlayer = function (props) {
 };
 
 var SnippylyRecorderTool = function (props) {
-    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children, darkMode = props.darkMode;
-    return (React.createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined }, children));
+    var type = props.type, panelId = props.panelId, buttonLabel = props.buttonLabel, children = props.children, darkMode = props.darkMode, shadowDom = props.shadowDom;
+    return (React.createElement("velt-recorder-tool", { type: type, "panel-id": panelId, "button-label": buttonLabel, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylySidebarButton = function (props) {
@@ -1385,8 +1393,8 @@ 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;
-    return (React.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 }, 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;
+    return (React.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 }, children));
 };
 
 var VeltCommentPin = function (props) {
@@ -1465,44 +1473,83 @@ var VeltWireframe = function (props) {
     return (React.createElement("velt-wireframe", { style: { display: 'none' } }, children));
 };
 
+var validProps = ['veltIf', 'veltClass', 'className'];
+var transformWireframeProps = function (props) {
+    try {
+        var transformedProps_1 = {};
+        Object.entries(props).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (key === 'children' || key === 'ref' || !validProps.includes(key)) {
+                transformedProps_1[key] = value;
+                return;
+            }
+            if (key === 'className') {
+                transformedProps_1['class'] = value;
+                return;
+            }
+            // Convert camelCase to dash-case
+            var dashKey = key.replace(/[A-Z]/g, function (letter) { return "-".concat(letter.toLowerCase()); });
+            transformedProps_1[dashKey] = value;
+            // // Handle boolean values - only convert if explicitly true/false
+            // if (typeof value === 'boolean') {
+            //     transformedProps[dashKey] = [true, false].includes(value) ? (value ? 'true' : 'false') : undefined;
+            // } else {
+            //     transformedProps[dashKey] = value;
+            // }
+        });
+        return transformedProps_1;
+    }
+    catch (error) {
+        return props;
+    }
+};
+
 var VeltCommentDialogAllComment = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-all-comment-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-all-comment-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogApprove = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-approve-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-approve-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssignMenu = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assign-menu-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assign-menu-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBannerResolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assignee-banner-resolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assignee-banner-resolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBannerUserAvatar = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assignee-banner-user-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assignee-banner-user-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBannerUserName = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assignee-banner-user-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assignee-banner-user-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBannerUnresolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assignee-banner-unresolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assignee-banner-unresolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBanner = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-assignee-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-assignee-banner-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogAssigneeBanner.ResolveButton = VeltCommentDialogAssigneeBannerResolveButton;
 VeltCommentDialogAssigneeBanner.UserAvatar = VeltCommentDialogAssigneeBannerUserAvatar;
@@ -1510,115 +1557,136 @@ VeltCommentDialogAssigneeBanner.UserName = VeltCommentDialogAssigneeBannerUserNa
 VeltCommentDialogAssigneeBanner.UnresolveButton = VeltCommentDialogAssigneeBannerUnresolveButton;
 
 var VeltCommentDialogBody = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-body-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-body-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentCategory = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-comment-category-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-comment-category-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentIndex = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-comment-index-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-comment-index-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentSuggestionStatus = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-comment-suggestion-status-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-comment-suggestion-status-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerActionButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-action-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-action-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAssignUser = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-assign-user-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-assign-user-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsInvalidItemPreview = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-preview-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-preview-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsInvalidItemMessage = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-message-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-message-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsInvalidItemDelete = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsInvalidItem = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsInvalidItem.Preview = VeltCommentDialogComposerAttachmentsInvalidItemPreview;
 VeltCommentDialogComposerAttachmentsInvalidItem.Message = VeltCommentDialogComposerAttachmentsInvalidItemMessage;
 VeltCommentDialogComposerAttachmentsInvalidItem.Delete = VeltCommentDialogComposerAttachmentsInvalidItemDelete;
 
 var VeltCommentDialogComposerAttachmentsInvalid = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-invalid-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsInvalid.Item = VeltCommentDialogComposerAttachmentsInvalidItem;
 
 var VeltCommentDialogComposerAttachmentsImagePreview = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-image-preview-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-image-preview-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsImageDelete = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-image-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-image-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsImageLoading = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-image-loading-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-image-loading-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsImage = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-image-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-image-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsImage.Preview = VeltCommentDialogComposerAttachmentsImagePreview;
 VeltCommentDialogComposerAttachmentsImage.Loading = VeltCommentDialogComposerAttachmentsImageLoading;
 VeltCommentDialogComposerAttachmentsImage.Delete = VeltCommentDialogComposerAttachmentsImageDelete;
 
 var VeltCommentDialogComposerAttachmentsOtherDelete = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsOtherIcon = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsOtherLoading = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-loading-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-loading-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsOtherName = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsOtherSize = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-size-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-size-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAttachmentsOther = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-other-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-other-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsOther.Delete = VeltCommentDialogComposerAttachmentsOtherDelete;
 VeltCommentDialogComposerAttachmentsOther.Loading = VeltCommentDialogComposerAttachmentsOtherLoading;
@@ -1627,42 +1695,49 @@ VeltCommentDialogComposerAttachmentsOther.Name = VeltCommentDialogComposerAttach
 VeltCommentDialogComposerAttachmentsOther.Size = VeltCommentDialogComposerAttachmentsOtherSize;
 
 var VeltCommentDialogComposerAttachmentsSelected = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-selected-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-selected-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsSelected.Image = VeltCommentDialogComposerAttachmentsImage;
 VeltCommentDialogComposerAttachmentsSelected.Other = VeltCommentDialogComposerAttachmentsOther;
 
 var VeltCommentDialogComposerAttachments = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-attachments-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-attachments-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachments.Invalid = VeltCommentDialogComposerAttachmentsInvalid;
 VeltCommentDialogComposerAttachments.Selected = VeltCommentDialogComposerAttachmentsSelected;
 
 var VeltCommentDialogComposerInput = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-input-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-input-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerRecordings = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-recordings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-recordings-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerPrivateBadge = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-private-badge-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-private-badge-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerAvatar = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposer = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-composer-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-composer-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposer.ActionButton = VeltCommentDialogComposerActionButton;
 VeltCommentDialogComposer.AssignUser = VeltCommentDialogComposerAssignUser;
@@ -1673,28 +1748,33 @@ VeltCommentDialogComposer.PrivateBadge = VeltCommentDialogComposerPrivateBadge;
 VeltCommentDialogComposer.Avatar = VeltCommentDialogComposerAvatar;
 
 var VeltCommentDialogCopyLink = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogGhostBanner = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-ghost-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-ghost-banner-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogHeader = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-header-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-header-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogMoreReply = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-more-reply-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-more-reply-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentAssignWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-assign-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-assign-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentDeleteCommentWireframe = function (props) {
@@ -1708,15 +1788,17 @@ var VeltCommentDialogOptionsDropdownContentDeleteThreadWireframe = function (pro
 };
 
 var VeltCommentDialogOptionsDropdownContentDeleteWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-delete-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentDeleteWireframe.Comment = VeltCommentDialogOptionsDropdownContentDeleteCommentWireframe;
 VeltCommentDialogOptionsDropdownContentDeleteWireframe.Thread = VeltCommentDialogOptionsDropdownContentDeleteThreadWireframe;
 
 var VeltCommentDialogOptionsDropdownContentEditWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-edit-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-edit-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe = function (props) {
@@ -1730,8 +1812,9 @@ var VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe = function
 };
 
 var VeltCommentDialogOptionsDropdownContentMakePrivateWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-make-private-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-make-private-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Enable = VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe;
 VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Disable = VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe;
@@ -1747,15 +1830,17 @@ var VeltCommentDialogOptionsDropdownContentNotificationUnsubscribeWireframe = fu
 };
 
 var VeltCommentDialogOptionsDropdownContentNotificationWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-notification-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-notification-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentNotificationWireframe.Subscribe = VeltCommentDialogOptionsDropdownContentNotificationSubscribeWireframe;
 VeltCommentDialogOptionsDropdownContentNotificationWireframe.Unsubscribe = VeltCommentDialogOptionsDropdownContentNotificationUnsubscribeWireframe;
 
 var VeltCommentDialogOptionsDropdownContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentWireframe.Assign = VeltCommentDialogOptionsDropdownContentAssignWireframe;
 VeltCommentDialogOptionsDropdownContentWireframe.MakePrivate = VeltCommentDialogOptionsDropdownContentMakePrivateWireframe;
@@ -1764,212 +1849,249 @@ VeltCommentDialogOptionsDropdownContentWireframe.Delete = VeltCommentDialogOptio
 VeltCommentDialogOptionsDropdownContentWireframe.Notification = VeltCommentDialogOptionsDropdownContentNotificationWireframe;
 
 var VeltCommentDialogOptionsDropdownTriggerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptions = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-options-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-options-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptions.Content = VeltCommentDialogOptionsDropdownContentWireframe;
 VeltCommentDialogOptions.Trigger = VeltCommentDialogOptionsDropdownTriggerWireframe;
 
 var VeltCommentDialogPriorityDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownContentItemNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownContentItemTickWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-tick-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-tick-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownContentItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogPriorityDropdownContentItemWireframe.Icon = VeltCommentDialogPriorityDropdownContentItemIconWireframe;
 VeltCommentDialogPriorityDropdownContentItemWireframe.Name = VeltCommentDialogPriorityDropdownContentItemNameWireframe;
 VeltCommentDialogPriorityDropdownContentItemWireframe.Tick = VeltCommentDialogPriorityDropdownContentItemTickWireframe;
 
 var VeltCommentDialogPriorityDropdownContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogPriorityDropdownContentWireframe.Item = VeltCommentDialogPriorityDropdownContentItemWireframe;
 
 var VeltCommentDialogPriorityDropdownTriggerArrowWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-arrow-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownTriggerIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownTriggerNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogPriorityDropdownTriggerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogPriorityDropdownTriggerWireframe.Arrow = VeltCommentDialogPriorityDropdownTriggerArrowWireframe;
 VeltCommentDialogPriorityDropdownTriggerWireframe.Name = VeltCommentDialogPriorityDropdownTriggerNameWireframe;
 VeltCommentDialogPriorityDropdownTriggerWireframe.Icon = VeltCommentDialogPriorityDropdownTriggerIconWireframe;
 
 var VeltCommentDialogPriority = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-priority-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-priority-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogPriority.Content = VeltCommentDialogPriorityDropdownContentWireframe;
 VeltCommentDialogPriority.Trigger = VeltCommentDialogPriorityDropdownTriggerWireframe;
 
 var VeltCommentDialogPrivateBanner = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-private-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-private-banner-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogResolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-resolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-resolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogSignIn = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-sign-in-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-sign-in-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownContentItemNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownContentItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogStatusDropdownContentItemWireframe.Icon = VeltCommentDialogStatusDropdownContentItemIconWireframe;
 VeltCommentDialogStatusDropdownContentItemWireframe.Name = VeltCommentDialogStatusDropdownContentItemNameWireframe;
 
 var VeltCommentDialogStatusDropdownContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogStatusDropdownContentWireframe.Item = VeltCommentDialogStatusDropdownContentItemWireframe;
 
 var VeltCommentDialogStatusDropdownTriggerArrowWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-arrow-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownTriggerIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownTriggerNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownTriggerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogStatusDropdownTriggerWireframe.Arrow = VeltCommentDialogStatusDropdownTriggerArrowWireframe;
 VeltCommentDialogStatusDropdownTriggerWireframe.Name = VeltCommentDialogStatusDropdownTriggerNameWireframe;
 VeltCommentDialogStatusDropdownTriggerWireframe.Icon = VeltCommentDialogStatusDropdownTriggerIconWireframe;
 
 var VeltCommentDialogStatus = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-status-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-status-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogStatus.Content = VeltCommentDialogStatusDropdownContentWireframe;
 VeltCommentDialogStatus.Trigger = VeltCommentDialogStatusDropdownTriggerWireframe;
 
 var VeltCommentDialogSuggestionActionAccept = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-suggestion-action-accept-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-suggestion-action-accept-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogSuggestionActionReject = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-suggestion-action-reject-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-suggestion-action-reject-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogSuggestionAction = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-suggestion-action-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-suggestion-action-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogSuggestionAction.Accept = VeltCommentDialogSuggestionActionAccept;
 VeltCommentDialogSuggestionAction.Reject = VeltCommentDialogSuggestionActionReject;
 
 var VeltCommentDialogThreadCardAttachmentsImagePreview = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-preview-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-preview-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsImageDelete = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsImageDownload = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-download-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-download-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsImage = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-image-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardAttachmentsImage.Preview = VeltCommentDialogThreadCardAttachmentsImagePreview;
 VeltCommentDialogThreadCardAttachmentsImage.Download = VeltCommentDialogThreadCardAttachmentsImageDownload;
 VeltCommentDialogThreadCardAttachmentsImage.Delete = VeltCommentDialogThreadCardAttachmentsImageDelete;
 
 var VeltCommentDialogThreadCardAttachmentsOtherDelete = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsOtherDownload = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-download-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-download-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsOtherIcon = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsOtherName = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsOtherSize = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-size-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-size-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardAttachmentsOther = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-other-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardAttachmentsOther.Icon = VeltCommentDialogThreadCardAttachmentsOtherIcon;
 VeltCommentDialogThreadCardAttachmentsOther.Name = VeltCommentDialogThreadCardAttachmentsOtherName;
@@ -1978,126 +2100,148 @@ VeltCommentDialogThreadCardAttachmentsOther.Download = VeltCommentDialogThreadCa
 VeltCommentDialogThreadCardAttachmentsOther.Delete = VeltCommentDialogThreadCardAttachmentsOtherDelete;
 
 var VeltCommentDialogThreadCardAttachments = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-attachments-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-attachments-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardAttachments.Other = VeltCommentDialogThreadCardAttachmentsOther;
 VeltCommentDialogThreadCardAttachments.Image = VeltCommentDialogThreadCardAttachmentsImage;
 
 var VeltCommentDialogThreadCardAvatar = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardDeviceType = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-device-type-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-device-type-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardDraft = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-draft-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-draft-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardMessage = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-message-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-message-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardName = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardOptions = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-options-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-options-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardOptions.Content = VeltCommentDialogOptionsDropdownContentWireframe;
 VeltCommentDialogThreadCardOptions.Trigger = VeltCommentDialogOptionsDropdownTriggerWireframe;
 
 var VeltCommentDialogThreadCardReactionTool = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-reaction-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-reaction-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardReactions = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-reactions-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-reactions-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardRecordings = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-recordings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-recordings-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardTime = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardUnread = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-unread-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdownContentTitle = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-title-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdownContentItemAvatar = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdownContentItemName = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdownContentItemTime = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdownContentItem = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardSeenDropdownContentItem.Avatar = VeltCommentDialogThreadCardSeenDropdownContentItemAvatar;
 VeltCommentDialogThreadCardSeenDropdownContentItem.Name = VeltCommentDialogThreadCardSeenDropdownContentItemName;
 VeltCommentDialogThreadCardSeenDropdownContentItem.Time = VeltCommentDialogThreadCardSeenDropdownContentItemTime;
 
 var VeltCommentDialogThreadCardSeenDropdownContentItems = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-items-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-items-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardSeenDropdownContentItems.Item = VeltCommentDialogThreadCardSeenDropdownContentItem;
 
 var VeltCommentDialogThreadCardSeenDropdownContent = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardSeenDropdownContent.Title = VeltCommentDialogThreadCardSeenDropdownContentTitle;
 VeltCommentDialogThreadCardSeenDropdownContent.Items = VeltCommentDialogThreadCardSeenDropdownContentItems;
 
 var VeltCommentDialogThreadCardSeenDropdownTrigger = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogThreadCardSeenDropdown = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-seen-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardSeenDropdown.Trigger = VeltCommentDialogThreadCardSeenDropdownTrigger;
 VeltCommentDialogThreadCardSeenDropdown.Content = VeltCommentDialogThreadCardSeenDropdownContent;
 
 // Main Thread Card component
 var VeltCommentDialogThreadCard = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-thread-card-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-thread-card-wireframe", __assign({}, transformedProps), children));
 };
 // Attach the Sub component as a static property of the main Thread Card component
 VeltCommentDialogThreadCard.Avatar = VeltCommentDialogThreadCardAvatar;
@@ -2115,90 +2259,106 @@ VeltCommentDialogThreadCard.Draft = VeltCommentDialogThreadCardDraft;
 VeltCommentDialogThreadCard.SeenDropdown = VeltCommentDialogThreadCardSeenDropdown;
 
 var VeltCommentDialogThreads = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-threads-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-threads-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogToggleReplyCount = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-toggle-reply-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-toggle-reply-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogToggleReplyText = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-toggle-reply-text-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-toggle-reply-text-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogToggleReplyIcon = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-toggle-reply-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-toggle-reply-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogToggleReply = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-toggle-reply-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-toggle-reply-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogToggleReply.Icon = VeltCommentDialogToggleReplyIcon;
 VeltCommentDialogToggleReply.Text = VeltCommentDialogToggleReplyText;
 VeltCommentDialogToggleReply.Count = VeltCommentDialogToggleReplyCount;
 
 var VeltCommentDialogUpgrade = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-upgrade-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-upgrade-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownContentItemIcon = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownContentItemLabel = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownContentItem = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdownContentItem.Label = VeltCommentDialogCustomAnnotationDropdownContentItemLabel;
 VeltCommentDialogCustomAnnotationDropdownContentItem.Icon = VeltCommentDialogCustomAnnotationDropdownContentItemIcon;
 
 var VeltCommentDialogCustomAnnotationDropdownContent = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdownContent.Item = VeltCommentDialogCustomAnnotationDropdownContentItem;
 
 var VeltCommentDialogCustomAnnotationDropdownTriggerArrow = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-arrow-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-arrow-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownTriggerListItem = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-list-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-list-item-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownTriggerList = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdownTriggerList.Item = VeltCommentDialogCustomAnnotationDropdownTriggerListItem;
 
 var VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownTrigger = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdownTrigger.Arrow = VeltCommentDialogCustomAnnotationDropdownTriggerArrow;
 VeltCommentDialogCustomAnnotationDropdownTrigger.List = VeltCommentDialogCustomAnnotationDropdownTriggerList;
@@ -2206,35 +2366,41 @@ VeltCommentDialogCustomAnnotationDropdownTrigger.RemainingCount = VeltCommentDia
 VeltCommentDialogCustomAnnotationDropdownTrigger.Placeholder = VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder;
 
 var VeltCommentDialogCustomAnnotationDropdown = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-custom-annotation-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdown.Content = VeltCommentDialogCustomAnnotationDropdownContent;
 VeltCommentDialogCustomAnnotationDropdown.Trigger = VeltCommentDialogCustomAnnotationDropdownTrigger;
 
 var VeltCommentDialogDeleteButton = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-comment-dialog-delete-button-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-delete-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCloseButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogUnresolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-unresolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-unresolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogNavigationButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-navigation-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-navigation-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-dialog-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-dialog-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogWireframe.AllComment = VeltCommentDialogAllComment;
 VeltCommentDialogWireframe.Approve = VeltCommentDialogApprove;
@@ -2268,44 +2434,52 @@ VeltCommentDialogWireframe.NavigationButton = VeltCommentDialogNavigationButton;
 
 var VeltCommentsSidebarCloseButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarEmptyPlaceholder = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-empty-placeholder-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-empty-placeholder-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItemCheckboxChecked = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-checked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-checked-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItemCheckboxUnchecked = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItemCheckbox = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-checkbox-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterItemCheckbox.Checked = VeltCommentsSidebarFilterItemCheckboxChecked;
 VeltCommentsSidebarFilterItemCheckbox.Unchecked = VeltCommentsSidebarFilterItemCheckboxUnchecked;
 
 var VeltCommentsSidebarFilterItemCount = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItemName = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItem = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-item-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterItem.Checkbox = VeltCommentsSidebarFilterItemCheckbox;
 VeltCommentsSidebarFilterItem.Count = VeltCommentsSidebarFilterItemCount;
@@ -2313,48 +2487,56 @@ VeltCommentsSidebarFilterItem.Name = VeltCommentsSidebarFilterItemName;
 
 var VeltCommentsSidebarFilterName = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterCategory = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-category-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-category-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterCategory.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterCategory.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterCloseButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterCommentType = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-comment-type-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-comment-type-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterCommentType.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterCommentType.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterDoneButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-done-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-done-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterGroupBy = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-group-by-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-group-by-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterGroupBy.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterGroupBy.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterViewAll = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-view-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-view-all-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterLocation = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-location-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-location-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterLocation.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterLocation.Item = VeltCommentsSidebarFilterItem;
@@ -2362,40 +2544,46 @@ VeltCommentsSidebarFilterLocation.ViewAll = VeltCommentsSidebarFilterViewAll;
 
 var VeltCommentsSidebarFilterPeople = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-people-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-people-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterPeople.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterPeople.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterPriority = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-priority-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-priority-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterPriority.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterPriority.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterTitle = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-title-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterVersions = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-versions-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-versions-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterVersions.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterVersions.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilterStatus = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-status-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-status-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterStatus.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterStatus.Item = VeltCommentsSidebarFilterItem;
 
 var VeltCommentsSidebarFilter = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilter.Category = VeltCommentsSidebarFilterCategory;
 VeltCommentsSidebarFilter.CloseButton = VeltCommentsSidebarFilterCloseButton;
@@ -2412,37 +2600,44 @@ VeltCommentsSidebarFilter.Status = VeltCommentsSidebarFilterStatus;
 
 var VeltCommentsSidebarFilterButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-filter-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarHeader = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-header-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-header-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemDialogContainer = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-dialog-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-dialog-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemGroupCount = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-group-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-group-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemGroupArrow = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-group-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-group-arrow-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemGroupName = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-group-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-group-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemGroup = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-group-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-group-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarListItemGroup.Count = VeltCommentsSidebarListItemGroupCount;
 VeltCommentsSidebarListItemGroup.Arrow = VeltCommentsSidebarListItemGroupArrow;
@@ -2450,107 +2645,126 @@ VeltCommentsSidebarListItemGroup.Name = VeltCommentsSidebarListItemGroupName;
 
 var VeltCommentsSidebarListItem = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-item-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-item-wireframe", __assign({}, transformedProps), children));
 };
-VeltCommentsSidebarListItem.Group = VeltCommentsSidebarListItemGroup;
 VeltCommentsSidebarListItem.DialogContainer = VeltCommentsSidebarListItemDialogContainer;
+VeltCommentsSidebarListItem.Group = VeltCommentsSidebarListItemGroup;
 
 var VeltCommentsSidebarList = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarList.Item = VeltCommentsSidebarListItem;
 
 var VeltCommentsSidebarLocationFilterDropdownContent = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarLocationFilterDropdownTriggerLabel = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarLocationFilterDropdownTrigger = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarLocationFilterDropdownTrigger.Label = VeltCommentsSidebarLocationFilterDropdownTriggerLabel;
 
 var VeltCommentsSidebarLocationFilterDropdown = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-location-filter-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarLocationFilterDropdown.Trigger = VeltCommentsSidebarLocationFilterDropdownTrigger;
 VeltCommentsSidebarLocationFilterDropdown.Content = VeltCommentsSidebarLocationFilterDropdownContent;
 
 var VeltCommentsSidebarMinimalActionsDropdownContentMarkAllReadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalActionsDropdownContentMarkAllResolvedWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalActionsDropdownContentWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarMinimalActionsDropdownContentWireframe.MarkAllRead = VeltCommentsSidebarMinimalActionsDropdownContentMarkAllReadWireframe;
 VeltCommentsSidebarMinimalActionsDropdownContentWireframe.MarkAllResolved = VeltCommentsSidebarMinimalActionsDropdownContentMarkAllResolvedWireframe;
 
 var VeltCommentsSidebarMinimalActionsDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalActionsDropdownWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-actions-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarMinimalActionsDropdownWireframe.Trigger = VeltCommentsSidebarMinimalActionsDropdownTriggerWireframe;
 VeltCommentsSidebarMinimalActionsDropdownWireframe.Content = VeltCommentsSidebarMinimalActionsDropdownContentWireframe;
 
 var VeltCommentsSidebarMinimalFilterDropdownContentFilterAll = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentFilterRead = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentFilterResolved = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentFilterUnread = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentSelectedIcon = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentSortDate = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContentSortUnread = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdownContent = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarMinimalFilterDropdownContent.FilterAll = VeltCommentsSidebarMinimalFilterDropdownContentFilterAll;
 VeltCommentsSidebarMinimalFilterDropdownContent.FilterUnread = VeltCommentsSidebarMinimalFilterDropdownContentFilterUnread;
@@ -2562,71 +2776,84 @@ VeltCommentsSidebarMinimalFilterDropdownContent.SortUnread = VeltCommentsSidebar
 
 var VeltCommentsSidebarMinimalFilterDropdownTrigger = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarMinimalFilterDropdown = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-minimal-filter-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarMinimalFilterDropdown.Trigger = VeltCommentsSidebarMinimalFilterDropdownTrigger;
 VeltCommentsSidebarMinimalFilterDropdown.Content = VeltCommentsSidebarMinimalFilterDropdownContent;
 
 var VeltCommentsSidebarPageModeComposer = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-page-mode-composer-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-page-mode-composer-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarPanel = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarSearch = function (props) {
-    var children = props.children, placeholder = props.placeholder, remainingProps = __rest(props, ["children", "placeholder"]);
-    return (React.createElement("velt-comments-sidebar-search-wireframe", __assign({}, remainingProps, { placeholder: placeholder }), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-search-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarSkeleton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-skeleton-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemCheckboxCheckedWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemCheckboxUncheckedWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemCheckboxWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownContentItemCheckboxWireframe.Checked = VeltCommentsSidebarStatusDropdownContentItemCheckboxCheckedWireframe;
 VeltCommentsSidebarStatusDropdownContentItemCheckboxWireframe.Unchecked = VeltCommentsSidebarStatusDropdownContentItemCheckboxUncheckedWireframe;
 
 var VeltCommentsSidebarStatusDropdownContentItemCountWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Icon = VeltCommentsSidebarStatusDropdownContentItemIconWireframe;
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Name = VeltCommentsSidebarStatusDropdownContentItemNameWireframe;
@@ -2634,29 +2861,34 @@ VeltCommentsSidebarStatusDropdownContentItemWireframe.Count = VeltCommentsSideba
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Checkbox = VeltCommentsSidebarStatusDropdownContentItemCheckboxWireframe;
 
 var VeltCommentsSidebarStatusDropdownContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownContentWireframe.Item = VeltCommentsSidebarStatusDropdownContentItemWireframe;
 
 var VeltCommentsSidebarStatusDropdownTriggerArrowWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownTriggerIndicatorWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownTriggerNameWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownTriggerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownTriggerWireframe.Arrow = VeltCommentsSidebarStatusDropdownTriggerArrowWireframe;
 VeltCommentsSidebarStatusDropdownTriggerWireframe.Name = VeltCommentsSidebarStatusDropdownTriggerNameWireframe;
@@ -2664,41 +2896,48 @@ VeltCommentsSidebarStatusDropdownTriggerWireframe.Indicator = VeltCommentsSideba
 
 var VeltCommentsSidebarStatus = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatus.Trigger = VeltCommentsSidebarStatusDropdownTriggerWireframe;
 VeltCommentsSidebarStatus.Content = VeltCommentsSidebarStatusDropdownContentWireframe;
 
 var VeltCommentsSidebarResetFilterButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-reset-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-reset-filter-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarActionButton = function (props) {
-    var children = props.children, variant = props.variant, type = props.type, id = props.id;
-    return (React.createElement("velt-comments-sidebar-action-button-wireframe", { variant: variant, type: type, id: id }, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-action-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFocusedThreadBackButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-focused-thread-back-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-focused-thread-back-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFocusedThreadDialogContainer = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-focused-thread-dialog-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-focused-thread-dialog-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFocusedThread = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-focused-thread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-focused-thread-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFocusedThread.BackButton = VeltCommentsSidebarFocusedThreadBackButton;
 VeltCommentsSidebarFocusedThread.DialogContainer = VeltCommentsSidebarFocusedThreadDialogContainer;
 
 var VeltCommentsSidebarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarWireframe.CloseButton = VeltCommentsSidebarCloseButton;
 VeltCommentsSidebarWireframe.EmptyPlaceholder = VeltCommentsSidebarEmptyPlaceholder;
@@ -2719,33 +2958,39 @@ VeltCommentsSidebarWireframe.ActionButton = VeltCommentsSidebarActionButton;
 VeltCommentsSidebarWireframe.FocusedThread = VeltCommentsSidebarFocusedThread;
 
 var VeltCommentPinGhostCommentIndicator = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-ghost-comment-indicator-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-ghost-comment-indicator-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinIndex = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-index-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-index-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinTriangle = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-triangle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-triangle-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinUnreadCommentIndicator = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-unread-comment-indicator-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-unread-comment-indicator-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinPrivateCommentIndicator = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-private-comment-indicator-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-private-comment-indicator-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-pin-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-pin-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentPinWireframe.GhostCommentIndicator = VeltCommentPinGhostCommentIndicator;
 VeltCommentPinWireframe.Index = VeltCommentPinIndex;
@@ -2754,55 +2999,65 @@ VeltCommentPinWireframe.Triangle = VeltCommentPinTriangle;
 VeltCommentPinWireframe.UnreadCommentIndicator = VeltCommentPinUnreadCommentIndicator;
 
 var VeltSidebarButtonCommentsCount = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-sidebar-button-comments-count-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-sidebar-button-comments-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltSidebarButtonIcon = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-sidebar-button-icon-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-sidebar-button-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltSidebarButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-sidebar-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-sidebar-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltSidebarButtonWireframe.CommentsCount = VeltSidebarButtonCommentsCount;
 VeltSidebarButtonWireframe.Icon = VeltSidebarButtonIcon;
 
 var VeltCommentToolWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-tool-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-tool-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarCommentAnnotation = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-toolbar-comment-annotation-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-toolbar-comment-annotation-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarCopywriter = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-toolbar-copywriter-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-toolbar-copywriter-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarGeneric = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-toolbar-generic-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-toolbar-generic-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarDivider = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-toolbar-divider-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-toolbar-divider-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbar = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-text-comment-toolbar-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-text-comment-toolbar-wireframe", __assign({}, transformedProps), children));
 };
 VeltTextCommentToolbar.CommentAnnotation = VeltTextCommentToolbarCommentAnnotation;
 VeltTextCommentToolbar.Copywriter = VeltTextCommentToolbarCopywriter;
@@ -2810,28 +3065,33 @@ VeltTextCommentToolbar.Generic = VeltTextCommentToolbarGeneric;
 VeltTextCommentToolbar.Divider = VeltTextCommentToolbarDivider;
 
 var VeltUserSelectorDropdownAvatar = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-user-selector-dropdown-avatar-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-user-selector-dropdown-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownEmail = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-user-selector-dropdown-email-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-user-selector-dropdown-email-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownErrorIcon = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-user-selector-dropdown-error-icon-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-user-selector-dropdown-error-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownName = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-user-selector-dropdown-name-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-user-selector-dropdown-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdown = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-user-selector-dropdown-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-user-selector-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltUserSelectorDropdown.Avatar = VeltUserSelectorDropdownAvatar;
 VeltUserSelectorDropdown.Email = VeltUserSelectorDropdownEmail;
@@ -2839,28 +3099,33 @@ VeltUserSelectorDropdown.ErrorIcon = VeltUserSelectorDropdownErrorIcon;
 VeltUserSelectorDropdown.Name = VeltUserSelectorDropdownName;
 
 var VeltAutocompleteOptionIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-option-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-option-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-option-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-option-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionDescriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-option-description-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-option-description-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionErrorIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-option-error-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-option-error-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-option-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-option-wireframe", __assign({}, transformedProps), children));
 };
 VeltAutocompleteOptionWireframe.Icon = VeltAutocompleteOptionIconWireframe;
 VeltAutocompleteOptionWireframe.Description = VeltAutocompleteOptionDescriptionWireframe;
@@ -2868,23 +3133,27 @@ VeltAutocompleteOptionWireframe.ErrorIcon = VeltAutocompleteOptionErrorIconWiref
 VeltAutocompleteOptionWireframe.Name = VeltAutocompleteOptionNameWireframe;
 
 var VeltAutocompleteChipTooltipDescriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-chip-tooltip-description-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-chip-tooltip-description-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-chip-tooltip-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-chip-tooltip-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-chip-tooltip-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-chip-tooltip-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-autocomplete-chip-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-autocomplete-chip-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 VeltAutocompleteChipTooltipWireframe.Description = VeltAutocompleteChipTooltipDescriptionWireframe;
 VeltAutocompleteChipTooltipWireframe.Icon = VeltAutocompleteChipTooltipIconWireframe;
@@ -2908,173 +3177,266 @@ VeltCommentBubbleWireframe.Avatar = VeltCommentBubbleAvatar;
 VeltCommentBubbleWireframe.CommentsCount = VeltCommentBubbleCommentsCount;
 
 var VeltCommentsSidebarStatusDropdownWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comments-sidebar-status-dropdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comments-sidebar-status-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownWireframe.Trigger = VeltCommentsSidebarStatusDropdownTriggerWireframe;
 VeltCommentsSidebarStatusDropdownWireframe.Content = VeltCommentsSidebarStatusDropdownContentWireframe;
 
 var VeltReactionToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinEmojiWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-emoji-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-emoji-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-wireframe", __assign({}, transformedProps), children));
 };
-VeltReactionPinWireframe.Emoji = VeltReactionPinEmojiWireframe;
 VeltReactionPinWireframe.Count = VeltReactionPinCountWireframe;
+VeltReactionPinWireframe.Emoji = VeltReactionPinEmojiWireframe;
 
 var VeltReactionPinTooltipUserAvatarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-tooltip-user-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-tooltip-user-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinTooltipUserNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-tooltip-user-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-tooltip-user-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinTooltipUserWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-tooltip-user-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-tooltip-user-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionPinTooltipUserWireframe.Avatar = VeltReactionPinTooltipUserAvatarWireframe;
 VeltReactionPinTooltipUserWireframe.Name = VeltReactionPinTooltipUserNameWireframe;
 
 var VeltReactionPinTooltipUsersWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-tooltip-users-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-tooltip-users-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionPinTooltipUsersWireframe.User = VeltReactionPinTooltipUserWireframe;
 
 var VeltReactionPinTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reaction-pin-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reaction-pin-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionPinTooltipWireframe.Users = VeltReactionPinTooltipUsersWireframe;
 
 var VeltReactionsPanelItemEmojiWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reactions-panel-item-emoji-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reactions-panel-item-emoji-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionsPanelItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reactions-panel-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reactions-panel-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionsPanelItemWireframe.Emoji = VeltReactionsPanelItemEmojiWireframe;
 
 var VeltReactionsPanelItemsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reactions-panel-items-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reactions-panel-items-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionsPanelItemsWireframe.Item = VeltReactionsPanelItemWireframe;
 
 var VeltReactionsPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-reactions-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-reactions-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltReactionsPanelWireframe.Items = VeltReactionsPanelItemsWireframe;
 
 var VeltInlineCommentsSectionCommentCountWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-comment-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-comment-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionComposerContainerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-composer-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-composer-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionListWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-list-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionSkeletonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-skeleton-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-skeleton-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownContentItemIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownContentItemNameWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownContentItemTickWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownContentItemWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
+};
+VeltInlineCommentsSectionSortingDropdownContentItemWireframe.Icon = VeltInlineCommentsSectionSortingDropdownContentItemIconWireframe;
+VeltInlineCommentsSectionSortingDropdownContentItemWireframe.Name = VeltInlineCommentsSectionSortingDropdownContentItemNameWireframe;
+VeltInlineCommentsSectionSortingDropdownContentItemWireframe.Tick = VeltInlineCommentsSectionSortingDropdownContentItemTickWireframe;
+
+var VeltInlineCommentsSectionSortingDropdownContentWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-content-wireframe", __assign({}, transformedProps), children));
+};
+VeltInlineCommentsSectionSortingDropdownContentWireframe.Item = VeltInlineCommentsSectionSortingDropdownContentItemWireframe;
+
+var VeltInlineCommentsSectionSortingDropdownTriggerIconWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownTriggerNameWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltInlineCommentsSectionSortingDropdownTriggerWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
+VeltInlineCommentsSectionSortingDropdownTriggerWireframe.Icon = VeltInlineCommentsSectionSortingDropdownTriggerIconWireframe;
+VeltInlineCommentsSectionSortingDropdownTriggerWireframe.Name = VeltInlineCommentsSectionSortingDropdownTriggerNameWireframe;
+
+var VeltInlineCommentsSectionSortingDropdownWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-sorting-dropdown-wireframe", __assign({}, transformedProps), children));
+};
+VeltInlineCommentsSectionSortingDropdownWireframe.Content = VeltInlineCommentsSectionSortingDropdownContentWireframe;
+VeltInlineCommentsSectionSortingDropdownWireframe.Trigger = VeltInlineCommentsSectionSortingDropdownTriggerWireframe;
 
 var VeltInlineCommentsSectionWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-comments-section-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-comments-section-wireframe", __assign({}, transformedProps), children));
 };
 VeltInlineCommentsSectionWireframe.CommentCount = VeltInlineCommentsSectionCommentCountWireframe;
 VeltInlineCommentsSectionWireframe.ComposerContainer = VeltInlineCommentsSectionComposerContainerWireframe;
 VeltInlineCommentsSectionWireframe.List = VeltInlineCommentsSectionListWireframe;
 VeltInlineCommentsSectionWireframe.Panel = VeltInlineCommentsSectionPanelWireframe;
 VeltInlineCommentsSectionWireframe.Skeleton = VeltInlineCommentsSectionSkeletonWireframe;
+VeltInlineCommentsSectionWireframe.SortingDropdown = VeltInlineCommentsSectionSortingDropdownWireframe;
 
 var VeltNotificationsPanelContentAllListItemContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-list-item-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-list-item-content-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentAllListItemLabelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-list-item-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-list-item-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentAllListItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-list-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentAllListItemWireframe.Label = VeltNotificationsPanelContentAllListItemLabelWireframe;
 VeltNotificationsPanelContentAllListItemWireframe.Content = VeltNotificationsPanelContentAllListItemContentWireframe;
 
 var VeltNotificationsPanelContentAllListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentAllListWireframe.Item = VeltNotificationsPanelContentAllListItemWireframe;
 
 var VeltNotificationsPanelContentAllWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentAllWireframe.List = VeltNotificationsPanelContentAllListWireframe;
 
 var VeltNotificationsPanelContentDocumentsListItemContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-item-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-item-content-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentDocumentsListItemCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-item-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-item-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentDocumentsListItemNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-item-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentDocumentsListItemUnreadWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-item-unread-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-item-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentDocumentsListItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentDocumentsListItemWireframe.Content = VeltNotificationsPanelContentDocumentsListItemContentWireframe;
 VeltNotificationsPanelContentDocumentsListItemWireframe.Name = VeltNotificationsPanelContentDocumentsListItemNameWireframe;
@@ -3082,45 +3444,53 @@ VeltNotificationsPanelContentDocumentsListItemWireframe.Count = VeltNotification
 VeltNotificationsPanelContentDocumentsListItemWireframe.Unread = VeltNotificationsPanelContentDocumentsListItemUnreadWireframe;
 
 var VeltNotificationsPanelContentDocumentsListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentDocumentsListWireframe.Item = VeltNotificationsPanelContentDocumentsListItemWireframe;
 
 var VeltNotificationsPanelContentDocumentsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-documents-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-documents-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentDocumentsWireframe.List = VeltNotificationsPanelContentDocumentsListWireframe;
 
 var VeltNotificationsPanelContentForYouWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-for-you-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-for-you-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentPeopleListItemAvatarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-item-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-item-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentPeopleListItemContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-item-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-item-content-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentPeopleListItemCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-item-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-item-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentPeopleListItemNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-item-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-item-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentPeopleListItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentPeopleListItemWireframe.Avatar = VeltNotificationsPanelContentPeopleListItemAvatarWireframe;
 VeltNotificationsPanelContentPeopleListItemWireframe.Name = VeltNotificationsPanelContentPeopleListItemNameWireframe;
@@ -3128,55 +3498,65 @@ VeltNotificationsPanelContentPeopleListItemWireframe.Count = VeltNotificationsPa
 VeltNotificationsPanelContentPeopleListItemWireframe.Content = VeltNotificationsPanelContentPeopleListItemContentWireframe;
 
 var VeltNotificationsPanelContentPeopleListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentPeopleListWireframe.Item = VeltNotificationsPanelContentPeopleListItemWireframe;
 
 var VeltNotificationsPanelContentPeopleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-people-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-people-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentPeopleWireframe.List = VeltNotificationsPanelContentPeopleListWireframe;
 
 var VeltNotificationsPanelContentLoadMoreWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-load-more-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-load-more-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemAvatarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemBodyWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-body-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-body-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemFileNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-file-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-file-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemHeadlineWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-headline-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-headline-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemUnreadWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-unread-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentListItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentListItemWireframe.Avatar = VeltNotificationsPanelContentListItemAvatarWireframe;
 VeltNotificationsPanelContentListItemWireframe.Body = VeltNotificationsPanelContentListItemBodyWireframe;
@@ -3186,19 +3566,22 @@ VeltNotificationsPanelContentListItemWireframe.Time = VeltNotificationsPanelCont
 VeltNotificationsPanelContentListItemWireframe.Unread = VeltNotificationsPanelContentListItemUnreadWireframe;
 
 var VeltNotificationsPanelContentListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-list-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentListWireframe.Item = VeltNotificationsPanelContentListItemWireframe;
 
 var VeltNotificationsPanelContentAllReadContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-all-read-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-all-read-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentWireframe.All = VeltNotificationsPanelContentAllWireframe;
 VeltNotificationsPanelContentWireframe.ForYou = VeltNotificationsPanelContentForYouWireframe;
@@ -3209,62 +3592,73 @@ VeltNotificationsPanelContentWireframe.List = VeltNotificationsPanelContentListW
 VeltNotificationsPanelContentWireframe.AllReadContainer = VeltNotificationsPanelContentAllReadContainerWireframe;
 
 var VeltNotificationsPanelHeaderTabDocumentsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-header-tab-documents-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-header-tab-documents-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelHeaderTabForYouWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-header-tab-for-you-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-header-tab-for-you-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelHeaderTabPeopleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-header-tab-people-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-header-tab-people-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelHeaderTabAllWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-header-tab-all-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-header-tab-all-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelHeaderWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-header-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-header-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelHeaderWireframe.TabAll = VeltNotificationsPanelHeaderTabAllWireframe;
-VeltNotificationsPanelHeaderWireframe.TabForYou = VeltNotificationsPanelHeaderTabForYouWireframe;
 VeltNotificationsPanelHeaderWireframe.TabDocuments = VeltNotificationsPanelHeaderTabDocumentsWireframe;
+VeltNotificationsPanelHeaderWireframe.TabForYou = VeltNotificationsPanelHeaderTabForYouWireframe;
 VeltNotificationsPanelHeaderWireframe.TabPeople = VeltNotificationsPanelHeaderTabPeopleWireframe;
 
 var VeltNotificationsPanelReadAllButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-read-all-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-read-all-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelTitleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-title-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelViewAllButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-view-all-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-view-all-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelCloseButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelSkeletonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelWireframe.Content = VeltNotificationsPanelContentWireframe;
 VeltNotificationsPanelWireframe.Header = VeltNotificationsPanelHeaderWireframe;
@@ -3275,207 +3669,242 @@ VeltNotificationsPanelWireframe.CloseButton = VeltNotificationsPanelCloseButtonW
 VeltNotificationsPanelWireframe.Skeleton = VeltNotificationsPanelSkeletonWireframe;
 
 var VeltNotificationsToolIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-tool-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-tool-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolLabelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-tool-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-tool-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolUnreadCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-tool-unread-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-tool-unread-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolUnreadIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-tool-unread-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-tool-unread-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-notifications-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-notifications-tool-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsToolWireframe.Label = VeltNotificationsToolLabelWireframe;
 VeltNotificationsToolWireframe.UnreadIcon = VeltNotificationsToolUnreadIconWireframe;
 VeltNotificationsToolWireframe.Icon = VeltNotificationsToolIconWireframe;
 VeltNotificationsToolWireframe.UnreadCount = VeltNotificationsToolUnreadCountWireframe;
 
-var VeltConfirmDialogApproveButtonWireframe = function (props) {
+var VeltConfirmDialogTitleWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-confirm-dialog-approve-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-confirm-dialog-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltConfirmDialogMessageWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-confirm-dialog-message-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-confirm-dialog-message-wireframe", __assign({}, transformedProps), children));
 };
 
-var VeltConfirmDialogRejectButtonWireframe = function (props) {
+var VeltConfirmDialogApproveButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-confirm-dialog-reject-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-confirm-dialog-approve-button-wireframe", __assign({}, transformedProps), children));
 };
 
-var VeltConfirmDialogTitleWireframe = function (props) {
+var VeltConfirmDialogRejectButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-confirm-dialog-title-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-confirm-dialog-reject-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltConfirmDialogWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-confirm-dialog-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-confirm-dialog-wireframe", __assign({}, transformedProps), children));
 };
 VeltConfirmDialogWireframe.Title = VeltConfirmDialogTitleWireframe;
 VeltConfirmDialogWireframe.Message = VeltConfirmDialogMessageWireframe;
-VeltConfirmDialogWireframe.RejectButton = VeltConfirmDialogRejectButtonWireframe;
 VeltConfirmDialogWireframe.ApproveButton = VeltConfirmDialogApproveButtonWireframe;
+VeltConfirmDialogWireframe.RejectButton = VeltConfirmDialogRejectButtonWireframe;
 
 var VeltInlineReactionsSectionListWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-reactions-section-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-reactions-section-list-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineReactionsSectionPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-reactions-section-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-reactions-section-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineReactionsSectionToolContainerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-reactions-section-tool-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-reactions-section-tool-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineReactionsSectionWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-inline-reactions-section-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-inline-reactions-section-wireframe", __assign({}, transformedProps), children));
 };
 VeltInlineReactionsSectionWireframe.List = VeltInlineReactionsSectionListWireframe;
 VeltInlineReactionsSectionWireframe.Panel = VeltInlineReactionsSectionPanelWireframe;
 VeltInlineReactionsSectionWireframe.ToolContainer = VeltInlineReactionsSectionToolContainerWireframe;
 
 var VeltPersistentCommentModeCloseButtonWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-persistent-comment-mode-close-button-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-persistent-comment-mode-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelPrivateWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-persistent-comment-mode-label-private-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-persistent-comment-mode-label-private-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelPublicWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-persistent-comment-mode-label-public-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-persistent-comment-mode-label-public-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelWireframe = function (props) {
-    var children = props.children;
-    return (React.createElement("velt-persistent-comment-mode-label-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-persistent-comment-mode-label-wireframe", __assign({}, transformedProps), children));
 };
 VeltPersistentCommentModeLabelWireframe.Private = VeltPersistentCommentModeLabelPrivateWireframe;
 VeltPersistentCommentModeLabelWireframe.Public = VeltPersistentCommentModeLabelPublicWireframe;
 
 var VeltPersistentCommentModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-persistent-comment-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-persistent-comment-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltPersistentCommentModeWireframe.CloseButton = VeltPersistentCommentModeCloseButtonWireframe;
 VeltPersistentCommentModeWireframe.Label = VeltPersistentCommentModeLabelWireframe;
 
 var VeltMultiThreadCommentDialogCloseButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogCommentCountWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-comment-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-comment-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogComposerContainerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-composer-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-composer-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogEmptyPlaceholderWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-empty-placeholder-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-empty-placeholder-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogListWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-list-wireframe", __assign({}, transformedProps), children));
 };
 
-var VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllReadWireframe = function (props) {
+var VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
-
-var VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolvedWireframe = function (props) {
+var MarkAllRead = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, transformedProps), children));
 };
-
-var VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe = function (props) {
+var MarkAllResolved = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, transformedProps), children));
 };
-VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe.MarkAllRead = VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllReadWireframe;
-VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe.MarkAllResolved = VeltMultiThreadCommentDialogMinimalActionsDropdownContentMarkAllResolvedWireframe;
+VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe.MarkAllRead = MarkAllRead;
+VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe.MarkAllResolved = MarkAllResolved;
 
 var VeltMultiThreadCommentDialogMinimalActionsDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalActionsDropdownWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogMinimalActionsDropdownWireframe.Content = VeltMultiThreadCommentDialogMinimalActionsDropdownContentWireframe;
 VeltMultiThreadCommentDialogMinimalActionsDropdownWireframe.Trigger = VeltMultiThreadCommentDialogMinimalActionsDropdownTriggerWireframe;
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAllWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterReadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterResolvedWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnreadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentSelectedIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortDateWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentSortUnreadWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.FilterAll = VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAllWireframe;
 VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.FilterUnread = VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnreadWireframe;
@@ -3487,29 +3916,34 @@ VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.SortUnread = V
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogMinimalFilterDropdownWireframe.Content = VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe;
 VeltMultiThreadCommentDialogMinimalFilterDropdownWireframe.Trigger = VeltMultiThreadCommentDialogMinimalFilterDropdownTriggerWireframe;
 
 var VeltMultiThreadCommentDialogNewThreadButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-new-thread-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-new-thread-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogResetFilterButtonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-reset-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-reset-filter-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMultiThreadCommentDialogWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-multi-thread-comment-dialog-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-multi-thread-comment-dialog-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogWireframe.CommentCount = VeltMultiThreadCommentDialogCommentCountWireframe;
 VeltMultiThreadCommentDialogWireframe.ComposerContainer = VeltMultiThreadCommentDialogComposerContainerWireframe;
@@ -3523,67 +3957,79 @@ VeltMultiThreadCommentDialogWireframe.ResetFilterButton = VeltMultiThreadComment
 
 var VeltCommentComposerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-composer-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-composer-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentThreadWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-comment-thread-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-comment-thread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsToggleIconOpenWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-toggle-icon-open-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-toggle-icon-open-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsToggleIconCloseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-toggle-icon-close-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-toggle-icon-close-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsToggleIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-toggle-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-toggle-icon-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsToggleIconWireframe.Open = VeltMediaSourceSettingsToggleIconOpenWireframe;
 VeltMediaSourceSettingsToggleIconWireframe.Close = VeltMediaSourceSettingsToggleIconCloseWireframe;
 
 var VeltMediaSourceSettingsSelectedLabelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-selected-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-selected-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsOptionsItemLabelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-options-item-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-options-item-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsOptionsItemIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-options-item-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-options-item-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsOptionsItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-options-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-options-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsOptionsItemWireframe.Icon = VeltMediaSourceSettingsOptionsItemIconWireframe;
 VeltMediaSourceSettingsOptionsItemWireframe.Label = VeltMediaSourceSettingsOptionsItemLabelWireframe;
 
 var VeltMediaSourceSettingsOptionsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-options-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-options-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsOptionsWireframe.Item = VeltMediaSourceSettingsOptionsItemWireframe;
 
 var VeltMediaSourceSettingsDividerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-divider-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-divider-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-audio-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsAudioWireframe.ToggleIcon = VeltMediaSourceSettingsToggleIconWireframe;
 VeltMediaSourceSettingsAudioWireframe.SelectedLabel = VeltMediaSourceSettingsSelectedLabelWireframe;
@@ -3591,8 +4037,9 @@ VeltMediaSourceSettingsAudioWireframe.Options = VeltMediaSourceSettingsOptionsWi
 VeltMediaSourceSettingsAudioWireframe.Divider = VeltMediaSourceSettingsDividerWireframe;
 
 var VeltMediaSourceSettingsVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-video-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsVideoWireframe.ToggleIcon = VeltMediaSourceSettingsToggleIconWireframe;
 VeltMediaSourceSettingsVideoWireframe.SelectedLabel = VeltMediaSourceSettingsSelectedLabelWireframe;
@@ -3600,145 +4047,171 @@ VeltMediaSourceSettingsVideoWireframe.Options = VeltMediaSourceSettingsOptionsWi
 VeltMediaSourceSettingsVideoWireframe.Divider = VeltMediaSourceSettingsDividerWireframe;
 
 var VeltMediaSourceSettingsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-media-source-settings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-media-source-settings-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsWireframe.Audio = VeltMediaSourceSettingsAudioWireframe;
 VeltMediaSourceSettingsWireframe.Video = VeltMediaSourceSettingsVideoWireframe;
 
 var VeltRecorderAllToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-all-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-all-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderAllToolMenuAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-all-tool-menu-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-all-tool-menu-audio-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderAllToolMenuVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-all-tool-menu-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-all-tool-menu-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderAllToolMenuScreenWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-all-tool-menu-screen-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-all-tool-menu-screen-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderAllToolMenuWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-all-tool-menu-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-all-tool-menu-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderAllToolMenuWireframe.Video = VeltRecorderAllToolMenuVideoWireframe;
 VeltRecorderAllToolMenuWireframe.Audio = VeltRecorderAllToolMenuAudioWireframe;
 VeltRecorderAllToolMenuWireframe.Screen = VeltRecorderAllToolMenuScreenWireframe;
 
 var VeltRecorderAudioToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-audio-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-audio-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderScreenToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-screen-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-screen-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderVideoToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-video-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-video-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogBottomPanelCloseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-close-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-close-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogBottomPanelCountdownWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-countdown-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogBottomPanelIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogBottomPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-bottom-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogBottomPanelWireframe.Icon = VeltRecordingPreviewStepsDialogBottomPanelIconWireframe;
 VeltRecordingPreviewStepsDialogBottomPanelWireframe.Close = VeltRecordingPreviewStepsDialogBottomPanelCloseWireframe;
 VeltRecordingPreviewStepsDialogBottomPanelWireframe.Countdown = VeltRecordingPreviewStepsDialogBottomPanelCountdownWireframe;
 
 var VeltRecordingPreviewStepsDialogButtonPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-button-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-button-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogCloseButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogMicButtonOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-mic-button-off-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-mic-button-off-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogMicButtonOnWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-mic-button-on-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-mic-button-on-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogMicButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-mic-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogMicButtonWireframe.On = VeltRecordingPreviewStepsDialogMicButtonOnWireframe;
 VeltRecordingPreviewStepsDialogMicButtonWireframe.Off = VeltRecordingPreviewStepsDialogMicButtonOffWireframe;
 
 var VeltRecordingPreviewStepsDialogSettingsPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-settings-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-settings-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogSettingsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-settings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-settings-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogStartRecordingWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-start-recording-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-start-recording-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogTimerCountdownWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-timer-countdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-timer-countdown-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogTimerCancelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-timer-cancel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-timer-cancel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogTimerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-timer-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-timer-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogTimerWireframe.Countdown = VeltRecordingPreviewStepsDialogTimerCountdownWireframe;
 VeltRecordingPreviewStepsDialogTimerWireframe.Cancel = VeltRecordingPreviewStepsDialogTimerCancelWireframe;
 
 var VeltRecordingPreviewStepsDialogWaveformWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-waveform-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-waveform-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-audio-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogAudioWireframe.BottomPanel = VeltRecordingPreviewStepsDialogBottomPanelWireframe;
 VeltRecordingPreviewStepsDialogAudioWireframe.ButtonPanel = VeltRecordingPreviewStepsDialogButtonPanelWireframe;
@@ -3751,35 +4224,41 @@ VeltRecordingPreviewStepsDialogAudioWireframe.Timer = VeltRecordingPreviewStepsD
 VeltRecordingPreviewStepsDialogAudioWireframe.Waveform = VeltRecordingPreviewStepsDialogWaveformWireframe;
 
 var VeltRecordingPreviewStepsDialogCameraButtonOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-off-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-off-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogCameraButtonOnWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-on-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-on-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogCameraButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-camera-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogCameraButtonWireframe.On = VeltRecordingPreviewStepsDialogCameraButtonOnWireframe;
 VeltRecordingPreviewStepsDialogCameraButtonWireframe.Off = VeltRecordingPreviewStepsDialogCameraButtonOffWireframe;
 
 var VeltRecordingPreviewStepsDialogCameraOffMessageWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-camera-off-message-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-camera-off-message-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogVideoPlayerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-video-player-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-video-player-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recording-preview-steps-dialog-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recording-preview-steps-dialog-video-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogVideoWireframe.BottomPanel = VeltRecordingPreviewStepsDialogBottomPanelWireframe;
 VeltRecordingPreviewStepsDialogVideoWireframe.ButtonPanel = VeltRecordingPreviewStepsDialogButtonPanelWireframe;
@@ -3795,67 +4274,79 @@ VeltRecordingPreviewStepsDialogVideoWireframe.VideoPlayer = VeltRecordingPreview
 VeltRecordingPreviewStepsDialogVideoWireframe.Waveform = VeltRecordingPreviewStepsDialogWaveformWireframe;
 
 var VeltRecordingPreviewStepsDialogWireframe = function (props) {
-    var children = props.children;
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    transformWireframeProps(remainingProps);
     return (React.createElement(React.Fragment, null, children));
 };
 VeltRecordingPreviewStepsDialogWireframe.Video = VeltRecordingPreviewStepsDialogVideoWireframe;
 VeltRecordingPreviewStepsDialogWireframe.Audio = VeltRecordingPreviewStepsDialogAudioWireframe;
 
 var VeltRecorderControlPanelFloatingModeContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-floating-mode-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-floating-mode-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelFloatingModeScreenVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-floating-mode-screen-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-floating-mode-screen-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelFloatingModeWaveformWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-floating-mode-waveform-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-floating-mode-waveform-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarWaveformWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-waveform-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-waveform-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarClearWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-clear-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-clear-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarStopWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-stop-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-stop-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarTogglePlayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-toggle-play-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-toggle-play-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarToggleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-toggle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-toggle-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelActionBarToggleWireframe.Pause = VeltRecorderControlPanelActionBarTogglePlayWireframe;
 VeltRecorderControlPanelActionBarToggleWireframe.Play = VeltRecorderControlPanelActionBarTogglePlayWireframe;
 
 var VeltRecorderControlPanelActionBarTypeIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-type-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-type-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelActionBarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-action-bar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-action-bar-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelActionBarWireframe.Clear = VeltRecorderControlPanelActionBarClearWireframe;
 VeltRecorderControlPanelActionBarWireframe.Stop = VeltRecorderControlPanelActionBarStopWireframe;
@@ -3865,40 +4356,47 @@ VeltRecorderControlPanelActionBarWireframe.TypeIcon = VeltRecorderControlPanelAc
 VeltRecorderControlPanelActionBarWireframe.Waveform = VeltRecorderControlPanelActionBarWaveformWireframe;
 
 var VeltRecorderControlPanelCollapsedButtonOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-collapsed-button-off-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-collapsed-button-off-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelCollapsedButtonOnWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-collapsed-button-on-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-collapsed-button-on-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelCollapsedButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-collapsed-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-collapsed-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelCollapsedButtonWireframe.On = VeltRecorderControlPanelCollapsedButtonOnWireframe;
 VeltRecorderControlPanelCollapsedButtonWireframe.Off = VeltRecorderControlPanelCollapsedButtonOffWireframe;
 
 var VeltRecorderControlPanelLoadingWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-loading-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-loading-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelPausedWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-paused-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-paused-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelFloatingModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-floating-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-floating-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelFloatingModeWireframe.Container = VeltRecorderControlPanelFloatingModeContainerWireframe;
 VeltRecorderControlPanelFloatingModeWireframe.ScreenVideo = VeltRecorderControlPanelFloatingModeScreenVideoWireframe;
@@ -3910,90 +4408,106 @@ VeltRecorderControlPanelFloatingModeWireframe.Loading = VeltRecorderControlPanel
 VeltRecorderControlPanelFloatingModeWireframe.ActionBar = VeltRecorderControlPanelActionBarWireframe;
 
 var VeltRecorderControlPanelThreadModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-control-panel-thread-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-control-panel-thread-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelThreadModeWireframe.Video = VeltRecorderControlPanelVideoWireframe;
 VeltRecorderControlPanelThreadModeWireframe.Loading = VeltRecorderControlPanelLoadingWireframe;
 VeltRecorderControlPanelThreadModeWireframe.ActionBar = VeltRecorderControlPanelActionBarWireframe;
 
 var VeltRecorderControlPanelWireframe = function (props) {
-    var children = props.children;
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    transformWireframeProps(remainingProps);
     return (React.createElement(React.Fragment, null, children));
 };
 VeltRecorderControlPanelWireframe.FloatingMode = VeltRecorderControlPanelFloatingModeWireframe;
 VeltRecorderControlPanelWireframe.ThreadMode = VeltRecorderControlPanelThreadModeWireframe;
 
 var VeltRecorderPlayerAudioTogglePauseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-toggle-pause-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-toggle-pause-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioTogglePlayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-toggle-play-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-toggle-play-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioToggleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-toggle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-toggle-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerAudioToggleWireframe.Play = VeltRecorderPlayerAudioTogglePlayWireframe;
 VeltRecorderPlayerAudioToggleWireframe.Pause = VeltRecorderPlayerAudioTogglePauseWireframe;
 
 var VeltRecorderPlayerAudioWaveformWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-waveform-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-waveform-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerDeleteWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerSubtitlesButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-subtitles-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-subtitles-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerSubtitlesWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-subtitles-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-subtitles-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTranscriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-transcription-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-transcription-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAvatarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-audio-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-audio-container-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerAudioContainerWireframe.AudioToggle = VeltRecorderPlayerAudioToggleWireframe;
 VeltRecorderPlayerAudioContainerWireframe.Time = VeltRecorderPlayerTimeWireframe;
@@ -4008,39 +4522,46 @@ VeltRecorderPlayerAudioContainerWireframe.AudioWaveform = VeltRecorderPlayerAudi
 VeltRecorderPlayerAudioContainerWireframe.Avatar = VeltRecorderPlayerAvatarWireframe;
 
 var VeltRecorderPlayerFullScreenButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-full-screen-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-full-screen-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerOverlayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-overlay-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-overlay-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerPlayButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-play-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-play-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTimelineSeekBarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-timeline-seek-bar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-timeline-seek-bar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTimelineWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-timeline-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-timeline-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerTimelineWireframe.SeekBar = VeltRecorderPlayerTimelineSeekBarWireframe;
 
 var VeltRecorderPlayerVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerVideoContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-recorder-player-video-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-recorder-player-video-container-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerVideoContainerWireframe.Video = VeltRecorderPlayerVideoWireframe;
 VeltRecorderPlayerVideoContainerWireframe.Timeline = VeltRecorderPlayerTimelineWireframe;
@@ -4057,101 +4578,119 @@ VeltRecorderPlayerVideoContainerWireframe.Delete = VeltRecorderPlayerDeleteWiref
 VeltRecorderPlayerVideoContainerWireframe.Avatar = VeltRecorderPlayerAvatarWireframe;
 
 var VeltRecorderPlayerWireframe = function (props) {
-    var children = props.children;
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    transformWireframeProps(remainingProps);
     return (React.createElement(React.Fragment, null, children));
 };
 VeltRecorderPlayerWireframe.AudioContainer = VeltRecorderPlayerAudioContainerWireframe;
 VeltRecorderPlayerWireframe.VideoContainer = VeltRecorderPlayerVideoContainerWireframe;
 
 var VeltVideoPlayerControlsDeleteButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-delete-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-delete-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsProgressBarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-progress-bar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-progress-bar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsSettingsButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-settings-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-settings-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsSubtitleButtonIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-subtitle-button-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-subtitle-button-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsSubtitleButtonTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-subtitle-button-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-subtitle-button-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsSubtitleButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-subtitle-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-subtitle-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerControlsSubtitleButtonWireframe.Icon = VeltVideoPlayerControlsSubtitleButtonIconWireframe;
 VeltVideoPlayerControlsSubtitleButtonWireframe.Tooltip = VeltVideoPlayerControlsSubtitleButtonTooltipWireframe;
 
 var VeltVideoPlayerControlsTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTogglePauseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-toggle-pause-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-toggle-pause-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTogglePlayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-toggle-play-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-toggle-play-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsToggleButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-toggle-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-toggle-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerControlsToggleButtonWireframe.Play = VeltVideoPlayerControlsTogglePlayWireframe;
 VeltVideoPlayerControlsToggleButtonWireframe.Pause = VeltVideoPlayerControlsTogglePauseWireframe;
 
 var VeltVideoPlayerControlsTranscriptionIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-transcription-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-transcription-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTranscriptionTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-transcription-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-transcription-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTranscriptionButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-transcription-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-transcription-button-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerControlsTranscriptionButtonWireframe.Icon = VeltVideoPlayerControlsTranscriptionIconWireframe;
 VeltVideoPlayerControlsTranscriptionButtonWireframe.Tooltip = VeltVideoPlayerControlsTranscriptionTooltipWireframe;
 
 var VeltVideoPlayerControlsVolumeButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-volume-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-volume-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsCurrentTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-current-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-current-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTotalTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-total-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-total-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-controls-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-controls-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerControlsWireframe.DeleteButton = VeltVideoPlayerControlsDeleteButtonWireframe;
 VeltVideoPlayerControlsWireframe.ProgressBar = VeltVideoPlayerControlsProgressBarWireframe;
@@ -4165,38 +4704,45 @@ VeltVideoPlayerControlsWireframe.CurrentTime = VeltVideoPlayerControlsCurrentTim
 VeltVideoPlayerControlsWireframe.TotalTime = VeltVideoPlayerControlsTotalTimeWireframe;
 
 var VeltVideoPlayerCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerDisplayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-display-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-display-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerMinimizeButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-minimize-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-minimize-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerSubtitlesWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-subtitles-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-subtitles-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerTranscriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-transcription-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-transcription-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-video-player-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-video-player-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerWireframe.Controls = VeltVideoPlayerControlsWireframe;
 VeltVideoPlayerWireframe.CopyLink = VeltVideoPlayerCopyLinkWireframe;
@@ -4206,88 +4752,153 @@ VeltVideoPlayerWireframe.Panel = VeltVideoPlayerPanelWireframe;
 VeltVideoPlayerWireframe.Subtitles = VeltVideoPlayerSubtitlesWireframe;
 VeltVideoPlayerWireframe.Transcription = VeltVideoPlayerTranscriptionWireframe;
 
+var VeltSubtitlesTextWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-text-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltSubtitlesEmbedModeWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-embed-mode-wireframe", __assign({}, transformedProps), children));
+};
+VeltSubtitlesEmbedModeWireframe.Text = VeltSubtitlesTextWireframe;
+
+var VeltSubtitlesPanelWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-panel-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltSubtitlesButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-subtitles-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltSubtitlesTooltipWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-tooltip-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltSubtitlesCloseButtonWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-close-button-wireframe", __assign({}, transformedProps), children));
+};
+
+var VeltSubtitlesFloatingModeWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-subtitles-floating-mode-wireframe", __assign({}, transformedProps), children));
+};
+VeltSubtitlesFloatingModeWireframe.Button = VeltSubtitlesButtonWireframe;
+VeltSubtitlesFloatingModeWireframe.Tooltip = VeltSubtitlesTooltipWireframe;
+VeltSubtitlesFloatingModeWireframe.Panel = VeltSubtitlesPanelWireframe;
+VeltSubtitlesFloatingModeWireframe.CloseButton = VeltSubtitlesCloseButtonWireframe;
+VeltSubtitlesFloatingModeWireframe.Text = VeltSubtitlesTextWireframe;
+
+var VeltSubtitlesWireframe = function (props) {
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    transformWireframeProps(remainingProps);
+    return (React.createElement(React.Fragment, null, children));
 };
+VeltSubtitlesWireframe.EmbedMode = VeltSubtitlesEmbedModeWireframe;
+VeltSubtitlesWireframe.FloatingMode = VeltSubtitlesFloatingModeWireframe;
 
 var VeltTranscriptionCloseButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemTextWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-content-item-text-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-content-item-text-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-content-item-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-content-item-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionContentItemWireframe.Time = VeltTranscriptionContentItemTimeWireframe;
 VeltTranscriptionContentItemWireframe.Text = VeltTranscriptionContentItemTextWireframe;
 
 var VeltTranscriptionContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionContentWireframe.Item = VeltTranscriptionContentItemWireframe;
 
 var VeltTranscriptionCopyLinkButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-copy-link-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-copy-link-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionCopyLinkTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-copy-link-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-copy-link-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionCopyLinkWireframe.Button = VeltTranscriptionCopyLinkButtonWireframe;
 VeltTranscriptionCopyLinkWireframe.Tooltip = VeltTranscriptionCopyLinkTooltipWireframe;
 
 var VeltTranscriptionSummaryExpandToggleOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-summary-expand-toggle-off-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-summary-expand-toggle-off-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionSummaryExpandToggleOnWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-summary-expand-toggle-on-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-summary-expand-toggle-on-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionSummaryExpandToggleWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-summary-expand-toggle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-summary-expand-toggle-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionSummaryExpandToggleWireframe.On = VeltTranscriptionSummaryExpandToggleOnWireframe;
 VeltTranscriptionSummaryExpandToggleWireframe.Off = VeltTranscriptionSummaryExpandToggleOffWireframe;
 
 var VeltTranscriptionSummaryTextWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-summary-text-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-summary-text-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionSummaryWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-summary-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-summary-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionSummaryWireframe.ExpandToggle = VeltTranscriptionSummaryExpandToggleWireframe;
 VeltTranscriptionSummaryWireframe.Text = VeltTranscriptionSummaryTextWireframe;
 
 var VeltTranscriptionPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionPanelWireframe.CloseButton = VeltTranscriptionCloseButtonWireframe;
 VeltTranscriptionPanelWireframe.CopyLink = VeltTranscriptionCopyLinkWireframe;
@@ -4295,29 +4906,34 @@ VeltTranscriptionPanelWireframe.Summary = VeltTranscriptionSummaryWireframe;
 VeltTranscriptionPanelWireframe.Content = VeltTranscriptionContentWireframe;
 
 var VeltTranscriptionEmbedModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-embed-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-embed-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionEmbedModeWireframe.Panel = VeltTranscriptionPanelWireframe;
 
 var VeltTranscriptionPanelContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-panel-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-panel-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionFloatingModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React.createElement("velt-transcription-floating-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React.createElement("velt-transcription-floating-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionFloatingModeWireframe.Button = VeltTranscriptionButtonWireframe;
 VeltTranscriptionFloatingModeWireframe.Tooltip = VeltTranscriptionTooltipWireframe;
@@ -4325,16 +4941,18 @@ VeltTranscriptionFloatingModeWireframe.PanelContainer = VeltTranscriptionPanelCo
 VeltTranscriptionFloatingModeWireframe.Panel = VeltTranscriptionPanelWireframe;
 
 var VeltTranscriptionWireframe = function (props) {
-    var children = props.children;
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    transformWireframeProps(remainingProps);
     return (React.createElement(React.Fragment, null, children));
 };
 VeltTranscriptionWireframe.EmbedMode = VeltTranscriptionEmbedModeWireframe;
 VeltTranscriptionWireframe.FloatingMode = VeltTranscriptionFloatingModeWireframe;
 
 var VeltButtonWireframe = function (props) {
-    var id = props.id, disabled = props.disabled, active = props.active, type = props.type, group = props.group, children = props.children;
+    var id = props.id, disabled = props.disabled, active = props.active, type = props.type, group = props.group, children = props.children, remainingProps = __rest(props, ["id", "disabled", "active", "type", "group", "children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
     var ref = useRef();
-    return (React.createElement("velt-button-wireframe", { ref: ref, id: id, disabled: [true, false].includes(disabled) ? (disabled ? 'true' : 'false') : undefined, active: [true, false].includes(active) ? (active ? 'true' : 'false') : undefined, type: type, group: group }, children));
+    return (React.createElement("velt-button-wireframe", __assign({ ref: ref, id: id, disabled: [true, false].includes(disabled) ? (disabled ? 'true' : 'false') : undefined, active: [true, false].includes(active) ? (active ? 'true' : 'false') : undefined, type: type, group: group }, transformedProps), children));
 };
 
 function useClient() {
@@ -4397,10 +5015,12 @@ function useSetDocuments() {
             client.setDocuments(memoizedData.documents, memoizedData.options);
         }
     }, [client === null || client === void 0 ? void 0 : client.setDocuments, memoizedData]);
+    // Memoize the setDocuments callback
+    var setDocumentsCallback = React.useCallback(function (documents, options) {
+        setData({ documents: documents, options: options });
+    }, []); // Empty dependency array since it only uses setState which is stable
     return {
-        setDocuments: function (documents, options) {
-            setData({ documents: documents, options: options });
-        }
+        setDocuments: setDocumentsCallback
     };
 }
 function useUnsetDocumentId() {
@@ -4409,6 +5029,12 @@ function useUnsetDocumentId() {
         client && client.unsetDocumentId && client.unsetDocumentId();
     }, [client]);
 }
+function useUnsetDocuments() {
+    var client = useVeltClient().client;
+    React.useEffect(function () {
+        client && client.unsetDocuments && client.unsetDocuments();
+    }, [client]);
+}
 function useSetLocation(location, appendLocation) {
     var client = useVeltClient().client;
     // Memoize the setLocation call
@@ -4608,7 +5234,7 @@ function useCommentModeState() {
     return data;
 }
 /**
- * @deprecated Use `useAddCommentAnnotation` event hook instead.
+ * @deprecated Use `useCommentEventCallback('addCommentAnnotation')` event hook instead.
  */
 function useCommentAddHandler() {
     var commentElement = useCommentUtils();
@@ -4626,7 +5252,7 @@ function useCommentAddHandler() {
     return data;
 }
 /**
- * @deprecated Use respective update events hooks instead.
+ * @deprecated Use `useCommentEventCallback` event hook instead.
  */
 function useCommentUpdateHandler() {
     var commentElement = useCommentUtils();
@@ -5506,6 +6132,9 @@ function useRecorderAddHandler() {
     }, [recorderElement]);
     return data;
 }
+/**
+* @deprecated Use `recorderUtils.getRecordingData()` method instead
+*/
 function useRecordingDataByRecorderId(recorderId) {
     var recorderElement = useRecorderUtils();
     var _a = React.useState(null), data = _a[0], setData = _a[1];
@@ -5866,5 +6495,5 @@ var logLiveState = function (action, liveStateDataId) {
     }
 };
 
-export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltAutocomplete, VeltAutocompleteChipTooltipWireframe, VeltAutocompleteOptionWireframe, VeltButtonWireframe, VeltCanvasComment, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleWireframe, VeltCommentComposer, VeltCommentComposerWireframe, VeltCommentDialogOptionsDropdownContentWireframe, VeltCommentDialogOptionsDropdownTriggerWireframe, VeltCommentDialogPriorityDropdownContentWireframe, VeltCommentDialogPriorityDropdownTriggerWireframe, VeltCommentDialogStatusDropdownContentWireframe, VeltCommentDialogStatusDropdownTriggerWireframe, VeltCommentDialogWireframe, VeltCommentPin, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentText, VeltCommentThread, VeltCommentThreadWireframe, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, VeltCommentsMinimap, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarButton, VeltCommentsSidebarStatusDropdownWireframe, VeltCommentsSidebarWireframe, VeltConfirmDialogWireframe, SnippylyCursor as VeltCursor, VeltData, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltIf, VeltInlineCommentsSection, VeltInlineCommentsSectionWireframe, VeltInlineReactionsSection, VeltInlineReactionsSectionWireframe, VeltMediaSourceSettingsWireframe, VeltMultiThreadCommentDialogWireframe, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsPanelWireframe, VeltNotificationsTool, VeltNotificationsToolWireframe, VeltPersistentCommentModeWireframe, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, VeltReactionPinTooltipWireframe, VeltReactionPinWireframe, VeltReactionTool, VeltReactionToolWireframe, VeltReactionsPanelWireframe, VeltRecorderAllToolMenuWireframe, VeltRecorderAllToolWireframe, VeltRecorderAudioToolWireframe, SnippylyRecorderControlPanel as VeltRecorderControlPanel, VeltRecorderControlPanelWireframe, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, VeltRecorderPlayerWireframe, VeltRecorderScreenToolWireframe, SnippylyRecorderTool as VeltRecorderTool, VeltRecorderVideoToolWireframe, VeltRecordingPreviewStepsDialogWireframe, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, VeltSubtitlesButtonWireframe as VeltSubtitlesWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, VeltTranscriptionWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltVideoPlayerWireframe, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddAttachment, useAddComment, useAddCommentAnnotation, useAddReaction, useApproveCommentAnnotation, useAssignUser, useAutocompleteChipClick, useAutocompleteUtils, useClient, useCommentActionCallback, useCommentAddHandler, useCommentAnnotationById, useCommentAnnotations, useCommentAnnotationsCount, useCommentCopyLinkHandler, useCommentDialogSidebarClickHandler, useCommentEventCallback, useCommentModeState, useCommentSelectionChangeHandler, useCommentSidebarActionButtonClick, useCommentSidebarData, useCommentSidebarInit, useCommentUpdateHandler, useCommentUtils, useContactSelected, useContactUtils, useCopyLink, useCursorUsers, useCursorUtils, useDeleteAttachment, useDeleteComment, useDeleteCommentAnnotation, useDeleteReaction, useDeleteRecording, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useGetAttachment, useGetComment, useGetCommentAnnotations, useGetLink, useGetRecording, useHuddleUtils, useIdentify, useLiveSelectionDataHandler, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderEventCallback, useRecorderUtils, useRecordingDataByRecorderId, useRejectCommentAnnotation, useResolveCommentAnnotation, useServerConnectionStateChangeHandler, useSetDocument, useSetDocumentId, useSetDocuments, useSetLiveStateData, useSetLocation, useSubscribeCommentAnnotation, useTagAnnotations, useTagUtils, useToggleReaction, useUniqueViewsByDate, useUniqueViewsByUser, useUnreadCommentAnnotationCountByLocationId, useUnreadCommentAnnotationCountOnCurrentDocument, useUnreadCommentCountByAnnotationId, useUnreadCommentCountByLocationId, useUnreadCommentCountOnCurrentDocument, useUnreadNotificationsCount, useUnsetDocumentId, useUnsubscribeCommentAnnotation, useUpdateAccess, useUpdateComment, useUpdatePriority, useUpdateStatus, useUserEditorState, useVeltClient, useVeltEventCallback, useVeltInitState, useViewsUtils };
+export { SnippylyArrowTool as VeltArrowTool, SnippylyArrows as VeltArrows, VeltAutocomplete, VeltAutocompleteChipTooltipWireframe, VeltAutocompleteOptionWireframe, VeltButtonWireframe, VeltCanvasComment, VeltChartComment, SnippylyCommentBubble as VeltCommentBubble, VeltCommentBubbleWireframe, VeltCommentComposer, VeltCommentComposerWireframe, VeltCommentDialogOptionsDropdownContentWireframe, VeltCommentDialogOptionsDropdownTriggerWireframe, VeltCommentDialogPriorityDropdownContentWireframe, VeltCommentDialogPriorityDropdownTriggerWireframe, VeltCommentDialogStatusDropdownContentWireframe, VeltCommentDialogStatusDropdownTriggerWireframe, VeltCommentDialogWireframe, VeltCommentPin, VeltCommentPinWireframe, VeltCommentPlayerTimeline, VeltCommentText, VeltCommentThread, VeltCommentThreadWireframe, SnippylyCommentTool as VeltCommentTool, VeltCommentToolWireframe, SnippylyComments as VeltComments, VeltCommentsMinimap, SnippylyCommentsSidebar as VeltCommentsSidebar, VeltCommentsSidebarButton, VeltCommentsSidebarStatusDropdownWireframe, VeltCommentsSidebarWireframe, VeltConfirmDialogWireframe, SnippylyCursor as VeltCursor, VeltData, VeltHighChartComments, SnippylyHuddle as VeltHuddle, SnippylyHuddleTool as VeltHuddleTool, VeltIf, VeltInlineCommentsSection, VeltInlineCommentsSectionWireframe, VeltInlineReactionsSection, VeltInlineReactionsSectionWireframe, VeltMediaSourceSettingsWireframe, VeltMultiThreadCommentDialogWireframe, VeltNivoChartComments, VeltNotificationsHistoryPanel, VeltNotificationsPanel, VeltNotificationsPanelWireframe, VeltNotificationsTool, VeltNotificationsToolWireframe, VeltPersistentCommentModeWireframe, SnippylyPresence as VeltPresence, SnippylyProvider as VeltProvider, VeltReactionPinTooltipWireframe, VeltReactionPinWireframe, VeltReactionTool, VeltReactionToolWireframe, VeltReactionsPanelWireframe, VeltRecorderAllToolMenuWireframe, VeltRecorderAllToolWireframe, VeltRecorderAudioToolWireframe, SnippylyRecorderControlPanel as VeltRecorderControlPanel, VeltRecorderControlPanelWireframe, SnippylyRecorderNotes as VeltRecorderNotes, SnippylyRecorderPlayer as VeltRecorderPlayer, VeltRecorderPlayerWireframe, VeltRecorderScreenToolWireframe, SnippylyRecorderTool as VeltRecorderTool, VeltRecorderVideoToolWireframe, VeltRecordingPreviewStepsDialogWireframe, SnippylySidebarButton as VeltSidebarButton, VeltSidebarButtonWireframe, VeltSubtitlesWireframe, SnippylyTagTool as VeltTagTool, SnippylyTags as VeltTags, VeltTextCommentToolWireframe, VeltTextCommentToolbar as VeltTextCommentToolbarWireframe, VeltTranscriptionWireframe, SnippylyUserInviteTool as VeltUserInviteTool, SnippylyUserRequestTool as VeltUserRequestTool, VeltUserSelectorDropdown as VeltUserSelectorDropdownWireframe, VeltVideoPlayer, VeltVideoPlayerWireframe, VeltViewAnalytics, VeltWireframe, createLiveStateMiddleware, useAIRewriterUtils, useAddAttachment, useAddComment, useAddCommentAnnotation, useAddReaction, useApproveCommentAnnotation, useAssignUser, useAutocompleteChipClick, useAutocompleteUtils, useClient, useCommentActionCallback, useCommentAddHandler, useCommentAnnotationById, useCommentAnnotations, useCommentAnnotationsCount, useCommentCopyLinkHandler, useCommentDialogSidebarClickHandler, useCommentEventCallback, useCommentModeState, useCommentSelectionChangeHandler, useCommentSidebarActionButtonClick, useCommentSidebarData, useCommentSidebarInit, useCommentUpdateHandler, useCommentUtils, useContactSelected, useContactUtils, useCopyLink, useCursorUsers, useCursorUtils, useDeleteAttachment, useDeleteComment, useDeleteCommentAnnotation, useDeleteReaction, useDeleteRecording, useEditor, useEditorAccessRequestHandler, useEditorAccessTimer, useGetAttachment, useGetComment, useGetCommentAnnotations, useGetLink, useGetRecording, useHuddleUtils, useIdentify, useLiveSelectionDataHandler, useLiveSelectionUtils, useLiveState, useLiveStateData, useLiveStateSyncUtils, useNotificationUtils, useNotificationsData, usePresenceUsers, usePresenceUtils, useRecorderAddHandler, useRecorderEventCallback, useRecorderUtils, useRecordingDataByRecorderId, useRejectCommentAnnotation, useResolveCommentAnnotation, useServerConnectionStateChangeHandler, useSetDocument, useSetDocumentId, useSetDocuments, useSetLiveStateData, useSetLocation, useSubscribeCommentAnnotation, useTagAnnotations, useTagUtils, useToggleReaction, useUniqueViewsByDate, useUniqueViewsByUser, useUnreadCommentAnnotationCountByLocationId, useUnreadCommentAnnotationCountOnCurrentDocument, useUnreadCommentCountByAnnotationId, useUnreadCommentCountByLocationId, useUnreadCommentCountOnCurrentDocument, useUnreadNotificationsCount, useUnsetDocumentId, useUnsetDocuments, useUnsubscribeCommentAnnotation, useUpdateAccess, useUpdateComment, useUpdatePriority, useUpdateStatus, useUserEditorState, useVeltClient, useVeltEventCallback, useVeltInitState, useViewsUtils };
 //# sourceMappingURL=index.js.map