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

package/dist/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.cjs

@@ -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/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.cjs.map

@@ -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/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.d.cts

@@ -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/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.d.ts

@@ -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/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.js

@@ -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/modern/visualBuilder/components/Collab/AsyncLoader/AsyncLoader.js.map

@@ -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/modern/visualBuilder/components/Collab/Button/Button.cjs

@@ -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/modern/visualBuilder/components/Collab/Button/Button.cjs.map

@@ -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"]}
+{"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/modern/visualBuilder/components/Collab/Button/Button.d.cts

@@ -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/modern/visualBuilder/components/Collab/Button/Button.d.ts

@@ -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/modern/visualBuilder/components/Collab/Button/Button.js

@@ -4,18 +4,21 @@ import "../../../../chunk-5WRI5ZAA.js";
 import React from "preact/compat";
 import classNames from "classnames";
 import Icon from "../Icon/Icon.js";
+import AsyncLoader from "../AsyncLoader/AsyncLoader.js";
 import {
   collabStyles,
   flexAlignCenter,
   flexCentered
 } from "../../../collab.style.js";
-import { jsx } from "preact/jsx-runtime";
+import { jsx, jsxs } from "preact/jsx-runtime";
 var Button = ({
   buttonType = "primary",
   children,
   className = "",
   testId,
   onClick,
+  isLoading,
+  loadingColor = "primary",
   disabled = false,
   type = "button",
   style,
@@ -60,8 +63,10 @@ var Button = ({
     collabStyles()["collab-button--size"][size],
     icon && collabStyles()["collab-button--icon-allignment"][iconAlignment],
     disabled && collabStyles()["collab-button--disabled"],
+    isLoading && 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)
@@ -77,15 +82,32 @@ var Button = ({
       disabled,
       href,
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx("div", { className: classNames("flex-center", flexCentered), children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames("flex-v-center", flexAlignCenter, {
-            [`${collabStyles()["collab-button--size"]["regular"]} collab-button--regular`]: size !== "small"
-          }),
-          children: nestedChildren
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs("div", { className: classNames("flex-center", flexCentered), children: [
+        isLoading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              collabStyles()["collab-button--loader--wrapper"],
+              "collab-button--loader--wrapper"
+            ),
+            children: /* @__PURE__ */ jsx(AsyncLoader, { color: loadingColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(
+              "flex-v-center",
+              flexAlignCenter,
+              {
+                [`${collabStyles()["collab-button--size"]["regular"]} collab-button--regular`]: size !== "small"
+              },
+              !isLoading ? `${collabStyles()["collab-button--visible"]} collab-button--visible` : `${collabStyles()["collab-button--hidden"]} collab-button--hidden`
+            ),
+            children: nestedChildren
+          }
+        )
+      ] })
     }
   );
 };

package/dist/modern/visualBuilder/components/Collab/Button/Button.js.map

@@ -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":";;;AACA,OAAO,WAAW;AAElB,OAAO,gBAAgB;AACvB,OAAO,UAAyB;AAEhC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;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,MAAM,SAAS,QAAQ,CAAC,QAAQ,CAAC;AAEjD,MAAI,MAAM;AACN,QAAI,YAAY,oBAAC,QAAK,MAAa,GAAG,WAAW;AAEjD,YAAQ,eAAe;AAAA,MACnB,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAEA,QAAM,oBAAoB;AAAA,IACtB,aAAa,EAAE,0BAA0B;AAAA,IACzC,aAAa,EAAE,qBAAqB,EAAE,UAAU;AAAA,IAChD,aAAa,EAAE,qBAAqB,EAAE,IAAI;AAAA,IAC1C,QAAQ,aAAa,EAAE,gCAAgC,EAAE,aAAa;AAAA,IACtE,YAAY,aAAa,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,8BAAC,SAAI,WAAW,WAAW,eAAe,YAAY,GAClD;AAAA,QAAC;AAAA;AAAA,UACG,WAAW,WAAW,iBAAiB,iBAAiB;AAAA,YACpD,CAAC,GAAG,aAAa,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":[]}
+{"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":";;;AACA,OAAO,WAAW;AAElB,OAAO,gBAAgB;AACvB,OAAO,UAAyB;AAChC,OAAO,iBAAiB;AAExB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AA8CiB,cA0DZ,YA1DY;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,MAAM,SAAS,QAAQ,CAAC,QAAQ,CAAC;AAEjD,MAAI,MAAM;AACN,QAAI,YAAY,oBAAC,QAAK,MAAa,GAAG,WAAW;AAEjD,YAAQ,eAAe;AAAA,MACnB,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,MAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAEA,QAAM,oBAAoB;AAAA,IACtB,aAAa,EAAE,0BAA0B;AAAA,IACzC,aAAa,EAAE,qBAAqB,EAAE,UAAU;AAAA,IAChD,aAAa,EAAE,qBAAqB,EAAE,IAAI;AAAA,IAC1C,QAAQ,aAAa,EAAE,gCAAgC,EAAE,aAAa;AAAA,IACtE,YAAY,aAAa,EAAE,yBAAyB;AAAA,IACpD,aAAa,aAAa,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,+BAAC,SAAI,WAAW,WAAW,eAAe,YAAY,GACjD;AAAA,qBACG;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP,aAAa,EAAE,gCAAgC;AAAA,cAC/C;AAAA,YACJ;AAAA,YAEA,8BAAC,eAAY,OAAO,cAAc;AAAA;AAAA,QACtC;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,gBACI,CAAC,GAAG,aAAa,EAAE,qBAAqB,EAAE,SAAS,CAAC,yBAAyB,GACzE,SAAS;AAAA,cACjB;AAAA,cACA,CAAC,YACK,GAAG,aAAa,EAAE,wBAAwB,CAAC,4BAC3C,GAAG,aAAa,EAAE,uBAAuB,CAAC;AAAA,YACpD;AAAA,YAEC;AAAA;AAAA,QACL;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/CollabIndicator.cjs

@@ -34,6 +34,7 @@ __export(CollabIndicator_exports, {
 });
 module.exports = __toCommonJS(CollabIndicator_exports);
 var import_collab = require("../../collab.style.cjs");
+var import_hooks = require("preact/hooks");
 var import_classnames = __toESM(require("classnames"), 1);
 var import_ThreadPopup = __toESM(require("./ThreadPopup/index.cjs"), 1);
 var import_configManager = __toESM(require("../../../configManager/configManager.cjs"), 1);
@@ -44,7 +45,12 @@ var import_CollabIcons = require("../icons/CollabIcons.cjs");
 var import_jsx_runtime = require("preact/jsx-runtime");
 var CollabIndicator = (props) => {
   const config = import_configManager.default.get();
-  const inviteMetadata = config?.collab?.inviteMetadata;
+  const [inviteMetadata, setInviteMetadata] = (0, import_hooks.useState)(
+    config?.collab?.inviteMetadata
+  );
+  (0, import_hooks.useEffect)(() => {
+    setInviteMetadata(config?.collab?.inviteMetadata);
+  }, [config?.collab?.inviteMetadata]);
   const {
     buttonRef,
     popupRef,

package/dist/modern/visualBuilder/components/Collab/CollabIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/visualBuilder/components/Collab/CollabIndicator.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { collabStyles } from \"../../collab.style\";\nimport classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport ThreadPopup from \"./ThreadPopup\";\nimport Config from \"../../../configManager/configManager\";\nimport { IActiveThread, IInviteMetadata } from \"../../types/collab.types\";\nimport { useCollabIndicator } from \"../../hooks/useCollabIndicator\";\nimport { useCollabOperations } from \"../../hooks/useCollabOperations\";\nimport { handleEmptyThreads } from \"../../generators/generateThread\";\nimport { iconComponents } from \"../icons/CollabIcons\";\nexport interface ICollabIndicator {\n    newThread?: boolean;\n    activeThread?: IActiveThread;\n}\n\nconst CollabIndicator: React.FC<ICollabIndicator> = (props) => {\n    const config = Config.get();\n    const inviteMetadata: IInviteMetadata = config?.collab?.inviteMetadata;\n\n    const {\n        buttonRef,\n        popupRef,\n        showPopup,\n        setShowPopup,\n        activeThread,\n        setActiveThread,\n        togglePopup,\n    } = useCollabIndicator({\n        newThread: props.newThread ?? false,\n        thread: props.activeThread || { _id: \"new\" },\n    });\n\n    const {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    } = useCollabOperations();\n\n    const handleClose = (isResolved: boolean = false) => {\n        if (isResolved) {\n            buttonRef.current?.closest(\"div[field-path]\")?.remove();\n        }\n        handleEmptyThreads();\n        setShowPopup(false);\n\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n    };\n    const IconComponent = iconComponents[\"Indicator\"];\n\n    return (\n        <>\n            <button\n                ref={buttonRef}\n                data-testid=\"collab-indicator\"\n                className={classNames(\n                    \"collab-indicator\",\n                    collabStyles()[\"collab-indicator\"]\n                )}\n                onClick={togglePopup}\n            >\n                <IconComponent active={!showPopup} />\n            </button>\n            {showPopup && (\n                <div\n                    ref={popupRef}\n                    className={classNames(\n                        \"collab-popup\",\n                        collabStyles()[\"collab-popup\"]\n                    )}\n                    data-testid=\"collab-popup\"\n                >\n                    <ThreadPopup\n                        onCreateComment={createComment}\n                        onEditComment={editComment}\n                        onDeleteComment={deleteComment}\n                        onClose={handleClose}\n                        onResolve={resolveThread}\n                        inviteMetadata={inviteMetadata}\n                        loadMoreMessages={fetchComments}\n                        activeThread={activeThread}\n                        setActiveThread={setActiveThread}\n                        onDeleteThread={deleteThread}\n                        createNewThread={() =>\n                            createNewThread(buttonRef, inviteMetadata)\n                        }\n                    />\n                </div>\n            )}\n        </>\n    );\n};\n\nexport default CollabIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA6B;AAC7B,wBAAuB;AAEvB,yBAAwB;AACxB,2BAAmB;AAEnB,gCAAmC;AACnC,iCAAoC;AACpC,4BAAmC;AACnC,yBAA+B;AA+CvB;AAzCR,IAAM,kBAA8C,CAAC,UAAU;AAC3D,QAAM,SAAS,qBAAAA,QAAO,IAAI;AAC1B,QAAM,iBAAkC,QAAQ,QAAQ;AAExD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,QAAI,8CAAmB;AAAA,IACnB,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,MAAM,gBAAgB,EAAE,KAAK,MAAM;AAAA,EAC/C,CAAC;AAED,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,QAAI,gDAAoB;AAExB,QAAM,cAAc,CAAC,aAAsB,UAAU;AACjD,QAAI,YAAY;AACZ,gBAAU,SAAS,QAAQ,iBAAiB,GAAG,OAAO;AAAA,IAC1D;AACA,kDAAmB;AACnB,iBAAa,KAAK;AAElB,QAAI,QAAQ,QAAQ,mBAAmB,OAAO;AAC1C,2BAAAA,QAAO,IAAI,yBAAyB,IAAI;AAAA,IAC5C;AAAA,EACJ;AACA,QAAM,gBAAgB,kCAAe,WAAW;AAEhD,SACI,4EACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,eAAW,kBAAAC;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,kBAAkB;AAAA,QACrC;AAAA,QACA,SAAS;AAAA,QAET,sDAAC,iBAAc,QAAQ,CAAC,WAAW;AAAA;AAAA,IACvC;AAAA,IACC,aACG;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,cAAc;AAAA,QACjC;AAAA,QACA,eAAY;AAAA,QAEZ;AAAA,UAAC,mBAAAC;AAAA,UAAA;AAAA,YACG,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,WAAW;AAAA,YACX;AAAA,YACA,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA,YAChB,iBAAiB,MACb,gBAAgB,WAAW,cAAc;AAAA;AAAA,QAEjD;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":["Config","classNames","ThreadPopup"]}
+{"version":3,"sources":["../../../../../src/visualBuilder/components/Collab/CollabIndicator.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { collabStyles } from \"../../collab.style\";\nimport { useState, useEffect } from \"preact/hooks\";\nimport classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport ThreadPopup from \"./ThreadPopup\";\nimport Config from \"../../../configManager/configManager\";\nimport { IActiveThread, IInviteMetadata } from \"../../types/collab.types\";\nimport { useCollabIndicator } from \"../../hooks/useCollabIndicator\";\nimport { useCollabOperations } from \"../../hooks/useCollabOperations\";\nimport { handleEmptyThreads } from \"../../generators/generateThread\";\nimport { iconComponents } from \"../icons/CollabIcons\";\nexport interface ICollabIndicator {\n    newThread?: boolean;\n    activeThread?: IActiveThread;\n}\n\nconst CollabIndicator: React.FC<ICollabIndicator> = (props) => {\n    const config = Config.get();\n    const [inviteMetadata, setInviteMetadata] = useState<IInviteMetadata>(\n        config?.collab?.inviteMetadata\n    );\n\n    useEffect(() => {\n        setInviteMetadata(config?.collab?.inviteMetadata);\n    }, [config?.collab?.inviteMetadata]);\n\n    const {\n        buttonRef,\n        popupRef,\n        showPopup,\n        setShowPopup,\n        activeThread,\n        setActiveThread,\n        togglePopup,\n    } = useCollabIndicator({\n        newThread: props.newThread ?? false,\n        thread: props.activeThread || { _id: \"new\" },\n    });\n\n    const {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    } = useCollabOperations();\n\n    const handleClose = (isResolved: boolean = false) => {\n        if (isResolved) {\n            buttonRef.current?.closest(\"div[field-path]\")?.remove();\n        }\n        handleEmptyThreads();\n        setShowPopup(false);\n\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n    };\n    const IconComponent = iconComponents[\"Indicator\"];\n\n    return (\n        <>\n            <button\n                ref={buttonRef}\n                data-testid=\"collab-indicator\"\n                className={classNames(\n                    \"collab-indicator\",\n                    collabStyles()[\"collab-indicator\"]\n                )}\n                onClick={togglePopup}\n            >\n                <IconComponent active={!showPopup} />\n            </button>\n            {showPopup && (\n                <div\n                    ref={popupRef}\n                    className={classNames(\n                        \"collab-popup\",\n                        collabStyles()[\"collab-popup\"]\n                    )}\n                    data-testid=\"collab-popup\"\n                >\n                    <ThreadPopup\n                        onCreateComment={createComment}\n                        onEditComment={editComment}\n                        onDeleteComment={deleteComment}\n                        onClose={handleClose}\n                        onResolve={resolveThread}\n                        inviteMetadata={inviteMetadata}\n                        loadMoreMessages={fetchComments}\n                        activeThread={activeThread}\n                        setActiveThread={setActiveThread}\n                        onDeleteThread={deleteThread}\n                        createNewThread={() =>\n                            createNewThread(buttonRef, inviteMetadata)\n                        }\n                    />\n                </div>\n            )}\n        </>\n    );\n};\n\nexport default CollabIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAA6B;AAC7B,mBAAoC;AACpC,wBAAuB;AAEvB,yBAAwB;AACxB,2BAAmB;AAEnB,gCAAmC;AACnC,iCAAoC;AACpC,4BAAmC;AACnC,yBAA+B;AAqDvB;AA/CR,IAAM,kBAA8C,CAAC,UAAU;AAC3D,QAAM,SAAS,qBAAAA,QAAO,IAAI;AAC1B,QAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,IACxC,QAAQ,QAAQ;AAAA,EACpB;AAEA,8BAAU,MAAM;AACZ,sBAAkB,QAAQ,QAAQ,cAAc;AAAA,EACpD,GAAG,CAAC,QAAQ,QAAQ,cAAc,CAAC;AAEnC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,QAAI,8CAAmB;AAAA,IACnB,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,MAAM,gBAAgB,EAAE,KAAK,MAAM;AAAA,EAC/C,CAAC;AAED,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,QAAI,gDAAoB;AAExB,QAAM,cAAc,CAAC,aAAsB,UAAU;AACjD,QAAI,YAAY;AACZ,gBAAU,SAAS,QAAQ,iBAAiB,GAAG,OAAO;AAAA,IAC1D;AACA,kDAAmB;AACnB,iBAAa,KAAK;AAElB,QAAI,QAAQ,QAAQ,mBAAmB,OAAO;AAC1C,2BAAAA,QAAO,IAAI,yBAAyB,IAAI;AAAA,IAC5C;AAAA,EACJ;AACA,QAAM,gBAAgB,kCAAe,WAAW;AAEhD,SACI,4EACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,eAAW,kBAAAC;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,kBAAkB;AAAA,QACrC;AAAA,QACA,SAAS;AAAA,QAET,sDAAC,iBAAc,QAAQ,CAAC,WAAW;AAAA;AAAA,IACvC;AAAA,IACC,aACG;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACP;AAAA,cACA,4BAAa,EAAE,cAAc;AAAA,QACjC;AAAA,QACA,eAAY;AAAA,QAEZ;AAAA,UAAC,mBAAAC;AAAA,UAAA;AAAA,YACG,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,WAAW;AAAA,YACX;AAAA,YACA,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA,YAChB,iBAAiB,MACb,gBAAgB,WAAW,cAAc;AAAA;AAAA,QAEjD;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":["Config","classNames","ThreadPopup"]}

package/dist/modern/visualBuilder/components/Collab/CollabIndicator.js

@@ -2,6 +2,7 @@ import "../../../chunk-5WRI5ZAA.js";
 
 // src/visualBuilder/components/Collab/CollabIndicator.tsx
 import { collabStyles } from "../../collab.style.js";
+import { useState, useEffect } from "preact/hooks";
 import classNames from "classnames";
 import ThreadPopup from "./ThreadPopup/index.js";
 import Config from "../../../configManager/configManager.js";
@@ -12,7 +13,12 @@ import { iconComponents } from "../icons/CollabIcons.js";
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 var CollabIndicator = (props) => {
   const config = Config.get();
-  const inviteMetadata = config?.collab?.inviteMetadata;
+  const [inviteMetadata, setInviteMetadata] = useState(
+    config?.collab?.inviteMetadata
+  );
+  useEffect(() => {
+    setInviteMetadata(config?.collab?.inviteMetadata);
+  }, [config?.collab?.inviteMetadata]);
   const {
     buttonRef,
     popupRef,

package/dist/modern/visualBuilder/components/Collab/CollabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/visualBuilder/components/Collab/CollabIndicator.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { collabStyles } from \"../../collab.style\";\nimport classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport ThreadPopup from \"./ThreadPopup\";\nimport Config from \"../../../configManager/configManager\";\nimport { IActiveThread, IInviteMetadata } from \"../../types/collab.types\";\nimport { useCollabIndicator } from \"../../hooks/useCollabIndicator\";\nimport { useCollabOperations } from \"../../hooks/useCollabOperations\";\nimport { handleEmptyThreads } from \"../../generators/generateThread\";\nimport { iconComponents } from \"../icons/CollabIcons\";\nexport interface ICollabIndicator {\n    newThread?: boolean;\n    activeThread?: IActiveThread;\n}\n\nconst CollabIndicator: React.FC<ICollabIndicator> = (props) => {\n    const config = Config.get();\n    const inviteMetadata: IInviteMetadata = config?.collab?.inviteMetadata;\n\n    const {\n        buttonRef,\n        popupRef,\n        showPopup,\n        setShowPopup,\n        activeThread,\n        setActiveThread,\n        togglePopup,\n    } = useCollabIndicator({\n        newThread: props.newThread ?? false,\n        thread: props.activeThread || { _id: \"new\" },\n    });\n\n    const {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    } = useCollabOperations();\n\n    const handleClose = (isResolved: boolean = false) => {\n        if (isResolved) {\n            buttonRef.current?.closest(\"div[field-path]\")?.remove();\n        }\n        handleEmptyThreads();\n        setShowPopup(false);\n\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n    };\n    const IconComponent = iconComponents[\"Indicator\"];\n\n    return (\n        <>\n            <button\n                ref={buttonRef}\n                data-testid=\"collab-indicator\"\n                className={classNames(\n                    \"collab-indicator\",\n                    collabStyles()[\"collab-indicator\"]\n                )}\n                onClick={togglePopup}\n            >\n                <IconComponent active={!showPopup} />\n            </button>\n            {showPopup && (\n                <div\n                    ref={popupRef}\n                    className={classNames(\n                        \"collab-popup\",\n                        collabStyles()[\"collab-popup\"]\n                    )}\n                    data-testid=\"collab-popup\"\n                >\n                    <ThreadPopup\n                        onCreateComment={createComment}\n                        onEditComment={editComment}\n                        onDeleteComment={deleteComment}\n                        onClose={handleClose}\n                        onResolve={resolveThread}\n                        inviteMetadata={inviteMetadata}\n                        loadMoreMessages={fetchComments}\n                        activeThread={activeThread}\n                        setActiveThread={setActiveThread}\n                        onDeleteThread={deleteThread}\n                        createNewThread={() =>\n                            createNewThread(buttonRef, inviteMetadata)\n                        }\n                    />\n                </div>\n            )}\n        </>\n    );\n};\n\nexport default CollabIndicator;\n"],"mappings":";;;AACA,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AAEvB,OAAO,iBAAiB;AACxB,OAAO,YAAY;AAEnB,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AA+CvB,mBAUQ,KAVR;AAzCR,IAAM,kBAA8C,CAAC,UAAU;AAC3D,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,iBAAkC,QAAQ,QAAQ;AAExD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI,mBAAmB;AAAA,IACnB,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,MAAM,gBAAgB,EAAE,KAAK,MAAM;AAAA,EAC/C,CAAC;AAED,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI,oBAAoB;AAExB,QAAM,cAAc,CAAC,aAAsB,UAAU;AACjD,QAAI,YAAY;AACZ,gBAAU,SAAS,QAAQ,iBAAiB,GAAG,OAAO;AAAA,IAC1D;AACA,uBAAmB;AACnB,iBAAa,KAAK;AAElB,QAAI,QAAQ,QAAQ,mBAAmB,OAAO;AAC1C,aAAO,IAAI,yBAAyB,IAAI;AAAA,IAC5C;AAAA,EACJ;AACA,QAAM,gBAAgB,eAAe,WAAW;AAEhD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,kBAAkB;AAAA,QACrC;AAAA,QACA,SAAS;AAAA,QAET,8BAAC,iBAAc,QAAQ,CAAC,WAAW;AAAA;AAAA,IACvC;AAAA,IACC,aACG;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,cAAc;AAAA,QACjC;AAAA,QACA,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACG,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,WAAW;AAAA,YACX;AAAA,YACA,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA,YAChB,iBAAiB,MACb,gBAAgB,WAAW,cAAc;AAAA;AAAA,QAEjD;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":[]}
+{"version":3,"sources":["../../../../../src/visualBuilder/components/Collab/CollabIndicator.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport { collabStyles } from \"../../collab.style\";\nimport { useState, useEffect } from \"preact/hooks\";\nimport classNames from \"classnames\";\nimport React from \"preact/compat\";\nimport ThreadPopup from \"./ThreadPopup\";\nimport Config from \"../../../configManager/configManager\";\nimport { IActiveThread, IInviteMetadata } from \"../../types/collab.types\";\nimport { useCollabIndicator } from \"../../hooks/useCollabIndicator\";\nimport { useCollabOperations } from \"../../hooks/useCollabOperations\";\nimport { handleEmptyThreads } from \"../../generators/generateThread\";\nimport { iconComponents } from \"../icons/CollabIcons\";\nexport interface ICollabIndicator {\n    newThread?: boolean;\n    activeThread?: IActiveThread;\n}\n\nconst CollabIndicator: React.FC<ICollabIndicator> = (props) => {\n    const config = Config.get();\n    const [inviteMetadata, setInviteMetadata] = useState<IInviteMetadata>(\n        config?.collab?.inviteMetadata\n    );\n\n    useEffect(() => {\n        setInviteMetadata(config?.collab?.inviteMetadata);\n    }, [config?.collab?.inviteMetadata]);\n\n    const {\n        buttonRef,\n        popupRef,\n        showPopup,\n        setShowPopup,\n        activeThread,\n        setActiveThread,\n        togglePopup,\n    } = useCollabIndicator({\n        newThread: props.newThread ?? false,\n        thread: props.activeThread || { _id: \"new\" },\n    });\n\n    const {\n        createComment,\n        editComment,\n        deleteComment,\n        resolveThread,\n        fetchComments,\n        createNewThread,\n        deleteThread,\n    } = useCollabOperations();\n\n    const handleClose = (isResolved: boolean = false) => {\n        if (isResolved) {\n            buttonRef.current?.closest(\"div[field-path]\")?.remove();\n        }\n        handleEmptyThreads();\n        setShowPopup(false);\n\n        if (config?.collab?.isFeedbackMode === false) {\n            Config.set(\"collab.isFeedbackMode\", true);\n        }\n    };\n    const IconComponent = iconComponents[\"Indicator\"];\n\n    return (\n        <>\n            <button\n                ref={buttonRef}\n                data-testid=\"collab-indicator\"\n                className={classNames(\n                    \"collab-indicator\",\n                    collabStyles()[\"collab-indicator\"]\n                )}\n                onClick={togglePopup}\n            >\n                <IconComponent active={!showPopup} />\n            </button>\n            {showPopup && (\n                <div\n                    ref={popupRef}\n                    className={classNames(\n                        \"collab-popup\",\n                        collabStyles()[\"collab-popup\"]\n                    )}\n                    data-testid=\"collab-popup\"\n                >\n                    <ThreadPopup\n                        onCreateComment={createComment}\n                        onEditComment={editComment}\n                        onDeleteComment={deleteComment}\n                        onClose={handleClose}\n                        onResolve={resolveThread}\n                        inviteMetadata={inviteMetadata}\n                        loadMoreMessages={fetchComments}\n                        activeThread={activeThread}\n                        setActiveThread={setActiveThread}\n                        onDeleteThread={deleteThread}\n                        createNewThread={() =>\n                            createNewThread(buttonRef, inviteMetadata)\n                        }\n                    />\n                </div>\n            )}\n        </>\n    );\n};\n\nexport default CollabIndicator;\n"],"mappings":";;;AACA,SAAS,oBAAoB;AAC7B,SAAS,UAAU,iBAAiB;AACpC,OAAO,gBAAgB;AAEvB,OAAO,iBAAiB;AACxB,OAAO,YAAY;AAEnB,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAqDvB,mBAUQ,KAVR;AA/CR,IAAM,kBAA8C,CAAC,UAAU;AAC3D,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IACxC,QAAQ,QAAQ;AAAA,EACpB;AAEA,YAAU,MAAM;AACZ,sBAAkB,QAAQ,QAAQ,cAAc;AAAA,EACpD,GAAG,CAAC,QAAQ,QAAQ,cAAc,CAAC;AAEnC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI,mBAAmB;AAAA,IACnB,WAAW,MAAM,aAAa;AAAA,IAC9B,QAAQ,MAAM,gBAAgB,EAAE,KAAK,MAAM;AAAA,EAC/C,CAAC;AAED,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,IAAI,oBAAoB;AAExB,QAAM,cAAc,CAAC,aAAsB,UAAU;AACjD,QAAI,YAAY;AACZ,gBAAU,SAAS,QAAQ,iBAAiB,GAAG,OAAO;AAAA,IAC1D;AACA,uBAAmB;AACnB,iBAAa,KAAK;AAElB,QAAI,QAAQ,QAAQ,mBAAmB,OAAO;AAC1C,aAAO,IAAI,yBAAyB,IAAI;AAAA,IAC5C;AAAA,EACJ;AACA,QAAM,gBAAgB,eAAe,WAAW;AAEhD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,kBAAkB;AAAA,QACrC;AAAA,QACA,SAAS;AAAA,QAET,8BAAC,iBAAc,QAAQ,CAAC,WAAW;AAAA;AAAA,IACvC;AAAA,IACC,aACG;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW;AAAA,UACP;AAAA,UACA,aAAa,EAAE,cAAc;AAAA,QACjC;AAAA,QACA,eAAY;AAAA,QAEZ;AAAA,UAAC;AAAA;AAAA,YACG,iBAAiB;AAAA,YACjB,eAAe;AAAA,YACf,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,WAAW;AAAA,YACX;AAAA,YACA,kBAAkB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA,YAChB,iBAAiB,MACb,gBAAgB,WAAW,cAAc;AAAA;AAAA,QAEjD;AAAA;AAAA,IACJ;AAAA,KAER;AAER;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.cjs

@@ -43,9 +43,14 @@ var IconWrapper = ({
   className,
   onClick,
   testId,
+  disabled,
   ...otherProps
 }) => {
   const IconComponent = import_CollabIcons.iconComponents[icon];
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -53,7 +58,7 @@ var IconWrapper = ({
         "collab-icon-wrapper",
         (0, import_collab.collabStyles)()["collab-icon-wrapper"]
       ),
-      onClick,
+      onClick: handleClick,
       "data-testid": testId,
       ...otherProps,
       children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Icon/Icon.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\nexport interface IconProps {\n    icon: IconName;\n    tooltipContent?: string;\n    className?: string;\n    withTooltip?: boolean;\n    onClick?: JSX.MouseEventHandler<HTMLDivElement>;\n    testId?: string;\n}\n\nconst IconWrapper = ({\n    icon,\n    className,\n    onClick,\n    testId, \n    ...otherProps\n}: Omit<IconProps, \"withTooltip\" | \"tooltipContent\">) => {\n    const IconComponent = iconComponents[icon];\n\n    return (\n        <div\n            className={classNames(\n                \"collab-icon-wrapper\",\n                collabStyles()[\"collab-icon-wrapper\"]\n            )}\n            onClick={onClick}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {IconComponent ? (\n                <IconComponent\n                    className={classNames(\n                        \"collab-icon\",\n                        collabStyles()[\"collab-icon\"],\n                        className\n                    )}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nconst withTooltip = (Component: typeof IconWrapper) => ({\n    withTooltip = false,\n    tooltipContent = \"\",\n    testId = \"collab-icon\",\n    ...props\n}: IconProps) => {\n    return withTooltip && tooltipContent ? (\n        <div data-testid={testId}>\n            <Tooltip content={tooltipContent} position=\"bottom\" testId=\"collab-icon-tooltip\">\n                <Component {...props}  />\n            </Tooltip>\n        </div>\n    ) : (\n        \n        <Component {...props} testId={testId} />\n    );\n};\n\nconst Icon = withTooltip(IconWrapper);\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoB;AACpB,yBAA+B;AAC/B,wBAAuB;AACvB,oBAA6B;AAiCb;AApBhB,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyD;AACrD,QAAM,gBAAgB,kCAAe,IAAI;AAEzC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,qBAAqB;AAAA,MACxC;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,0BACG;AAAA,QAAC;AAAA;AAAA,UACG,eAAW,kBAAAA;AAAA,YACP;AAAA,gBACA,4BAAa,EAAE,aAAa;AAAA,YAC5B;AAAA,UACJ;AAAA;AAAA,MACJ,IACA;AAAA;AAAA,EACR;AAER;AAEA,IAAM,cAAc,CAAC,cAAkC,CAAC;AAAA,EACpD,aAAAC,eAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,GAAG;AACP,MAAiB;AACb,SAAOA,gBAAe,iBAClB,4CAAC,SAAI,eAAa,QACd,sDAAC,eAAAC,SAAA,EAAQ,SAAS,gBAAgB,UAAS,UAAS,QAAO,uBACvD,sDAAC,aAAW,GAAG,OAAQ,GAC3B,GACJ,IAGA,4CAAC,aAAW,GAAG,OAAO,QAAgB;AAE9C;AAEA,IAAM,OAAO,YAAY,WAAW;AAEpC,IAAO,eAAQ;","names":["classNames","withTooltip","Tooltip"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Icon/Icon.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\nexport interface IconProps {\n    icon: IconName;\n    tooltipContent?: string;\n    className?: string;\n    withTooltip?: boolean;\n    onClick?: JSX.MouseEventHandler<HTMLDivElement>;\n    testId?: string;\n    disabled?: boolean; \n}\n\nconst IconWrapper = ({\n    icon,\n    className,\n    onClick,\n    testId, \n    disabled,\n    ...otherProps\n}: Omit<IconProps, \"withTooltip\" | \"tooltipContent\">) => {\n    const IconComponent = iconComponents[icon];\n\n    const handleClick = (e: JSX.TargetedMouseEvent<HTMLDivElement>) => {\n        if (disabled) return; \n        onClick?.(e);\n    };\n\n\n    return (\n        <div\n            className={classNames(\n                \"collab-icon-wrapper\",\n                collabStyles()[\"collab-icon-wrapper\"]\n            )}\n            onClick={handleClick}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {IconComponent ? (\n                <IconComponent\n                    className={classNames(\n                        \"collab-icon\",\n                        collabStyles()[\"collab-icon\"],\n                        className\n                    )}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nconst withTooltip = (Component: typeof IconWrapper) => ({\n    withTooltip = false,\n    tooltipContent = \"\",\n    testId = \"collab-icon\",\n    ...props\n}: IconProps) => {\n    return withTooltip && tooltipContent ? (\n        <div data-testid={testId}>\n            <Tooltip content={tooltipContent} position=\"bottom\" testId=\"collab-icon-tooltip\">\n                <Component {...props}  />\n            </Tooltip>\n        </div>\n    ) : (\n        \n        <Component {...props} testId={testId} />\n    );\n};\n\nconst Icon = withTooltip(IconWrapper);\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoB;AACpB,yBAA+B;AAC/B,wBAAuB;AACvB,oBAA6B;AAyCb;AA3BhB,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyD;AACrD,QAAM,gBAAgB,kCAAe,IAAI;AAEzC,QAAM,cAAc,CAAC,MAA8C;AAC/D,QAAI,SAAU;AACd,cAAU,CAAC;AAAA,EACf;AAGA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,qBAAqB;AAAA,MACxC;AAAA,MACA,SAAS;AAAA,MACT,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,0BACG;AAAA,QAAC;AAAA;AAAA,UACG,eAAW,kBAAAA;AAAA,YACP;AAAA,gBACA,4BAAa,EAAE,aAAa;AAAA,YAC5B;AAAA,UACJ;AAAA;AAAA,MACJ,IACA;AAAA;AAAA,EACR;AAER;AAEA,IAAM,cAAc,CAAC,cAAkC,CAAC;AAAA,EACpD,aAAAC,eAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,GAAG;AACP,MAAiB;AACb,SAAOA,gBAAe,iBAClB,4CAAC,SAAI,eAAa,QACd,sDAAC,eAAAC,SAAA,EAAQ,SAAS,gBAAgB,UAAS,UAAS,QAAO,uBACvD,sDAAC,aAAW,GAAG,OAAQ,GAC3B,GACJ,IAGA,4CAAC,aAAW,GAAG,OAAO,QAAgB;AAE9C;AAEA,IAAM,OAAO,YAAY,WAAW;AAEpC,IAAO,eAAQ;","names":["classNames","withTooltip","Tooltip"]}

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.d.cts

@@ -12,6 +12,7 @@ interface IconProps {
     withTooltip?: boolean;
     onClick?: JSX.MouseEventHandler<HTMLDivElement>;
     testId?: string;
+    disabled?: boolean;
 }
 declare const Icon: ({ withTooltip, tooltipContent, testId, ...props }: IconProps) => React.JSX.Element;
 

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.d.ts

@@ -12,6 +12,7 @@ interface IconProps {
     withTooltip?: boolean;
     onClick?: JSX.MouseEventHandler<HTMLDivElement>;
     testId?: string;
+    disabled?: boolean;
 }
 declare const Icon: ({ withTooltip, tooltipContent, testId, ...props }: IconProps) => React.JSX.Element;
 

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.js

@@ -11,9 +11,14 @@ var IconWrapper = ({
   className,
   onClick,
   testId,
+  disabled,
   ...otherProps
 }) => {
   const IconComponent = iconComponents[icon];
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -21,7 +26,7 @@ var IconWrapper = ({
         "collab-icon-wrapper",
         collabStyles()["collab-icon-wrapper"]
       ),
-      onClick,
+      onClick: handleClick,
       "data-testid": testId,
       ...otherProps,
       children: IconComponent ? /* @__PURE__ */ jsx(

package/dist/modern/visualBuilder/components/Collab/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Icon/Icon.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\nexport interface IconProps {\n    icon: IconName;\n    tooltipContent?: string;\n    className?: string;\n    withTooltip?: boolean;\n    onClick?: JSX.MouseEventHandler<HTMLDivElement>;\n    testId?: string;\n}\n\nconst IconWrapper = ({\n    icon,\n    className,\n    onClick,\n    testId, \n    ...otherProps\n}: Omit<IconProps, \"withTooltip\" | \"tooltipContent\">) => {\n    const IconComponent = iconComponents[icon];\n\n    return (\n        <div\n            className={classNames(\n                \"collab-icon-wrapper\",\n                collabStyles()[\"collab-icon-wrapper\"]\n            )}\n            onClick={onClick}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {IconComponent ? (\n                <IconComponent\n                    className={classNames(\n                        \"collab-icon\",\n                        collabStyles()[\"collab-icon\"],\n                        className\n                    )}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nconst withTooltip = (Component: typeof IconWrapper) => ({\n    withTooltip = false,\n    tooltipContent = \"\",\n    testId = \"collab-icon\",\n    ...props\n}: IconProps) => {\n    return withTooltip && tooltipContent ? (\n        <div data-testid={testId}>\n            <Tooltip content={tooltipContent} position=\"bottom\" testId=\"collab-icon-tooltip\">\n                <Component {...props}  />\n            </Tooltip>\n        </div>\n    ) : (\n        \n        <Component {...props} testId={testId} />\n    );\n};\n\nconst Icon = withTooltip(IconWrapper);\n\nexport default Icon;\n"],"mappings":";;;AAGA,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,oBAAoB;AAiCb;AApBhB,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyD;AACrD,QAAM,gBAAgB,eAAe,IAAI;AAEzC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,qBAAqB;AAAA,MACxC;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,0BACG;AAAA,QAAC;AAAA;AAAA,UACG,WAAW;AAAA,YACP;AAAA,YACA,aAAa,EAAE,aAAa;AAAA,YAC5B;AAAA,UACJ;AAAA;AAAA,MACJ,IACA;AAAA;AAAA,EACR;AAER;AAEA,IAAM,cAAc,CAAC,cAAkC,CAAC;AAAA,EACpD,aAAAA,eAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,GAAG;AACP,MAAiB;AACb,SAAOA,gBAAe,iBAClB,oBAAC,SAAI,eAAa,QACd,8BAAC,WAAQ,SAAS,gBAAgB,UAAS,UAAS,QAAO,uBACvD,8BAAC,aAAW,GAAG,OAAQ,GAC3B,GACJ,IAGA,oBAAC,aAAW,GAAG,OAAO,QAAgB;AAE9C;AAEA,IAAM,OAAO,YAAY,WAAW;AAEpC,IAAO,eAAQ;","names":["withTooltip"]}
+{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Icon/Icon.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport classNames from \"classnames\";\nimport { collabStyles } from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\nexport interface IconProps {\n    icon: IconName;\n    tooltipContent?: string;\n    className?: string;\n    withTooltip?: boolean;\n    onClick?: JSX.MouseEventHandler<HTMLDivElement>;\n    testId?: string;\n    disabled?: boolean; \n}\n\nconst IconWrapper = ({\n    icon,\n    className,\n    onClick,\n    testId, \n    disabled,\n    ...otherProps\n}: Omit<IconProps, \"withTooltip\" | \"tooltipContent\">) => {\n    const IconComponent = iconComponents[icon];\n\n    const handleClick = (e: JSX.TargetedMouseEvent<HTMLDivElement>) => {\n        if (disabled) return; \n        onClick?.(e);\n    };\n\n\n    return (\n        <div\n            className={classNames(\n                \"collab-icon-wrapper\",\n                collabStyles()[\"collab-icon-wrapper\"]\n            )}\n            onClick={handleClick}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {IconComponent ? (\n                <IconComponent\n                    className={classNames(\n                        \"collab-icon\",\n                        collabStyles()[\"collab-icon\"],\n                        className\n                    )}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nconst withTooltip = (Component: typeof IconWrapper) => ({\n    withTooltip = false,\n    tooltipContent = \"\",\n    testId = \"collab-icon\",\n    ...props\n}: IconProps) => {\n    return withTooltip && tooltipContent ? (\n        <div data-testid={testId}>\n            <Tooltip content={tooltipContent} position=\"bottom\" testId=\"collab-icon-tooltip\">\n                <Component {...props}  />\n            </Tooltip>\n        </div>\n    ) : (\n        \n        <Component {...props} testId={testId} />\n    );\n};\n\nconst Icon = withTooltip(IconWrapper);\n\nexport default Icon;\n"],"mappings":";;;AAGA,OAAO,aAAa;AACpB,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AACvB,SAAS,oBAAoB;AAyCb;AA3BhB,IAAM,cAAc,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyD;AACrD,QAAM,gBAAgB,eAAe,IAAI;AAEzC,QAAM,cAAc,CAAC,MAA8C;AAC/D,QAAI,SAAU;AACd,cAAU,CAAC;AAAA,EACf;AAGA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA,aAAa,EAAE,qBAAqB;AAAA,MACxC;AAAA,MACA,SAAS;AAAA,MACT,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,0BACG;AAAA,QAAC;AAAA;AAAA,UACG,WAAW;AAAA,YACP;AAAA,YACA,aAAa,EAAE,aAAa;AAAA,YAC5B;AAAA,UACJ;AAAA;AAAA,MACJ,IACA;AAAA;AAAA,EACR;AAER;AAEA,IAAM,cAAc,CAAC,cAAkC,CAAC;AAAA,EACpD,aAAAA,eAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,GAAG;AACP,MAAiB;AACb,SAAOA,gBAAe,iBAClB,oBAAC,SAAI,eAAa,QACd,8BAAC,WAAQ,SAAS,gBAAgB,UAAS,UAAS,QAAO,uBACvD,8BAAC,aAAW,GAAG,OAAQ,GAC3B,GACJ,IAGA,oBAAC,aAAW,GAAG,OAAO,QAAgB;AAE9C;AAEA,IAAM,OAAO,YAAY,WAAW;AAEpC,IAAO,eAAQ;","names":["withTooltip"]}