npm - @contentstack/live-preview-utils - Versions diffs - 4.1.1 → 4.1.3 - Mend

@contentstack/live-preview-utils 4.1.1 → 4.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/README.md CHANGED Viewed

@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
 ```html
 <script type='module' crossorigin="anonymous">
-     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.1.1';
+     import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.1.3';
      ContentstackLivePreview.init({
         stackDetails: {

package/dist/legacy/light-sdk.cjs CHANGED Viewed

@@ -60,7 +60,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "4.1.1";
+    return "4.1.3";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/legacy/light-sdk.js CHANGED Viewed

@@ -38,7 +38,7 @@ var _LightLivePreviewHoC = class _LightLivePreviewHoC {
   static unsubscribeOnEntryChange() {
   }
   static getSdkVersion() {
-    return "4.1.1";
+    return "4.1.3";
   }
 };
 _LightLivePreviewHoC.previewConstructors = {};

package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs CHANGED Viewed

@@ -141,7 +141,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: import_configManager.default.get().ssr,
         href: window.location.href,
-        sdkVersion: "4.1.1",
+        sdkVersion: "4.1.3",
         mode: import_configManager.default.get().mode
       }
     }

package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js CHANGED Viewed

@@ -109,7 +109,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
       config: {
         shouldReload: Config.get().ssr,
         href: window.location.href,
-        sdkVersion: "4.1.1",
+        sdkVersion: "4.1.3",
         mode: Config.get().mode
       }
     }

package/dist/legacy/preview/contentstack-live-preview-HOC.cjs CHANGED Viewed

@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "4.1.1";
+    return "4.1.3";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/legacy/preview/contentstack-live-preview-HOC.js CHANGED Viewed

@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
    * @returns The version of the SDK as a string.
    */
   static getSdkVersion() {
-    return "4.1.1";
+    return "4.1.3";
   }
 };
 _ContentstackLivePreview.previewConstructors = {};

package/dist/legacy/visualBuilder/collab.style.cjs CHANGED Viewed

@@ -77,7 +77,7 @@ function collabStyles() {
             background-color: #edf1f7;
             border: 1.5px solid #ffffff;
             border-radius: 50%;
-            font-family: Inter;
+            font-family: Inter, sans-serif;
             font-weight: 600;
             justify-content: center;
             position: relative;
@@ -407,7 +407,7 @@ function collabStyles() {
             cursor: default;
             position: relative;
             padding: 0 !important;
-            font-family: Inter;
+            font-family: Inter, sans-serif;
             color: #475161;
             width: 20.75rem;
         `,

