@veltdev/react 4.0.0-beta.8 → 4.0.0

package/cjs/index.js

@@ -140,12 +140,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 = React.useState(null), client = _a[0], setClient = _a[1];
     React.useEffect(function () {
         if (apiKey) {
@@ -154,6 +154,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);
         }
     }, []);
+    React.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;
@@ -234,7 +241,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 = React.useRef();
     var onSignInRef = React.useRef(onSignIn);
     var onUpgradeRef = React.useRef(onUpgrade);
@@ -359,7 +366,7 @@ var SnippylyComments = function (props) {
             }
         };
     }, []);
-    return (React__default["default"].createElement("velt-comments", { ref: ref, "at-here-label": atHereLabel, "at-here-description": atHereDescription, "at-here-enabled": [true, false].includes(atHereEnabled) ? (atHereEnabled ? 'true' : 'false') : undefined, "composer-mode": composerMode, "seen-by-users": [true, false].includes(seenByUsers) ? (seenByUsers ? 'true' : 'false') : undefined, "collapsed-comments": [true, false].includes(collapsedComments) ? (collapsedComments ? 'true' : 'false') : undefined, "short-user-name": [true, false].includes(shortUserName) ? (shortUserName ? 'true' : 'false') : undefined, "resolve-status-access-admin-only": [true, false].includes(resolveStatusAccessAdminOnly) ? (resolveStatusAccessAdminOnly ? 'true' : 'false') : undefined, "delete-reply-confirmation": [true, false].includes(deleteReplyConfirmation) ? (deleteReplyConfirmation ? 'true' : 'false') : undefined, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "minimap-position": minimapPosition, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "bubble-on-pin": [true, false].includes(bubbleOnPin) ? (bubbleOnPin ? 'true' : 'false') : undefined, "bubble-on-pin-hover": [true, false].includes(bubbleOnPinHover) ? (bubbleOnPinHover ? 'true' : 'false') : undefined, "comment-tool": [true, false].includes(commentTool) ? (commentTool ? 'true' : 'false') : undefined, "sidebar-button-on-comment-dialog": [true, false].includes(sidebarButtonOnCommentDialog) ? (sidebarButtonOnCommentDialog ? 'true' : 'false') : undefined, "device-indicator-on-comment-pins": [true, false].includes(deviceIndicatorOnCommentPins) ? (deviceIndicatorOnCommentPins ? 'true' : 'false') : undefined, "scroll-to-comment": [true, false].includes(scrollToComment) ? (scrollToComment ? 'true' : 'false') : undefined, "user-mentions": [true, false].includes(userMentions) ? (userMentions ? 'true' : 'false') : undefined, "delete-on-backspace": [true, false].includes(deleteOnBackspace) ? (deleteOnBackspace ? 'true' : 'false') : undefined, hotkey: [true, false].includes(hotkey) ? (hotkey ? 'true' : 'false') : undefined, "recording-summary": [true, false].includes(recordingSummary) ? (recordingSummary ? 'true' : 'false') : undefined, "recording-transcription": [true, false].includes(recordingTranscription) ? (recordingTranscription ? 'true' : 'false') : undefined, "recording-countdown": [true, false].includes(recordingCountdown) ? (recordingCountdown ? 'true' : 'false') : undefined, "unread-indicator-mode": unreadIndicatorMode, "enter-key-to-submit": [true, false].includes(enterKeyToSubmit) ? (enterKeyToSubmit ? 'true' : 'false') : undefined, "pin-shadow-dom": [true, false].includes(pinShadowDom) ? (pinShadowDom ? 'true' : 'false') : undefined, "dialog-shadow-dom": [true, false].includes(dialogShadowDom) ? (dialogShadowDom ? 'true' : 'false') : undefined, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "text-comment-tool-shadow-dom": [true, false].includes(textCommentToolShadowDom) ? (textCommentToolShadowDom ? 'true' : 'false') : undefined, "text-comment-toolbar-shadow-dom": [true, false].includes(textCommentToolbarShadowDom) ? (textCommentToolbarShadowDom ? 'true' : 'false') : undefined, "persistent-comment-shadow-dom": [true, false].includes(persistentCommentShadowDom) ? (persistentCommentShadowDom ? 'true' : 'false') : undefined, "change-detection-in-comment-mode": [true, false].includes(changeDetectionInCommentMode) ? (changeDetectionInCommentMode ? 'true' : 'false') : undefined, "area-comment": [true, false].includes(areaComment) ? (areaComment ? 'true' : 'false') : undefined, "pin-cursor-image": pinCursorImage, "allowed-element-ids": JSON.stringify(allowedElementIds), "allowed-element-class-names": JSON.stringify(allowedElementClassNames), "allowed-element-query-selectors": JSON.stringify(allowedElementQuerySelectors), "comment-pin-highlighter": [true, false].includes(commentPinHighlighter) ? (commentPinHighlighter ? 'true' : 'false') : undefined, "custom-reactions": JSON.stringify(customReactions), "custom-status": JSON.stringify(customStatus), "custom-list-data-on-annotation": JSON.stringify(customListDataOnAnnotation), "custom-list-data-on-comment": JSON.stringify(customListDataOnComment), "custom-priority": JSON.stringify(customPriority), "custom-category": JSON.stringify(customCategory), "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "dialog-dark-mode": [true, false].includes(dialogDarkMode) ? (dialogDarkMode ? 'true' : 'false') : undefined, "pin-dark-mode": [true, false].includes(pinDarkMode) ? (pinDarkMode ? 'true' : 'false') : undefined, "text-comment-tool-dark-mode": [true, false].includes(textCommentToolDarkMode) ? (textCommentToolDarkMode ? 'true' : 'false') : undefined, "text-comment-toolbar-dark-mode": [true, false].includes(textCommentToolbarDarkMode) ? (textCommentToolbarDarkMode ? 'true' : 'false') : undefined, "multi-thread-mode": [true, false].includes(multiThreadMode) ? (multiThreadMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "read-only": [true, false].includes(readOnly) ? (readOnly ? 'true' : 'false') : undefined }, children));
+    return (React__default["default"].createElement("velt-comments", { ref: ref, "at-here-label": atHereLabel, "at-here-description": atHereDescription, "at-here-enabled": [true, false].includes(atHereEnabled) ? (atHereEnabled ? 'true' : 'false') : undefined, "composer-mode": composerMode, "seen-by-users": [true, false].includes(seenByUsers) ? (seenByUsers ? 'true' : 'false') : undefined, "collapsed-comments": [true, false].includes(collapsedComments) ? (collapsedComments ? 'true' : 'false') : undefined, "short-user-name": [true, false].includes(shortUserName) ? (shortUserName ? 'true' : 'false') : undefined, "resolve-status-access-admin-only": [true, false].includes(resolveStatusAccessAdminOnly) ? (resolveStatusAccessAdminOnly ? 'true' : 'false') : undefined, "delete-reply-confirmation": [true, false].includes(deleteReplyConfirmation) ? (deleteReplyConfirmation ? 'true' : 'false') : undefined, "auto-categorize": [true, false].includes(autoCategorize) ? (autoCategorize ? 'true' : 'false') : undefined, "data-stream-view-container-id": streamViewContainerId, "text-mode": [true, false].includes(textMode) ? (textMode ? 'true' : 'false') : undefined, "popover-mode": [true, false].includes(popoverMode) ? (popoverMode ? 'true' : 'false') : undefined, "popover-triangle-component": [true, false].includes(popoverTriangleComponent) ? (popoverTriangleComponent ? 'true' : 'false') : undefined, "floating-comment-dialog": [true, false].includes(floatingCommentDialog) ? (floatingCommentDialog ? 'true' : 'false') : undefined, "moderator-mode": [true, false].includes(moderatorMode) ? (moderatorMode ? 'true' : 'false') : undefined, "stream-mode": [true, false].includes(streamMode) ? (streamMode ? 'true' : 'false') : undefined, "sign-in-button": [true, false].includes(signInButton) ? (signInButton ? 'true' : 'false') : undefined, "upgrade-button": [true, false].includes(upgradeButton) ? (upgradeButton ? 'true' : 'false') : undefined, attachments: [true, false].includes(attachments) ? (attachments ? 'true' : 'false') : undefined, recordings: recordings, reactions: [true, false].includes(reactions) ? (reactions ? 'true' : 'false') : undefined, "device-info": [true, false].includes(deviceInfo) ? (deviceInfo ? 'true' : 'false') : undefined, "comment-index": [true, false].includes(commentIndex) ? (commentIndex ? 'true' : 'false') : undefined, "dialog-on-hover": [true, false].includes(dialogOnHover) ? (dialogOnHover ? 'true' : 'false') : undefined, "dialog-on-target-element-click": [true, false].includes(dialogOnTargetElementClick) ? (dialogOnTargetElementClick ? 'true' : 'false') : undefined, priority: [true, false].includes(priority) ? (priority ? 'true' : 'false') : undefined, status: [true, false].includes(status) ? (status ? 'true' : 'false') : undefined, "resolve-button": [true, false].includes(resolveButton) ? (resolveButton ? 'true' : 'false') : undefined, "inbox-mode": [true, false].includes(inboxMode) ? (inboxMode ? 'true' : 'false') : undefined, "suggestion-mode": [true, false].includes(suggestionMode) ? (suggestionMode ? 'true' : 'false') : undefined, "mobile-mode": [true, false].includes(mobileMode) ? (mobileMode ? 'true' : 'false') : undefined, "inline-comment-mode": [true, false].includes(inlineCommentMode) ? (inlineCommentMode ? 'true' : 'false') : undefined, "private-comment-mode": [true, false].includes(privateCommentMode) ? (privateCommentMode ? 'true' : 'false') : undefined, minimap: [true, false].includes(minimap) ? (minimap ? 'true' : 'false') : undefined, "minimap-position": minimapPosition, "persistent-comment-mode": [true, false].includes(persistentCommentMode) ? (persistentCommentMode ? 'true' : 'false') : undefined, "ghost-comments": [true, false].includes(ghostComments) ? (ghostComments ? 'true' : 'false') : undefined, "ghost-comments-indicator": [true, false].includes(ghostCommentsIndicator) ? (ghostCommentsIndicator ? 'true' : 'false') : undefined, "comments-on-dom": [true, false].includes(commentsOnDom) ? (commentsOnDom ? 'true' : 'false') : undefined, "resolved-comments-on-dom": [true, false].includes(resolvedCommentsOnDom) ? (resolvedCommentsOnDom ? 'true' : 'false') : undefined, "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) {
@@ -606,7 +613,8 @@ var SnippylyRecorderControlPanel = function (props) {
 };
 
 var SnippylyRecorderNotes = function (props) {
-    return (React__default["default"].createElement("velt-recorder-notes", null));
+    var shadowDom = props.shadowDom, children = props.children;
+    return (React__default["default"].createElement("velt-recorder-notes", { "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined }, children));
 };
 
 var SnippylyRecorderPlayer = function (props) {
@@ -640,8 +648,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__default["default"].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__default["default"].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) {
@@ -1393,8 +1401,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__default["default"].createElement("velt-inline-comments-section", { "target-inline-comment-element-id": targetInlineCommentElementId, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, config: JSON.stringify(config), variant: variant, "dialog-variant": dialogVariant, "sort-data": sortData, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "composer-variant": composerVariant }, 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__default["default"].createElement("velt-inline-comments-section", { "target-inline-comment-element-id": targetInlineCommentElementId, "target-comment-element-id": targetCommentElementId, "target-element-id": targetElementId, config: JSON.stringify(config), variant: variant, "dialog-variant": dialogVariant, "sort-data": sortData, "shadow-dom": [true, false].includes(shadowDom) ? (shadowDom ? 'true' : 'false') : undefined, "dark-mode": [true, false].includes(darkMode) ? (darkMode ? 'true' : 'false') : undefined, "multi-thread": [true, false].includes(multiThread) ? (multiThread ? 'true' : 'false') : undefined, "composer-variant": composerVariant, "composer-position": composerPosition, "sort-by": sortBy, "sort-order": sortOrder }, children));
 };
 
 var VeltCommentPin = function (props) {
@@ -1473,44 +1481,83 @@ var VeltWireframe = function (props) {
     return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-all-comment-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-all-comment-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogApprove = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-approve-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-approve-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssignMenu = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-assign-menu-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-assign-menu-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogAssigneeBannerResolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-assignee-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-assignee-banner-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogAssigneeBanner.ResolveButton = VeltCommentDialogAssigneeBannerResolveButton;
 VeltCommentDialogAssigneeBanner.UserAvatar = VeltCommentDialogAssigneeBannerUserAvatar;
@@ -1518,115 +1565,136 @@ VeltCommentDialogAssigneeBanner.UserName = VeltCommentDialogAssigneeBannerUserNa
 VeltCommentDialogAssigneeBanner.UnresolveButton = VeltCommentDialogAssigneeBannerUnresolveButton;
 
 var VeltCommentDialogBody = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-body-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-body-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentCategory = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-comment-category-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-comment-category-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentIndex = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-comment-index-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-comment-index-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCommentSuggestionStatus = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-composer-action-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-composer-attachments-other-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposerAttachmentsOther.Delete = VeltCommentDialogComposerAttachmentsOtherDelete;
 VeltCommentDialogComposerAttachmentsOther.Loading = VeltCommentDialogComposerAttachmentsOtherLoading;
@@ -1635,42 +1703,49 @@ VeltCommentDialogComposerAttachmentsOther.Name = VeltCommentDialogComposerAttach
 VeltCommentDialogComposerAttachmentsOther.Size = VeltCommentDialogComposerAttachmentsOtherSize;
 
 var VeltCommentDialogComposerAttachmentsSelected = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-composer-attachments-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-composer-input-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-composer-input-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerRecordings = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-composer-recordings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-composer-recordings-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposerPrivateBadge = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-composer-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-composer-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogComposer = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-composer-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-composer-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogComposer.ActionButton = VeltCommentDialogComposerActionButton;
 VeltCommentDialogComposer.AssignUser = VeltCommentDialogComposerAssignUser;
@@ -1681,28 +1756,33 @@ VeltCommentDialogComposer.PrivateBadge = VeltCommentDialogComposerPrivateBadge;
 VeltCommentDialogComposer.Avatar = VeltCommentDialogComposerAvatar;
 
 var VeltCommentDialogCopyLink = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogGhostBanner = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-ghost-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-ghost-banner-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogHeader = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-header-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-header-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogMoreReply = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-more-reply-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-more-reply-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentAssignWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-options-dropdown-content-assign-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentDeleteCommentWireframe = function (props) {
@@ -1716,15 +1796,17 @@ var VeltCommentDialogOptionsDropdownContentDeleteThreadWireframe = function (pro
 };
 
 var VeltCommentDialogOptionsDropdownContentDeleteWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-options-dropdown-content-edit-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe = function (props) {
@@ -1738,8 +1820,9 @@ var VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe = function
 };
 
 var VeltCommentDialogOptionsDropdownContentMakePrivateWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-options-dropdown-content-make-private-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Enable = VeltCommentDialogOptionsDropdownContentMakePrivateEnableWireframe;
 VeltCommentDialogOptionsDropdownContentMakePrivateWireframe.Disable = VeltCommentDialogOptionsDropdownContentMakePrivateDisableWireframe;
@@ -1755,15 +1838,17 @@ var VeltCommentDialogOptionsDropdownContentNotificationUnsubscribeWireframe = fu
 };
 
 var VeltCommentDialogOptionsDropdownContentNotificationWireframe = function (props) {
-    var children = props.children;
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-options-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogOptionsDropdownContentWireframe.Assign = VeltCommentDialogOptionsDropdownContentAssignWireframe;
 VeltCommentDialogOptionsDropdownContentWireframe.MakePrivate = VeltCommentDialogOptionsDropdownContentMakePrivateWireframe;
@@ -1772,212 +1857,249 @@ VeltCommentDialogOptionsDropdownContentWireframe.Delete = VeltCommentDialogOptio
 VeltCommentDialogOptionsDropdownContentWireframe.Notification = VeltCommentDialogOptionsDropdownContentNotificationWireframe;
 
 var VeltCommentDialogOptionsDropdownTriggerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-options-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-content-item-tick-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-priority-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-private-banner-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-private-banner-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogResolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-resolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-resolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogSignIn = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-sign-in-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-sign-in-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogStatusDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-status-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-status-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-status-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-status-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-suggestion-action-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-thread-card-attachments-other-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogThreadCardAttachmentsOther.Icon = VeltCommentDialogThreadCardAttachmentsOtherIcon;
 VeltCommentDialogThreadCardAttachmentsOther.Name = VeltCommentDialogThreadCardAttachmentsOtherName;
@@ -1986,126 +2108,148 @@ VeltCommentDialogThreadCardAttachmentsOther.Download = VeltCommentDialogThreadCa
 VeltCommentDialogThreadCardAttachmentsOther.Delete = VeltCommentDialogThreadCardAttachmentsOtherDelete;
 
 var VeltCommentDialogThreadCardAttachments = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-thread-card-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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;
@@ -2123,90 +2267,106 @@ VeltCommentDialogThreadCard.Draft = VeltCommentDialogThreadCardDraft;
 VeltCommentDialogThreadCard.SeenDropdown = VeltCommentDialogThreadCardSeenDropdown;
 
 var VeltCommentDialogThreads = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-threads-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-threads-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogToggleReplyCount = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-toggle-reply-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-dialog-upgrade-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-upgrade-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCustomAnnotationDropdownContentItemIcon = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-custom-annotation-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogCustomAnnotationDropdownTrigger.Arrow = VeltCommentDialogCustomAnnotationDropdownTriggerArrow;
 VeltCommentDialogCustomAnnotationDropdownTrigger.List = VeltCommentDialogCustomAnnotationDropdownTriggerList;
@@ -2214,35 +2374,41 @@ VeltCommentDialogCustomAnnotationDropdownTrigger.RemainingCount = VeltCommentDia
 VeltCommentDialogCustomAnnotationDropdownTrigger.Placeholder = VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder;
 
 var VeltCommentDialogCustomAnnotationDropdown = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-dialog-delete-button-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-delete-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogCloseButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogUnresolveButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-unresolve-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-unresolve-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogNavigationButton = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-navigation-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-navigation-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentDialogWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-dialog-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-dialog-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentDialogWireframe.AllComment = VeltCommentDialogAllComment;
 VeltCommentDialogWireframe.Approve = VeltCommentDialogApprove;
@@ -2276,44 +2442,52 @@ VeltCommentDialogWireframe.NavigationButton = VeltCommentDialogNavigationButton;
 
 var VeltCommentsSidebarCloseButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarEmptyPlaceholder = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-empty-placeholder-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-empty-placeholder-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterItemCheckboxChecked = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-item-checkbox-checked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-item-checkbox-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-item-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-item-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterItem.Checkbox = VeltCommentsSidebarFilterItemCheckbox;
 VeltCommentsSidebarFilterItem.Count = VeltCommentsSidebarFilterItemCount;
@@ -2321,48 +2495,56 @@ VeltCommentsSidebarFilterItem.Name = VeltCommentsSidebarFilterItemName;
 
 var VeltCommentsSidebarFilterName = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterCategory = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-category-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-comment-type-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-done-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-group-by-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-view-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-location-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-location-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilterLocation.Name = VeltCommentsSidebarFilterName;
 VeltCommentsSidebarFilterLocation.Item = VeltCommentsSidebarFilterItem;
@@ -2370,40 +2552,46 @@ VeltCommentsSidebarFilterLocation.ViewAll = VeltCommentsSidebarFilterViewAll;
 
 var VeltCommentsSidebarFilterPeople = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-people-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-priority-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-title-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFilterVersions = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-versions-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-status-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-filter-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarFilter.Category = VeltCommentsSidebarFilterCategory;
 VeltCommentsSidebarFilter.CloseButton = VeltCommentsSidebarFilterCloseButton;
@@ -2420,37 +2608,44 @@ VeltCommentsSidebarFilter.Status = VeltCommentsSidebarFilterStatus;
 
 var VeltCommentsSidebarFilterButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-filter-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarHeader = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-header-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-header-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarListItemDialogContainer = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-list-item-dialog-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-list-item-group-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-list-item-group-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-list-item-group-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-list-item-group-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-list-item-group-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarListItemGroup.Count = VeltCommentsSidebarListItemGroupCount;
 VeltCommentsSidebarListItemGroup.Arrow = VeltCommentsSidebarListItemGroupArrow;
@@ -2458,107 +2653,126 @@ VeltCommentsSidebarListItemGroup.Name = VeltCommentsSidebarListItemGroupName;
 
 var VeltCommentsSidebarListItem = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-list-item-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-location-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-location-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-location-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-actions-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-actions-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarMinimalFilterDropdownContent.FilterAll = VeltCommentsSidebarMinimalFilterDropdownContentFilterAll;
 VeltCommentsSidebarMinimalFilterDropdownContent.FilterUnread = VeltCommentsSidebarMinimalFilterDropdownContentFilterUnread;
@@ -2570,71 +2784,84 @@ VeltCommentsSidebarMinimalFilterDropdownContent.SortUnread = VeltCommentsSidebar
 
 var VeltCommentsSidebarMinimalFilterDropdownTrigger = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-minimal-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-page-mode-composer-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comments-sidebar-search-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarSkeleton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-skeleton-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarStatusDropdownContentItemIconWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-content-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Icon = VeltCommentsSidebarStatusDropdownContentItemIconWireframe;
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Name = VeltCommentsSidebarStatusDropdownContentItemNameWireframe;
@@ -2642,29 +2869,34 @@ VeltCommentsSidebarStatusDropdownContentItemWireframe.Count = VeltCommentsSideba
 VeltCommentsSidebarStatusDropdownContentItemWireframe.Checkbox = VeltCommentsSidebarStatusDropdownContentItemCheckboxWireframe;
 
 var VeltCommentsSidebarStatusDropdownContentWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-trigger-name-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comments-sidebar-status-dropdown-trigger-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarStatusDropdownTriggerWireframe.Arrow = VeltCommentsSidebarStatusDropdownTriggerArrowWireframe;
 VeltCommentsSidebarStatusDropdownTriggerWireframe.Name = VeltCommentsSidebarStatusDropdownTriggerNameWireframe;
@@ -2672,41 +2904,48 @@ VeltCommentsSidebarStatusDropdownTriggerWireframe.Indicator = VeltCommentsSideba
 
 var VeltCommentsSidebarStatus = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-status-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-reset-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comments-sidebar-action-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentsSidebarFocusedThreadBackButton = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-focused-thread-back-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-focused-thread-dialog-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-focused-thread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comments-sidebar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comments-sidebar-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentsSidebarWireframe.CloseButton = VeltCommentsSidebarCloseButton;
 VeltCommentsSidebarWireframe.EmptyPlaceholder = VeltCommentsSidebarEmptyPlaceholder;
@@ -2727,33 +2966,39 @@ VeltCommentsSidebarWireframe.ActionButton = VeltCommentsSidebarActionButton;
 VeltCommentsSidebarWireframe.FocusedThread = VeltCommentsSidebarFocusedThread;
 
 var VeltCommentPinGhostCommentIndicator = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-pin-index-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-pin-index-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinTriangle = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-pin-triangle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-pin-triangle-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentPinUnreadCommentIndicator = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-comment-pin-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-pin-wireframe", __assign({}, transformedProps), children));
 };
 VeltCommentPinWireframe.GhostCommentIndicator = VeltCommentPinGhostCommentIndicator;
 VeltCommentPinWireframe.Index = VeltCommentPinIndex;
@@ -2762,55 +3007,65 @@ VeltCommentPinWireframe.Triangle = VeltCommentPinTriangle;
 VeltCommentPinWireframe.UnreadCommentIndicator = VeltCommentPinUnreadCommentIndicator;
 
 var VeltSidebarButtonCommentsCount = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-sidebar-button-comments-count-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-sidebar-button-comments-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltSidebarButtonIcon = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-sidebar-button-icon-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-sidebar-button-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltSidebarButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-sidebar-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-comment-tool-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-text-comment-tool-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-text-comment-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarCommentAnnotation = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-text-comment-toolbar-comment-annotation-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-text-comment-toolbar-copywriter-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-text-comment-toolbar-copywriter-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarGeneric = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-text-comment-toolbar-generic-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-text-comment-toolbar-generic-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbarDivider = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-text-comment-toolbar-divider-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-text-comment-toolbar-divider-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTextCommentToolbar = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-text-comment-toolbar-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-text-comment-toolbar-wireframe", __assign({}, transformedProps), children));
 };
 VeltTextCommentToolbar.CommentAnnotation = VeltTextCommentToolbarCommentAnnotation;
 VeltTextCommentToolbar.Copywriter = VeltTextCommentToolbarCopywriter;
@@ -2818,28 +3073,33 @@ VeltTextCommentToolbar.Generic = VeltTextCommentToolbarGeneric;
 VeltTextCommentToolbar.Divider = VeltTextCommentToolbarDivider;
 
 var VeltUserSelectorDropdownAvatar = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-user-selector-dropdown-avatar-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-user-selector-dropdown-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownEmail = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-user-selector-dropdown-email-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-user-selector-dropdown-email-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownErrorIcon = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-user-selector-dropdown-error-icon-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-user-selector-dropdown-error-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdownName = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-user-selector-dropdown-name-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-user-selector-dropdown-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltUserSelectorDropdown = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-user-selector-dropdown-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-user-selector-dropdown-wireframe", __assign({}, transformedProps), children));
 };
 VeltUserSelectorDropdown.Avatar = VeltUserSelectorDropdownAvatar;
 VeltUserSelectorDropdown.Email = VeltUserSelectorDropdownEmail;
@@ -2847,28 +3107,33 @@ VeltUserSelectorDropdown.ErrorIcon = VeltUserSelectorDropdownErrorIcon;
 VeltUserSelectorDropdown.Name = VeltUserSelectorDropdownName;
 
 var VeltAutocompleteOptionIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-option-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-option-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-option-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-option-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionDescriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-option-description-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-option-description-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionErrorIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-option-error-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-option-error-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteOptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-option-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-option-wireframe", __assign({}, transformedProps), children));
 };
 VeltAutocompleteOptionWireframe.Icon = VeltAutocompleteOptionIconWireframe;
 VeltAutocompleteOptionWireframe.Description = VeltAutocompleteOptionDescriptionWireframe;
@@ -2876,23 +3141,27 @@ VeltAutocompleteOptionWireframe.ErrorIcon = VeltAutocompleteOptionErrorIconWiref
 VeltAutocompleteOptionWireframe.Name = VeltAutocompleteOptionNameWireframe;
 
 var VeltAutocompleteChipTooltipDescriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-description-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-description-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltAutocompleteChipTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-autocomplete-chip-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 VeltAutocompleteChipTooltipWireframe.Description = VeltAutocompleteChipTooltipDescriptionWireframe;
 VeltAutocompleteChipTooltipWireframe.Icon = VeltAutocompleteChipTooltipIconWireframe;
@@ -2916,173 +3185,266 @@ VeltCommentBubbleWireframe.Avatar = VeltCommentBubbleAvatar;
 VeltCommentBubbleWireframe.CommentsCount = VeltCommentBubbleCommentsCount;
 
 var VeltCommentsSidebarStatusDropdownWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comments-sidebar-status-dropdown-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reaction-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-reaction-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-reaction-pin-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-reaction-pin-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinEmojiWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-reaction-pin-emoji-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-reaction-pin-emoji-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionPinWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-reaction-pin-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-reaction-pin-tooltip-user-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reaction-pin-tooltip-users-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reaction-pin-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reactions-panel-item-emoji-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-reactions-panel-item-emoji-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltReactionsPanelItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-reactions-panel-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reactions-panel-items-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-reactions-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-inline-comments-section-comment-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-inline-comments-section-composer-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-inline-comments-section-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-inline-comments-section-list-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-inline-comments-section-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-inline-comments-section-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineCommentsSectionSkeletonWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-inline-comments-section-skeleton-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-inline-comments-section-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-all-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-documents-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentDocumentsListItemWireframe.Content = VeltNotificationsPanelContentDocumentsListItemContentWireframe;
 VeltNotificationsPanelContentDocumentsListItemWireframe.Name = VeltNotificationsPanelContentDocumentsListItemNameWireframe;
@@ -3090,45 +3452,53 @@ VeltNotificationsPanelContentDocumentsListItemWireframe.Count = VeltNotification
 VeltNotificationsPanelContentDocumentsListItemWireframe.Unread = VeltNotificationsPanelContentDocumentsListItemUnreadWireframe;
 
 var VeltNotificationsPanelContentDocumentsListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-documents-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-people-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentPeopleListItemWireframe.Avatar = VeltNotificationsPanelContentPeopleListItemAvatarWireframe;
 VeltNotificationsPanelContentPeopleListItemWireframe.Name = VeltNotificationsPanelContentPeopleListItemNameWireframe;
@@ -3136,55 +3506,65 @@ VeltNotificationsPanelContentPeopleListItemWireframe.Count = VeltNotificationsPa
 VeltNotificationsPanelContentPeopleListItemWireframe.Content = VeltNotificationsPanelContentPeopleListItemContentWireframe;
 
 var VeltNotificationsPanelContentPeopleListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-people-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-list-item-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentListItemWireframe.Avatar = VeltNotificationsPanelContentListItemAvatarWireframe;
 VeltNotificationsPanelContentListItemWireframe.Body = VeltNotificationsPanelContentListItemBodyWireframe;
@@ -3194,19 +3574,22 @@ VeltNotificationsPanelContentListItemWireframe.Time = VeltNotificationsPanelCont
 VeltNotificationsPanelContentListItemWireframe.Unread = VeltNotificationsPanelContentListItemUnreadWireframe;
 
 var VeltNotificationsPanelContentListWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-panel-content-list-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelContentWireframe.All = VeltNotificationsPanelContentAllWireframe;
 VeltNotificationsPanelContentWireframe.ForYou = VeltNotificationsPanelContentForYouWireframe;
@@ -3217,62 +3600,73 @@ VeltNotificationsPanelContentWireframe.List = VeltNotificationsPanelContentListW
 VeltNotificationsPanelContentWireframe.AllReadContainer = VeltNotificationsPanelContentAllReadContainerWireframe;
 
 var VeltNotificationsPanelHeaderTabDocumentsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-header-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-title-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelViewAllButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-notifications-panel-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelSkeletonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-skeleton-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltNotificationsPanelWireframe.Content = VeltNotificationsPanelContentWireframe;
 VeltNotificationsPanelWireframe.Header = VeltNotificationsPanelHeaderWireframe;
@@ -3283,207 +3677,242 @@ VeltNotificationsPanelWireframe.CloseButton = VeltNotificationsPanelCloseButtonW
 VeltNotificationsPanelWireframe.Skeleton = VeltNotificationsPanelSkeletonWireframe;
 
 var VeltNotificationsToolIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-tool-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-tool-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolLabelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-tool-label-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-tool-label-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolUnreadCountWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-tool-unread-count-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-tool-unread-count-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolUnreadIconWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-tool-unread-icon-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-notifications-tool-unread-icon-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltNotificationsToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-notifications-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-confirm-dialog-approve-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-confirm-dialog-title-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltConfirmDialogMessageWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-confirm-dialog-message-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-confirm-dialog-reject-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-confirm-dialog-title-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-confirm-dialog-reject-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltConfirmDialogWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-confirm-dialog-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-inline-reactions-section-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-inline-reactions-section-list-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineReactionsSectionPanelWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-inline-reactions-section-panel-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-inline-reactions-section-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltInlineReactionsSectionToolContainerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-inline-reactions-section-tool-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-inline-reactions-section-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-persistent-comment-mode-close-button-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-persistent-comment-mode-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelPrivateWireframe = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-persistent-comment-mode-label-private-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-persistent-comment-mode-label-private-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelPublicWireframe = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-persistent-comment-mode-label-public-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-persistent-comment-mode-label-public-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltPersistentCommentModeLabelWireframe = function (props) {
-    var children = props.children;
-    return (React__default["default"].createElement("velt-persistent-comment-mode-label-wireframe", null, children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-persistent-comment-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-close-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-comment-count-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-composer-container-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-empty-placeholder-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-list-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-mark-all-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-actions-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-all-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-read-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-resolved-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-filter-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-selected-icon-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-date-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-sort-unread-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-content-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.FilterAll = VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterAllWireframe;
 VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.FilterUnread = VeltMultiThreadCommentDialogMinimalFilterDropdownContentFilterUnreadWireframe;
@@ -3495,29 +3924,34 @@ VeltMultiThreadCommentDialogMinimalFilterDropdownContentWireframe.SortUnread = V
 
 var VeltMultiThreadCommentDialogMinimalFilterDropdownTriggerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-trigger-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-minimal-filter-dropdown-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-new-thread-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-reset-filter-button-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-multi-thread-comment-dialog-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-multi-thread-comment-dialog-wireframe", __assign({}, transformedProps), children));
 };
 VeltMultiThreadCommentDialogWireframe.CommentCount = VeltMultiThreadCommentDialogCommentCountWireframe;
 VeltMultiThreadCommentDialogWireframe.ComposerContainer = VeltMultiThreadCommentDialogComposerContainerWireframe;
@@ -3531,67 +3965,79 @@ VeltMultiThreadCommentDialogWireframe.ResetFilterButton = VeltMultiThreadComment
 
 var VeltCommentComposerWireframe = function (props) {
     var children = props.children, remainingProps = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-composer-wireframe", __assign({}, remainingProps), children));
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-composer-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltCommentThreadWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-comment-thread-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-comment-thread-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsToggleIconOpenWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-media-source-settings-options-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-media-source-settings-divider-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-media-source-settings-divider-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltMediaSourceSettingsAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-media-source-settings-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-media-source-settings-audio-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsAudioWireframe.ToggleIcon = VeltMediaSourceSettingsToggleIconWireframe;
 VeltMediaSourceSettingsAudioWireframe.SelectedLabel = VeltMediaSourceSettingsSelectedLabelWireframe;
@@ -3599,8 +4045,9 @@ VeltMediaSourceSettingsAudioWireframe.Options = VeltMediaSourceSettingsOptionsWi
 VeltMediaSourceSettingsAudioWireframe.Divider = VeltMediaSourceSettingsDividerWireframe;
 
 var VeltMediaSourceSettingsVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-media-source-settings-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-media-source-settings-video-wireframe", __assign({}, transformedProps), children));
 };
 VeltMediaSourceSettingsVideoWireframe.ToggleIcon = VeltMediaSourceSettingsToggleIconWireframe;
 VeltMediaSourceSettingsVideoWireframe.SelectedLabel = VeltMediaSourceSettingsSelectedLabelWireframe;
@@ -3608,145 +4055,171 @@ VeltMediaSourceSettingsVideoWireframe.Options = VeltMediaSourceSettingsOptionsWi
 VeltMediaSourceSettingsVideoWireframe.Divider = VeltMediaSourceSettingsDividerWireframe;
 
 var VeltMediaSourceSettingsWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-media-source-settings-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-recorder-all-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-all-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderAllToolMenuAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-all-tool-menu-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-recorder-audio-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-audio-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderScreenToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-screen-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-screen-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderVideoToolWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-video-tool-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-video-tool-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecordingPreviewStepsDialogBottomPanelCloseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recording-preview-steps-dialog-audio-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogAudioWireframe.BottomPanel = VeltRecordingPreviewStepsDialogBottomPanelWireframe;
 VeltRecordingPreviewStepsDialogAudioWireframe.ButtonPanel = VeltRecordingPreviewStepsDialogButtonPanelWireframe;
@@ -3759,35 +4232,41 @@ VeltRecordingPreviewStepsDialogAudioWireframe.Timer = VeltRecordingPreviewStepsD
 VeltRecordingPreviewStepsDialogAudioWireframe.Waveform = VeltRecordingPreviewStepsDialogWaveformWireframe;
 
 var VeltRecordingPreviewStepsDialogCameraButtonOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recording-preview-steps-dialog-video-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecordingPreviewStepsDialogVideoWireframe.BottomPanel = VeltRecordingPreviewStepsDialogBottomPanelWireframe;
 VeltRecordingPreviewStepsDialogVideoWireframe.ButtonPanel = VeltRecordingPreviewStepsDialogButtonPanelWireframe;
@@ -3803,67 +4282,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__default["default"].createElement(React__default["default"].Fragment, null, children));
 };
 VeltRecordingPreviewStepsDialogWireframe.Video = VeltRecordingPreviewStepsDialogVideoWireframe;
 VeltRecordingPreviewStepsDialogWireframe.Audio = VeltRecordingPreviewStepsDialogAudioWireframe;
 
 var VeltRecorderControlPanelFloatingModeContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-control-panel-action-bar-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelActionBarWireframe.Clear = VeltRecorderControlPanelActionBarClearWireframe;
 VeltRecorderControlPanelActionBarWireframe.Stop = VeltRecorderControlPanelActionBarStopWireframe;
@@ -3873,40 +4364,47 @@ VeltRecorderControlPanelActionBarWireframe.TypeIcon = VeltRecorderControlPanelAc
 VeltRecorderControlPanelActionBarWireframe.Waveform = VeltRecorderControlPanelActionBarWaveformWireframe;
 
 var VeltRecorderControlPanelCollapsedButtonOffWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-control-panel-loading-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-control-panel-loading-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelPausedWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-control-panel-paused-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-control-panel-paused-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelVideoWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-control-panel-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-control-panel-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderControlPanelFloatingModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].createElement("velt-recorder-control-panel-floating-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderControlPanelFloatingModeWireframe.Container = VeltRecorderControlPanelFloatingModeContainerWireframe;
 VeltRecorderControlPanelFloatingModeWireframe.ScreenVideo = VeltRecorderControlPanelFloatingModeScreenVideoWireframe;
@@ -3918,90 +4416,106 @@ VeltRecorderControlPanelFloatingModeWireframe.Loading = VeltRecorderControlPanel
 VeltRecorderControlPanelFloatingModeWireframe.ActionBar = VeltRecorderControlPanelActionBarWireframe;
 
 var VeltRecorderControlPanelThreadModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, children));
 };
 VeltRecorderControlPanelWireframe.FloatingMode = VeltRecorderControlPanelFloatingModeWireframe;
 VeltRecorderControlPanelWireframe.ThreadMode = VeltRecorderControlPanelThreadModeWireframe;
 
 var VeltRecorderPlayerAudioTogglePauseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-player-audio-toggle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-recorder-player-audio-waveform-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-audio-waveform-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-audio-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-audio-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerDeleteWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-delete-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-delete-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerNameWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-name-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-name-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerSubtitlesButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-subtitles-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-subtitles-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerSubtitlesWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-subtitles-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-subtitles-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTranscriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-transcription-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-transcription-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAvatarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-avatar-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-avatar-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerAudioContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-audio-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-audio-container-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerAudioContainerWireframe.AudioToggle = VeltRecorderPlayerAudioToggleWireframe;
 VeltRecorderPlayerAudioContainerWireframe.Time = VeltRecorderPlayerTimeWireframe;
@@ -4016,39 +4530,46 @@ VeltRecorderPlayerAudioContainerWireframe.AudioWaveform = VeltRecorderPlayerAudi
 VeltRecorderPlayerAudioContainerWireframe.Avatar = VeltRecorderPlayerAvatarWireframe;
 
 var VeltRecorderPlayerFullScreenButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-player-overlay-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-overlay-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerPlayButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-play-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-play-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerTimelineSeekBarWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].createElement("velt-recorder-player-timeline-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-recorder-player-video-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-video-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltRecorderPlayerVideoContainerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-recorder-player-video-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-recorder-player-video-container-wireframe", __assign({}, transformedProps), children));
 };
 VeltRecorderPlayerVideoContainerWireframe.Video = VeltRecorderPlayerVideoWireframe;
 VeltRecorderPlayerVideoContainerWireframe.Timeline = VeltRecorderPlayerTimelineWireframe;
@@ -4065,101 +4586,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__default["default"].createElement(React__default["default"].Fragment, null, children));
 };
 VeltRecorderPlayerWireframe.AudioContainer = VeltRecorderPlayerAudioContainerWireframe;
 VeltRecorderPlayerWireframe.VideoContainer = VeltRecorderPlayerVideoContainerWireframe;
 
 var VeltVideoPlayerControlsDeleteButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-video-player-controls-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-controls-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerControlsTogglePauseWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-video-player-controls-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-controls-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerControlsWireframe.DeleteButton = VeltVideoPlayerControlsDeleteButtonWireframe;
 VeltVideoPlayerControlsWireframe.ProgressBar = VeltVideoPlayerControlsProgressBarWireframe;
