@sparrowengg/integrations-templates-frontend 1.9.69 → 1.9.71

package/dist/cjs/commons/components/confirmation-modal.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('../../node_modules/@sparrowengg/twigs-react/dist/es/dialog/dialogs-manager/index.js');
+var alertDialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
 
 const ConfirmationModal = ({
   name,
@@ -11,45 +12,58 @@ const ConfirmationModal = ({
   onConfirm,
   onCancel
 }) => {
-  const [isLoading, setIsLoading] = React.useState(false);
-  index.dialogs.open("confirm", {
-    title: name,
-    content: description,
-    labels: {
-      confirm: "Confirm",
-      cancel: "Cancel"
+  const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
+    alertDialog.AlertDialogContent,
+    {
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      className: "dm-sans",
+      css: {
+        button: {
+          borderRadius: "8px"
+        }
+      }
     },
-    css: {
-      "*": {
-        fontFamily: "DM Sans !important"
+    /* @__PURE__ */ React.createElement(
+      alertDialog.AlertDialogTitle,
+      {
+        css: {
+          display: "flex",
+          justifyContent: "space-between",
+          border: "none !important",
+          padding: "24px $12 8px $12 !important"
+        }
       },
-      minWidth: "464px",
-      '[class$="variant-solid"]:nth-child(1)': {
-        width: "106px",
-        marginLeft: "auto"
+      name
+    ),
+    /* @__PURE__ */ React.createElement(
+      alertDialog.AlertDialogDescription,
+      {
+        css: {
+          overflowWrap: "break-word",
+          padding: "0px $12 0px $12 !important",
+          fontSize: "$sm",
+          fontWeight: "400",
+          lineHeight: "20px",
+          letterSpacing: "0px",
+          color: "$neutral800",
+          margin: "0 !important"
+        }
       },
-      "& p": {
-        margin: "0 !important"
-      }
-    },
-    confirmButtonProps: {
-      disabled: isLoading,
-      loading: isLoading,
-      color: "primary"
-    },
-    onCancel(e) {
-      onCancel();
-    },
-    async onConfirm(e) {
-      setIsLoading(true);
-      await Promise.resolve(onConfirm());
-      setIsLoading(false);
-    },
-    onClose() {
-      onCancel();
-    }
-  });
-  return /* @__PURE__ */ React.createElement(index.DialogsManager, null);
+      description
+    ),
+    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        onMouseEnter: () => setIsDeleteIconHover(true),
+        onMouseLeave: () => setIsDeleteIconHover(false),
+        color: isDeleteIconHover ? "error" : "default",
+        size: "lg",
+        onClick: onConfirm
+      },
+      "Confirm"
+    )))
+  ));
 };
 
 exports.default = ConfirmationModal;

