npm - @contentstack/live-preview-utils - Versions diffs - 3.2.0-alpha.1 → 3.2.1 - Mend

@contentstack/live-preview-utils 3.2.0-alpha.1 → 3.2.1

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 (508) hide show

package/dist/legacy/visualBuilder/collab.style.d.cts CHANGED Viewed

@@ -7,10 +7,26 @@ declare function collabStyles(): {
     "collab-avatar__link": string;
     "collab-tooltip--wrapper": string;
     "collab-tooltip": string;
+    "collab-tooltip--top": string;
+    "collab-tooltip--bottom": string;
+    "collab-tooltip--left": string;
+    "collab-tooltip--right": string;
     "collab-icon": string;
     "collab-icon-wrapper": string;
     "collab-button--basestyle": string;
     "collab-button--disabled": string;
+    "collab-button--loading": string;
+    "collab-button--loader": string;
+    "collab-button--loader--wrapper": string;
+    "collab-button--loader--animation": string;
+    "collab-button--visible": string;
+    "collab-button--hidden": string;
+    "collab-button--loading--color": {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        destructive: string;
+    };
     "collab-button--type": {
         primary: string;
         secondary: string;
@@ -31,6 +47,7 @@ declare function collabStyles(): {
     "collab-skeletonTileSvgClass": string;
     "collab-thread-body-comment--loader": string;
     "collab-thread--wrapper": string;
+    "collab-thread--container": string;
     "collab-thread-header--wrapper": string;
     "collab-thread-header--container": string;
     "collab-thread-header--title": string;

package/dist/legacy/visualBuilder/collab.style.d.ts CHANGED Viewed

@@ -7,10 +7,26 @@ declare function collabStyles(): {
     "collab-avatar__link": string;
     "collab-tooltip--wrapper": string;
     "collab-tooltip": string;
+    "collab-tooltip--top": string;
+    "collab-tooltip--bottom": string;
+    "collab-tooltip--left": string;
+    "collab-tooltip--right": string;
     "collab-icon": string;
     "collab-icon-wrapper": string;
     "collab-button--basestyle": string;
     "collab-button--disabled": string;
+    "collab-button--loading": string;
+    "collab-button--loader": string;
+    "collab-button--loader--wrapper": string;
+    "collab-button--loader--animation": string;
+    "collab-button--visible": string;
+    "collab-button--hidden": string;
+    "collab-button--loading--color": {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        destructive: string;
+    };
     "collab-button--type": {
         primary: string;
         secondary: string;
@@ -31,6 +47,7 @@ declare function collabStyles(): {
     "collab-skeletonTileSvgClass": string;
     "collab-thread-body-comment--loader": string;
     "collab-thread--wrapper": string;
+    "collab-thread--container": string;
     "collab-thread-header--wrapper": string;
     "collab-thread-header--container": string;
     "collab-thread-header--title": string;

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

@@ -10,6 +10,22 @@ var skeletonTileProgressSlide = keyframes`
         opacity: 0.4;
     }
 `;
+var dotKeyframes = keyframes`
+  0% {
+    opacity: 0.2;
+    transform: scale(0.8, 0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2, 1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1, 1);
+  }
+`;
 function collabStyles() {
   return {
     "collab-indicator": css`
@@ -110,6 +126,54 @@ function collabStyles() {
                 }
             }
         `,
+    "collab-tooltip--top": css`
+            &::before {
+                content: "";
+                position: absolute;
+                bottom: -5px;
+                left: 50%;
+                transform: translateX(-50%);
+                border-width: 5px 5px 0;
+                border-style: solid;
+                border-color: #767676 transparent transparent;
+            }
+        `,
+    "collab-tooltip--bottom": css`
+            &::before {
+                content: "";
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                transform: translateX(-50%);
+                border-width: 0 5px 5px;
+                border-style: solid;
+                border-color: transparent transparent #767676;
+            }
+        `,
+    "collab-tooltip--left": css`
+            &::before {
+                content: "";
+                position: absolute;
+                right: -5px;
+                top: 50%;
+                transform: translateY(-50%);
+                border-width: 5px 0 5px 5px;
+                border-style: solid;
+                border-color: transparent transparent transparent #767676;
+            }
+        `,
+    "collab-tooltip--right": css`
+            &::before {
+                content: "";
+                position: absolute;
+                left: -5px;
+                top: 50%;
+                transform: translateY(-50%);
+                border-width: 5px 5px 5px 0;
+                border-style: solid;
+                border-color: transparent #767676 transparent transparent;
+            }
+        `,
     "collab-icon": css`
             height: 1.25rem;
             width: 1.25rem;
@@ -150,6 +214,60 @@ function collabStyles() {
             opacity: 0.4;
             pointer-events: auto;
         `,
+    "collab-button--loading": css`
+            cursor: default;
+            pointer-events: none;
+        `,
+    "collab-button--loader": css`
+            display: flex;
+            justify-content: center;
+            text-align: center;
+        `,
+    "collab-button--loader--wrapper": css`
+            left: 50%;
+            position: absolute;
+            top: 50%;
+            -webkit-transform: translateX(-50%) translateY(-50%);
+            -moz-transform: translateX(-50%) translateY(-50%);
+        `,
+    "collab-button--loader--animation": css`
+            animation: ${dotKeyframes} 1.5s infinite ease-in-out;
+            border-radius: 0.625rem;
+            display: inline-block;
+            height: 0.3125rem;
+            margin-right: 0.25rem;
+            width: 0.3125rem;
+            &:nth-child(2) {
+                animation-delay: 0.5s;
+            }
+            &:nth-child(3) {
+                animation-delay: 1s;
+                margin-right: 0;
+            }
+        `,
+    "collab-button--visible": css`
+            visibility: visible;
+        `,
+    "collab-button--hidden": css`
+            visibility: hidden;
+        `,
+    "collab-button--loading--color": {
+      primary: css`
+                background-color: #f9f8ff !important;
+            `,
+      secondary: css`
+                background-color: #6c5ce7 !important;
+            `,
+      tertiary: css`
+                background-color: #6c5ce7 !important;
+            `,
+      destructive: css`
+                background-color: #f9f8ff !important;
+            `
+    },
     "collab-button--type": {
       primary: css`
                 background-color: #6c5ce7 !important;
@@ -269,9 +387,15 @@ function collabStyles() {
             color: #475161;
             width: 20.75rem;
         `,
+    "collab-thread--container": css`
+            max-height: 23.125rem;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        `,
     "collab-thread-header--wrapper": css`
             height: 2.5rem;
-            padding: 0 0 0 0.625rem;
+            padding: 0.2rem 0.1rem 0rem 0.625rem;
         `,
     "collab-thread-header--container": css`
             justify-content: space-between;
@@ -297,10 +421,15 @@ function collabStyles() {
             width: 100%;
             flex-direction: row-reverse;
             padding: 0 0.9375rem;
+            flex-shrink: 0;
         `,
     "collab-thread-body--wrapper": css`
             border: solid #edf1f7;
             border-width: 0.0625rem 0;
+            flex: 1;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
         `,
     "collab-thread-input-indicator--wrapper": css`
             padding: 0 0.5rem;
@@ -418,6 +547,7 @@ function collabStyles() {
             resize: vertical;
             border-radius: 4px;
             border: 0.0625rem solid #dde3ee;
+            line-height: 1.375rem;
             color: #222222;
             padding: 0.5rem 1rem;
             max-height: 6.25rem;

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`;\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-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--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-header--wrapper\": css`\n height: 2.5rem;\n padding: 0 0 0 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 `,\n \"collab-thread-body--wrapper\": css`\n border: solid #edf1f7;\n border-width: 0.0625rem 0;\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 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;\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":[]}

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.cjs ADDED Viewed

@@ -0,0 +1,70 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.tsx
+var AsyncLoader_exports = {};
+__export(AsyncLoader_exports, {
+  default: () => AsyncLoader_default
+});
+module.exports = __toCommonJS(AsyncLoader_exports);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_collab = require("../../../collab.style.cjs");
+var import_jsx_runtime = require("preact/jsx-runtime");
+var AsyncLoader = ({
+  className,
+  color = "primary",
+  testId = "collab-async-loader",
+  ...otherProps
+}) => {
+  const combinedClassName = (0, import_classnames.default)(
+    (0, import_collab.collabStyles)()["collab-button--loader--animation"],
+    (0, import_collab.collabStyles)()["collab-button--loading--color"][color],
+    "collab-button--loader--animation",
+    `collab-button--loading--${color}`
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "collab-button--loader",
+        (0, import_collab.collabStyles)()["collab-button--loader"],
+        className
+      ),
+      ...otherProps,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: combinedClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: combinedClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: combinedClassName })
+      ]
+    }
+  );
+};
+var AsyncLoader_default = AsyncLoader;
+//# sourceMappingURL=AsyncLoader.cjs.map

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype AsyncLoaderProps = {\n className?: string;\n color?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n testId?: string;\n};\n\nconst AsyncLoader = ({\n className,\n color = \"primary\",\n testId = \"collab-async-loader\",\n ...otherProps\n}: AsyncLoaderProps) => {\n const combinedClassName = classNames(\n collabStyles()[\"collab-button--loader--animation\"],\n collabStyles()[\"collab-button--loading--color\"][color],\n \"collab-button--loader--animation\",\n `collab-button--loading--${color}`\n );\n return (\n <div\n className={classNames(\n \"collab-button--loader\",\n collabStyles()[\"collab-button--loader\"],\n className\n )}\n {...otherProps}\n data-testid={testId}\n >\n <div className={combinedClassName} />\n <div className={combinedClassName} />\n <div className={combinedClassName} />\n </div>\n );\n};\n\nexport default AsyncLoader;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAuB;AACvB,oBAA6B;AAqBrB;AAbR,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,GAAG;AACP,MAAwB;AACpB,QAAM,wBAAoB,kBAAAA;AAAA,QACtB,4BAAa,EAAE,kCAAkC;AAAA,QACjD,4BAAa,EAAE,+BAA+B,EAAE,KAAK;AAAA,IACrD;AAAA,IACA,2BAA2B,KAAK;AAAA,EACpC;AACA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,uBAAuB;AAAA,QACtC;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MACJ,eAAa;AAAA,MAEb;AAAA,oDAAC,SAAI,WAAW,mBAAmB;AAAA,QACnC,4CAAC,SAAI,WAAW,mBAAmB;AAAA,QACnC,4CAAC,SAAI,WAAW,mBAAmB;AAAA;AAAA;AAAA,EACvC;AAER;AAEA,IAAO,sBAAQ;","names":["classNames"]}

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.d.cts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'preact/compat';
+/** @jsxImportSource preact */
+type AsyncLoaderProps = {
+    className?: string;
+    color?: "primary" | "secondary" | "tertiary" | "destructive";
+    testId?: string;
+};
+declare const AsyncLoader: ({ className, color, testId, ...otherProps }: AsyncLoaderProps) => React.JSX.Element;
+export { AsyncLoader as default };

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'preact/compat';
+/** @jsxImportSource preact */
+type AsyncLoaderProps = {
+    className?: string;
+    color?: "primary" | "secondary" | "tertiary" | "destructive";
+    testId?: string;
+};
+declare const AsyncLoader: ({ className, color, testId, ...otherProps }: AsyncLoaderProps) => React.JSX.Element;
+export { AsyncLoader as default };

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.js ADDED Viewed

@@ -0,0 +1,41 @@
+import "../../../../chunk-5WRI5ZAA.js";
+// src/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.tsx
+import classNames from "classnames";
+import { collabStyles } from "../../../collab.style.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+var AsyncLoader = ({
+  className,
+  color = "primary",
+  testId = "collab-async-loader",
+  ...otherProps
+}) => {
+  const combinedClassName = classNames(
+    collabStyles()["collab-button--loader--animation"],
+    collabStyles()["collab-button--loading--color"][color],
+    "collab-button--loader--animation",
+    `collab-button--loading--${color}`
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "collab-button--loader",
+        collabStyles()["collab-button--loader"],
+        className
+      ),
+      ...otherProps,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: combinedClassName }),
+        /* @__PURE__ */ jsx("div", { className: combinedClassName }),
+        /* @__PURE__ */ jsx("div", { className: combinedClassName })
+      ]
+    }
+  );
+};
+var AsyncLoader_default = AsyncLoader;
+export {
+  AsyncLoader_default as default
+};
+//# sourceMappingURL=AsyncLoader.js.map