@@ -4173,38 +4712,45 @@ VeltVideoPlayerControlsWireframe.CurrentTime = VeltVideoPlayerControlsCurrentTim
 VeltVideoPlayerControlsWireframe.TotalTime = VeltVideoPlayerControlsTotalTimeWireframe;
 
 var VeltVideoPlayerCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-copy-link-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerDisplayWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-display-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-display-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerMinimizeButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-minimize-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-minimize-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerPanelWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-panel-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerSubtitlesWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-subtitles-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-subtitles-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerTranscriptionWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-transcription-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-transcription-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltVideoPlayerWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-video-player-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-video-player-wireframe", __assign({}, transformedProps), children));
 };
 VeltVideoPlayerWireframe.Controls = VeltVideoPlayerControlsWireframe;
 VeltVideoPlayerWireframe.CopyLink = VeltVideoPlayerCopyLinkWireframe;
@@ -4214,88 +4760,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__default["default"].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__default["default"].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__default["default"].createElement("velt-subtitles-panel-wireframe", __assign({}, transformedProps), children));
+};
+
 var VeltSubtitlesButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-subtitles-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, children));
 };
+VeltSubtitlesWireframe.EmbedMode = VeltSubtitlesEmbedModeWireframe;
+VeltSubtitlesWireframe.FloatingMode = VeltSubtitlesFloatingModeWireframe;
 
 var VeltTranscriptionCloseButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-close-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-close-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemTextWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-content-item-text-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-content-item-text-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemTimeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-content-item-time-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-content-item-time-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionContentItemWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-content-item-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-transcription-content-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-transcription-copy-link-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-copy-link-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionCopyLinkTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-copy-link-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-copy-link-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionCopyLinkWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-copy-link-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].createElement("velt-transcription-summary-expand-toggle-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-transcription-summary-text-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-summary-text-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionSummaryWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-summary-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-transcription-panel-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-panel-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionPanelWireframe.CloseButton = VeltTranscriptionCloseButtonWireframe;
 VeltTranscriptionPanelWireframe.CopyLink = VeltTranscriptionCopyLinkWireframe;
@@ -4303,29 +4914,34 @@ VeltTranscriptionPanelWireframe.Summary = VeltTranscriptionSummaryWireframe;
 VeltTranscriptionPanelWireframe.Content = VeltTranscriptionContentWireframe;
 
 var VeltTranscriptionEmbedModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-embed-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].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__default["default"].createElement("velt-transcription-panel-container-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-panel-container-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionButtonWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-button-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-button-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionTooltipWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-tooltip-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-tooltip-wireframe", __assign({}, transformedProps), children));
 };
 
 var VeltTranscriptionFloatingModeWireframe = function (props) {
-    var children = props.children, remainingProp = __rest(props, ["children"]);
-    return (React__default["default"].createElement("velt-transcription-floating-mode-wireframe", __assign({}, remainingProp), children));
+    var children = props.children, remainingProps = __rest(props, ["children"]);
+    var transformedProps = transformWireframeProps(remainingProps);
+    return (React__default["default"].createElement("velt-transcription-floating-mode-wireframe", __assign({}, transformedProps), children));
 };
 VeltTranscriptionFloatingModeWireframe.Button = VeltTranscriptionButtonWireframe;
 VeltTranscriptionFloatingModeWireframe.Tooltip = VeltTranscriptionTooltipWireframe;
