@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260722072521 → 0.8.1-dev.20260722072620

package/dist/{InputControlClient-QQCQD4EG.mjs → InputControlClient-5RK7QDZZ.mjs}

@@ -24,7 +24,7 @@ import {
 import {
   Button_default,
   ClientButton_default
-} from "./chunk-YL6E76X2.mjs";
+} from "./chunk-RHVNJMS4.mjs";
 import "./chunk-56HSDML5.mjs";
 
 // src/components/controls/edit/InputControlClient.tsx
@@ -642,32 +642,32 @@ var SwitchInput_default = SwitchInput;
 
 // src/components/controls/edit/InputControlClient.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var InputControl = React5.forwardRef(
+var ControlComponents = {
+  [InputControlType_default.lineTextInput]: LineTextInput_default,
+  [InputControlType_default.emailInput]: EmailInput_default,
+  [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
+  [InputControlType_default.moneyInput]: MoneyInput_default,
+  [InputControlType_default.select]: Select_default,
+  [InputControlType_default.percentageInput]: PercentageInput_default,
+  [InputControlType_default.phoneInput]: PhoneInput_default,
+  [InputControlType_default.numberInput]: NumberInput_default,
+  [InputControlType_default.checkboxInput]: CheckboxInput_default,
+  [InputControlType_default.otpInput]: OtpInput_default,
+  [InputControlType_default.datetimeInput]: DateTimeInput_default,
+  [InputControlType_default.colorInput]: ColorInput_default,
+  [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
+  [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
+  [InputControlType_default.booleanSelect]: BooleanSelect_default,
+  [InputControlType_default.timeInput]: TimeInput_default,
+  [InputControlType_default.asset]: AssetUpload_default,
+  [InputControlType_default.switchInput]: SwitchInput_default
+};
+var InputControl = React5.memo(React5.forwardRef(
   (props, ref) => {
-    const ControlComponents = {
-      [InputControlType_default.lineTextInput]: LineTextInput_default,
-      [InputControlType_default.emailInput]: EmailInput_default,
-      [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
-      [InputControlType_default.moneyInput]: MoneyInput_default,
-      [InputControlType_default.select]: Select_default,
-      [InputControlType_default.percentageInput]: PercentageInput_default,
-      [InputControlType_default.phoneInput]: PhoneInput_default,
-      [InputControlType_default.numberInput]: NumberInput_default,
-      [InputControlType_default.checkboxInput]: CheckboxInput_default,
-      [InputControlType_default.otpInput]: OtpInput_default,
-      [InputControlType_default.datetimeInput]: DateTimeInput_default,
-      [InputControlType_default.colorInput]: ColorInput_default,
-      [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
-      [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
-      [InputControlType_default.booleanSelect]: BooleanSelect_default,
-      [InputControlType_default.timeInput]: TimeInput_default,
-      [InputControlType_default.asset]: AssetUpload_default,
-      [InputControlType_default.switchInput]: SwitchInput_default
-    };
     const SelectedControlComponent = ControlComponents[props.controlType];
     return /* @__PURE__ */ jsx5(React5.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx5(SelectedControlComponent, { ...props }) : "Control not found" });
   }
-);
+));
 InputControl.displayName = "InputControl";
 var InputControlClient_default = InputControl;
 export {

package/dist/{InputControlClient-QAZKQLFO.mjs → InputControlClient-7FJWGZDN.mjs}

@@ -26,7 +26,7 @@ import {
 import {
   Button_default,
   ClientButton_default
-} from "./chunk-JKP4XOZB.mjs";
+} from "./chunk-23WJE3YB.mjs";
 import "./chunk-IMNQO57B.mjs";
 
 // src/components/controls/edit/InputControlClient.tsx
@@ -644,32 +644,32 @@ var SwitchInput_default = SwitchInput;
 
 // src/components/controls/edit/InputControlClient.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var InputControl = React5.forwardRef(
+var ControlComponents = {
+  [InputControlType_default.lineTextInput]: LineTextInput_default,
+  [InputControlType_default.emailInput]: EmailInput_default,
+  [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
+  [InputControlType_default.moneyInput]: MoneyInput_default,
+  [InputControlType_default.select]: Select_default,
+  [InputControlType_default.percentageInput]: PercentageInput_default,
+  [InputControlType_default.phoneInput]: PhoneInput_default,
+  [InputControlType_default.numberInput]: NumberInput_default,
+  [InputControlType_default.checkboxInput]: CheckboxInput_default,
+  [InputControlType_default.otpInput]: OtpInput_default,
+  [InputControlType_default.datetimeInput]: DateTimeInput_default,
+  [InputControlType_default.colorInput]: ColorInput_default,
+  [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
+  [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
+  [InputControlType_default.booleanSelect]: BooleanSelect_default,
+  [InputControlType_default.timeInput]: TimeInput_default,
+  [InputControlType_default.asset]: AssetUpload_default,
+  [InputControlType_default.switchInput]: SwitchInput_default
+};
+var InputControl = React5.memo(React5.forwardRef(
   (props, ref) => {
-    const ControlComponents = {
-      [InputControlType_default.lineTextInput]: LineTextInput_default,
-      [InputControlType_default.emailInput]: EmailInput_default,
-      [InputControlType_default.multilineTextInput]: MultilineTextInput_default,
-      [InputControlType_default.moneyInput]: MoneyInput_default,
-      [InputControlType_default.select]: Select_default,
-      [InputControlType_default.percentageInput]: PercentageInput_default,
-      [InputControlType_default.phoneInput]: PhoneInput_default,
-      [InputControlType_default.numberInput]: NumberInput_default,
-      [InputControlType_default.checkboxInput]: CheckboxInput_default,
-      [InputControlType_default.otpInput]: OtpInput_default,
-      [InputControlType_default.datetimeInput]: DateTimeInput_default,
-      [InputControlType_default.colorInput]: ColorInput_default,
-      [InputControlType_default.selectWithSearchInput]: SelectWithSearchInput_default,
-      [InputControlType_default.selectWithSearchPanel]: SelectWithSearchPanel_default,
-      [InputControlType_default.booleanSelect]: BooleanSelect_default,
-      [InputControlType_default.timeInput]: TimeInput_default,
-      [InputControlType_default.asset]: AssetUpload_default,
-      [InputControlType_default.switchInput]: SwitchInput_default
-    };
     const SelectedControlComponent = ControlComponents[props.controlType];
     return /* @__PURE__ */ jsx5(React5.Fragment, { children: SelectedControlComponent ? /* @__PURE__ */ jsx5(SelectedControlComponent, { ...props }) : "Control not found" });
   }
-);
+));
 InputControl.displayName = "InputControl";
 var InputControlClient_default = InputControl;
 export {

package/dist/{LinkNodeButton-LX3KKGZY.mjs → LinkNodeButton-AOEDCCL7.mjs}

@@ -7,15 +7,17 @@ import {
 import {
   Button_default,
   ToastService_default
-} from "./chunk-JKP4XOZB.mjs";
+} from "./chunk-23WJE3YB.mjs";
 import "./chunk-IMNQO57B.mjs";
 
 // src/components/pageRenderingEngine/nodes/LinkNodeButton.tsx
 import { useCallback, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var LinkNodeButton = (props) => {
   const { node, dataitem, children, linkText, linkType, linkUrl } = props;
   const [isLoading, setIsLoading] = useState(false);
+  const [successMessage, setSuccessMessage] = useState(null);
+  console.log("LinkNodeButton props:", props);
   const extractFieldNames = useCallback((template) => {
     if (!template) return [];
     const regex = /\{(\{\})?([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\}\})?\}/g;
@@ -23,35 +25,38 @@ var LinkNodeButton = (props) => {
     const fieldNames = matches.map((match) => match[2] || match[1]).filter((name, index, self) => self.indexOf(name) === index);
     return fieldNames;
   }, []);
-  const replaceTemplateVariables = useCallback((template, responseData) => {
-    if (!template) return template;
-    let result = template;
-    const fieldNames = extractFieldNames(template);
-    if (responseData) {
-      fieldNames.forEach((fieldName) => {
-        const value = getNestedValue(responseData, fieldName);
-        if (value !== void 0) {
-          const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
-          const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
-          result = result.replace(regex1, String(value));
-          result = result.replace(regex2, String(value));
-        }
-      });
-    }
-    if (props.routeParameters) {
-      Object.entries(props.routeParameters).forEach(([key, value]) => {
-        const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-        result = result.replace(regex, String(value));
-      });
-    }
-    if (dataitem) {
-      Object.entries(dataitem).forEach(([key, value]) => {
-        const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-        result = result.replace(regex, String(value));
-      });
-    }
-    return result;
-  }, [props.routeParameters, dataitem, extractFieldNames]);
+  const replaceTemplateVariables = useCallback(
+    (template, responseData) => {
+      if (!template) return template;
+      let result = template;
+      const fieldNames = extractFieldNames(template);
+      if (responseData) {
+        fieldNames.forEach((fieldName) => {
+          const value = getNestedValue(responseData, fieldName);
+          if (value !== void 0) {
+            const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
+            const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
+            result = result.replace(regex1, String(value));
+            result = result.replace(regex2, String(value));
+          }
+        });
+      }
+      if (props.routeParameters) {
+        Object.entries(props.routeParameters).forEach(([key, value]) => {
+          const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+          result = result.replace(regex, String(value));
+        });
+      }
+      if (dataitem) {
+        Object.entries(dataitem).forEach(([key, value]) => {
+          const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+          result = result.replace(regex, String(value));
+        });
+      }
+      return result;
+    },
+    [props.routeParameters, dataitem, extractFieldNames]
+  );
   const getNestedValue = useCallback((obj, path) => {
     if (!obj || !path) return void 0;
     if (obj[path] !== void 0) {
@@ -69,7 +74,10 @@ var LinkNodeButton = (props) => {
   }, []);
   const onClick = useCallback(async () => {
     if (!node.postUrl) {
-      return { isSuccessful: false, message: "No POST URL configured for this button" };
+      return {
+        isSuccessful: false,
+        message: "No POST URL configured for this button"
+      };
     }
     setIsLoading(true);
     try {
@@ -95,6 +103,7 @@ var LinkNodeButton = (props) => {
       }
       if (response?.message) {
         ToastService_default.showSuccess(response.message);
+        setSuccessMessage(response.message);
       }
       if (response && node.redirectUrl) {
         const fieldNames = extractFieldNames(node.redirectUrl);
@@ -117,7 +126,9 @@ var LinkNodeButton = (props) => {
           }
         });
         console.log("Field value map:", fieldValueMap);
-        const missingFields = fieldNames.filter((fieldName) => !fieldValueMap[fieldName]);
+        const missingFields = fieldNames.filter(
+          (fieldName) => !fieldValueMap[fieldName]
+        );
         if (missingFields.length > 0) {
           console.warn(`Missing field values for: ${missingFields.join(", ")}`);
         }
@@ -128,7 +139,10 @@ var LinkNodeButton = (props) => {
           resolvedRedirectUrl = resolvedRedirectUrl.replace(regex1, value);
           resolvedRedirectUrl = resolvedRedirectUrl.replace(regex2, value);
         });
-        resolvedRedirectUrl = replaceTemplateVariables(resolvedRedirectUrl, response);
+        resolvedRedirectUrl = replaceTemplateVariables(
+          resolvedRedirectUrl,
+          response
+        );
         console.log("Final redirect URL:", resolvedRedirectUrl);
         if (resolvedRedirectUrl && !resolvedRedirectUrl.includes("{")) {
           window.location.href = resolvedRedirectUrl;
@@ -139,14 +153,27 @@ var LinkNodeButton = (props) => {
         return { isSuccessful: false, message: errorMessage };
       }
       setIsLoading(false);
-      return { isSuccessful: true, message: response?.message, result: response };
+      return {
+        isSuccessful: true,
+        message: response?.message,
+        result: response
+      };
     } catch (err) {
       console.error("Button API call failed:", err);
       const errorMessage = err.message || "An unexpected error occurred";
       setIsLoading(false);
       return { isSuccessful: false, message: errorMessage };
     }
-  }, [node.postUrl, node.payload, node.redirectUrl, replaceTemplateVariables, extractFieldNames, getNestedValue, props.apiBaseUrl, props.session]);
+  }, [
+    node.postUrl,
+    node.payload,
+    node.redirectUrl,
+    replaceTemplateVariables,
+    extractFieldNames,
+    getNestedValue,
+    props.apiBaseUrl,
+    props.session
+  ]);
   const renderButtonContent = () => {
     if (children) {
       return children;
@@ -156,14 +183,41 @@ var LinkNodeButton = (props) => {
     }
     return node.title || "Button";
   };
+  const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
   return /* @__PURE__ */ jsx("div", { className: "link-button-wrapper", children: /* @__PURE__ */ jsx(
     Button_default,
     {
       ButtonType: linkType,
       onClick,
-      disabled: isLoading,
+      disabled: isLoading || !!successMessage,
       className: "w-full",
-      children: renderButtonContent()
+      children: successMessage ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: fontSize ? { fontSize } : void 0,
+          className: "inline-flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                className: "w-5 h-5",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M16.704 5.29a1 1 0 010 1.42l-7.25 7.25a1 1 0 01-1.415 0L3.29 9.21a1 1 0 111.415-1.414l4.042 4.042 6.543-6.543a1 1 0 011.414 0z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: successMessage })
+          ]
+        }
+      ) : renderButtonContent()
     }
   ) });
 };

package/dist/{LinkNodeButton-XA7Z5IDR.mjs → LinkNodeButton-BIZA2NPE.mjs}

@@ -5,15 +5,17 @@ import {
 import {
   Button_default,
   ToastService_default
-} from "./chunk-YL6E76X2.mjs";
+} from "./chunk-RHVNJMS4.mjs";
 import "./chunk-56HSDML5.mjs";
 
 // src/components/pageRenderingEngine/nodes/LinkNodeButton.tsx
 import { useCallback, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var LinkNodeButton = (props) => {
   const { node, dataitem, children, linkText, linkType, linkUrl } = props;
   const [isLoading, setIsLoading] = useState(false);
+  const [successMessage, setSuccessMessage] = useState(null);
+  console.log("LinkNodeButton props:", props);
   const extractFieldNames = useCallback((template) => {
     if (!template) return [];
     const regex = /\{(\{\})?([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\}\})?\}/g;
@@ -21,35 +23,38 @@ var LinkNodeButton = (props) => {
     const fieldNames = matches.map((match) => match[2] || match[1]).filter((name, index, self) => self.indexOf(name) === index);
     return fieldNames;
   }, []);
-  const replaceTemplateVariables = useCallback((template, responseData) => {
-    if (!template) return template;
-    let result = template;
-    const fieldNames = extractFieldNames(template);
-    if (responseData) {
-      fieldNames.forEach((fieldName) => {
-        const value = getNestedValue(responseData, fieldName);
-        if (value !== void 0) {
-          const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
-          const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
-          result = result.replace(regex1, String(value));
-          result = result.replace(regex2, String(value));
-        }
-      });
-    }
-    if (props.routeParameters) {
-      Object.entries(props.routeParameters).forEach(([key, value]) => {
-        const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-        result = result.replace(regex, String(value));
-      });
-    }
-    if (dataitem) {
-      Object.entries(dataitem).forEach(([key, value]) => {
-        const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
-        result = result.replace(regex, String(value));
-      });
-    }
-    return result;
-  }, [props.routeParameters, dataitem, extractFieldNames]);
+  const replaceTemplateVariables = useCallback(
+    (template, responseData) => {
+      if (!template) return template;
+      let result = template;
+      const fieldNames = extractFieldNames(template);
+      if (responseData) {
+        fieldNames.forEach((fieldName) => {
+          const value = getNestedValue(responseData, fieldName);
+          if (value !== void 0) {
+            const regex1 = new RegExp(`\\{${fieldName}\\}`, "g");
+            const regex2 = new RegExp(`\\{\\{${fieldName}\\}\\}`, "g");
+            result = result.replace(regex1, String(value));
+            result = result.replace(regex2, String(value));
+          }
+        });
+      }
+      if (props.routeParameters) {
+        Object.entries(props.routeParameters).forEach(([key, value]) => {
+          const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+          result = result.replace(regex, String(value));
+        });
+      }
+      if (dataitem) {
+        Object.entries(dataitem).forEach(([key, value]) => {
+          const regex = new RegExp(`\\{\\{${key}\\}\\}`, "g");
+          result = result.replace(regex, String(value));
+        });
+      }
+      return result;
+    },
+    [props.routeParameters, dataitem, extractFieldNames]
+  );
   const getNestedValue = useCallback((obj, path) => {
     if (!obj || !path) return void 0;
     if (obj[path] !== void 0) {
@@ -67,7 +72,10 @@ var LinkNodeButton = (props) => {
   }, []);
   const onClick = useCallback(async () => {
     if (!node.postUrl) {
-      return { isSuccessful: false, message: "No POST URL configured for this button" };
+      return {
+        isSuccessful: false,
+        message: "No POST URL configured for this button"
+      };
     }
     setIsLoading(true);
     try {
@@ -93,6 +101,7 @@ var LinkNodeButton = (props) => {
       }
       if (response?.message) {
         ToastService_default.showSuccess(response.message);
+        setSuccessMessage(response.message);
       }
       if (response && node.redirectUrl) {
         const fieldNames = extractFieldNames(node.redirectUrl);
@@ -115,7 +124,9 @@ var LinkNodeButton = (props) => {
           }
         });
         console.log("Field value map:", fieldValueMap);
-        const missingFields = fieldNames.filter((fieldName) => !fieldValueMap[fieldName]);
+        const missingFields = fieldNames.filter(
+          (fieldName) => !fieldValueMap[fieldName]
+        );
         if (missingFields.length > 0) {
           console.warn(`Missing field values for: ${missingFields.join(", ")}`);
         }
@@ -126,7 +137,10 @@ var LinkNodeButton = (props) => {
           resolvedRedirectUrl = resolvedRedirectUrl.replace(regex1, value);
           resolvedRedirectUrl = resolvedRedirectUrl.replace(regex2, value);
         });
-        resolvedRedirectUrl = replaceTemplateVariables(resolvedRedirectUrl, response);
+        resolvedRedirectUrl = replaceTemplateVariables(
+          resolvedRedirectUrl,
+          response
+        );
         console.log("Final redirect URL:", resolvedRedirectUrl);
         if (resolvedRedirectUrl && !resolvedRedirectUrl.includes("{")) {
           window.location.href = resolvedRedirectUrl;
@@ -137,14 +151,27 @@ var LinkNodeButton = (props) => {
         return { isSuccessful: false, message: errorMessage };
       }
       setIsLoading(false);
-      return { isSuccessful: true, message: response?.message, result: response };
+      return {
+        isSuccessful: true,
+        message: response?.message,
+        result: response
+      };
     } catch (err) {
       console.error("Button API call failed:", err);
       const errorMessage = err.message || "An unexpected error occurred";
       setIsLoading(false);
       return { isSuccessful: false, message: errorMessage };
     }
-  }, [node.postUrl, node.payload, node.redirectUrl, replaceTemplateVariables, extractFieldNames, getNestedValue, props.apiBaseUrl, props.session]);
+  }, [
+    node.postUrl,
+    node.payload,
+    node.redirectUrl,
+    replaceTemplateVariables,
+    extractFieldNames,
+    getNestedValue,
+    props.apiBaseUrl,
+    props.session
+  ]);
   const renderButtonContent = () => {
     if (children) {
       return children;
@@ -154,14 +181,41 @@ var LinkNodeButton = (props) => {
     }
     return node.title || "Button";
   };
+  const fontSize = node.children?.[0]?.style?.match(/font-size:\s*([^;]+)/)?.[1];
   return /* @__PURE__ */ jsx("div", { className: "link-button-wrapper", children: /* @__PURE__ */ jsx(
     Button_default,
     {
       ButtonType: linkType,
       onClick,
-      disabled: isLoading,
+      disabled: isLoading || !!successMessage,
       className: "w-full",
-      children: renderButtonContent()
+      children: successMessage ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: fontSize ? { fontSize } : void 0,
+          className: "inline-flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                className: "w-5 h-5",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M16.704 5.29a1 1 0 010 1.42l-7.25 7.25a1 1 0 01-1.415 0L3.29 9.21a1 1 0 111.415-1.414l4.042 4.042 6.543-6.543a1 1 0 011.414 0z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: successMessage })
+          ]
+        }
+      ) : renderButtonContent()
     }
   ) });
 };

package/dist/{chunk-JKP4XOZB.mjs → chunk-23WJE3YB.mjs}

@@ -129,7 +129,7 @@ var Confirm_default = Confirm;
 }
 
 // src/components/Button.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Button = (props) => {
   const [inProgress, setInProgress] = useState2(false);
   const [isActionPerformed, setIsActionPerformed] = useState2(false);
@@ -139,7 +139,9 @@ var Button = (props) => {
     event.preventDefault();
     event.stopPropagation();
     if (props.confirm) {
-      const confirmed = await showConfirmation("Are you sure you want to delete this item?");
+      const confirmed = await showConfirmation(
+        "Are you sure you want to delete this item?"
+      );
       setShowModal(null);
       if (!confirmed) {
         return;
@@ -154,7 +156,9 @@ var Button = (props) => {
       isValid = await props.onValidate();
       if (!isValid) {
         setInProgress(false);
-        ToastService_default.showError("There are errors in the form. Please fix them before proceeding.");
+        ToastService_default.showError(
+          "There are errors in the form. Please fix them before proceeding."
+        );
         return;
       }
     }
@@ -178,7 +182,16 @@ var Button = (props) => {
     return new Promise((resolve) => {
       const onConfirm = () => resolve(true);
       const onCancel = () => resolve(false);
-      setShowModal(/* @__PURE__ */ jsx3(Confirm_default, { message: props.confirmationMessage, onConfirm, onCancel }));
+      setShowModal(
+        /* @__PURE__ */ jsx3(
+          Confirm_default,
+          {
+            message: props.confirmationMessage,
+            onConfirm,
+            onCancel
+          }
+        )
+      );
     });
   };
   let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
@@ -192,13 +205,39 @@ var Button = (props) => {
         onClick: execute,
         disabled: props.disabled,
         title: isDisabled ? "The button is disabled to prevent any action" : "",
-        className: buttonClass + " relative " + props.className,
+        className: `${buttonClass} relative inline-flex items-center justify-center gap-2 ${props.className ?? ""}`,
         children: [
           isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
-          inProgress && /* @__PURE__ */ jsx3(React3.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2("svg", { className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-            /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-            /* @__PURE__ */ jsx3("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-          ] }) })
+          inProgress && /* @__PURE__ */ jsx3(Fragment2, { children: props.hideProgressIndicator ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2(
+            "svg",
+            {
+              className: `animate-spin h-5 w-5 flex-shrink-0 ${progressClass}`,
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ) })
         ]
       }
     ),