@standhigher/puck-page-builder 0.12.15 → 0.12.16

package/dist/index.js

@@ -378,7 +378,7 @@ function PropertyPanel({
 
 // src/editor/shell/PageDocumentEditorShell.tsx
 import { Puck as Puck2, usePuck } from "@puckeditor/core";
-import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, Frame, InlineStack as InlineStack3, Select as Select2, Text as Text3, TextField, Toast } from "@shopify/polaris";
+import { Badge as Badge3, Banner, Button as Button2, ButtonGroup as ButtonGroup2, Frame, InlineStack as InlineStack3, Modal as Modal2, Select as Select2, Text as Text3, TextField, Toast } from "@shopify/polaris";
 import { DeleteIcon as DeleteIcon2, DragHandleIcon as DragHandleIcon2, LayoutSectionIcon as LayoutSectionIcon2, MenuIcon as MenuIcon2, ProductIcon, RedoIcon as RedoIcon2, UndoIcon as UndoIcon2, XIcon as XIcon2 } from "@shopify/polaris-icons";
 import { useCallback as useCallback2, useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
 
@@ -1730,24 +1730,11 @@ function InspectorActions({ block, canDuplicate, canDelete, canMove, canMoveUp,
   ] });
 }
 function DeleteConfirmation({ block, config, i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx10("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-delete-confirmation-title", children: [
-    /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingMd", id: "pb-delete-confirmation-title", children: config?.title ?? i18n.t("confirmDeleteTitle") }),
-    /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: config?.message?.(block) ?? i18n.t("confirmDeleteMessage") }),
-    /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx10(Button2, { onClick: onCancel, children: config?.cancelLabel ?? i18n.t("cancel") }),
-      /* @__PURE__ */ jsx10(Button2, { tone: "critical", onClick: onConfirm, children: config?.confirmLabel ?? i18n.t("confirm") })
-    ] })
-  ] }) });
+  const message = config?.message?.(block) ?? i18n.t("confirmDeleteMessage");
+  return /* @__PURE__ */ jsx10(Modal2, { open: true, onClose: onCancel, title: config?.title ?? i18n.t("confirmDeleteTitle"), primaryAction: { content: config?.confirmLabel ?? i18n.t("confirm"), destructive: true, onAction: onConfirm }, secondaryActions: [{ content: config?.cancelLabel ?? i18n.t("cancel"), onAction: onCancel }], children: /* @__PURE__ */ jsx10(Modal2.Section, { children: typeof message === "string" ? /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: message }) : message }) });
 }
 function LeaveConfirmation({ i18n, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsx10("div", { className: "pb-delete-confirmation-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7("section", { className: "pb-delete-confirmation", role: "dialog", "aria-modal": "true", "aria-labelledby": "pb-leave-confirmation-title", children: [
-    /* @__PURE__ */ jsx10(Text3, { as: "h2", variant: "headingMd", id: "pb-leave-confirmation-title", children: i18n.t("confirmLeaveTitle") }),
-    /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: i18n.t("leaveWarning") }),
-    /* @__PURE__ */ jsxs7(ButtonGroup2, { children: [
-      /* @__PURE__ */ jsx10(Button2, { onClick: onCancel, children: i18n.t("cancel") }),
-      /* @__PURE__ */ jsx10(Button2, { tone: "critical", onClick: onConfirm, children: i18n.t("leave") })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx10(Modal2, { open: true, onClose: onCancel, title: i18n.t("confirmLeaveTitle"), primaryAction: { content: i18n.t("leave"), destructive: true, onAction: onConfirm }, secondaryActions: [{ content: i18n.t("cancel"), onAction: onCancel }], children: /* @__PURE__ */ jsx10(Modal2.Section, { children: /* @__PURE__ */ jsx10(Text3, { as: "p", variant: "bodyMd", children: i18n.t("leaveWarning") }) }) });
 }
 function inspectorFieldConfig(name, field) {
   const key = name.toLowerCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/puck-page-builder",
-  "version": "0.12.15",
+  "version": "0.12.16",
   "description": "React PageDocument editor, extension registry, and web renderer for BestTrack page experiences.",
   "type": "module",
   "repository": {

package/src/styles.css

@@ -80,9 +80,6 @@ button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--b
 .pb-inspector-actions .Polaris-ButtonGroup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: var(--builder-space-2); }
 .pb-inspector-actions .Polaris-ButtonGroup__Item { min-width: 0; margin: 0; }
 .pb-inspector-actions .Polaris-ButtonGroup__Item .Polaris-Button { width: 100%; justify-content: center; }
-.pb-delete-confirmation-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--builder-space-4); background: rgb(15 23 42 / 42%); }
-.pb-delete-confirmation { display: grid; gap: var(--builder-space-4); width: min(100%, 420px); padding: var(--builder-space-5); border-radius: 12px; color: #0f172a; background: #fff; box-shadow: 0 20px 50px rgb(15 23 42 / 25%); }
-.pb-delete-confirmation h2, .pb-delete-confirmation p { margin: 0; }
 .pb-panel--closed { display: none; }
 .pb-block-list { display: flex; flex: 1; flex-direction: column; gap: var(--builder-space-2); min-height: 0; }
 .pb-block-row { display: flex; align-items: center; gap: var(--builder-space-2); padding: var(--builder-space-2); border: 1px solid transparent; border-radius: var(--builder-panel-radius); background: transparent; transition: background-color 120ms ease, border-color 120ms ease; }