@homebound/beam 4.35.0 → 4.36.0

package/dist/index.js

@@ -11272,6 +11272,22 @@ function ProposedValue(props) {
     }), ...tid.proposed, children: proposed })
   ] });
 }
+function OriginalValue(props) {
+  const {
+    originalValue,
+    ...others
+  } = props;
+  return /* @__PURE__ */ jsx38("div", { ...trussProps23({
+    color: ["color_var", {
+      "--color": "var(--b-text-helper)"
+    }],
+    fontWeight: "fw4",
+    fontSize: "fz_12px",
+    lineHeight: "lh_16px",
+    marginTop: "mt_4px",
+    textDecoration: "tdlt"
+  }), ...others, children: originalValue });
+}
 
 // src/components/Table/components/Row.css.ts
 var css = {
@@ -11298,9 +11314,8 @@ function getFieldWidth(fullWidth) {
   return fullWidth ? "100%" : "550px";
 }
 
-// src/inputs/TextFieldBase.tsx
-import { trussProps as trussProps24, mergeProps as mergeProps_13, maybeCssVar as maybeCssVar17 } from "@homebound/truss/runtime";
-import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+// src/inputs/fieldChrome.ts
+import { maybeCssVar as maybeCssVar17 } from "@homebound/truss/runtime";
 var __maybeInc10 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -11361,6 +11376,221 @@ var __typography4 = {
     lineHeight: "lh_32px"
   }
 };