@@ -4333,16 +4949,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__default["default"].createElement(React__default["default"].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 = React.useRef();
-    return (React__default["default"].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__default["default"].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() {
@@ -4405,10 +5023,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__default["default"].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() {
@@ -4417,6 +5037,12 @@ function useUnsetDocumentId() {
         client && client.unsetDocumentId && client.unsetDocumentId();
     }, [client]);
 }
+function useUnsetDocuments() {
+    var client = useVeltClient().client;
+    React__default["default"].useEffect(function () {
+        client && client.unsetDocuments && client.unsetDocuments();
+    }, [client]);
+}
 function useSetLocation(location, appendLocation) {
     var client = useVeltClient().client;
     // Memoize the setLocation call
@@ -4616,7 +5242,7 @@ function useCommentModeState() {
     return data;
 }
 /**
- * @deprecated Use `useAddCommentAnnotation` event hook instead.
+ * @deprecated Use `useCommentEventCallback('addCommentAnnotation')` event hook instead.
  */
 function useCommentAddHandler() {
     var commentElement = useCommentUtils();
@@ -4634,7 +5260,7 @@ function useCommentAddHandler() {
     return data;
 }
 /**
- * @deprecated Use respective update events hooks instead.
+ * @deprecated Use `useCommentEventCallback` event hook instead.
  */
 function useCommentUpdateHandler() {
     var commentElement = useCommentUtils();
@@ -5514,6 +6140,9 @@ function useRecorderAddHandler() {
     }, [recorderElement]);
     return data;
 }
+/**
+* @deprecated Use `recorderUtils.getRecordingData()` method instead
+*/
 function useRecordingDataByRecorderId(recorderId) {
     var recorderElement = useRecorderUtils();
     var _a = React__default["default"].useState(null), data = _a[0], setData = _a[1];
@@ -5948,7 +6577,7 @@ exports.VeltRecorderVideoToolWireframe = VeltRecorderVideoToolWireframe;
 exports.VeltRecordingPreviewStepsDialogWireframe = VeltRecordingPreviewStepsDialogWireframe;
 exports.VeltSidebarButton = SnippylySidebarButton;
 exports.VeltSidebarButtonWireframe = VeltSidebarButtonWireframe;
-exports.VeltSubtitlesWireframe = VeltSubtitlesButtonWireframe;
+exports.VeltSubtitlesWireframe = VeltSubtitlesWireframe;
 exports.VeltTagTool = SnippylyTagTool;
 exports.VeltTags = SnippylyTags;
 exports.VeltTextCommentToolWireframe = VeltTextCommentToolWireframe;
@@ -6041,6 +6670,7 @@ exports.useUnreadCommentCountByLocationId = useUnreadCommentCountByLocationId;
 exports.useUnreadCommentCountOnCurrentDocument = useUnreadCommentCountOnCurrentDocument;
 exports.useUnreadNotificationsCount = useUnreadNotificationsCount;
 exports.useUnsetDocumentId = useUnsetDocumentId;
+exports.useUnsetDocuments = useUnsetDocuments;
 exports.useUnsubscribeCommentAnnotation = useUnsubscribeCommentAnnotation;
 exports.useUpdateAccess = useUpdateAccess;
 exports.useUpdateComment = useUpdateComment;