package/dist/cjs/commons/components/confirmation-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { dialogs, DialogsManager } from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n    name: string;\n    description: string;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n};\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n    name,\n    description,\n    onConfirm,\n    onCancel\n}) => {\n    const [isLoading, setIsLoading] = useState(false);\n    dialogs.open(\"confirm\", {\n        title: name,\n        content:\n            description,\n        labels: {\n            confirm: \"Confirm\",\n            cancel: \"Cancel\",\n        },\n        css: {\n            \"*\": {\n                fontFamily: \"DM Sans !important\",\n            },\n            minWidth: \"464px\",\n            '[class$=\"variant-solid\"]:nth-child(1)': {\n                width: \"106px\",\n                marginLeft: \"auto\",\n            },\n            '& p': {\n                margin: \"0 !important\",\n            },\n        },\n        confirmButtonProps: {\n            disabled: isLoading,\n            loading: isLoading,\n            color: \"primary\",\n        },\n        onCancel(e) {\n            onCancel();\n        },\n        async onConfirm(e) {\n            setIsLoading(true);\n            await Promise.resolve(onConfirm());\n            setIsLoading(false);\n        },\n        onClose() {\n            onCancel();\n        }\n    });\n    return <DialogsManager />;\n};\nexport default ConfirmationModal;\n"],"names":["useState","dialogs","DialogsManager"],"mappings":";;;;;;;AAQA,MAAM,oBAAsD,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChD,EAAAC,aAAA,CAAQ,KAAK,SAAW,EAAA;AAAA,IACpB,KAAO,EAAA,IAAA;AAAA,IACP,OACI,EAAA,WAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACJ,OAAS,EAAA,SAAA;AAAA,MACT,MAAQ,EAAA,QAAA;AAAA,KACZ;AAAA,IACA,GAAK,EAAA;AAAA,MACD,GAAK,EAAA;AAAA,QACD,UAAY,EAAA,oBAAA;AAAA,OAChB;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,uCAAyC,EAAA;AAAA,QACrC,KAAO,EAAA,OAAA;AAAA,QACP,UAAY,EAAA,MAAA;AAAA,OAChB;AAAA,MACA,KAAO,EAAA;AAAA,QACH,MAAQ,EAAA,cAAA;AAAA,OACZ;AAAA,KACJ;AAAA,IACA,kBAAoB,EAAA;AAAA,MAChB,QAAU,EAAA,SAAA;AAAA,MACV,OAAS,EAAA,SAAA;AAAA,MACT,KAAO,EAAA,SAAA;AAAA,KACX;AAAA,IACA,SAAS,CAAG,EAAA;AACR,MAAS,QAAA,EAAA,CAAA;AAAA,KACb;AAAA,IACA,MAAM,UAAU,CAAG,EAAA;AACf,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAM,MAAA,OAAA,CAAQ,OAAQ,CAAA,SAAA,EAAW,CAAA,CAAA;AACjC,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,OAAU,GAAA;AACN,MAAS,QAAA,EAAA,CAAA;AAAA,KACb;AAAA,GACH,CAAA,CAAA;AACD,EAAA,2CAAQC,oBAAe,EAAA,IAAA,CAAA,CAAA;AAC3B;;;;"}
+{"version":3,"file":"confirmation-modal.js","sources":["../../../../src/commons/components/confirmation-modal.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {   AlertDialog,\n    AlertDialogContent,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogActions,\n    AlertDialogCancel,\n    AlertDialogAction,\n    Button, } from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n    name: string;\n    description: string;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n};\nconst ConfirmationModal: React.FC<ConfirmationModalProps> = ({\n    name,\n    description,\n    onConfirm,\n    onCancel\n}) => {\n    const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n    return  <AlertDialog open={true}>\n    <AlertDialogContent\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      className=\"dm-sans\"\n      css={{\n        button: {\n          borderRadius: '8px',\n        },\n      }}\n    >\n      <AlertDialogTitle\n        css={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          border: 'none !important',\n          padding: '24px $12 8px $12 !important',\n        }}\n      >\n        {name}\n      </AlertDialogTitle>\n\n      <AlertDialogDescription\n        css={{\n          overflowWrap: 'break-word',\n          padding: '0px $12 0px $12 !important',\n          fontSize: '$sm',\n          fontWeight: '400',\n          lineHeight: '20px',\n          letterSpacing: '0px',\n          color: '$neutral800',\n          margin: '0 !important',\n        }}\n      >\n        {description}\n      </AlertDialogDescription>\n\n      <AlertDialogActions css={{ gap: '$6' }}>\n        <AlertDialogCancel asChild onClick={onCancel}>\n          <Button color=\"default\" variant=\"solid\" size=\"lg\">\n            Cancel\n          </Button>\n        </AlertDialogCancel>\n\n        <AlertDialogAction asChild>\n          <Button\n            onMouseEnter={() => setIsDeleteIconHover(true)}\n            onMouseLeave={() => setIsDeleteIconHover(false)}\n            color={isDeleteIconHover ? 'error' : 'default'}\n            size=\"lg\"\n            onClick={onConfirm}\n          >\n            Confirm\n          </Button>\n        </AlertDialogAction>\n      </AlertDialogActions>\n    </AlertDialogContent>\n  </AlertDialog>\n};\nexport default ConfirmationModal;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAeA,MAAM,oBAAsD,CAAC;AAAA,EACzD,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChE,EAAQ,uBAAA,KAAA,CAAA,aAAA,CAACC,uBAAY,EAAA,EAAA,IAAA,EAAM,IAC3B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MACzC,SAAU,EAAA,SAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA;AAAA,UACN,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,eAAA;AAAA,UAChB,MAAQ,EAAA,iBAAA;AAAA,UACR,OAAS,EAAA,6BAAA;AAAA,SACX;AAAA,OAAA;AAAA,MAEC,IAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,YAAc,EAAA,YAAA;AAAA,UACd,OAAS,EAAA,4BAAA;AAAA,UACT,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,KAAA;AAAA,UACZ,UAAY,EAAA,MAAA;AAAA,UACZ,aAAe,EAAA,KAAA;AAAA,UACf,KAAO,EAAA,aAAA;AAAA,UACP,MAAQ,EAAA,cAAA;AAAA,SACV;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAmB,EAAA,EAAA,GAAA,EAAK,EAAE,GAAA,EAAK,IAAK,EAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAkB,OAAO,EAAA,IAAA,EAAC,OAAS,EAAA,QAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,OAAQ,EAAA,OAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EAAK,QAElD,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAACC,6BAAkB,EAAA,EAAA,OAAA,EAAO,IACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,OAAU,GAAA,SAAA;AAAA,QACrC,IAAK,EAAA,IAAA;AAAA,QACL,OAAS,EAAA,SAAA;AAAA,OAAA;AAAA,MACV,SAAA;AAAA,KAGH,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AACF;;;;"}

package/dist/cjs/commons/components/edit-confirmation.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var alertDialog = require('../../node_modules/@sparrowengg/twigs-react/dist/es/alert-dialog/alert-dialog.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+
+const EditConfirmation = ({
+  name,
+  description,
+  onConfirm,
+  onCancel
+}) => {
+  const [isDeleteIconHover, setIsDeleteIconHover] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(alertDialog.AlertDialog, { open: true }, /* @__PURE__ */ React.createElement(
+    alertDialog.AlertDialogContent,
+    {
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      className: "dm-sans",
+      css: {
+        button: {
+          borderRadius: "8px"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      alertDialog.AlertDialogTitle,
+      {
+        css: {
+          display: "flex",
+          justifyContent: "space-between",
+          border: "none !important",
+          padding: "24px $12 8px $12 !important"
+        }
+      },
+      name
+    ),
+    /* @__PURE__ */ React.createElement(
+      alertDialog.AlertDialogDescription,
+      {
+        css: {
+          overflowWrap: "break-word",
+          padding: "0px $12 0px $12 !important",
+          fontSize: "$sm",
+          fontWeight: "400",
+          lineHeight: "20px",
+          letterSpacing: "0px",
+          color: "$neutral800",
+          margin: "0 !important"
+        }
+      },
+      description
+    ),
+    /* @__PURE__ */ React.createElement(alertDialog.AlertDialogActions, { css: { gap: "$6" } }, /* @__PURE__ */ React.createElement(alertDialog.AlertDialogCancel, { asChild: true, onClick: onCancel }, /* @__PURE__ */ React.createElement(button.Button, { color: "default", variant: "solid", size: "lg" }, "Cancel")), /* @__PURE__ */ React.createElement(alertDialog.AlertDialogAction, { asChild: true }, /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        loading: isLoading,
+        onMouseEnter: () => setIsDeleteIconHover(true),
+        onMouseLeave: () => setIsDeleteIconHover(false),
+        color: isDeleteIconHover ? "secondary" : "default",
+        size: "lg",
+        onClick: async () => {
+          setIsLoading(true);
+          await onConfirm();
+          setIsLoading(false);
+        }
+      },
+      "Confirm"
+    )))
+  ));
+};
+
+exports.default = EditConfirmation;
+//# sourceMappingURL=edit-confirmation.js.map

package/dist/cjs/commons/components/edit-confirmation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-confirmation.js","sources":["../../../../src/commons/components/edit-confirmation.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogContent,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogActions,\n  AlertDialogCancel,\n  AlertDialogAction,\n  Button,\n} from \"@sparrowengg/twigs-react\";\ntype ConfirmationModalProps = {\n  name: string;\n  description: string;\n  onConfirm: () => void | Promise<void>;\n  onCancel: () => void;\n};\nconst EditConfirmation: React.FC<ConfirmationModalProps> = ({\n  name,\n  description,\n  onConfirm,\n  onCancel,\n}) => {\n  const [isDeleteIconHover, setIsDeleteIconHover] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  return (\n    <AlertDialog open={true}>\n      <AlertDialogContent\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        className=\"dm-sans\"\n        css={{\n          button: {\n            borderRadius: \"8px\",\n          },\n        }}\n      >\n        <AlertDialogTitle\n          css={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            border: \"none !important\",\n            padding: \"24px $12 8px $12 !important\",\n          }}\n        >\n          {name}\n        </AlertDialogTitle>\n\n        <AlertDialogDescription\n          css={{\n            overflowWrap: \"break-word\",\n            padding: \"0px $12 0px $12 !important\",\n            fontSize: \"$sm\",\n            fontWeight: \"400\",\n            lineHeight: \"20px\",\n            letterSpacing: \"0px\",\n            color: \"$neutral800\",\n            margin: \"0 !important\",\n          }}\n        >\n          {description}\n        </AlertDialogDescription>\n\n        <AlertDialogActions css={{ gap: \"$6\" }}>\n          <AlertDialogCancel asChild onClick={onCancel}>\n            <Button color=\"default\" variant=\"solid\" size=\"lg\">\n              Cancel\n            </Button>\n          </AlertDialogCancel>\n\n          <AlertDialogAction asChild>\n            <Button\n              loading={isLoading}\n              onMouseEnter={() => setIsDeleteIconHover(true)}\n              onMouseLeave={() => setIsDeleteIconHover(false)}\n              color={isDeleteIconHover ? \"secondary\" : \"default\"}\n              size=\"lg\"\n              onClick={async () => {\n                setIsLoading(true)\n                await onConfirm()\n                setIsLoading(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </AlertDialogAction>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\nexport default EditConfirmation;\n"],"names":["useState","AlertDialog","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogActions","AlertDialogCancel","Button","AlertDialogAction"],"mappings":";;;;;;;;AAiBA,MAAM,mBAAqD,CAAC;AAAA,EAC1D,IAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAChD,EACE,uBAAA,KAAA,CAAA,aAAA,CAACC,uBAAY,EAAA,EAAA,IAAA,EAAM,IACjB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,eAAiB,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,cAAe,EAAA;AAAA,MACzC,SAAU,EAAA,SAAA;AAAA,MACV,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA;AAAA,UACN,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OACF;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,4BAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,OAAS,EAAA,MAAA;AAAA,UACT,cAAgB,EAAA,eAAA;AAAA,UAChB,MAAQ,EAAA,iBAAA;AAAA,UACR,OAAS,EAAA,6BAAA;AAAA,SACX;AAAA,OAAA;AAAA,MAEC,IAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,kCAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,YAAc,EAAA,YAAA;AAAA,UACd,OAAS,EAAA,4BAAA;AAAA,UACT,QAAU,EAAA,KAAA;AAAA,UACV,UAAY,EAAA,KAAA;AAAA,UACZ,UAAY,EAAA,MAAA;AAAA,UACZ,aAAe,EAAA,KAAA;AAAA,UACf,KAAO,EAAA,aAAA;AAAA,UACP,MAAQ,EAAA,cAAA;AAAA,SACV;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,oBAEA,KAAA,CAAA,aAAA,CAACC,8BAAmB,EAAA,EAAA,GAAA,EAAK,EAAE,GAAA,EAAK,IAAK,EAAA,EAAA,kBAClC,KAAA,CAAA,aAAA,CAAAC,6BAAA,EAAA,EAAkB,OAAO,EAAA,IAAA,EAAC,OAAS,EAAA,QAAA,EAAA,kBACjC,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAO,KAAM,EAAA,SAAA,EAAU,OAAQ,EAAA,OAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EAAK,QAElD,CACF,CAEA,kBAAA,KAAA,CAAA,aAAA,CAACC,6BAAkB,EAAA,EAAA,OAAA,EAAO,IACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACD,aAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,SAAA;AAAA,QACT,YAAA,EAAc,MAAM,oBAAA,CAAqB,IAAI,CAAA;AAAA,QAC7C,YAAA,EAAc,MAAM,oBAAA,CAAqB,KAAK,CAAA;AAAA,QAC9C,KAAA,EAAO,oBAAoB,WAAc,GAAA,SAAA;AAAA,QACzC,IAAK,EAAA,IAAA;AAAA,QACL,SAAS,YAAY;AACnB,UAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,UAAA,MAAM,SAAU,EAAA,CAAA;AAChB,UAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,SACpB;AAAA,OAAA;AAAA,MACD,SAAA;AAAA,KAGH,CACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/commons/icons/sync.js