+var fieldHeight = 40;
+var compactFieldHeight = 32;
+function getFieldChrome(options) {
+  const {
+    typeScale,
+    labelStyle,
+    labelLeftFieldWidth = "50%",
+    compact,
+    borderless,
+    borderOnHover,
+    fullWidth,
+    visuallyDisabled,
+    isHovered,
+    compound = false,
+    multiline = false,
+    showProposal = false,
+    inputStylePalette
+  } = options;
+  const maybeSmaller = compound ? 2 : 0;
+  const [bgColor, hoverBgColor, disabledBgColor] = fieldBackgrounds({
+    showProposal,
+    inputStylePalette,
+    borderOnHover,
+    borderless,
+    compound
+  });
+  const fixedHeight = {
+    height: ["h_var", {
+      "--height": `${fieldHeight - maybeSmaller}px`
+    }],
+    ...compact ? {
+      height: ["h_var", {
+        "--height": `${compactFieldHeight - maybeSmaller}px`
+      }]
+    } : {}
+  };
+  const minHeight = {
+    minHeight: ["mh_var", {
+      "--minHeight": `${fieldHeight - maybeSmaller}px`
+    }],
+    ...compact ? {
+      minHeight: ["mh_var", {
+        "--minHeight": `${compactFieldHeight - maybeSmaller}px`
+      }]
+    } : {}
+  };
+  return {
+    container: {
+      display: "df",
+      flexDirection: "fdc",
+      width: "w100",
+      maxWidth: ["maxw_var", {
+        "--maxWidth": maybeCssVar17(getFieldWidth(fullWidth))
+      }],
+      position: "relative",
+      ...labelStyle === "left" ? {
+        maxWidth: "maxw100",
+        flexDirection: "fdr",
+        gap: "g_2",
+        justifyContent: "jcsb",
+        alignItems: "aic"
+      } : {}
+    },
+    control: {
+      ...{
+        ...__typography4[typeScale] ?? {},
+        display: "df",
+        alignItems: "aic",
+        borderRadius: "br8",
+        paddingLeft: ["px_var", {
+          "--paddingLeft": `${textFieldBasePadding}px`
+        }],
+        paddingRight: ["px_var", {
+          "--paddingRight": `${textFieldBasePadding}px`
+        }],
+        width: "w100",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": maybeCssVar17(bgColor)
+        }],
+        color: ["color_var", {
+          "--color": "var(--b-on-surface)"
+        }],
+        ...labelStyle === "left" ? {
+          width: ["w_var", {
+            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
+          }]
+        } : {}
+      },
+      // Borderless fields sit next to plain text in tables. Grow by the horizontal padding and pull
+      // back left so the text lines up. Compound fields own their own width.
+      ...borderless && !compound ? {
+        borderColor: "bcTransparent",
+        width: "w_calc_100_16px",
+        marginLeft: "ml_neg1"
+      } : {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-default)"
+        }]
+      },
+      ...!compound ? {
+        borderStyle: "bss",
+        borderWidth: "bw1"
+      } : {},
+      ...borderOnHover ? {
+        borderRadius: "br4",
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: "bcTransparent",
+        transition: "tsn_border_color_200ms"
+      } : {},
+      ...borderOnHover && isHovered ? {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": maybeCssVar17(hoverBgColor)
+        }],
+        borderStyle: "bss",
+        borderWidth: "bw1",
+        borderColor: "bcBlue300"
+      } : {},
+      ...multiline ? minHeight : fixedHeight
+    },
+    readOnly: {
+      ...{
+        ...__typography4[typeScale] ?? {},
+        display: "df",
+        alignItems: "aic",
+        width: "w100",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface)"
+        }],
+        ...labelStyle === "left" ? {
+          width: ["w_var", {
+            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
+          }]
+        } : {}
+      },
+      // Hidden labels mean a table cell. Min-height matches an editable field so the row lines up.
+      ...labelStyle === "hidden" ? minHeight : {}
+    },
+    hover: {
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(hoverBgColor)
+      }],
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-hover)"
+      }]
+    },
+    focus: {
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-focus)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(hoverBgColor)
+      }],
+      ...borderOnHover ? {
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-field-border-focus)"
+        }]
+      } : {}
+    },
+    disabled: visuallyDisabled ? {
+      cursor: "cur_not_allowed",
+      color: ["color_var", {
+        "--color": "var(--b-field-text-disabled)"
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": maybeCssVar17(disabledBgColor)
+      }]
+    } : {
+      cursor: "cur_not_allowed"
+    },
+    error: {
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-field-border-error)"
+      }]
+    }
+  };
+}
+function selectedValueCss(labelStyle, readOnly) {
+  return labelStyle !== "inline" && !readOnly ? {
+    fontWeight: "fw5"
+  } : void 0;
+}
+var textFieldBasePadding = increment(1);
+function fieldBackgrounds(options) {
+  const {
+    showProposal,
+    inputStylePalette,
+    borderOnHover,
+    borderless,
+    compound
+  } = options;
+  if (showProposal) return ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */];
+  if (inputStylePalette) return inputStylePaletteBackgrounds(inputStylePalette);
+  if (borderOnHover) return ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
+  if (borderless && !compound) return ["rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(236, 235, 235, 1)" /* Gray200 */, "rgba(236, 235, 235, 1)" /* Gray200 */];
+  return ["--b-field-bg-default" /* FieldBgDefault */, "--b-field-bg-hover" /* FieldBgHover */, "--b-field-bg-disabled" /* FieldBgDisabled */];
+}
+function inputStylePaletteBackgrounds(inputStylePalette) {
+  switch (inputStylePalette) {
+    case "success":
+      return ["rgba(236, 253, 245, 1)" /* Green50 */, "rgba(209, 250, 229, 1)" /* Green100 */, "rgba(236, 253, 245, 1)" /* Green50 */];
+    case "caution":
+      return ["rgba(254, 252, 232, 1)" /* Yellow50 */, "rgba(254, 249, 195, 1)" /* Yellow100 */, "rgba(254, 252, 232, 1)" /* Yellow50 */];
+    case "warning":
+      return ["rgba(254, 242, 242, 1)" /* Red50 */, "rgba(254, 226, 226, 1)" /* Red100 */, "rgba(254, 242, 242, 1)" /* Red50 */];
+    case "info":
+      return ["rgba(239, 246, 255, 1)" /* Blue50 */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(239, 246, 255, 1)" /* Blue50 */];
+    default:
+      return ["rgba(255, 255, 255, 1)" /* White */, "rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
+  }
+}
+
+// src/inputs/TextFieldBase.tsx
+import { trussProps as trussProps24, mergeProps as mergeProps_13 } from "@homebound/truss/runtime";
+import { Fragment as Fragment13, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 function TextFieldBase(props) {
   const {
     fieldProps,
@@ -11430,147 +11660,30 @@ function TextFieldBase(props) {
     onFocusWithinChange: setIsFocused
   });
   const fieldRef = useGetRef(inputRef);
-  const maybeSmaller = compound ? 2 : 0;
-  const fieldHeight = 40;
-  const compactFieldHeight = 32;
   const showProposal = proposedValue !== void 0;
   const showOriginal = originalValue !== void 0 && originalValue !== "";
   const originalBelow = showOriginal && !inputProps.readOnly && !compound ? originalValue : void 0;
   const showErrorAndHelper = alwaysShowHelperText || !compound && !inputProps.disabled && !inputProps.readOnly;
-  const [bgColor, hoverBgColor, disabledBgColor] = showProposal ? ["--b-ai-field-bg" /* AiFieldBg */, "rgba(237, 233, 254, 1)" /* Purple100 */, "--b-field-bg-disabled" /* FieldBgDisabled */] : inputStylePalette ? getInputStylePalette(inputStylePalette) : borderOnHover ? (
-    // Use transparent backgrounds to blend with the table row hover color
-    ["rgba(0,0,0,0)" /* Transparent */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(247, 245, 245, 1)" /* Gray100 */]
-  ) : borderless && !compound ? ["rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(236, 235, 235, 1)" /* Gray200 */, "rgba(236, 235, 235, 1)" /* Gray200 */] : ["--b-field-bg-default" /* FieldBgDefault */, "--b-field-bg-hover" /* FieldBgHover */, "--b-field-bg-disabled" /* FieldBgDisabled */];
-  const fieldMaxWidth = getFieldWidth(fullWidth);
+  const fieldChrome = getFieldChrome({
+    typeScale,
+    labelStyle,
+    labelLeftFieldWidth,
+    compact,
+    borderless,
+    borderOnHover,
+    fullWidth,
+    visuallyDisabled,
+    isHovered,
+    compound,
+    multiline,
+    showProposal,
+    inputStylePalette
+  });
   const fieldStyles = {
-    container: {
-      ...{
-        display: "df",
-        flexDirection: "fdc",
-        width: "w100",
-        maxWidth: ["maxw_var", {
-          "--maxWidth": maybeCssVar17(fieldMaxWidth)
-        }],
-        position: "relative",
-        ...labelStyle === "left" ? {
-          maxWidth: "maxw100",
-          flexDirection: "fdr",
-          gap: "g_2",
-          justifyContent: "jcsb",
-          alignItems: "aic"
-        } : {}
-      }
-    },
-    inputWrapper: {
-      ...{
-        ...__typography4[typeScale] ?? {},
-        display: "df",
-        alignItems: "aic",
-        borderRadius: "br8",
-        paddingLeft: ["px_var", {
-          "--paddingLeft": `${textFieldBasePadding}px`
-        }],
-        paddingRight: ["px_var", {
-          "--paddingRight": `${textFieldBasePadding}px`
-        }],
-        width: "w100",
-        backgroundColor: ["bgColor_var", {
-          "--backgroundColor": maybeCssVar17(bgColor)
-        }],
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...labelStyle === "left" ? {
-          width: ["w_var", {
-            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
-          }]
-        } : {}
-      },
-      // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
-      // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
-      // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
-      // Note: Do not modify width and position of 'compound' fields.
-      ...borderless && !compound ? {
-        borderColor: "bcTransparent",
-        width: "w_calc_100_16px",
-        marginLeft: "ml_neg1"
-      } : {
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-field-border-default)"
-        }]
-      },
-      // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
-      ...!compound ? {
-        borderStyle: "bss",
-        borderWidth: "bw1"
-      } : {},
-      ...borderOnHover && {
-        borderRadius: "br4",
-        borderStyle: "bss",
-        borderWidth: "bw1",
-        borderColor: "bcTransparent",
-        transition: "tsn_border_color_200ms"
-      },
-      ...borderOnHover && {
-        ...isHovered ? {
-          backgroundColor: ["bgColor_var", {
-            "--backgroundColor": maybeCssVar17(hoverBgColor)
-          }],
-          borderStyle: "bss",
-          borderWidth: "bw1",
-          borderColor: "bcBlue300"
-        } : {}
-      },
-      // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight
-      // Otherwise, set fixed heights values accordingly.
-      ...multiline ? {
-        minHeight: ["mh_var", {
-          "--minHeight": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          minHeight: ["mh_var", {
-            "--minHeight": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      } : {
-        height: ["h_var", {
-          "--height": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          height: ["h_var", {
-            "--height": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      }
-    },
+    container: fieldChrome.container,
+    inputWrapper: fieldChrome.control,
     // Border-hover-on-row styling is handled by Row.css.ts (imported above as a side-effect)
-    inputWrapperReadOnly: {
-      ...{
-        ...__typography4[typeScale] ?? {},
-        display: "df",
-        alignItems: "aic",
-        width: "w100",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }],
-        ...labelStyle === "left" ? {
-          width: ["w_var", {
-            "--width": maybeCssVar17(__maybeInc10(labelLeftFieldWidth))
-          }]
-        } : {}
-      },
-      // If we are hiding the label, then we are typically in a table. Keep the `mh` in this case to ensure editable and non-editable fields in a single table row line up properly
-      ...labelStyle === "hidden" && {
-        minHeight: ["mh_var", {
-          "--minHeight": `${fieldHeight - maybeSmaller}px`
-        }],
-        ...compact ? {
-          minHeight: ["mh_var", {
-            "--minHeight": `${compactFieldHeight - maybeSmaller}px`
-          }]
-        } : {}
-      }
-    },
+    inputWrapperReadOnly: fieldChrome.readOnly,
     input: {
       ...{
         width: "w100",
@@ -11606,43 +11719,10 @@ function TextFieldBase(props) {
         }]
       } : {}
     },
-    hover: {
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(hoverBgColor)
-      }],
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-hover)"
-      }]
-    },
-    focus: {
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-focus)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(hoverBgColor)
-      }],
-      ...borderOnHover ? {
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-field-border-focus)"
-        }]
-      } : {}
-    },
-    disabled: visuallyDisabled ? {
-      cursor: "cur_not_allowed",
-      color: ["color_var", {
-        "--color": "var(--b-field-text-disabled)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": maybeCssVar17(disabledBgColor)
-      }]
-    } : {
-      cursor: "cur_not_allowed"
-    },
-    error: {
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-error)"
-      }]
-    }
+    hover: fieldChrome.hover,
+    focus: fieldChrome.focus,
+    disabled: fieldChrome.disabled,
+    error: fieldChrome.error
   };
   function onDomChange(e) {
     maybeCall(onUserEdit);
@@ -11829,37 +11909,6 @@ function TextFieldBase(props) {
     ] })
   ] });
 }