package/dist/legacy/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype AsyncLoaderProps = {\n className?: string;\n color?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n testId?: string;\n};\n\nconst AsyncLoader = ({\n className,\n color = \"primary\",\n testId = \"collab-async-loader\",\n ...otherProps\n}: AsyncLoaderProps) => {\n const combinedClassName = classNames(\n collabStyles()[\"collab-button--loader--animation\"],\n collabStyles()[\"collab-button--loading--color\"][color],\n \"collab-button--loader--animation\",\n `collab-button--loading--${color}`\n );\n return (\n <div\n className={classNames(\n \"collab-button--loader\",\n collabStyles()[\"collab-button--loader\"],\n className\n )}\n {...otherProps}\n data-testid={testId}\n >\n <div className={combinedClassName} />\n <div className={combinedClassName} />\n <div className={combinedClassName} />\n </div>\n );\n};\n\nexport default AsyncLoader;\n"],"mappings":";;;AAEA,OAAO,gBAAgB;AACvB,SAAS,oBAAoB;AAqBrB,SASI,KATJ;AAbR,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,GAAG;AACP,MAAwB;AACpB,QAAM,oBAAoB;AAAA,IACtB,aAAa,EAAE,kCAAkC;AAAA,IACjD,aAAa,EAAE,+BAA+B,EAAE,KAAK;AAAA,IACrD;AAAA,IACA,2BAA2B,KAAK;AAAA,EACpC;AACA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,uBAAuB;AAAA,QACtC;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MACJ,eAAa;AAAA,MAEb;AAAA,4BAAC,SAAI,WAAW,mBAAmB;AAAA,QACnC,oBAAC,SAAI,WAAW,mBAAmB;AAAA,QACnC,oBAAC,SAAI,WAAW,mBAAmB;AAAA;AAAA;AAAA,EACvC;AAER;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/legacy/visualBuilder/components/Collab/Button/Button.cjs CHANGED Viewed

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(Button_exports);
 var import_compat = __toESM(require("preact/compat"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_Icon = __toESM(require("../Icon/Icon.cjs"), 1);
+var import_AsyncLoader = __toESM(require("../AsyncLoader/AsyncLoader.cjs"), 1);
 var import_collab = require("../../../collab.style.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var Button = ({
@@ -44,6 +45,8 @@ var Button = ({
   className = "",
   testId,
   onClick,
+  isLoading,
+  loadingColor = "primary",
   disabled = false,
   type = "button",
   style,
@@ -88,8 +91,10 @@ var Button = ({
     (0, import_collab.collabStyles)()["collab-button--size"][size],
     icon && (0, import_collab.collabStyles)()["collab-button--icon-allignment"][iconAlignment],
     disabled && (0, import_collab.collabStyles)()["collab-button--disabled"],
+    isLoading && (0, import_collab.collabStyles)()["collab-button--loading"],
     className,
-    `collab-button collab-button--${buttonType} collab-button--${size} ${icon ? `collab-button--icon-${iconAlignment}` : ""} ${disabled ? "collab-button--disabled" : ""}`
+    `collab-button collab-button--${buttonType} collab-button--${size} ${icon ? `collab-button--icon-${iconAlignment}` : ""} ${disabled ? "collab-button--disabled" : ""}
+        ${isLoading ? "collab-button--loading" : ""}`
   );
   const validStyle = Object.fromEntries(
     Object.entries(style || {}).filter(([_, value]) => value != null)
@@ -105,15 +110,32 @@ var Button = ({
       disabled,
       href,
       "data-testid": testId,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("flex-center", import_collab.flexCentered), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: (0, import_classnames.default)("flex-v-center", import_collab.flexAlignCenter, {
-            [`${(0, import_collab.collabStyles)()["collab-button--size"]["regular"]} collab-button--regular`]: size !== "small"
-          }),
-          children: nestedChildren
-        }
-      ) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames.default)("flex-center", import_collab.flexCentered), children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              (0, import_collab.collabStyles)()["collab-button--loader--wrapper"],
+              "collab-button--loader--wrapper"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AsyncLoader.default, { color: loadingColor })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "flex-v-center",
+              import_collab.flexAlignCenter,
+              {
+                [`${(0, import_collab.collabStyles)()["collab-button--size"]["regular"]} collab-button--regular`]: size !== "small"
+              },
+              !isLoading ? `${(0, import_collab.collabStyles)()["collab-button--visible"]} collab-button--visible` : `${(0, import_collab.collabStyles)()["collab-button--hidden"]} collab-button--hidden`
+            ),
+            children: nestedChildren
+          }
+        )
+      ] })
     }
   );
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Button/Button.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport classNames from \"classnames\";\nimport Icon, { IconProps } from \"../Icon/Icon\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport {\n collabStyles,\n flexAlignCenter,\n flexCentered,\n} from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\ninterface ButtonProps {\n buttonType?: \"primary\" \| \"secondary\" \| \"tertiary\" \| \"destructive\";\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n onClick?: JSX.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>;\n disabled?: boolean;\n type?: \"button\" \| \"submit\" \| \"reset\";\n style?: React.CSSProperties;\n href?: string;\n id?: string;\n size?: \"large\" \| \"small\";\n icon?: IconName;\n iconProps?: Partial<IconProps>;\n iconAlignment?: \"left\" \| \"right\" \| \"both\";\n}\n\nconst Button: React.FC<ButtonProps> = ({\n buttonType = \"primary\",\n children,\n className = \"\",\n testId,\n onClick,\n disabled = false,\n type = \"button\",\n style,\n href,\n id,\n size = \"large\",\n icon,\n iconProps,\n iconAlignment = \"left\",\n}) => {\n const Element = href ? \"a\" : \"button\";\n let nestedChildren: React.ReactNode =\n children && React.Children.toArray([children]);\n\n if (icon) {\n let iconChild = <Icon icon={icon} {...iconProps} />;\n\n switch (iconAlignment) {\n case \"left\":\n nestedChildren = React.Children.toArray([\n iconChild,\n nestedChildren,\n ]);\n break;\n case \"right\":\n nestedChildren = React.Children.toArray([\n nestedChildren,\n iconChild,\n ]);\n break;\n case \"both\":\n nestedChildren = React.Children.toArray([\n iconChild,\n nestedChildren,\n iconChild,\n ]);\n break;\n default:\n break;\n }\n }\n\n const combinedClassName = classNames(\n collabStyles()[\"collab-button--basestyle\"],\n collabStyles()[\"collab-button--type\"][buttonType],\n collabStyles()[\"collab-button--size\"][size],\n icon && collabStyles()[\"collab-button--icon-allignment\"][iconAlignment],\n disabled && collabStyles()[\"collab-button--disabled\"],\n className,\n\n `collab-button collab-button--${buttonType} collab-button--${size} ${\n icon ? `collab-button--icon-${iconAlignment}` : \"\"\n } ${disabled ? \"collab-button--disabled\" : \"\"}`\n );\n\n // Ensure style is valid\n const validStyle = Object.fromEntries(\n Object.entries(style \|\| {}).filter(([_, value]) => value != null)\n );\n\n return (\n <Element\n className={combinedClassName}\n id={id}\n onClick={onClick}\n type={type}\n style={validStyle as React.CSSProperties}\n disabled={disabled}\n href={href}\n data-testid={testId}\n >\n <div className={classNames(\"flex-center\", flexCentered)}>\n <div\n className={classNames(\"flex-v-center\", flexAlignCenter, {\n [`${collabStyles()[\"collab-button--size\"][\"regular\"]} collab-button--regular`]:\n size !== \"small\",\n })}\n >\n {nestedChildren}\n </div>\n </div>\n </Element>\n );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAkB;AAElB,wBAAuB;AACvB,kBAAgC;~~AAEhC~~,oBAIO;~~AA0CiB~~;~~AArBxB~~,IAAM,SAAgC,CAAC;AAAA,EACnC,aAAa;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,gBAAgB;AACpB,MAAM;AACF,QAAM,UAAU,OAAO,MAAM;AAC7B,MAAI,iBACA,YAAY,cAAAA,QAAM,SAAS,QAAQ,CAAC,QAAQ,CAAC;AAEjD,MAAI,MAAM;AACN,QAAI,YAAY,4CAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,WAAW;AAEjD,YAAQ,eAAe;AAAA,MACnB,KAAK;AACD,yBAAiB,cAAAD,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAEA,QAAM,wBAAoB,kBAAAE;AAAA,QACtB,4BAAa,EAAE,0BAA0B;AAAA,QACzC,4BAAa,EAAE,qBAAqB,EAAE,UAAU;AAAA,QAChD,4BAAa,EAAE,qBAAqB,EAAE,IAAI;AAAA,IAC1C,YAAQ,4BAAa,EAAE,gCAAgC,EAAE,aAAa;AAAA,IACtE,gBAAY,4BAAa,EAAE,yBAAyB;AAAA,IACpD;AAAA,IAEA,gCAAgC,UAAU,mBAAmB,IAAI,IAC7D,OAAO,uBAAuB,aAAa,KAAK,EACpD,IAAI,WAAW,4BAA4B,EAAE;AAAA,~~EACjD~~;AAGA,QAAM,aAAa,OAAO;AAAA,IACtB,OAAO,QAAQ,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,MAAM,SAAS,IAAI;AAAA,EACpE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MAEb,~~sDAAC~~,SAAI,eAAW,kBAAAA,SAAW,eAAe,0BAAY,~~GAClD~~;AAAA,~~QAAC~~;AAAA;AAAA,~~UACG~~,eAAW,kBAAAA,~~SAAW~~,~~iBAAiB,+BAAiB~~;AAAA,~~YACpD~~,CAAC,OAAG,4BAAa,EAAE,qBAAqB,EAAE,SAAS,CAAC,yBAAyB,GACzE,SAAS;AAAA,~~UACjB~~,CAAC;AAAA,~~UAEA~~;AAAA;AAAA,~~MACL~~,~~GACJ~~;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,iBAAQ;","names":["React","Icon","classNames"]}
1	+ {"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Button/Button.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport classNames from \"classnames\";\nimport Icon, { IconProps } from \"../Icon/Icon\";\nimport AsyncLoader from \"../AsyncLoader/AsyncLoader\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport {\n collabStyles,\n flexAlignCenter,\n flexCentered,\n} from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\ninterface ButtonProps {\n buttonType?: \"primary\" \| \"secondary\" \| \"tertiary\" \| \"destructive\";\n children?: React.ReactNode;\n className?: string;\n testId?: string;\n onClick?: JSX.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement>;\n isLoading?: boolean;\n loadingColor?: \"primary\" \| \"secondary\" \| \"tertiary\" \| \"destructive\";\n disabled?: boolean;\n type?: \"button\" \| \"submit\" \| \"reset\";\n style?: React.CSSProperties;\n href?: string;\n id?: string;\n size?: \"large\" \| \"small\";\n icon?: IconName;\n iconProps?: Partial<IconProps>;\n iconAlignment?: \"left\" \| \"right\" \| \"both\";\n}\n\nconst Button: React.FC<ButtonProps> = ({\n buttonType = \"primary\",\n children,\n className = \"\",\n testId,\n onClick,\n isLoading,\n loadingColor = \"primary\",\n disabled = false,\n type = \"button\",\n style,\n href,\n id,\n size = \"large\",\n icon,\n iconProps,\n iconAlignment = \"left\",\n}) => {\n const Element = href ? \"a\" : \"button\";\n let nestedChildren: React.ReactNode =\n children && React.Children.toArray([children]);\n\n if (icon) {\n let iconChild = <Icon icon={icon} {...iconProps} />;\n\n switch (iconAlignment) {\n case \"left\":\n nestedChildren = React.Children.toArray([\n iconChild,\n nestedChildren,\n ]);\n break;\n case \"right\":\n nestedChildren = React.Children.toArray([\n nestedChildren,\n iconChild,\n ]);\n break;\n case \"both\":\n nestedChildren = React.Children.toArray([\n iconChild,\n nestedChildren,\n iconChild,\n ]);\n break;\n default:\n break;\n }\n }\n\n const combinedClassName = classNames(\n collabStyles()[\"collab-button--basestyle\"],\n collabStyles()[\"collab-button--type\"][buttonType],\n collabStyles()[\"collab-button--size\"][size],\n icon && collabStyles()[\"collab-button--icon-allignment\"][iconAlignment],\n disabled && collabStyles()[\"collab-button--disabled\"],\n isLoading && collabStyles()[\"collab-button--loading\"],\n className,\n\n `collab-button collab-button--${buttonType} collab-button--${size} ${\n icon ? `collab-button--icon-${iconAlignment}` : \"\"\n } ${disabled ? \"collab-button--disabled\" : \"\"}\n ${isLoading ? \"collab-button--loading\" : \"\"}`\n );\n\n // Ensure style is valid\n const validStyle = Object.fromEntries(\n Object.entries(style \|\| {}).filter(([_, value]) => value != null)\n );\n\n return (\n <Element\n className={combinedClassName}\n id={id}\n onClick={onClick}\n type={type}\n style={validStyle as React.CSSProperties}\n disabled={disabled}\n href={href}\n data-testid={testId}\n >\n <div className={classNames(\"flex-center\", flexCentered)}>\n {isLoading && (\n <div\n className={classNames(\n collabStyles()[\"collab-button--loader--wrapper\"],\n \"collab-button--loader--wrapper\"\n )}\n >\n <AsyncLoader color={loadingColor} />\n </div>\n )}\n <div\n className={classNames(\n \"flex-v-center\",\n flexAlignCenter,\n {\n [`${collabStyles()[\"collab-button--size\"][\"regular\"]} collab-button--regular`]:\n size !== \"small\",\n },\n !isLoading\n ? `${collabStyles()[\"collab-button--visible\"]} collab-button--visible`\n : `${collabStyles()[\"collab-button--hidden\"]} collab-button--hidden`\n )}\n >\n {nestedChildren}\n </div>\n </div>\n </Element>\n );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAkB;AAElB,wBAAuB;AACvB,kBAAgC;AAChC,yBAAwB;AAExB,oBAIO;AA8CiB;AAvBxB,IAAM,SAAgC,CAAC;AAAA,EACnC,aAAa;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,gBAAgB;AACpB,MAAM;AACF,QAAM,UAAU,OAAO,MAAM;AAC7B,MAAI,iBACA,YAAY,cAAAA,QAAM,SAAS,QAAQ,CAAC,QAAQ,CAAC;AAEjD,MAAI,MAAM;AACN,QAAI,YAAY,4CAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,WAAW;AAEjD,YAAQ,eAAe;AAAA,MACnB,KAAK;AACD,yBAAiB,cAAAD,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAEA,QAAM,wBAAoB,kBAAAE;AAAA,QACtB,4BAAa,EAAE,0BAA0B;AAAA,QACzC,4BAAa,EAAE,qBAAqB,EAAE,UAAU;AAAA,QAChD,4BAAa,EAAE,qBAAqB,EAAE,IAAI;AAAA,IAC1C,YAAQ,4BAAa,EAAE,gCAAgC,EAAE,aAAa;AAAA,IACtE,gBAAY,4BAAa,EAAE,yBAAyB;AAAA,IACpD,iBAAa,4BAAa,EAAE,wBAAwB;AAAA,IACpD;AAAA,IAEA,gCAAgC,UAAU,mBAAmB,IAAI,IAC7D,OAAO,uBAAuB,aAAa,KAAK,EACpD,IAAI,WAAW,4BAA4B,EAAE;AAAA,UAC3C,YAAY,2BAA2B,EAAE;AAAA,EAC/C;AAGA,QAAM,aAAa,OAAO;AAAA,IACtB,OAAO,QAAQ,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,MAAM,SAAS,IAAI;AAAA,EACpE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MAEb,uDAAC,SAAI,eAAW,kBAAAA,SAAW,eAAe,0BAAY,GACjD;AAAA,qBACG;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,kBACP,4BAAa,EAAE,gCAAgC;AAAA,cAC/C;AAAA,YACJ;AAAA,YAEA,sDAAC,mBAAAC,SAAA,EAAY,OAAO,cAAc;AAAA;AAAA,QACtC;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAD;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,gBACI,CAAC,OAAG,4BAAa,EAAE,qBAAqB,EAAE,SAAS,CAAC,yBAAyB,GACzE,SAAS;AAAA,cACjB;AAAA,cACA,CAAC,YACK,OAAG,4BAAa,EAAE,wBAAwB,CAAC,4BAC3C,OAAG,4BAAa,EAAE,uBAAuB,CAAC;AAAA,YACpD;AAAA,YAEC;AAAA;AAAA,QACL;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,iBAAQ;","names":["React","Icon","classNames","AsyncLoader"]}

package/dist/legacy/visualBuilder/components/Collab/Button/Button.d.cts CHANGED Viewed

@@ -12,6 +12,8 @@ interface ButtonProps {
     className?: string;
     testId?: string;
     onClick?: JSX.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    isLoading?: boolean;
+    loadingColor?: "primary" | "secondary" | "tertiary" | "destructive";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     style?: React.CSSProperties;

package/dist/legacy/visualBuilder/components/Collab/Button/Button.d.ts CHANGED Viewed

@@ -12,6 +12,8 @@ interface ButtonProps {
     className?: string;
     testId?: string;
     onClick?: JSX.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    isLoading?: boolean;
+    loadingColor?: "primary" | "secondary" | "tertiary" | "destructive";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";
     style?: React.CSSProperties;