@@ -5,96 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const Sync = () => {
-  return /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      width: "18",
-      height: "18",
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M9 0.996874C11.9302 0.99663 14.626 2.59833 16.027 5.17188",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M17 8.99609C17 13.4144 13.4183 16.9961 9 16.9961",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M8.99966 16.9961C6.06949 16.9963 3.37365 15.3946 1.97266 12.8211",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M1 8.99609C1 4.57781 4.58172 0.996092 9 0.996092",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M1.97266 12.8223C4.08447 16.7032 8.94253 18.1373 12.8235 16.0255C15.3979 14.6246 17.0001 11.9281 16.9997 8.99726",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M1 8.99609V8.99487C0.999999 4.57659 4.58172 0.994871 9 0.994871C11.9309 0.994871 14.6271 2.59755 16.0276 5.17217",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M5.04672 12.8234H1.51172V16.3594",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        d: "M12.9531 5.17188H16.4881V1.63587",
-        stroke: "#6A6A6A",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  );
+  return /* @__PURE__ */ React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement("path", { d: "M12 3.99687C14.9302 3.99663 17.626 5.59833 19.027 8.17188", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M20 11.9961C20 16.4144 16.4183 19.9961 12 19.9961", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M11.9997 19.9961C9.06949 19.9963 6.37365 18.3946 4.97266 15.8211", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M4 11.9961C4 7.57781 7.58172 3.99609 12 3.99609", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M4.97266 15.8223C7.08447 19.7032 11.9425 21.1373 15.8235 19.0255C18.3979 17.6246 20.0001 14.9281 19.9997 11.9973", stroke: "#6A6A6A", strokeWidth: "1.5", "stroke-linecap": "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M4 11.9961V11.9949C4 7.57659 7.58172 3.99487 12 3.99487C14.9309 3.99487 17.6271 5.59755 19.0276 8.17217", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M8.04672 15.8234H4.51172V19.3594", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M15.9531 8.17188H19.4881V4.63587", stroke: "#6A6A6A", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 };
 
 exports.default = Sync;

package/dist/cjs/commons/icons/sync.js.map

@@ -1 +1 @@
-{"version":3,"file":"sync.js","sources":["../../../../src/commons/icons/sync.tsx"],"sourcesContent":["import React from \"react\";\n\nconst Sync = () => {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 18 18\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M9 0.996874C11.9302 0.99663 14.626 2.59833 16.027 5.17188\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M17 8.99609C17 13.4144 13.4183 16.9961 9 16.9961\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M8.99966 16.9961C6.06949 16.9963 3.37365 15.3946 1.97266 12.8211\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M1 8.99609C1 4.57781 4.58172 0.996092 9 0.996092\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M1.97266 12.8223C4.08447 16.7032 8.94253 18.1373 12.8235 16.0255C15.3979 14.6246 17.0001 11.9281 16.9997 8.99726\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M1 8.99609V8.99487C0.999999 4.57659 4.58172 0.994871 9 0.994871C11.9309 0.994871 14.6271 2.59755 16.0276 5.17217\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M5.04672 12.8234H1.51172V16.3594\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M12.9531 5.17188H16.4881V1.63587\"\n        stroke=\"#6A6A6A\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n};\n\nexport default Sync;\n"],"names":[],"mappings":";;;;;;AAEA,MAAM,OAAO,MAAM;AACjB,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,IAAA;AAAA,MACN,MAAO,EAAA,IAAA;AAAA,MACP,OAAQ,EAAA,WAAA;AAAA,MACR,IAAK,EAAA,MAAA;AAAA,MACL,KAAM,EAAA,4BAAA;AAAA,KAAA;AAAA,oBAEN,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,2DAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kDAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kEAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kDAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kHAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kHAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kCAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAE,EAAA,kCAAA;AAAA,QACF,MAAO,EAAA,SAAA;AAAA,QACP,WAAY,EAAA,KAAA;AAAA,QACZ,aAAc,EAAA,OAAA;AAAA,QACd,cAAe,EAAA,OAAA;AAAA,OAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"sync.js","sources":["../../../../src/commons/icons/sync.tsx"],"sourcesContent":["import React from \"react\";\n\nconst Sync = () => {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M12 3.99687C14.9302 3.99663 17.626 5.59833 19.027 8.17188\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M20 11.9961C20 16.4144 16.4183 19.9961 12 19.9961\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M11.9997 19.9961C9.06949 19.9963 6.37365 18.3946 4.97266 15.8211\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M4 11.9961C4 7.57781 7.58172 3.99609 12 3.99609\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M4.97266 15.8223C7.08447 19.7032 11.9425 21.1373 15.8235 19.0255C18.3979 17.6246 20.0001 14.9281 19.9997 11.9973\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" stroke-linecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M4 11.9961V11.9949C4 7.57659 7.58172 3.99487 12 3.99487C14.9309 3.99487 17.6271 5.59755 19.0276 8.17217\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M8.04672 15.8234H4.51172V19.3594\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    <path d=\"M15.9531 8.17188H19.4881V4.63587\" stroke=\"#6A6A6A\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n    </svg>\n    \n  );\n};\n\nexport default Sync;\n"],"names":[],"mappings":";;;;;;AAEA,MAAM,OAAO,MAAM;AACjB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAM,IAAK,EAAA,MAAA,EAAO,MAAK,OAAQ,EAAA,WAAA,EAAY,IAAK,EAAA,MAAA,EAAO,KAAM,EAAA,4BAAA,EAAA,sCACjE,MAAK,EAAA,EAAA,CAAA,EAAE,2DAA4D,EAAA,MAAA,EAAO,SAAU,EAAA,WAAA,EAAY,KAAM,EAAA,aAAA,EAAc,OAAQ,EAAA,cAAA,EAAe,OAAO,EAAA,CAAA,kBAClJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,GAAE,mDAAoD,EAAA,MAAA,EAAO,SAAU,EAAA,WAAA,EAAY,KAAM,EAAA,aAAA,EAAc,OAAQ,EAAA,cAAA,EAAe,OAAO,EAAA,CAAA,kBAC1I,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,kEAAA,EAAmE,QAAO,SAAU,EAAA,WAAA,EAAY,KAAM,EAAA,aAAA,EAAc,OAAQ,EAAA,cAAA,EAAe,OAAO,EAAA,CAAA,kBACzJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,iDAAA,EAAkD,MAAO,EAAA,SAAA,EAAU,aAAY,KAAM,EAAA,aAAA,EAAc,OAAQ,EAAA,cAAA,EAAe,OAAO,EAAA,CAAA,kBACxI,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,kHAAA,EAAmH,MAAO,EAAA,SAAA,EAAU,WAAY,EAAA,KAAA,EAAM,kBAAe,OAAQ,EAAA,cAAA,EAAe,OAAO,EAAA,CAAA,kBAC1M,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,yGAAA,EAA0G,MAAO,EAAA,SAAA,EAAU,WAAY,EAAA,KAAA,EAAM,aAAc,EAAA,OAAA,EAAQ,gBAAe,OAAO,EAAA,CAAA,kBAChM,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,kCAAA,EAAmC,MAAO,EAAA,SAAA,EAAU,WAAY,EAAA,KAAA,EAAM,aAAc,EAAA,OAAA,EAAQ,cAAe,EAAA,OAAA,EAAO,mBACzH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAK,CAAE,EAAA,kCAAA,EAAmC,MAAO,EAAA,SAAA,EAAU,WAAY,EAAA,KAAA,EAAM,aAAc,EAAA,OAAA,EAAQ,cAAe,EAAA,OAAA,EAAO,CAC1H,CAAA,CAAA;AAGJ;;;;"}

package/dist/cjs/integration-template/components/dashboard.js

@@ -720,8 +720,8 @@ const TriggerDasboardItem = ({
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Confirmation",
-      description: `Are you sure you want to delete Trigger ?`,
+      name: "Delete Trigger?",
+      description: `Are you sure you want to delete the trigger? This action cannot be undone.`,
       onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
       onCancel: () => setIsDeleteModalOpen(false)
     }
@@ -794,16 +794,16 @@ const SingleMappingDashboardItem = ({
           typeof ((_f = field == null ? void 0 : field.configurationFields) == null ? void 0 : _f.spreadsheet) === "object" ? (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.spreadsheet) == null ? void 0 : _h.value) == null ? void 0 : _i.label : (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.spreadsheet) == null ? void 0 : _k.value
         )) : null))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(button.Button, { variant: "ghost", size: "lg", color: "default", css: {
+        width: "40px !important",
+        height: "40px !important",
+        marginInlineEnd: "$3"
+      } }, /* @__PURE__ */ React.createElement(
         flex.Flex,
         {
           className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
           justifyContent: "center",
           alignItems: "center",
-          css: {
-            cursor: "pointer",
-            marginInlineEnd: "$3"
-          },
           onClick: async () => {
             setIsSyncing(field.id);
             setTimeout(async () => {
@@ -813,7 +813,7 @@ const SingleMappingDashboardItem = ({
           }
         },
         /* @__PURE__ */ React.createElement(sync.default, null)
-      )), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
+      ))), (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? /* @__PURE__ */ React.createElement(
         box.Box,
         {
           css: {
@@ -990,8 +990,8 @@ const SingleMappingDashboardItem = ({
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Confirmation",
-      description: `Are you sure you want to delete Mapping ?`,
+      name: "Delete Mapping?",
+      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
       onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
       onCancel: () => setIsDeleteModalOpen(false)
     }
@@ -1102,12 +1102,12 @@ const SingleMappingChipWrapper = ({
       var _a, _b;
       const chipRef = React.useRef(null);
       const name = `${!!placeholder ? placeholder : ""}${(_a = field == null ? void 0 : field.name) != null ? _a : field == null ? void 0 : field.label}`;
-      const currentChipWidth = (_b = chipRef.current) == null ? void 0 : _b.offsetWidth;
+      (_b = chipRef.current) == null ? void 0 : _b.offsetWidth;
       return /* @__PURE__ */ React.createElement(
         tooltip.Tooltip,
         {
           delayDuration: 300,
-          content: currentChipWidth >= 220 ? name : "",
+          content: (name == null ? void 0 : name.length) > 52 ? name : "",
           size: "md",
           sideOffset: 4,
           className: "dm-sans"
@@ -1120,12 +1120,16 @@ const SingleMappingChipWrapper = ({
             css: {
               background: backgroundColor,
               borderRadius: "4px !important",
-              maxWidth: 248,
-              overflow: "hidden",
-              fontFamily: "'Roboto Mono', monospace !important",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              display: "block"
+              span: {
+                textAlign: "center !important",
+                alignContent: "center !important",
+                display: "block",
+                maxWidth: "230px",
+                overflow: "hidden",
+                fontFamily: "'Roboto Mono', monospace !important",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
             }
           },
           "$" + name
@@ -1416,8 +1420,8 @@ const DashboardItem = ({
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Confirmation",
-      description: `Are you sure you want to delete Mapping ?`,
+      name: "Delete Mapping?",
+      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
       onConfirm: () => {
         deleteFieldHandler(id);
         setIsDeleteModalOpen(false);