package/dist/legacy/visualBuilder/collab.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/visualBuilder/collab.style.ts"],"sourcesContent":["import { css, keyframes } from \"goober\";\n\nconst skeletonTileProgressSlide = keyframes`\n 0%, 100% {\n fill: #edf1f7;\n }\n 60% {\n opacity: 0.4;\n }\n`;\nconst dotKeyframes = keyframes`\n 0% {\n opacity: 0.2;\n transform: scale(0.8, 0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2, 1.2);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1, 1);\n }\n`;\n\nexport function collabStyles() {\n return {\n \"collab-indicator\": css`\n width: 2.25rem;\n height: 2.25rem;\n background-color: gray;\n border-radius: 50% 50% 50% 0%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n `,\n \"collab-popup\": css`\n position: fixed;\n z-index: 1000;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: auto;\n `,\n \"collab-avatar\": css`\n background-color: #edf1f7;\n border: 1.5px solid #ffffff;\n border-radius: 50%;\n font-family: Inter;\n font-weight: 600;\n justify-content: center;\n position: relative;\n `,\n \"collab-avatar--single\": css`\n border: none;\n font-size: 0.6875rem;\n height: 2rem;\n width: 2rem;\n border-radius: 22.5rem;\n border: 0.125rem solid #dde3ee;\n background: #ffffff;\n position: relative;\n overflow: hidden;\n\n &:hover .collab-avatar__image {\n filter: grayscale(0);\n }\n `,\n \"collab-avatar__image\": css`\n filter: grayscale(1);\n transition: filter 300ms ease;\n border-radius: 50%;\n height: 0;\n left: 50%;\n min-width: 100%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n `,\n \"collab-avatar__link\": css`\n color: #475161;\n cursor: pointer;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n background-color 300ms ease,\n color 300ms ease;\n width: 100%;\n font-weight: 600;\n font-size: 0.75rem;\n `,\n \"collab-tooltip--wrapper\": css`\n position: relative;\n display: inline-block;\n `,\n \"collab-tooltip\": css`\n position: fixed;\n z-index: 2147483647 !important;\n padding: 8px 12px;\n font-size: 14px;\n color: #f7f9fc;\n background-color: #767676;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n opacity: 0;\n animation: simpleFade 0.15s ease-in forwards;\n\n @keyframes simpleFade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n `,\n \"collab-tooltip--top\": css`\n &::before {\n content: \"\";\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px 5px 0;\n border-style: solid;\n border-color: #767676 transparent transparent;\n }\n `,\n \"collab-tooltip--bottom\": css`\n &::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent #767676;\n }\n `,\n \"collab-tooltip--left\": css`\n &::before {\n content: \"\";\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent transparent #767676;\n }\n `,\n \"collab-tooltip--right\": css`\n &::before {\n content: \"\";\n position: absolute;\n left: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 5px 5px 0;\n border-style: solid;\n border-color: transparent #767676 transparent transparent;\n }\n `,\n \"collab-icon\": css`\n height: 1.25rem;\n width: 1.25rem;\n cursor: pointer;\n `,\n \"collab-icon-wrapper\": css`\n padding: 0 0.5rem;\n `,\n \"collab-button--basestyle\": css`\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n cursor: pointer;\n font-family: Inter, sans-serif;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1;\n min-height: 2rem;\n min-width: 2rem;\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n vertical-align: middle;\n cursor: pointer;\n opacity: 1;\n pointer-events: auto;\n `,\n \"collab-button--disabled\": css`\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: auto;\n `,\n \"collab-button--loading\": css`\n cursor: default;\n pointer-events: none;\n `,\n \"collab-button--loader\": css`\n display: flex;\n justify-content: center;\n text-align: center;\n `,\n \"collab-button--loader--wrapper\": css`\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translateX(-50%) translateY(-50%);\n -moz-transform: translateX(-50%) translateY(-50%);\n `,\n \"collab-button--loader--animation\": css`\n animation: ${dotKeyframes} 1.5s infinite ease-in-out;\n\n border-radius: 0.625rem;\n display: inline-block;\n height: 0.3125rem;\n margin-right: 0.25rem;\n width: 0.3125rem;\n\n &:nth-child(2) {\n animation-delay: 0.5s;\n }\n\n &:nth-child(3) {\n animation-delay: 1s;\n margin-right: 0;\n }\n `,\n \"collab-button--visible\": css`\n visibility: visible;\n `,\n \"collab-button--hidden\": css`\n visibility: hidden;\n `,\n \"collab-button--loading--color\": {\n primary: css`\n background-color: #f9f8ff !important;\n `,\n secondary: css`\n background-color: #6c5ce7 !important;\n `,\n tertiary: css`\n background-color: #6c5ce7 !important;\n `,\n destructive: css`\n background-color: #f9f8ff !important;\n `,\n },\n \"collab-button--type\": {\n primary: css`\n background-color: #6c5ce7 !important;\n color: #ffffff;\n &:hover {\n background-color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n background-color: #3e3871 !important;\n }\n `,\n secondary: css`\n background-color: #f9f8ff !important;\n border: 1px solid #6c5ce7 !important;\n color: #6c5ce7 !important;\n &:hover {\n border-color: #5d50be !important;\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n border-color: #3e3871 !important;\n color: #3e3871 !important;\n }\n `,\n tertiary: css`\n color: #6c5ce7 !important;\n &:hover {\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n destructive: css`\n background-color: #a31b00 !important;\n color: #ffffff !important;\n &:hover {\n background-color: #701300 !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n },\n \"collab-button--size\": {\n large: css`\n font-size: 1rem;\n min-height: 2.5rem;\n max-height: 2.5rem;\n `,\n regular: css`\n margin-top: -1px;\n `,\n small: css`\n font-size: 0.875rem;\n min-height: 2rem;\n max-height: 2rem;\n padding: 0.3125rem 1rem;\n `,\n },\n \"collab-button--icon-allignment\": {\n left: css`\n svg:first-child {\n float: left;\n margin-left: 0;\n margin-right: 0.5rem;\n }\n `,\n right: css`\n svg:first-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n both: css`\n svg:first-child {\n float: left;\n margin-right: 0.5rem;\n margin-left: 0;\n }\n svg:last-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n },\n \"collab-button-group\": css`\n display: flex;\n & > button {\n margin-right: 1rem;\n &:last-child {\n margin-right: 0;\n }\n }\n `,\n \"collab-skeletonTileSvgClass\": css`\n & > g rect {\n animation: ${skeletonTileProgressSlide} 1.8s infinite;\n }\n `,\n \"collab-thread-body-comment--loader\": css`\n padding: 0.625rem;\n `,\n \"collab-thread--wrapper\": css`\n cursor: default;\n position: relative;\n padding: 0 !important;\n font-family: Inter;\n color: #475161;\n width: 20.75rem;\n `,\n \"collab-thread--container\": css`\n max-height: 23.125rem;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n \"collab-thread-header--wrapper\": css`\n height: 2.5rem;\n padding: 0.2rem 0.1rem 0rem 0.625rem;\n `,\n \"collab-thread-header--container\": css`\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-header--title\": css`\n font-weight: 600;\n font-size: 0.875rem;\n `,\n \"collab-thread-header--resolve\": css`\n border-radius: 6px !important;\n `,\n \"collab-thread-header--resolve--icon\": css`\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem !important;\n `,\n \"collab-thread-header--resolve--text\": css`\n font-size: 0.875rem;\n `,\n \"collab-thread-footer--wrapper\": css`\n height: 3.5rem;\n width: 100%;\n flex-direction: row-reverse;\n padding: 0 0.9375rem;\n flex-shrink: 0;\n `,\n \"collab-thread-body--wrapper\": css`\n border: solid #edf1f7;\n border-width: 0.0625rem 0;\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n \"collab-thread-input-indicator--wrapper\": css`\n padding: 0 0.5rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 150%;\n letter-spacing: 0.01em;\n min-height: 1.3125rem !important;\n `,\n \"collab-thread-input-indicator--error\": css`\n width: 100%;\n margin-right: 0.5rem;\n color: #d62400;\n `,\n \"collab-thread-input-indicator--count\": css`\n color: #475161;\n `,\n \"collab-thread-comment--user-details\": css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-comment--user-details__text\": css`\n padding-left: 0.625rem;\n flex-grow: 1;\n min-width: 0;\n `,\n \"collab-thread-comment--user-name\": css`\n font-style: normal;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 150%;\n letter-spacing: 0.015rem;\n color: #475161;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"collab-thread-comment--list\": css`\n max-height: 10.9rem;\n display: flex;\n overflow: auto;\n flex-flow: column-reverse;\n `,\n \"collab-thread-comment-seperator\": css`\n width: 100%;\n height: 1.5rem;\n stroke-width: 0.0625rem;\n stroke: #dde3ee;\n `,\n \"collab-thread-comment--time-details\": css`\n font-weight: 400;\n font-size: 0.75rem;\n line-height: 150%;\n font-style: Inter;\n letter-spacing: 0.015rem;\n color: #6e6b86;\n `,\n \"collab-thread-comment--message\": css`\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n color: #475161;\n word-break: break-all;\n width: calc(100% - 10px);\n min-height: 2.25rem;\n white-space: pre-wrap;\n\n b {\n color: #6c5ce7;\n font-weight: 400;\n }\n `,\n \"collab-thread-comment--wrapper\": css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.625rem;\n padding: 0.625rem;\n `,\n \"collab-thread-comment-action--wrapper\": css`\n margin-left: auto;\n display: flex;\n `,\n \"collab-thread-body--input--wrapper\": css`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-gap: 0.25rem;\n `,\n \"collab-thread-body--input\": css`\n position: relative;\n overflow-y: visible;\n `,\n \"collab-thread-body--input--textarea--wrapper\": css`\n width: 100%;\n transition: height 0.2s ease-in 0s;\n `,\n \"collab-thread-body--input--textarea\": css`\n display: block;\n width: 100%;\n position: relative;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: #ffffff;\n font-family: inherit;\n font-size: 1rem;\n letter-spacing: inherit;\n height: 100%;\n bottom: 0;\n overflow: auto;\n resize: vertical;\n border-radius: 4px;\n border: 0.0625rem solid #dde3ee;\n line-height: 1.375rem;\n color: #222222;\n padding: 0.5rem 1rem;\n max-height: 6.25rem;\n min-height: 4.125rem;\n transition:\n border 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n `,\n \"collab-thread-body--input--textarea--focus\": css`\n background-color: #ffffff !important;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n border-radius: 4px !important;\n outline: none;\n `,\n\n \"collab-thread-body--input--textarea--hover\": css`\n background-color: #edf1f7;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n `,\n \"collab-thread-body--input--textarea--suggestionsList\": css`\n list-style: none;\n padding-inline: unset;\n position: fixed;\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n max-height: 192px;\n overflow-y: auto;\n width: 256px;\n max-height: 160px;\n z-index: 50;\n animation: fadeIn 0.2s ease-in-out;\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item\": css`\n width: 100%;\n padding: 8px 16px;\n text-align: left;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f3f4f6;\n color: #5d50be;\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\": css`\n background-color: #f3f4f6;\n color: #5d50be;\n `,\n };\n}\n\nexport const flexCentered = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const flexAlignCenter = css`\n display: flex;\n align-items: center;\n`;\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/visualBuilder/collab.style.ts"],"sourcesContent":["import { css, keyframes } from \"goober\";\n\nconst skeletonTileProgressSlide = keyframes`\n 0%, 100% {\n fill: #edf1f7;\n }\n 60% {\n opacity: 0.4;\n }\n`;\nconst dotKeyframes = keyframes`\n 0% {\n opacity: 0.2;\n transform: scale(0.8, 0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2, 1.2);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1, 1);\n }\n`;\n\nexport function collabStyles() {\n return {\n \"collab-indicator\": css`\n width: 2.25rem;\n height: 2.25rem;\n background-color: gray;\n border-radius: 50% 50% 50% 0%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n `,\n \"collab-popup\": css`\n position: fixed;\n z-index: 1000;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: auto;\n `,\n \"collab-avatar\": css`\n background-color: #edf1f7;\n border: 1.5px solid #ffffff;\n border-radius: 50%;\n font-family: Inter, sans-serif;\n font-weight: 600;\n justify-content: center;\n position: relative;\n `,\n \"collab-avatar--single\": css`\n border: none;\n font-size: 0.6875rem;\n height: 2rem;\n width: 2rem;\n border-radius: 22.5rem;\n border: 0.125rem solid #dde3ee;\n background: #ffffff;\n position: relative;\n overflow: hidden;\n\n &:hover .collab-avatar__image {\n filter: grayscale(0);\n }\n `,\n \"collab-avatar__image\": css`\n filter: grayscale(1);\n transition: filter 300ms ease;\n border-radius: 50%;\n height: 0;\n left: 50%;\n min-width: 100%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n `,\n \"collab-avatar__link\": css`\n color: #475161;\n cursor: pointer;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n background-color 300ms ease,\n color 300ms ease;\n width: 100%;\n font-weight: 600;\n font-size: 0.75rem;\n `,\n \"collab-tooltip--wrapper\": css`\n position: relative;\n display: inline-block;\n `,\n \"collab-tooltip\": css`\n position: fixed;\n z-index: 2147483647 !important;\n padding: 8px 12px;\n font-size: 14px;\n color: #f7f9fc;\n background-color: #767676;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n opacity: 0;\n animation: simpleFade 0.15s ease-in forwards;\n\n @keyframes simpleFade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n `,\n \"collab-tooltip--top\": css`\n &::before {\n content: \"\";\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px 5px 0;\n border-style: solid;\n border-color: #767676 transparent transparent;\n }\n `,\n \"collab-tooltip--bottom\": css`\n &::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent #767676;\n }\n `,\n \"collab-tooltip--left\": css`\n &::before {\n content: \"\";\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent transparent #767676;\n }\n `,\n \"collab-tooltip--right\": css`\n &::before {\n content: \"\";\n position: absolute;\n left: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 5px 5px 0;\n border-style: solid;\n border-color: transparent #767676 transparent transparent;\n }\n `,\n \"collab-icon\": css`\n height: 1.25rem;\n width: 1.25rem;\n cursor: pointer;\n `,\n \"collab-icon-wrapper\": css`\n padding: 0 0.5rem;\n `,\n \"collab-button--basestyle\": css`\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n cursor: pointer;\n font-family: Inter, sans-serif;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1;\n min-height: 2rem;\n min-width: 2rem;\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n vertical-align: middle;\n cursor: pointer;\n opacity: 1;\n pointer-events: auto;\n `,\n \"collab-button--disabled\": css`\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: auto;\n `,\n \"collab-button--loading\": css`\n cursor: default;\n pointer-events: none;\n `,\n \"collab-button--loader\": css`\n display: flex;\n justify-content: center;\n text-align: center;\n `,\n \"collab-button--loader--wrapper\": css`\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translateX(-50%) translateY(-50%);\n -moz-transform: translateX(-50%) translateY(-50%);\n `,\n \"collab-button--loader--animation\": css`\n animation: ${dotKeyframes} 1.5s infinite ease-in-out;\n\n border-radius: 0.625rem;\n display: inline-block;\n height: 0.3125rem;\n margin-right: 0.25rem;\n width: 0.3125rem;\n\n &:nth-child(2) {\n animation-delay: 0.5s;\n }\n\n &:nth-child(3) {\n animation-delay: 1s;\n margin-right: 0;\n }\n `,\n \"collab-button--visible\": css`\n visibility: visible;\n `,\n \"collab-button--hidden\": css`\n visibility: hidden;\n `,\n \"collab-button--loading--color\": {\n primary: css`\n background-color: #f9f8ff !important;\n `,\n secondary: css`\n background-color: #6c5ce7 !important;\n `,\n tertiary: css`\n background-color: #6c5ce7 !important;\n `,\n destructive: css`\n background-color: #f9f8ff !important;\n `,\n },\n \"collab-button--type\": {\n primary: css`\n background-color: #6c5ce7 !important;\n color: #ffffff;\n &:hover {\n background-color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n background-color: #3e3871 !important;\n }\n `,\n secondary: css`\n background-color: #f9f8ff !important;\n border: 1px solid #6c5ce7 !important;\n color: #6c5ce7 !important;\n &:hover {\n border-color: #5d50be !important;\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n border-color: #3e3871 !important;\n color: #3e3871 !important;\n }\n `,\n tertiary: css`\n color: #6c5ce7 !important;\n &:hover {\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n destructive: css`\n background-color: #a31b00 !important;\n color: #ffffff !important;\n &:hover {\n background-color: #701300 !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n },\n \"collab-button--size\": {\n large: css`\n font-size: 1rem;\n min-height: 2.5rem;\n max-height: 2.5rem;\n `,\n regular: css`\n margin-top: -1px;\n `,\n small: css`\n font-size: 0.875rem;\n min-height: 2rem;\n max-height: 2rem;\n padding: 0.3125rem 1rem;\n `,\n },\n \"collab-button--icon-allignment\": {\n left: css`\n svg:first-child {\n float: left;\n margin-left: 0;\n margin-right: 0.5rem;\n }\n `,\n right: css`\n svg:first-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n both: css`\n svg:first-child {\n float: left;\n margin-right: 0.5rem;\n margin-left: 0;\n }\n svg:last-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n },\n \"collab-button-group\": css`\n display: flex;\n & > button {\n margin-right: 1rem;\n &:last-child {\n margin-right: 0;\n }\n }\n `,\n \"collab-skeletonTileSvgClass\": css`\n & > g rect {\n animation: ${skeletonTileProgressSlide} 1.8s infinite;\n }\n `,\n \"collab-thread-body-comment--loader\": css`\n padding: 0.625rem;\n `,\n \"collab-thread--wrapper\": css`\n cursor: default;\n position: relative;\n padding: 0 !important;\n font-family: Inter, sans-serif;\n color: #475161;\n width: 20.75rem;\n `,\n \"collab-thread--container\": css`\n max-height: 23.125rem;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n \"collab-thread-header--wrapper\": css`\n height: 2.5rem;\n padding: 0.2rem 0.1rem 0rem 0.625rem;\n `,\n \"collab-thread-header--container\": css`\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-header--title\": css`\n font-weight: 600;\n font-size: 0.875rem;\n `,\n \"collab-thread-header--resolve\": css`\n border-radius: 6px !important;\n `,\n \"collab-thread-header--resolve--icon\": css`\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem !important;\n `,\n \"collab-thread-header--resolve--text\": css`\n font-size: 0.875rem;\n `,\n \"collab-thread-footer--wrapper\": css`\n height: 3.5rem;\n width: 100%;\n flex-direction: row-reverse;\n padding: 0 0.9375rem;\n flex-shrink: 0;\n `,\n \"collab-thread-body--wrapper\": css`\n border: solid #edf1f7;\n border-width: 0.0625rem 0;\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n \"collab-thread-input-indicator--wrapper\": css`\n padding: 0 0.5rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 150%;\n letter-spacing: 0.01em;\n min-height: 1.3125rem !important;\n `,\n \"collab-thread-input-indicator--error\": css`\n width: 100%;\n margin-right: 0.5rem;\n color: #d62400;\n `,\n \"collab-thread-input-indicator--count\": css`\n color: #475161;\n `,\n \"collab-thread-comment--user-details\": css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-comment--user-details__text\": css`\n padding-left: 0.625rem;\n flex-grow: 1;\n min-width: 0;\n `,\n \"collab-thread-comment--user-name\": css`\n font-style: normal;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 150%;\n letter-spacing: 0.015rem;\n color: #475161;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"collab-thread-comment--list\": css`\n max-height: 10.9rem;\n display: flex;\n overflow: auto;\n flex-flow: column-reverse;\n `,\n \"collab-thread-comment-seperator\": css`\n width: 100%;\n height: 1.5rem;\n stroke-width: 0.0625rem;\n stroke: #dde3ee;\n `,\n \"collab-thread-comment--time-details\": css`\n font-weight: 400;\n font-size: 0.75rem;\n line-height: 150%;\n font-style: Inter;\n letter-spacing: 0.015rem;\n color: #6e6b86;\n `,\n \"collab-thread-comment--message\": css`\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n color: #475161;\n word-break: break-all;\n width: calc(100% - 10px);\n min-height: 2.25rem;\n white-space: pre-wrap;\n\n b {\n color: #6c5ce7;\n font-weight: 400;\n }\n `,\n \"collab-thread-comment--wrapper\": css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.625rem;\n padding: 0.625rem;\n `,\n \"collab-thread-comment-action--wrapper\": css`\n margin-left: auto;\n display: flex;\n `,\n \"collab-thread-body--input--wrapper\": css`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-gap: 0.25rem;\n `,\n \"collab-thread-body--input\": css`\n position: relative;\n overflow-y: visible;\n `,\n \"collab-thread-body--input--textarea--wrapper\": css`\n width: 100%;\n transition: height 0.2s ease-in 0s;\n `,\n \"collab-thread-body--input--textarea\": css`\n display: block;\n width: 100%;\n position: relative;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: #ffffff;\n font-family: inherit;\n font-size: 1rem;\n letter-spacing: inherit;\n height: 100%;\n bottom: 0;\n overflow: auto;\n resize: vertical;\n border-radius: 4px;\n border: 0.0625rem solid #dde3ee;\n line-height: 1.375rem;\n color: #222222;\n padding: 0.5rem 1rem;\n max-height: 6.25rem;\n min-height: 4.125rem;\n transition:\n border 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n `,\n \"collab-thread-body--input--textarea--focus\": css`\n background-color: #ffffff !important;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n border-radius: 4px !important;\n outline: none;\n `,\n\n \"collab-thread-body--input--textarea--hover\": css`\n background-color: #edf1f7;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n `,\n \"collab-thread-body--input--textarea--suggestionsList\": css`\n list-style: none;\n padding-inline: unset;\n position: fixed;\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n max-height: 192px;\n overflow-y: auto;\n width: 256px;\n max-height: 160px;\n z-index: 50;\n animation: fadeIn 0.2s ease-in-out;\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item\": css`\n width: 100%;\n padding: 8px 16px;\n text-align: left;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f3f4f6;\n color: #5d50be;\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\": css`\n background-color: #f3f4f6;\n color: #5d50be;\n `,\n };\n}\n\nexport const flexCentered = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const flexAlignCenter = css`\n display: flex;\n align-items: center;\n`;\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/collab.style.js CHANGED Viewed

@@ -53,7 +53,7 @@ function collabStyles() {
             background-color: #edf1f7;
             border: 1.5px solid #ffffff;
             border-radius: 50%;
-            font-family: Inter;
+            font-family: Inter, sans-serif;
             font-weight: 600;
             justify-content: center;
             position: relative;
@@ -383,7 +383,7 @@ function collabStyles() {
             cursor: default;
             position: relative;
             padding: 0 !important;
-            font-family: Inter;
+            font-family: Inter, sans-serif;
             color: #475161;
             width: 20.75rem;
         `,

package/dist/legacy/visualBuilder/collab.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/visualBuilder/collab.style.ts"],"sourcesContent":["import { css, keyframes } from \"goober\";\n\nconst skeletonTileProgressSlide = keyframes`\n 0%, 100% {\n fill: #edf1f7;\n }\n 60% {\n opacity: 0.4;\n }\n`;\nconst dotKeyframes = keyframes`\n 0% {\n opacity: 0.2;\n transform: scale(0.8, 0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2, 1.2);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1, 1);\n }\n`;\n\nexport function collabStyles() {\n return {\n \"collab-indicator\": css`\n width: 2.25rem;\n height: 2.25rem;\n background-color: gray;\n border-radius: 50% 50% 50% 0%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n `,\n \"collab-popup\": css`\n position: fixed;\n z-index: 1000;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: auto;\n `,\n \"collab-avatar\": css`\n background-color: #edf1f7;\n border: 1.5px solid #ffffff;\n border-radius: 50%;\n font-family: Inter;\n font-weight: 600;\n justify-content: center;\n position: relative;\n `,\n \"collab-avatar--single\": css`\n border: none;\n font-size: 0.6875rem;\n height: 2rem;\n width: 2rem;\n border-radius: 22.5rem;\n border: 0.125rem solid #dde3ee;\n background: #ffffff;\n position: relative;\n overflow: hidden;\n\n &:hover .collab-avatar__image {\n filter: grayscale(0);\n }\n `,\n \"collab-avatar__image\": css`\n filter: grayscale(1);\n transition: filter 300ms ease;\n border-radius: 50%;\n height: 0;\n left: 50%;\n min-width: 100%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n `,\n \"collab-avatar__link\": css`\n color: #475161;\n cursor: pointer;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n background-color 300ms ease,\n color 300ms ease;\n width: 100%;\n font-weight: 600;\n font-size: 0.75rem;\n `,\n \"collab-tooltip--wrapper\": css`\n position: relative;\n display: inline-block;\n `,\n \"collab-tooltip\": css`\n position: fixed;\n z-index: 2147483647 !important;\n padding: 8px 12px;\n font-size: 14px;\n color: #f7f9fc;\n background-color: #767676;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n opacity: 0;\n animation: simpleFade 0.15s ease-in forwards;\n\n @keyframes simpleFade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n `,\n \"collab-tooltip--top\": css`\n &::before {\n content: \"\";\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px 5px 0;\n border-style: solid;\n border-color: #767676 transparent transparent;\n }\n `,\n \"collab-tooltip--bottom\": css`\n &::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent #767676;\n }\n `,\n \"collab-tooltip--left\": css`\n &::before {\n content: \"\";\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent transparent #767676;\n }\n `,\n \"collab-tooltip--right\": css`\n &::before {\n content: \"\";\n position: absolute;\n left: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 5px 5px 0;\n border-style: solid;\n border-color: transparent #767676 transparent transparent;\n }\n `,\n \"collab-icon\": css`\n height: 1.25rem;\n width: 1.25rem;\n cursor: pointer;\n `,\n \"collab-icon-wrapper\": css`\n padding: 0 0.5rem;\n `,\n \"collab-button--basestyle\": css`\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n cursor: pointer;\n font-family: Inter, sans-serif;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1;\n min-height: 2rem;\n min-width: 2rem;\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n vertical-align: middle;\n cursor: pointer;\n opacity: 1;\n pointer-events: auto;\n `,\n \"collab-button--disabled\": css`\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: auto;\n `,\n \"collab-button--loading\": css`\n cursor: default;\n pointer-events: none;\n `,\n \"collab-button--loader\": css`\n display: flex;\n justify-content: center;\n text-align: center;\n `,\n \"collab-button--loader--wrapper\": css`\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translateX(-50%) translateY(-50%);\n -moz-transform: translateX(-50%) translateY(-50%);\n `,\n \"collab-button--loader--animation\": css`\n animation: ${dotKeyframes} 1.5s infinite ease-in-out;\n\n border-radius: 0.625rem;\n display: inline-block;\n height: 0.3125rem;\n margin-right: 0.25rem;\n width: 0.3125rem;\n\n &:nth-child(2) {\n animation-delay: 0.5s;\n }\n\n &:nth-child(3) {\n animation-delay: 1s;\n margin-right: 0;\n }\n `,\n \"collab-button--visible\": css`\n visibility: visible;\n `,\n \"collab-button--hidden\": css`\n visibility: hidden;\n `,\n \"collab-button--loading--color\": {\n primary: css`\n background-color: #f9f8ff !important;\n `,\n secondary: css`\n background-color: #6c5ce7 !important;\n `,\n tertiary: css`\n background-color: #6c5ce7 !important;\n `,\n destructive: css`\n background-color: #f9f8ff !important;\n `,\n },\n \"collab-button--type\": {\n primary: css`\n background-color: #6c5ce7 !important;\n color: #ffffff;\n &:hover {\n background-color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n background-color: #3e3871 !important;\n }\n `,\n secondary: css`\n background-color: #f9f8ff !important;\n border: 1px solid #6c5ce7 !important;\n color: #6c5ce7 !important;\n &:hover {\n border-color: #5d50be !important;\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n border-color: #3e3871 !important;\n color: #3e3871 !important;\n }\n `,\n tertiary: css`\n color: #6c5ce7 !important;\n &:hover {\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n destructive: css`\n background-color: #a31b00 !important;\n color: #ffffff !important;\n &:hover {\n background-color: #701300 !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n },\n \"collab-button--size\": {\n large: css`\n font-size: 1rem;\n min-height: 2.5rem;\n max-height: 2.5rem;\n `,\n regular: css`\n margin-top: -1px;\n `,\n small: css`\n font-size: 0.875rem;\n min-height: 2rem;\n max-height: 2rem;\n padding: 0.3125rem 1rem;\n `,\n },\n \"collab-button--icon-allignment\": {\n left: css`\n svg:first-child {\n float: left;\n margin-left: 0;\n margin-right: 0.5rem;\n }\n `,\n right: css`\n svg:first-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n both: css`\n svg:first-child {\n float: left;\n margin-right: 0.5rem;\n margin-left: 0;\n }\n svg:last-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n },\n \"collab-button-group\": css`\n display: flex;\n & > button {\n margin-right: 1rem;\n &:last-child {\n margin-right: 0;\n }\n }\n `,\n \"collab-skeletonTileSvgClass\": css`\n & > g rect {\n animation: ${skeletonTileProgressSlide} 1.8s infinite;\n }\n `,\n \"collab-thread-body-comment--loader\": css`\n padding: 0.625rem;\n `,\n \"collab-thread--wrapper\": css`\n cursor: default;\n position: relative;\n padding: 0 !important;\n font-family: Inter;\n color: #475161;\n width: 20.75rem;\n `,\n \"collab-thread--container\": css`\n max-height: 23.125rem;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n \"collab-thread-header--wrapper\": css`\n height: 2.5rem;\n padding: 0.2rem 0.1rem 0rem 0.625rem;\n `,\n \"collab-thread-header--container\": css`\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-header--title\": css`\n font-weight: 600;\n font-size: 0.875rem;\n `,\n \"collab-thread-header--resolve\": css`\n border-radius: 6px !important;\n `,\n \"collab-thread-header--resolve--icon\": css`\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem !important;\n `,\n \"collab-thread-header--resolve--text\": css`\n font-size: 0.875rem;\n `,\n \"collab-thread-footer--wrapper\": css`\n height: 3.5rem;\n width: 100%;\n flex-direction: row-reverse;\n padding: 0 0.9375rem;\n flex-shrink: 0;\n `,\n \"collab-thread-body--wrapper\": css`\n border: solid #edf1f7;\n border-width: 0.0625rem 0;\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n \"collab-thread-input-indicator--wrapper\": css`\n padding: 0 0.5rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 150%;\n letter-spacing: 0.01em;\n min-height: 1.3125rem !important;\n `,\n \"collab-thread-input-indicator--error\": css`\n width: 100%;\n margin-right: 0.5rem;\n color: #d62400;\n `,\n \"collab-thread-input-indicator--count\": css`\n color: #475161;\n `,\n \"collab-thread-comment--user-details\": css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-comment--user-details__text\": css`\n padding-left: 0.625rem;\n flex-grow: 1;\n min-width: 0;\n `,\n \"collab-thread-comment--user-name\": css`\n font-style: normal;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 150%;\n letter-spacing: 0.015rem;\n color: #475161;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"collab-thread-comment--list\": css`\n max-height: 10.9rem;\n display: flex;\n overflow: auto;\n flex-flow: column-reverse;\n `,\n \"collab-thread-comment-seperator\": css`\n width: 100%;\n height: 1.5rem;\n stroke-width: 0.0625rem;\n stroke: #dde3ee;\n `,\n \"collab-thread-comment--time-details\": css`\n font-weight: 400;\n font-size: 0.75rem;\n line-height: 150%;\n font-style: Inter;\n letter-spacing: 0.015rem;\n color: #6e6b86;\n `,\n \"collab-thread-comment--message\": css`\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n color: #475161;\n word-break: break-all;\n width: calc(100% - 10px);\n min-height: 2.25rem;\n white-space: pre-wrap;\n\n b {\n color: #6c5ce7;\n font-weight: 400;\n }\n `,\n \"collab-thread-comment--wrapper\": css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.625rem;\n padding: 0.625rem;\n `,\n \"collab-thread-comment-action--wrapper\": css`\n margin-left: auto;\n display: flex;\n `,\n \"collab-thread-body--input--wrapper\": css`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-gap: 0.25rem;\n `,\n \"collab-thread-body--input\": css`\n position: relative;\n overflow-y: visible;\n `,\n \"collab-thread-body--input--textarea--wrapper\": css`\n width: 100%;\n transition: height 0.2s ease-in 0s;\n `,\n \"collab-thread-body--input--textarea\": css`\n display: block;\n width: 100%;\n position: relative;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: #ffffff;\n font-family: inherit;\n font-size: 1rem;\n letter-spacing: inherit;\n height: 100%;\n bottom: 0;\n overflow: auto;\n resize: vertical;\n border-radius: 4px;\n border: 0.0625rem solid #dde3ee;\n line-height: 1.375rem;\n color: #222222;\n padding: 0.5rem 1rem;\n max-height: 6.25rem;\n min-height: 4.125rem;\n transition:\n border 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n `,\n \"collab-thread-body--input--textarea--focus\": css`\n background-color: #ffffff !important;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n border-radius: 4px !important;\n outline: none;\n `,\n\n \"collab-thread-body--input--textarea--hover\": css`\n background-color: #edf1f7;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n `,\n \"collab-thread-body--input--textarea--suggestionsList\": css`\n list-style: none;\n padding-inline: unset;\n position: fixed;\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n max-height: 192px;\n overflow-y: auto;\n width: 256px;\n max-height: 160px;\n z-index: 50;\n animation: fadeIn 0.2s ease-in-out;\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item\": css`\n width: 100%;\n padding: 8px 16px;\n text-align: left;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f3f4f6;\n color: #5d50be;\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\": css`\n background-color: #f3f4f6;\n color: #5d50be;\n `,\n };\n}\n\nexport const flexCentered = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const flexAlignCenter = css`\n display: flex;\n align-items: center;\n`;\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/visualBuilder/collab.style.ts"],"sourcesContent":["import { css, keyframes } from \"goober\";\n\nconst skeletonTileProgressSlide = keyframes`\n 0%, 100% {\n fill: #edf1f7;\n }\n 60% {\n opacity: 0.4;\n }\n`;\nconst dotKeyframes = keyframes`\n 0% {\n opacity: 0.2;\n transform: scale(0.8, 0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2, 1.2);\n }\n\n 100% {\n opacity: 0;\n transform: scale(1, 1);\n }\n`;\n\nexport function collabStyles() {\n return {\n \"collab-indicator\": css`\n width: 2.25rem;\n height: 2.25rem;\n background-color: gray;\n border-radius: 50% 50% 50% 0%;\n border: 2px solid white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n `,\n \"collab-popup\": css`\n position: fixed;\n z-index: 1000;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: auto;\n `,\n \"collab-avatar\": css`\n background-color: #edf1f7;\n border: 1.5px solid #ffffff;\n border-radius: 50%;\n font-family: Inter, sans-serif;\n font-weight: 600;\n justify-content: center;\n position: relative;\n `,\n \"collab-avatar--single\": css`\n border: none;\n font-size: 0.6875rem;\n height: 2rem;\n width: 2rem;\n border-radius: 22.5rem;\n border: 0.125rem solid #dde3ee;\n background: #ffffff;\n position: relative;\n overflow: hidden;\n\n &:hover .collab-avatar__image {\n filter: grayscale(0);\n }\n `,\n \"collab-avatar__image\": css`\n filter: grayscale(1);\n transition: filter 300ms ease;\n border-radius: 50%;\n height: 0;\n left: 50%;\n min-width: 100%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 0;\n `,\n \"collab-avatar__link\": css`\n color: #475161;\n cursor: pointer;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n background-color 300ms ease,\n color 300ms ease;\n width: 100%;\n font-weight: 600;\n font-size: 0.75rem;\n `,\n \"collab-tooltip--wrapper\": css`\n position: relative;\n display: inline-block;\n `,\n \"collab-tooltip\": css`\n position: fixed;\n z-index: 2147483647 !important;\n padding: 8px 12px;\n font-size: 14px;\n color: #f7f9fc;\n background-color: #767676;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n opacity: 0;\n animation: simpleFade 0.15s ease-in forwards;\n\n @keyframes simpleFade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n `,\n \"collab-tooltip--top\": css`\n &::before {\n content: \"\";\n position: absolute;\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px 5px 0;\n border-style: solid;\n border-color: #767676 transparent transparent;\n }\n `,\n \"collab-tooltip--bottom\": css`\n &::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-width: 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent #767676;\n }\n `,\n \"collab-tooltip--left\": css`\n &::before {\n content: \"\";\n position: absolute;\n right: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 0 5px 5px;\n border-style: solid;\n border-color: transparent transparent transparent #767676;\n }\n `,\n \"collab-tooltip--right\": css`\n &::before {\n content: \"\";\n position: absolute;\n left: -5px;\n top: 50%;\n transform: translateY(-50%);\n border-width: 5px 5px 5px 0;\n border-style: solid;\n border-color: transparent #767676 transparent transparent;\n }\n `,\n \"collab-icon\": css`\n height: 1.25rem;\n width: 1.25rem;\n cursor: pointer;\n `,\n \"collab-icon-wrapper\": css`\n padding: 0 0.5rem;\n `,\n \"collab-button--basestyle\": css`\n box-sizing: border-box;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n cursor: pointer;\n font-family: Inter, sans-serif;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1;\n min-height: 2rem;\n min-width: 2rem;\n padding: 0.5rem 1rem;\n position: relative;\n text-align: center;\n transition:\n color 0.15s ease-in-out,\n background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n vertical-align: middle;\n cursor: pointer;\n opacity: 1;\n pointer-events: auto;\n `,\n \"collab-button--disabled\": css`\n cursor: not-allowed;\n opacity: 0.4;\n pointer-events: auto;\n `,\n \"collab-button--loading\": css`\n cursor: default;\n pointer-events: none;\n `,\n \"collab-button--loader\": css`\n display: flex;\n justify-content: center;\n text-align: center;\n `,\n \"collab-button--loader--wrapper\": css`\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translateX(-50%) translateY(-50%);\n -moz-transform: translateX(-50%) translateY(-50%);\n `,\n \"collab-button--loader--animation\": css`\n animation: ${dotKeyframes} 1.5s infinite ease-in-out;\n\n border-radius: 0.625rem;\n display: inline-block;\n height: 0.3125rem;\n margin-right: 0.25rem;\n width: 0.3125rem;\n\n &:nth-child(2) {\n animation-delay: 0.5s;\n }\n\n &:nth-child(3) {\n animation-delay: 1s;\n margin-right: 0;\n }\n `,\n \"collab-button--visible\": css`\n visibility: visible;\n `,\n \"collab-button--hidden\": css`\n visibility: hidden;\n `,\n \"collab-button--loading--color\": {\n primary: css`\n background-color: #f9f8ff !important;\n `,\n secondary: css`\n background-color: #6c5ce7 !important;\n `,\n tertiary: css`\n background-color: #6c5ce7 !important;\n `,\n destructive: css`\n background-color: #f9f8ff !important;\n `,\n },\n \"collab-button--type\": {\n primary: css`\n background-color: #6c5ce7 !important;\n color: #ffffff;\n &:hover {\n background-color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n background-color: #3e3871 !important;\n }\n `,\n secondary: css`\n background-color: #f9f8ff !important;\n border: 1px solid #6c5ce7 !important;\n color: #6c5ce7 !important;\n &:hover {\n border-color: #5d50be !important;\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n &:active {\n border-color: #3e3871 !important;\n color: #3e3871 !important;\n }\n `,\n tertiary: css`\n color: #6c5ce7 !important;\n &:hover {\n color: #5d50be !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n destructive: css`\n background-color: #a31b00 !important;\n color: #ffffff !important;\n &:hover {\n background-color: #701300 !important;\n }\n &:focus {\n box-shadow: 0px 0px 0px 2px #ada4f4 !important;\n }\n `,\n },\n \"collab-button--size\": {\n large: css`\n font-size: 1rem;\n min-height: 2.5rem;\n max-height: 2.5rem;\n `,\n regular: css`\n margin-top: -1px;\n `,\n small: css`\n font-size: 0.875rem;\n min-height: 2rem;\n max-height: 2rem;\n padding: 0.3125rem 1rem;\n `,\n },\n \"collab-button--icon-allignment\": {\n left: css`\n svg:first-child {\n float: left;\n margin-left: 0;\n margin-right: 0.5rem;\n }\n `,\n right: css`\n svg:first-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n both: css`\n svg:first-child {\n float: left;\n margin-right: 0.5rem;\n margin-left: 0;\n }\n svg:last-child {\n float: right;\n margin-left: 0.5rem;\n margin-right: 0;\n }\n `,\n },\n \"collab-button-group\": css`\n display: flex;\n & > button {\n margin-right: 1rem;\n &:last-child {\n margin-right: 0;\n }\n }\n `,\n \"collab-skeletonTileSvgClass\": css`\n & > g rect {\n animation: ${skeletonTileProgressSlide} 1.8s infinite;\n }\n `,\n \"collab-thread-body-comment--loader\": css`\n padding: 0.625rem;\n `,\n \"collab-thread--wrapper\": css`\n cursor: default;\n position: relative;\n padding: 0 !important;\n font-family: Inter, sans-serif;\n color: #475161;\n width: 20.75rem;\n `,\n \"collab-thread--container\": css`\n max-height: 23.125rem;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n `,\n \"collab-thread-header--wrapper\": css`\n height: 2.5rem;\n padding: 0.2rem 0.1rem 0rem 0.625rem;\n `,\n \"collab-thread-header--container\": css`\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-header--title\": css`\n font-weight: 600;\n font-size: 0.875rem;\n `,\n \"collab-thread-header--resolve\": css`\n border-radius: 6px !important;\n `,\n \"collab-thread-header--resolve--icon\": css`\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem !important;\n `,\n \"collab-thread-header--resolve--text\": css`\n font-size: 0.875rem;\n `,\n \"collab-thread-footer--wrapper\": css`\n height: 3.5rem;\n width: 100%;\n flex-direction: row-reverse;\n padding: 0 0.9375rem;\n flex-shrink: 0;\n `,\n \"collab-thread-body--wrapper\": css`\n border: solid #edf1f7;\n border-width: 0.0625rem 0;\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n `,\n \"collab-thread-input-indicator--wrapper\": css`\n padding: 0 0.5rem;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 150%;\n letter-spacing: 0.01em;\n min-height: 1.3125rem !important;\n `,\n \"collab-thread-input-indicator--error\": css`\n width: 100%;\n margin-right: 0.5rem;\n color: #d62400;\n `,\n \"collab-thread-input-indicator--count\": css`\n color: #475161;\n `,\n \"collab-thread-comment--user-details\": css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n `,\n \"collab-thread-comment--user-details__text\": css`\n padding-left: 0.625rem;\n flex-grow: 1;\n min-width: 0;\n `,\n \"collab-thread-comment--user-name\": css`\n font-style: normal;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 150%;\n letter-spacing: 0.015rem;\n color: #475161;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `,\n \"collab-thread-comment--list\": css`\n max-height: 10.9rem;\n display: flex;\n overflow: auto;\n flex-flow: column-reverse;\n `,\n \"collab-thread-comment-seperator\": css`\n width: 100%;\n height: 1.5rem;\n stroke-width: 0.0625rem;\n stroke: #dde3ee;\n `,\n \"collab-thread-comment--time-details\": css`\n font-weight: 400;\n font-size: 0.75rem;\n line-height: 150%;\n font-style: Inter;\n letter-spacing: 0.015rem;\n color: #6e6b86;\n `,\n \"collab-thread-comment--message\": css`\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n color: #475161;\n word-break: break-all;\n width: calc(100% - 10px);\n min-height: 2.25rem;\n white-space: pre-wrap;\n\n b {\n color: #6c5ce7;\n font-weight: 400;\n }\n `,\n \"collab-thread-comment--wrapper\": css`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.625rem;\n padding: 0.625rem;\n `,\n \"collab-thread-comment-action--wrapper\": css`\n margin-left: auto;\n display: flex;\n `,\n \"collab-thread-body--input--wrapper\": css`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-gap: 0.25rem;\n `,\n \"collab-thread-body--input\": css`\n position: relative;\n overflow-y: visible;\n `,\n \"collab-thread-body--input--textarea--wrapper\": css`\n width: 100%;\n transition: height 0.2s ease-in 0s;\n `,\n \"collab-thread-body--input--textarea\": css`\n display: block;\n width: 100%;\n position: relative;\n top: 0;\n left: 0;\n box-sizing: border-box;\n background-color: #ffffff;\n font-family: inherit;\n font-size: 1rem;\n letter-spacing: inherit;\n height: 100%;\n bottom: 0;\n overflow: auto;\n resize: vertical;\n border-radius: 4px;\n border: 0.0625rem solid #dde3ee;\n line-height: 1.375rem;\n color: #222222;\n padding: 0.5rem 1rem;\n max-height: 6.25rem;\n min-height: 4.125rem;\n transition:\n border 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n `,\n \"collab-thread-body--input--textarea--focus\": css`\n background-color: #ffffff !important;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n border-radius: 4px !important;\n outline: none;\n `,\n\n \"collab-thread-body--input--textarea--hover\": css`\n background-color: #edf1f7;\n border: 0.0625rem solid #5d50be !important;\n box-shadow: 0 0 0 0.0625rem #5d50be !important;\n `,\n \"collab-thread-body--input--textarea--suggestionsList\": css`\n list-style: none;\n padding-inline: unset;\n position: fixed;\n background-color: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n max-height: 192px;\n overflow-y: auto;\n width: 256px;\n max-height: 160px;\n z-index: 50;\n animation: fadeIn 0.2s ease-in-out;\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item\": css`\n width: 100%;\n padding: 8px 16px;\n text-align: left;\n border: none;\n background: none;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s;\n\n &:hover {\n background-color: #f3f4f6;\n color: #5d50be;\n }\n `,\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\": css`\n background-color: #f3f4f6;\n color: #5d50be;\n `,\n };\n}\n\nexport const flexCentered = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const flexAlignCenter = css`\n display: flex;\n align-items: center;\n`;\n"],"mappings":";;;AAAA,SAAS,KAAK,iBAAiB;AAE/B,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBd,SAAS,eAAe;AAC3B,SAAO;AAAA,IACH,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYpB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAShB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAezB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYxB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAevB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAI3B,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsBlB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYvB,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAY1B,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYxB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYzB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,IAKf,uBAAuB;AAAA;AAAA;AAAA,IAGvB,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2B5B,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,0BAA0B;AAAA;AAAA;AAAA;AAAA,IAI1B,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzB,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOlC,oCAAoC;AAAA,yBACnB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiB7B,0BAA0B;AAAA;AAAA;AAAA,IAG1B,yBAAyB;AAAA;AAAA;AAAA,IAGzB,iCAAiC;AAAA,MAC7B,SAAS;AAAA;AAAA;AAAA,MAGT,WAAW;AAAA;AAAA;AAAA,MAGX,UAAU;AAAA;AAAA;AAAA,MAGV,aAAa;AAAA;AAAA;AAAA,IAGjB;AAAA,IACA,uBAAuB;AAAA,MACnB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBX,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASV,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjB;AAAA,IACA,uBAAuB;AAAA,MACnB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKP,SAAS;AAAA;AAAA;AAAA,MAGT,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX;AAAA,IACA,kCAAkC;AAAA,MAC9B,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAON,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYV;AAAA,IACA,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASvB,+BAA+B;AAAA;AAAA,6BAEV,yBAAyB;AAAA;AAAA;AAAA,IAG9C,sCAAsC;AAAA;AAAA;AAAA,IAGtC,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ1B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM5B,iCAAiC;AAAA;AAAA;AAAA;AAAA,IAIjC,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAI/B,iCAAiC;AAAA;AAAA;AAAA,IAGjC,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvC,uCAAuC;AAAA;AAAA;AAAA,IAGvC,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOjC,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ/B,0CAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ1C,wCAAwC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxC,wCAAwC;AAAA;AAAA;AAAA,IAGxC,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,6CAA6C;AAAA;AAAA;AAAA;AAAA;AAAA,IAK7C,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWpC,+BAA+B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/B,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnC,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQvC,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAelC,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOlC,yCAAyC;AAAA;AAAA;AAAA;AAAA,IAIzC,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOtC,6BAA6B;AAAA;AAAA;AAAA;AAAA,IAI7B,gDAAgD;AAAA;AAAA;AAAA;AAAA,IAIhD,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA2BvC,8CAA8C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQ9C,8CAA8C;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9C,wDAAwD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA4BxD,8DAA8D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAe9D,uEAAuE;AAAA;AAAA;AAAA;AAAA,EAI3E;AACJ;AAEO,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAMrB,IAAM,kBAAkB;AAAA;AAAA;AAAA;","names":[]}

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.cjs CHANGED Viewed

@@ -103,7 +103,9 @@ var MentionSuggestionsList = ({
             (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item"],
             index === selectedIndex ? (0, import_collab.collabStyles)()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
           ),
-          ref: (el) => itemRefs.current[index] = el,
+          ref: (el) => {
+            itemRefs.current[index] = el;
+          },
           onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
           tabIndex: -1,
           "aria-selected": index === selectedIndex,

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","Tooltip","React"]}
1	+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":["classNames","Tooltip","React"]}

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.js CHANGED Viewed

@@ -71,7 +71,9 @@ var MentionSuggestionsList = ({
             collabStyles()["collab-thread-body--input--textarea--suggestionsList--item"],
             index === selectedIndex ? collabStyles()["collab-thread-body--input--textarea--suggestionsList--item-selected"] : ""
           ),
-          ref: (el) => itemRefs.current[index] = el,
+          ref: (el) => {
+            itemRefs.current[index] = el;
+          },
           onKeyDown: (e) => e.key === "Enter" ? insertMention(user) : handleKeyDown(e),
           tabIndex: -1,
           "aria-selected": index === selectedIndex,

package/dist/legacy/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => (itemRefs.current[index] = el)}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/ThreadPopup/CommentTextArea.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useEffect } from \"preact/hooks\";\nimport { useCommentTextArea } from \"../../../hooks/useCommentTextArea\";\nimport { collabStyles, flexAlignCenter } from \"../../../collab.style\";\nimport {\n ICommentTextAreaProps,\n IMentionList,\n} from \"../../../types/collab.types\";\nimport classNames from \"classnames\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nconst ErrorIndicator: React.FC<{ errorMessage: string }> = ({\n errorMessage,\n}) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--error\",\n collabStyles()[\"collab-thread-input-indicator--error\"]\n )}\n >\n {errorMessage}\n </div>\n);\n\nconst CharacterCounter: React.FC<{\n currentLength: number;\n maxLength: number;\n}> = ({ currentLength, maxLength }) => (\n <div\n className={classNames(\n \"collab-thread-input-indicator--count\",\n collabStyles()[\"collab-thread-input-indicator--count\"]\n )}\n >\n {currentLength}/{maxLength}\n </div>\n);\n\nconst MentionSuggestionsList: React.FC<{\n filteredUsers: IMentionList[];\n selectedIndex: number;\n cursorPosition: { top: number; showAbove: boolean };\n inputRef: React.RefObject<HTMLTextAreaElement>;\n listRef: React.RefObject<HTMLUListElement>;\n itemRefs: React.MutableRefObject<(HTMLLIElement \| null)[]>;\n insertMention: (user: IMentionList) => void;\n handleKeyDown: (event: KeyboardEvent) => void;\n}> = ({\n filteredUsers,\n selectedIndex,\n cursorPosition,\n inputRef,\n listRef,\n itemRefs,\n insertMention,\n handleKeyDown,\n}) => {\n if (filteredUsers.length === 0) return null;\n\n return (\n <ul\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList\"\n ]\n )}\n style={{\n ...(cursorPosition.showAbove\n ? {\n bottom: `${window.innerHeight - (inputRef.current?.getBoundingClientRect().top \|\| 0) - cursorPosition.top}px`,\n top: \"auto\",\n }\n : {\n top: `${(inputRef.current?.getBoundingClientRect().top \|\| 0) + cursorPosition.top}px`,\n }),\n }}\n ref={listRef}\n >\n {filteredUsers.map((user, index) => (\n <li\n key={user.uid}\n onClick={() => insertMention(user)}\n className={classNames(\n \"collab-thread-body--input--textarea--suggestionsList--item\",\n collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item\"\n ],\n index === selectedIndex\n ? collabStyles()[\n \"collab-thread-body--input--textarea--suggestionsList--item-selected\"\n ]\n : \"\"\n )}\n ref={(el) => {\n itemRefs.current[index] = el;\n }}\n onKeyDown={(e) =>\n e.key === \"Enter\"\n ? insertMention(user)\n : handleKeyDown(e as KeyboardEvent)\n }\n tabIndex={-1}\n aria-selected={index === selectedIndex}\n >\n {user.display === user.email ? (\n user.display.length > 20 ? (\n <Tooltip content={user.display \|\| \"\"}>\n {(user.display \|\| \"\").substring(0, 18) + \"...\"}\n </Tooltip>\n ) : (\n user.display\n )\n ) : (\n <Tooltip\n content={user.display + \" - \" + user.email \|\| \"\"}\n >\n {user.display.length > 20\n ? (user.display \|\| \"\").substring(0, 18) + \"...\"\n : user.display}\n </Tooltip>\n )}\n </li>\n ))}\n </ul>\n );\n};\n\nconst CommentTextArea: React.FC<ICommentTextAreaProps> = React.memo(\n ({ userState, handleOnSaveRef, comment, onClose }) => {\n const {\n state,\n error,\n showSuggestions,\n cursorPosition,\n selectedIndex,\n filteredUsers,\n inputRef,\n listRef,\n itemRefs,\n handleInputChange,\n handleKeyDown,\n handleSubmit,\n insertMention,\n maxMessageLength,\n } = useCommentTextArea(userState, comment, onClose);\n\n const onChangeHandler = (event: Event) =>\n handleInputChange(event as any);\n const onKeyDownHandler = (event: KeyboardEvent) =>\n handleKeyDown(event as any);\n\n useEffect(() => {\n handleOnSaveRef.current = handleSubmit;\n }, [handleSubmit, handleOnSaveRef]);\n\n return (\n <div\n className={classNames(\n \"collab-thread-body--input--wrapper\",\n collabStyles()[\"collab-thread-body--input--wrapper\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input\",\n collabStyles()[\"collab-thread-body--input\"]\n )}\n >\n <div\n className={classNames(\n \"collab-thread-body--input--textarea--wrapper\",\n collabStyles()[\n \"collab-thread-body--input--textarea--wrapper\"\n ]\n )}\n >\n <textarea\n name=\"collab-thread-body--input--textarea\"\n id=\"collab-thread-body--input--textarea\"\n rows={1}\n className={classNames(\n \"collab-thread-body--input--textarea\",\n collabStyles()[\n \"collab-thread-body--input--textarea\"\n ]\n )}\n value={state.message}\n onChange={onChangeHandler}\n onKeyDown={onKeyDownHandler}\n maxLength={maxMessageLength}\n placeholder=\"Enter a comment or tag others using “@”\"\n ref={inputRef}\n />\n {showSuggestions && (\n <MentionSuggestionsList\n filteredUsers={filteredUsers}\n selectedIndex={selectedIndex}\n cursorPosition={cursorPosition}\n inputRef={inputRef}\n listRef={listRef}\n itemRefs={itemRefs}\n insertMention={insertMention}\n handleKeyDown={handleKeyDown}\n />\n )}\n </div>\n </div>\n\n <div\n className={classNames(\n \"collab-thread-input-indicator--wrapper\",\n \"flex-v-center\",\n collabStyles()[\n \"collab-thread-input-indicator--wrapper\"\n ],\n flexAlignCenter\n )}\n >\n <ErrorIndicator errorMessage={error.message} />\n <CharacterCounter\n currentLength={state.message.length}\n maxLength={maxMessageLength}\n />\n </div>\n </div>\n );\n }\n);\n\nexport default CommentTextArea;\n"],"mappings":"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","names":[]}

package/dist/legacy/visualBuilder/components/FieldToolbar.cjs CHANGED Viewed

@@ -106,7 +106,8 @@ function FieldToolbarComponent(props) {
     eventDetails,
     isVariant: isVariantOrParentOfVariant,
     entryPermissions,
-    entryWorkflowStageDetails
+    entryWorkflowStageDetails,
+    resolvedVariantPermissions
   } = props;
   const { fieldMetadata, editableElement: targetElement } = eventDetails;
   const [isFormLoading, setIsFormLoading] = (0, import_compat.useState)(false);
@@ -140,6 +141,7 @@ function FieldToolbarComponent(props) {
         editableElement: targetElement,
         fieldMetadata
       },
+      resolvedVariantPermissions,
       entryPermissions,
       entryWorkflowStageDetails
     );