-function OriginalValue(props) {
-  const {
-    originalValue,
-    ...others
-  } = props;
-  return /* @__PURE__ */ jsx39("div", { ...trussProps24({
-    color: ["color_var", {
-      "--color": "var(--b-text-helper)"
-    }],
-    fontWeight: "fw4",
-    fontSize: "fz_12px",
-    lineHeight: "lh_16px",
-    marginTop: "mt_4px",
-    textDecoration: "tdlt"
-  }), ...others, children: originalValue });
-}
-function getInputStylePalette(inputStylePalette) {
-  switch (inputStylePalette) {
-    case "success":
-      return ["rgba(236, 253, 245, 1)" /* Green50 */, "rgba(209, 250, 229, 1)" /* Green100 */, "rgba(236, 253, 245, 1)" /* Green50 */];
-    case "caution":
-      return ["rgba(254, 252, 232, 1)" /* Yellow50 */, "rgba(254, 249, 195, 1)" /* Yellow100 */, "rgba(254, 252, 232, 1)" /* Yellow50 */];
-    case "warning":
-      return ["rgba(254, 242, 242, 1)" /* Red50 */, "rgba(254, 226, 226, 1)" /* Red100 */, "rgba(254, 242, 242, 1)" /* Red50 */];
-    case "info":
-      return ["rgba(239, 246, 255, 1)" /* Blue50 */, "rgba(219, 234, 254, 1)" /* Blue100 */, "rgba(239, 246, 255, 1)" /* Blue50 */];
-    default:
-      return ["rgba(255, 255, 255, 1)" /* White */, "rgba(247, 245, 245, 1)" /* Gray100 */, "rgba(247, 245, 245, 1)" /* Gray100 */];
-  }
-}
-var textFieldBasePadding = increment(1);
 var textFieldBaseMultilineTopPadding = 11;
 
 // src/inputs/internal/MenuSearchField.tsx
@@ -12705,6 +12754,16 @@ var iconStyles = {
 // src/components/internal/Popover.tsx
 import "react";
 import { DismissButton, OverlayContainer, useOverlay } from "react-aria";
+
+// src/components/internal/shouldDismissOverlay.ts
+function shouldDismissOverlay(el, trigger) {
+  if (el.closest(".tribute-container") || el.closest("[role='alert']")) return false;
+  const dialog = el.closest("[role='dialog']");
+  if (dialog && !dialog.contains(trigger)) return false;
+  return true;
+}
+
+// src/components/internal/Popover.tsx
 import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function Popover(props) {
   const { triggerRef, popoverRef, positionProps, children, onClose, isOpen: isOpen2, ...others } = props;
@@ -12715,12 +12774,8 @@ function Popover(props) {
       isOpen: isOpen2,
       isDismissable: true,
       shouldCloseOnInteractOutside: (e) => {
-        if (triggerRef.current?.contains(e)) {
-          return true;
-        }
-        const dialog = e.closest("[role='dialog']");
-        const isDialogOnTop = !!dialog && !dialog.contains(triggerRef.current);
-        return !(e.closest(".tribute-container") || isDialogOnTop || e.closest("[role='alert']"));
+        if (triggerRef.current?.contains(e)) return true;
+        return shouldDismissOverlay(e, triggerRef.current);
       },
       ...others
     },
@@ -17433,7 +17488,8 @@ function ConfirmCloseModal(props) {
     title = "Are you sure you want to leave?",
     message = "Any changes you've made so far will be lost.",
     discardText = "Discard Changes",
-    continueText = "Continue Editing"
+    continueText = "Continue Editing",
+    isDestructive = false
   } = props;
   const { modalState } = useBeamContext();
   function closeModal() {
@@ -17458,6 +17514,7 @@ function ConfirmCloseModal(props) {
         Button,
         {
           label: continueText,
+          variant: isDestructive ? "danger" : "primary",
           onClick: () => {
             onContinue?.();
             closeModal();
@@ -19780,9 +19837,7 @@ function ComboBoxInput(props) {
     inputWrapRef,
     value: inputProps.value
   });
-  return /* @__PURE__ */ jsx116(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ jsx116(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? {
-    fontWeight: "fw5"
-  } : void 0, startAdornment: showNumSelection && /* @__PURE__ */ jsx116(Tooltip, { title: /* @__PURE__ */ jsx116(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx116(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx116("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps75({
+  return /* @__PURE__ */ jsx116(TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && /* @__PURE__ */ jsx116(Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef, inputWrapRef, errorMsg, xss: selectedValueCss(otherProps.labelStyle, inputProps.readOnly), startAdornment: showNumSelection && /* @__PURE__ */ jsx116(Tooltip, { title: /* @__PURE__ */ jsx116(SelectedOptionBullets, { labels: chipLabels }), children: /* @__PURE__ */ jsx116(CountBadge, { count: selectedChipCount, "data-testid": "selectedOptionsCount" }) }) || showFieldDecoration && fieldDecoration(selectedOptions[0]), endAdornment: !inputProps.readOnly && /* @__PURE__ */ jsx116("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, ...trussProps75({
     ...{
       borderRadius: "br4",
       outline: "ol_0",
@@ -31430,7 +31485,7 @@ import { useEffect as useEffect41, useRef as useRef77 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx255 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
-  const { isDirty, allowNavigation, onCancel } = options;
+  const { isDirty, allowNavigation, onCancel, destructiveAction } = options;
   const { openModal } = useModal();
   const isDirtyRef = useRef77(isDirty);
   isDirtyRef.current = isDirty;
@@ -31467,8 +31522,39 @@ function useUnsavedChangesGuard(options) {
       content: /* @__PURE__ */ jsx255(ConfirmCloseModal, { onClose: () => confirmCancel(e) })
     });
   };
+  const onDestructiveActionClick = destructiveAction ? (e) => {
+    const {
+      label = "Remove",
+      confirmTitle = "Are you sure?",
+      confirmMessage = "This can't be undone.",
+      onConfirm
+    } = destructiveAction;
+    openModal({
+      allowClosing: false,
+      content: /* @__PURE__ */ jsx255(
+        ConfirmCloseModal,
+        {
+          title: confirmTitle,
+          message: confirmMessage,
+          discardText: "Cancel",
+          onClose: () => {
+          },
+          continueText: label,
+          isDestructive: true,
+          onContinue: async () => {
+            allowCancelNavigationRef.current = true;
+            try {
+              await onConfirm(e);
+            } finally {
+              allowCancelNavigationRef.current = false;
+            }
+          }
+        }
+      )
+    });
+  } : void 0;
   const navigationBlocker = blocker.state === "blocked" ? { proceed: () => blocker.proceed?.(), cancelNavigation: () => blocker.reset?.() } : void 0;
-  return { onCancelClick, navigationBlocker };
+  return { onCancelClick, onDestructiveActionClick, navigationBlocker };
 }
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
@@ -31489,6 +31575,7 @@ function WorkflowActions(props) {
   const {
     onCancel,
     onSaveAndExit,
+    destructiveAction,
     completeLabel,
     onComplete,
     primaryDisabled,
@@ -31507,6 +31594,7 @@ function WorkflowActions(props) {
     /* @__PURE__ */ jsxs137("div", { className: "df aic g_1", children: [
       /* @__PURE__ */ jsx256(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx256(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
+      destructiveAction && /* @__PURE__ */ jsx256(Button, { label: destructiveAction.label ?? "Remove", variant: "danger", onClick: destructiveAction.onConfirm }),
       isLastStep ? /* @__PURE__ */ jsx256(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx256(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
         await onContinue?.();
       }, disabled: primaryDisabled })
@@ -31532,6 +31620,7 @@ function WorkflowPageLayout(props) {
     documentTitleSuffix,
     breadcrumbs,
     onCancel,
+    destructiveAction,
     rightPaneTriggers,
     banner: bannerProp,
     ...actionProps
@@ -31546,13 +31635,18 @@ function WorkflowPageLayout(props) {
   } = useBreakpoint();
   const {
     onCancelClick,
+    onDestructiveActionClick,
     navigationBlocker
   } = useUnsavedChangesGuard({
     isDirty,
     allowNavigation,
-    onCancel
+    onCancel,
+    destructiveAction
   });
-  const actions = /* @__PURE__ */ jsx257(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
+  const actions = /* @__PURE__ */ jsx257(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick, destructiveAction: destructiveAction && {
+    ...destructiveAction,
+    onConfirm: onDestructiveActionClick
+  } });
   const triggers = rightPaneTriggers ?? [];
   const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ jsx257(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
   const headerMetricsRef = useRef78(null);
@@ -31670,6 +31764,7 @@ function FocusedFormLayout(props) {
     completeLabel,
     onComplete,
     onSaveAndExit,
+    destructiveAction,
     primaryDisabled,
     isDirty,
     allowNavigation,
@@ -31691,6 +31786,7 @@ function FocusedFormLayout(props) {
       allowNavigation,
       onCancel,
       onSaveAndExit,
+      destructiveAction,
       completeLabel,
       onComplete,
       primaryDisabled,
@@ -31711,6 +31807,7 @@ function StepperLayout(props) {
     completeLabel,
     onComplete,
     onSaveAndExit,
+    destructiveAction,
     isDirty,
     allowNavigation,
     aiMode,
@@ -31748,6 +31845,7 @@ function StepperLayout(props) {
       },
       onCancel,
       onSaveAndExit,
+      destructiveAction,
       completeLabel,
       onComplete,
       primaryDisabled: activeStep?.primaryDisabled,
@@ -32313,6 +32411,7 @@ export {
   NavbarLayout,
   NumberField,
   OpenModal,
+  OriginalValue,
   PageBanner,
   PageHeaderLayout,
   Pagination,