smartsell-ui-kit 0.0.5 → 0.1.0

package/dist/modal.cjs

@@ -26,6 +26,18 @@ module.exports = __toCommonJS(modal_exports);
 
 // src/components/Modal.tsx
 var import_react = require("react");
+
+// src/color.ts
+function withAlpha(hex, alpha) {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
+  const red = Number.parseInt(value.slice(0, 2), 16);
+  const green = Number.parseInt(value.slice(2, 4), 16);
+  const blue = Number.parseInt(value.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+
+// src/components/Modal.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultThemeColors = {
   background: "#f8fafc",
@@ -39,13 +51,16 @@ var defaultThemeColors = {
   negative: "#dc2626",
   warning: "#d97706"
 };
-var withAlpha = (hex, alpha) => {
-  const normalized = hex.replace("#", "").trim();
-  const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
-  const red = Number.parseInt(value.slice(0, 2), 16);
-  const green = Number.parseInt(value.slice(2, 4), 16);
-  const blue = Number.parseInt(value.slice(4, 6), 16);
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+var srOnlyStyle = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
 };
 var isUiKitThemeTokens = (theme) => {
   return Boolean(theme && typeof theme === "object" && "theme" in theme);
@@ -81,47 +96,111 @@ var isLikelyMobileViewport = () => {
     navigator.userAgent
   );
 };
+var createTitleId = (title) => {
+  if (typeof title === "string" || typeof title === "number") {
+    const normalized = String(title).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+    return `smartsell-modal-${normalized || "dialog"}`;
+  }
+  return "smartsell-modal-dialog";
+};
 var isLegacyModalProps = (props) => {
   return "showModal" in props;
 };
-function LegacyActionButton({
-  label,
-  onClick,
-  disabled,
-  type = "contained",
-  theme,
-  style
+var normalizeLegacyAction = (action, fallbackDisabled = false) => {
+  var _a, _b, _c;
+  return {
+    label: action.name,
+    onClick: action.onClick,
+    appearance: (_a = action.type) != null ? _a : "contained",
+    style: (_b = action.style) != null ? _b : { maxWidth: "150px" },
+    disabled: (_c = action.disable) != null ? _c : fallbackDisabled
+  };
+};
+var normalizeModalProps = (props) => {
+  var _a, _b;
+  if (!isLegacyModalProps(props)) {
+    return props;
+  }
+  const isBusy = Boolean(props.isLoading);
+  const disableAction = Boolean(props.disableActionBtn || props.isLoading);
+  return {
+    isOpen: props.showModal,
+    onClose: props.closeModal,
+    title: props.title,
+    children: props.children,
+    theme: props.theme,
+    maximized: props.maximized,
+    contentStyle: props.style,
+    bodyStyle: props.bodyStyle,
+    hideCloseButton: props.hideCloseIcon,
+    disableDismiss: isBusy,
+    closeOnBackdrop: false,
+    closeOnEscape: false,
+    isBusy,
+    closeAction: props.onlyCloseButton ? {
+      label: "Close",
+      onClick: props.closeModal,
+      appearance: "contained",
+      disabled: isBusy
+    } : void 0,
+    cancelAction: props.onlyCloseButton || !props.cancelButton ? void 0 : {
+      label: "Cancel",
+      onClick: props.cancelButton,
+      appearance: "text",
+      style: { maxWidth: "100px" }
+    },
+    confirmAction: props.onlyCloseButton || props.hideActionButton || !props.action ? void 0 : {
+      label: (_a = props.actionNameBtn) != null ? _a : "Save",
+      onClick: props.action,
+      appearance: "contained",
+      style: { maxWidth: "100px" },
+      disabled: disableAction
+    },
+    extraActions: props.onlyCloseButton ? void 0 : (_b = props.additionalActions) == null ? void 0 : _b.map((action) => normalizeLegacyAction(action, disableAction))
+  };
+};
+function ModalActionButton({
+  action,
+  theme
 }) {
   var _a, _b;
   const { colors } = theme;
+  const {
+    label,
+    onClick,
+    appearance = "contained",
+    disabled = false,
+    style
+  } = action;
   const buttonStyle = {
     width: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "0.4rem",
-    padding: type === "link" ? 0 : "1.3rem",
+    padding: appearance === "link" ? 0 : "0.9rem 1.15rem",
     boxSizing: "border-box",
     cursor: disabled ? "not-allowed" : "pointer",
     fontWeight: 700,
-    fontSize: "1.3rem",
+    fontSize: "1.05rem",
+    lineHeight: 1.2,
     margin: 0,
     textAlign: "center",
     transition: "0.5s",
     opacity: disabled ? 0.5 : 1,
     filter: disabled ? "saturate(0)" : void 0
   };
-  if (type === "text") {
+  if (appearance === "text") {
     buttonStyle.background = "none";
     buttonStyle.border = "1px solid transparent";
     buttonStyle.color = colors.primary;
     buttonStyle.boxShadow = "none";
-  } else if (type === "link") {
+  } else if (appearance === "link") {
     buttonStyle.background = "none";
     buttonStyle.border = "none";
     buttonStyle.color = colors.primary;
     buttonStyle.boxShadow = "none";
-  } else if (type === "outlined") {
+  } else if (appearance === "outlined") {
     buttonStyle.background = "none";
     buttonStyle.border = `2px solid ${colors.primary}`;
     buttonStyle.color = colors.primary;
@@ -140,7 +219,7 @@ function LegacyActionButton({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        margin: "0 5px",
+        margin: 0,
         marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
         ...style
       },
@@ -157,29 +236,91 @@ function LegacyActionButton({
     }
   );
 }
-function StandardModal({
+function ModalBusyIndicator({
+  theme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "aria-live": "polite",
+      role: "status",
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 56,
+        height: 56,
+        borderRadius: 999,
+        backgroundColor: withAlpha(theme.colors.surface, 0.88),
+        boxShadow: `0 18px 36px ${withAlpha(theme.colors.onSurface, 0.08)}`
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: srOnlyStyle, children: "Loading" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { "aria-hidden": "true", width: "32", height: "32", viewBox: "0 0 40 40", fill: "none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "circle",
+            {
+              cx: "20",
+              cy: "20",
+              r: "16",
+              stroke: withAlpha(theme.colors.onSurface, 0.12),
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M20 4C28.837 4 36 11.163 36 20",
+              stroke: theme.colors.primary,
+              strokeWidth: "4",
+              strokeLinecap: "round",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  type: "rotate",
+                  from: "0 20 20",
+                  to: "360 20 20",
+                  dur: "0.75s",
+                  repeatCount: "indefinite"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function UnifiedModal({
   isOpen,
   onClose,
   children,
-  footer,
   title,
-  description,
   headerContent,
+  footer,
+  confirmAction,
+  cancelAction,
+  closeAction,
+  extraActions,
   maxWidth,
   closeOnBackdrop = true,
   closeOnEscape = true,
   hideCloseButton = false,
   hideExpandButton = false,
+  disableDismiss = false,
   maximized,
   contentStyle,
+  bodyStyle,
+  isBusy = false,
   theme
 }) {
+  var _a, _b;
   const modalTheme = (0, import_react.useMemo)(() => resolveTheme(theme), [theme]);
   const [isMaximized, setIsMaximized] = (0, import_react.useState)(maximized != null ? maximized : false);
-  const titleId = (0, import_react.useMemo)(
-    () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
-    [title]
-  );
+  const titleId = (0, import_react.useMemo)(() => createTitleId(title), [title]);
+  const shouldDisableDismiss = disableDismiss || isBusy;
   (0, import_react.useEffect)(() => {
     if (typeof maximized === "boolean") {
       setIsMaximized(maximized);
@@ -196,7 +337,7 @@ function StandardModal({
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const handleKeyDown = (event) => {
-      if (closeOnEscape && event.key === "Escape") {
+      if (!shouldDisableDismiss && closeOnEscape && event.key === "Escape") {
         onClose();
       }
     };
@@ -205,47 +346,82 @@ function StandardModal({
       document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [closeOnEscape, isOpen, onClose]);
+  }, [closeOnEscape, isOpen, onClose, shouldDisableDismiss]);
   if (!isOpen) {
     return null;
   }
-  const header = headerContent != null ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "h2",
-      {
-        id: titleId,
-        style: {
-          margin: 0,
-          color: modalTheme.colors.onSurface,
-          fontSize: 30,
-          fontWeight: 800,
-          lineHeight: 1.1
-        },
-        children: title
-      }
-    ) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "p",
-      {
-        style: {
-          margin: 0,
-          color: modalTheme.mutedText,
-          fontSize: 15,
-          lineHeight: 1.6
+  const resolvedHeader = headerContent != null ? headerContent : title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "h2",
+    {
+      id: titleId,
+      style: {
+        margin: 0,
+        color: modalTheme.colors.onSurface,
+        fontSize: 30,
+        fontWeight: 800,
+        lineHeight: 1.1
+      },
+      children: title
+    }
+  ) : null;
+  let footerContent = footer;
+  if (footerContent === void 0) {
+    if (closeAction && !closeAction.hidden) {
+      footerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ModalActionButton,
+        {
+          action: { ...closeAction, disabled: closeAction.disabled || isBusy },
+          theme: modalTheme
+        }
+      );
+    } else {
+      const resolvedActions = [
+        cancelAction ? {
+          ...cancelAction,
+          appearance: (_a = cancelAction.appearance) != null ? _a : "text",
+          disabled: cancelAction.disabled || isBusy
+        } : void 0,
+        ...(extraActions != null ? extraActions : []).map((action) => {
+          var _a2;
+          return {
+            ...action,
+            appearance: (_a2 = action.appearance) != null ? _a2 : "contained",
+            disabled: action.disabled || isBusy
+          };
+        }),
+        confirmAction ? {
+          ...confirmAction,
+          appearance: (_b = confirmAction.appearance) != null ? _b : "contained",
+          disabled: confirmAction.disabled || isBusy
+        } : void 0
+      ].reduce((items, action) => {
+        if (!action || action.hidden) {
+          return items;
+        }
+        items.push(action);
+        return items;
+      }, []);
+      footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ModalActionButton,
+        {
+          action,
+          theme: modalTheme
         },
-        children: description
-      }
-    ) : null
-  ] });
+        `modal-action-${index}`
+      )) : void 0;
+    }
+  }
+  const shouldRenderFooter = footerContent !== void 0 && footerContent !== null && footerContent !== false;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       "aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
       "aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
+      "aria-busy": isBusy,
       "aria-modal": "true",
       role: "dialog",
       onMouseDown: (event) => {
-        if (closeOnBackdrop && event.target === event.currentTarget) {
+        if (!shouldDisableDismiss && closeOnBackdrop && event.target === event.currentTarget) {
           onClose();
         }
       },
@@ -271,6 +447,7 @@ function StandardModal({
             maxWidth: isMaximized ? "100vw" : normalizeWidth(maxWidth),
             height: isMaximized ? "100vh" : void 0,
             maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
+            minWidth: isMaximized ? "100vw" : 300,
             borderRadius: isMaximized ? 0 : 30,
             border: `1px solid ${modalTheme.borderSoft}`,
             background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
@@ -287,13 +464,23 @@ function StandardModal({
                   display: "flex",
                   alignItems: "flex-start",
                   justifyContent: "space-between",
-                  gap: 16,
-                  padding: "24px 24px 16px",
+                  gap: 12,
+                  padding: "18px 20px 12px",
                   borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: header }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        opacity: isBusy ? 0.38 : 1,
+                        transition: "opacity 180ms ease"
+                      },
+                      children: resolvedHeader
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                     !hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       "button",
                       {
@@ -302,8 +489,8 @@ function StandardModal({
                         type: "button",
                         onClick: () => setIsMaximized((current) => !current),
                         style: {
-                          height: 42,
-                          width: 42,
+                          height: 40,
+                          width: 40,
                           borderRadius: 999,
                           border: `1px solid ${modalTheme.borderSoft}`,
                           backgroundColor: "transparent",
@@ -320,17 +507,18 @@ function StandardModal({
                       {
                         "aria-label": "Close modal",
                         type: "button",
-                        onClick: onClose,
+                        onClick: shouldDisableDismiss ? void 0 : onClose,
                         style: {
-                          height: 42,
-                          width: 42,
+                          height: 40,
+                          width: 40,
                           borderRadius: 999,
                           border: `1px solid ${modalTheme.borderSoft}`,
                           backgroundColor: "transparent",
                           color: modalTheme.colors.onSurface,
-                          cursor: "pointer",
+                          cursor: shouldDisableDismiss ? "not-allowed" : "pointer",
                           fontSize: 20,
-                          fontWeight: 700
+                          fontWeight: 700,
+                          opacity: shouldDisableDismiss ? 0.5 : 1
                         },
                         children: "\xD7"
                       }
@@ -339,308 +527,61 @@ function StandardModal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "div",
               {
                 style: {
                   flex: 1,
                   minHeight: 0,
+                  position: "relative",
                   overflow: "auto",
-                  padding: 24
-                },
-                children
-              }
-            ),
-            footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  gap: 12,
-                  padding: "16px 24px 24px",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
-                },
-                children: footer
-              }
-            ) : null
-          ]
-        }
-      )
-    }
-  );
-}
-function LegacyModal({
-  title,
-  showModal,
-  closeModal,
-  children,
-  action,
-  actionNameBtn,
-  hideActionButton = false,
-  cancelButton,
-  disableActionBtn = false,
-  isLoading = false,
-  onlyCloseButton = false,
-  hideCloseIcon = false,
-  style,
-  bodyStyle,
-  additionalActions,
-  maximized,
-  theme
-}) {
-  const modalTheme = (0, import_react.useMemo)(() => resolveTheme(theme), [theme]);
-  const [isMaximized, setIsMaximized] = (0, import_react.useState)(maximized != null ? maximized : false);
-  const resolvedAction = action != null ? action : (() => null);
-  (0, import_react.useEffect)(() => {
-    if (maximized === void 0 && isLikelyMobileViewport()) {
-      setIsMaximized(true);
-    }
-  }, [maximized]);
-  if (!showModal) {
-    return null;
-  }
-  const actionButtons = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      additionalActions == null ? void 0 : additionalActions.map((item) => {
-        var _a, _b, _c;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          LegacyActionButton,
-          {
-            label: item.name,
-            onClick: item.onClick,
-            type: (_a = item.type) != null ? _a : "contained",
-            style: (_b = item.style) != null ? _b : { maxWidth: "150px" },
-            theme: modalTheme,
-            disabled: (_c = item.disable) != null ? _c : disableActionBtn || isLoading
-          },
-          item.name
-        );
-      }),
-      !hideActionButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        LegacyActionButton,
-        {
-          label: actionNameBtn != null ? actionNameBtn : "Save",
-          onClick: resolvedAction,
-          type: "contained",
-          style: { maxWidth: "100px" },
-          theme: modalTheme,
-          disabled: disableActionBtn || isLoading
-        }
-      ) : null
-    ] });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      "aria-labelledby": "modal-title",
-      "aria-modal": "true",
-      role: "dialog",
-      style: {
-        background: `${modalTheme.colors.background}90`,
-        backdropFilter: "blur(2px)",
-        width: "100%",
-        height: "100%",
-        position: "fixed",
-        zIndex: 999,
-        top: 0,
-        left: 0,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          id: isLoading ? "ldg1" : void 0,
-          style: {
-            position: isMaximized ? "fixed" : "relative",
-            left: isMaximized ? 0 : void 0,
-            top: isMaximized ? 0 : void 0,
-            background: modalTheme.colors.background,
-            display: "flex",
-            alignItems: "center",
-            flexDirection: "column",
-            borderRadius: "0.8rem",
-            boxSizing: "border-box",
-            maxHeight: isMaximized ? "100vh" : "80vh",
-            maxWidth: isMaximized ? "100vw" : "80vw",
-            minWidth: isMaximized ? "100vw" : 300,
-            minHeight: isMaximized ? "100vh" : void 0,
-            width: isMaximized ? "100vw" : void 0,
-            boxShadow: "0 24px 64px rgba(15, 23, 42, 0.18)",
-            ...isLoading ? { opacity: 0.5 } : null,
-            ...style
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  top: 0,
-                  zIndex: 500,
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  width: "100%",
-                  height: "4rem",
-                  padding: "1rem",
-                  boxSizing: "border-box",
-                  borderTopLeftRadius: "0.8rem",
-                  borderTopRightRadius: "0.8rem",
-                  borderBottom: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`
+                  padding: 24,
+                  ...bodyStyle
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "modal-title", style: { fontWeight: "bold", fontSize: "1.3rem" }, children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
-                      id: "modal-header-icons",
-                      style: { display: "flex", alignItems: "center", gap: "0.5rem" },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "button",
-                          {
-                            "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
-                            title: isMaximized ? "Minimize" : "Maximize",
-                            type: "button",
-                            onClick: () => setIsMaximized((current) => !current),
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: "pointer",
-                              fontSize: 18,
-                              lineHeight: 1,
-                              padding: 0
-                            },
-                            children: isMaximized ? "\u25A2" : "\u25A1"
-                          }
-                        ),
-                        !hideCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "button",
-                          {
-                            "aria-label": "Close modal",
-                            title: "Close",
-                            type: "button",
-                            onClick: isLoading ? void 0 : closeModal,
-                            style: {
-                              border: "none",
-                              background: "transparent",
-                              color: modalTheme.colors.onSurface,
-                              cursor: isLoading ? "not-allowed" : "pointer",
-                              fontSize: 22,
-                              lineHeight: 1,
-                              padding: 0,
-                              opacity: isLoading ? 0.5 : 1
-                            },
-                            children: "\xD7"
-                          }
-                        ) : null
-                      ]
+                      style: {
+                        opacity: isBusy ? 0.38 : 1,
+                        filter: isBusy ? "saturate(0.8)" : "none",
+                        pointerEvents: isBusy ? "none" : "auto",
+                        transition: "opacity 180ms ease, filter 180ms ease"
+                      },
+                      children
                     }
-                  )
+                  ),
+                  isBusy ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: withAlpha(modalTheme.colors.surface, 0.58),
+                        backdropFilter: "blur(2px)"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalBusyIndicator, { theme: modalTheme })
+                    }
+                  ) : null
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                style: {
-                  scrollbarWidth: "thin",
-                  width: "100%",
-                  maxWidth: "100%",
-                  paddingTop: "4rem",
-                  paddingBottom: "4rem",
-                  overflow: "auto",
-                  ...bodyStyle
-                },
-                children
-              }
-            ),
-            onlyCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      LegacyActionButton,
-                      {
-                        label: "Close",
-                        onClick: closeModal,
-                        theme: modalTheme,
-                        disabled: isLoading
-                      }
-                    )
-                  }
-                )
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                style: {
-                  background: modalTheme.colors.surface,
-                  color: modalTheme.colors.onSurface,
-                  position: "absolute",
-                  bottom: 0,
-                  width: "100%",
-                  height: "4rem",
-                  padding: "0.5rem",
-                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onBackground, 0.1)}`,
-                  boxSizing: "border-box",
-                  borderBottomLeftRadius: "0.8rem",
-                  borderBottomRightRadius: "0.8rem"
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  gap: 10,
+                  padding: "12px 20px 16px",
+                  borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
                 },
-                children: cancelButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        LegacyActionButton,
-                        {
-                          label: "Cancel",
-                          onClick: cancelButton,
-                          type: "text",
-                          style: { maxWidth: "100px" },
-                          theme: modalTheme,
-                          disabled: false
-                        }
-                      ),
-                      actionButtons()
-                    ]
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "div",
-                  {
-                    className: "buttons-footer",
-                    style: { flex: 1, display: "flex", justifyContent: "end" },
-                    children: actionButtons()
-                  }
-                )
+                children: footerContent
               }
-            )
+            ) : null
           ]
         }
       )
@@ -648,10 +589,7 @@ function LegacyModal({
   );
 }
 function Modal(props) {
-  if (isLegacyModalProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LegacyModal, { ...props });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandardModal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnifiedModal, { ...normalizeModalProps(props) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {