@bigbinary/neeto-rules-frontend 2.7.26 → 2.7.27

package/dist/cjs/v2/NeetoRulesBuilder.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var keyboardShortcuts = require('../../keyboardShortcuts-CRInJJOU.js');
+var keyboardShortcuts = require('../../keyboardShortcuts-CnEwhJom.js');
 var shallow = require('zustand/shallow');
 var react = require('react');
 var neetoAtoms = require('@bigbinary/neeto-atoms');
@@ -13,7 +13,7 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var Container = require('@bigbinary/neeto-molecules/v2/Container');
 var Header = require('@bigbinary/neeto-molecules/v2/Header');
 var reactI18next = require('react-i18next');
-var index = require('../../index-D1PW24Zw.js');
+var index = require('../../index-BUcQsAbf.js');
 var useCustomDataStore = require('../../useCustomDataStore-DPmWkEhs.js');
 var useUtilityStore = require('../../useUtilityStore-gtPhFvpI.js');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -23,6 +23,7 @@ var ramda = require('ramda');
 var Delete = require('@bigbinary/neeto-icons/Delete');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
+var _typeof = require('@babel/runtime/helpers/typeof');
 var i18next = require('i18next');
 var yup = require('yup');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -33,7 +34,6 @@ var utils$1 = require('../../utils-B3roKiff.js');
 var Up = require('@bigbinary/neeto-icons/Up');
 var Down = require('@bigbinary/neeto-icons/Down');
 var Info = require('@bigbinary/neeto-icons/Info');
-require('@babel/runtime/helpers/typeof');
 require('../../useAutomationRulesApi-C1T2E1AN.js');
 require('@tanstack/react-query');
 require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -310,6 +310,22 @@ var Token = function Token(_ref) {
   }));
 };
 
+var Values = function Values(_ref) {
+  var _ref$values = _ref.values,
+    values = _ref$values === void 0 ? [] : _ref$values,
+    connector = _ref.connector;
+  return values.map(function (value, index) {
+    return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [index > 0 && " ", index > 0 && connector && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "mb-tok-join",
+          children: connector
+        }), " "]
+      }), value]
+    }, "".concat(value, "-").concat(index));
+  });
+};
+
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var humanize = function humanize(value) {
@@ -402,7 +418,32 @@ var conditionNeedsValue = function conditionNeedsValue(_ref7) {
   });
   return !((field === null || field === void 0 ? void 0 : field.noValueForVerbs) || []).includes(condition === null || condition === void 0 ? void 0 : condition.verb);
 };
-var conditionValueLabel = function conditionValueLabel(_ref8) {
+
+// A multi-value token stays one clickable phrase, but its "and"/"or" is
+// connective tissue rather than part of any value, so the canvas keeps the
+// connector out of the token's own styling.
+var valueParts = function valueParts(raw) {
+  if (ramda.isNil(raw) || raw === "") return null;
+  if (Array.isArray(raw)) {
+    return ramda.isEmpty(raw) ? null : {
+      values: raw.map(String)
+    };
+  }
+  if (_typeof(raw) === "object") {
+    var values = Array.isArray(raw.values) ? raw.values.map(String) : [];
+    return ramda.isEmpty(values) ? null : {
+      values: values,
+      connector: raw.connector
+    };
+  }
+  return {
+    values: [String(raw)]
+  };
+};
+var joinValues = function joinValues(parts) {
+  return (parts === null || parts === void 0 ? void 0 : parts.values.join(parts.connector ? " ".concat(parts.connector, " ") : " ")) || "";
+};
+var conditionValueParts = function conditionValueParts(_ref8) {
   var _ref9, _meta$value;
   var schema = _ref8.schema,
     condition = _ref8.condition;
@@ -422,23 +463,28 @@ var conditionValueLabel = function conditionValueLabel(_ref8) {
       return ((_candidate$value = candidate.value) !== null && _candidate$value !== void 0 ? _candidate$value : candidate.id) === value;
     });
     var label = option ? (_ref0 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value) !== null && _ref0 !== void 0 ? _ref0 : option.id : value;
-    return isEnum ? String(label).toLowerCase() : label;
+    return isEnum ? String(label).toLowerCase() : String(label);
   };
   var connector = String((condition === null || condition === void 0 ? void 0 : condition.verb) || "").includes(CONDITION_VERBS.ALL_OF) ? i18next.t("neetoRules.operators.and") : i18next.t("neetoRules.operators.or");
-  return Array.isArray(raw) ? raw.map(labelFor).join(" ".concat(connector, " ")) : String(labelFor(raw));
+  return Array.isArray(raw) ? {
+    values: raw.map(labelFor),
+    connector: connector
+  } : {
+    values: [labelFor(raw)]
+  };
 };
-var actionOption = function actionOption(_ref1) {
+var actionOption = function actionOption(_ref10) {
   var _schema$actions;
-  var schema = _ref1.schema,
-    name = _ref1.name;
+  var schema = _ref10.schema,
+    name = _ref10.name;
   return ((schema === null || schema === void 0 || (_schema$actions = schema.actions) === null || _schema$actions === void 0 ? void 0 : _schema$actions.options) || []).find(function (option) {
     return option.value === name || option.id === name;
   });
 };
-var channelOption = function channelOption(_ref10) {
+var channelOption = function channelOption(_ref11) {
   var _schema$actions2;
-  var schema = _ref10.schema,
-    channel = _ref10.channel;
+  var schema = _ref11.schema,
+    channel = _ref11.channel;
   return ((schema === null || schema === void 0 || (_schema$actions2 = schema.actions) === null || _schema$actions2 === void 0 ? void 0 : _schema$actions2.options) || []).find(function (option) {
     var _option$value;
     return ((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option.id) === channel;
@@ -450,24 +496,24 @@ var channelOption = function channelOption(_ref10) {
 // Its key shares the action's metadata namespace, so declaring one is how a
 // host hands a field to the step: whoever declares it owns it, and the config
 // pane stops validating it.
-var actionStepsOf = function actionStepsOf(_ref11) {
-  var schema = _ref11.schema,
-    action = _ref11.action;
+var actionStepsOf = function actionStepsOf(_ref12) {
+  var schema = _ref12.schema,
+    action = _ref12.action;
   return actionParts({
     schema: schema,
     action: action
   }).steps || [];
 };
-var stepValueOf = function stepValueOf(_ref12) {
+var stepValueOf = function stepValueOf(_ref13) {
   var _action$metadata;
-  var action = _ref12.action,
-    step = _ref12.step;
+  var action = _ref13.action,
+    step = _ref13.step;
   return action === null || action === void 0 || (_action$metadata = action.metadata) === null || _action$metadata === void 0 ? void 0 : _action$metadata[step.key];
 };
-var stepLabelOf = function stepLabelOf(_ref13) {
+var stepLabelOf = function stepLabelOf(_ref14) {
   var _find;
-  var action = _ref13.action,
-    step = _ref13.step;
+  var action = _ref14.action,
+    step = _ref14.step;
   var value = stepValueOf({
     action: action,
     step: step
@@ -477,10 +523,10 @@ var stepLabelOf = function stepLabelOf(_ref13) {
     return ((_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : option.id) === value;
   })) === null || _find === void 0 ? void 0 : _find.label) || "";
 };
-var actionParts = function actionParts(_ref14) {
-  var _actions$actionForNam, _action$recipient, _actions$channelMeta, _find2, _find3, _channelMeta$needsRec, _actions$configValueL;
-  var schema = _ref14.schema,
-    action = _ref14.action;
+var actionParts = function actionParts(_ref15) {
+  var _actions$actionForNam, _action$recipient, _actions$channelMeta, _find2, _find3, _actions$configValueL, _channelMeta$needsRec;
+  var schema = _ref15.schema,
+    action = _ref15.action;
   var actions = (schema === null || schema === void 0 ? void 0 : schema.actions) || {};
   var resolved = action !== null && action !== void 0 && action.channel ? {
     channel: action.channel,
@@ -503,6 +549,10 @@ var actionParts = function actionParts(_ref14) {
     return ((_recipient$value = recipient.value) !== null && _recipient$value !== void 0 ? _recipient$value : recipient.id) === recipientValue;
   };
   var recipientLabel = ((_find2 = (actions.recipients || []).find(matchesRecipient)) === null || _find2 === void 0 ? void 0 : _find2.label) || ((_find3 = ((option === null || option === void 0 ? void 0 : option.recipients) || []).find(matchesRecipient)) === null || _find3 === void 0 ? void 0 : _find3.label) || recipientValue;
+
+  // A host may answer with a plain string or with { values, connector } when
+  // the value reads as a list.
+  var configValueParts = valueParts((_actions$configValueL = actions.configValueLabel) === null || _actions$configValueL === void 0 ? void 0 : _actions$configValueL.call(actions, action));
   return {
     option: option,
     channel: channel,
@@ -515,7 +565,8 @@ var actionParts = function actionParts(_ref14) {
     icon: channelMeta.icon || (option === null || option === void 0 ? void 0 : option.icon),
     needsRecipient: (_channelMeta$needsRec = channelMeta.needsRecipient) !== null && _channelMeta$needsRec !== void 0 ? _channelMeta$needsRec : option === null || option === void 0 ? void 0 : option.needsRecipient,
     separator: channelMeta.separator || (option === null || option === void 0 ? void 0 : option.separator),
-    configValue: ((_actions$configValueL = actions.configValueLabel) === null || _actions$configValueL === void 0 ? void 0 : _actions$configValueL.call(actions, action)) || "",
+    configValueParts: configValueParts,
+    configValue: joinValues(configValueParts),
     configValuePlaceholder: channelMeta.valuePlaceholder || (option === null || option === void 0 ? void 0 : option.valuePlaceholder),
     recipient: recipientValue,
     recipientLabel: recipientLabel,
@@ -530,13 +581,13 @@ var actionParts = function actionParts(_ref14) {
 // Which condition fields a host offers can depend on the rule — a trigger may
 // only support a subset. Lookups deliberately keep using the full list so a
 // field already on the rule still resolves after the offer narrows.
-var offeredConditionFields = function offeredConditionFields(_ref15) {
-  var _ref16, _schema$conditions$fi, _schema$conditions3, _schema$conditions3$f, _schema$conditions4;
-  var schema = _ref15.schema,
-    rule = _ref15.rule;
-  return (_ref16 = (_schema$conditions$fi = schema === null || schema === void 0 || (_schema$conditions3 = schema.conditions) === null || _schema$conditions3 === void 0 || (_schema$conditions3$f = _schema$conditions3.fieldsFor) === null || _schema$conditions3$f === void 0 ? void 0 : _schema$conditions3$f.call(_schema$conditions3, {
+var offeredConditionFields = function offeredConditionFields(_ref16) {
+  var _ref17, _schema$conditions$fi, _schema$conditions3, _schema$conditions3$f, _schema$conditions4;
+  var schema = _ref16.schema,
+    rule = _ref16.rule;
+  return (_ref17 = (_schema$conditions$fi = schema === null || schema === void 0 || (_schema$conditions3 = schema.conditions) === null || _schema$conditions3 === void 0 || (_schema$conditions3$f = _schema$conditions3.fieldsFor) === null || _schema$conditions3$f === void 0 ? void 0 : _schema$conditions3$f.call(_schema$conditions3, {
     rule: rule
-  })) !== null && _schema$conditions$fi !== void 0 ? _schema$conditions$fi : schema === null || schema === void 0 || (_schema$conditions4 = schema.conditions) === null || _schema$conditions4 === void 0 ? void 0 : _schema$conditions4.fields) !== null && _ref16 !== void 0 ? _ref16 : [];
+  })) !== null && _schema$conditions$fi !== void 0 ? _schema$conditions$fi : schema === null || schema === void 0 || (_schema$conditions4 = schema.conditions) === null || _schema$conditions4 === void 0 ? void 0 : _schema$conditions4.fields) !== null && _ref17 !== void 0 ? _ref17 : [];
 };
 var hasTrigger = function hasTrigger(rule) {
   return !ramda.isEmpty((rule === null || rule === void 0 ? void 0 : rule.triggers) || []);
@@ -550,20 +601,20 @@ var isTriggerEnabled = function isTriggerEnabled(schema) {
   var _schema$triggers2;
   return (schema === null || schema === void 0 || (_schema$triggers2 = schema.triggers) === null || _schema$triggers2 === void 0 ? void 0 : _schema$triggers2.enabled) !== false;
 };
-var isTriggerSatisfied = function isTriggerSatisfied(_ref17) {
-  var rule = _ref17.rule,
-    schema = _ref17.schema;
-  return !isTriggerEnabled(schema) || hasTrigger(rule);
-};
-var hasRequiredConditions = function hasRequiredConditions(_ref18) {
-  var _schema$conditions5;
+var isTriggerSatisfied = function isTriggerSatisfied(_ref18) {
   var rule = _ref18.rule,
     schema = _ref18.schema;
-  return (schema === null || schema === void 0 || (_schema$conditions5 = schema.conditions) === null || _schema$conditions5 === void 0 ? void 0 : _schema$conditions5.allowEmpty) === false ? neetoCist.isNotEmpty((rule === null || rule === void 0 ? void 0 : rule.conditions) || []) : true;
+  return !isTriggerEnabled(schema) || hasTrigger(rule);
 };
-var hasUnansweredStep = function hasUnansweredStep(_ref19) {
+var hasRequiredConditions = function hasRequiredConditions(_ref19) {
+  var _schema$conditions5;
   var rule = _ref19.rule,
     schema = _ref19.schema;
+  return (schema === null || schema === void 0 || (_schema$conditions5 = schema.conditions) === null || _schema$conditions5 === void 0 ? void 0 : _schema$conditions5.allowEmpty) === false ? neetoCist.isNotEmpty((rule === null || rule === void 0 ? void 0 : rule.conditions) || []) : true;
+};
+var hasUnansweredStep = function hasUnansweredStep(_ref20) {
+  var rule = _ref20.rule,
+    schema = _ref20.schema;
   return ((rule === null || rule === void 0 ? void 0 : rule.actions) || []).some(function (action) {
     return actionStepsOf({
       schema: schema,
@@ -576,9 +627,9 @@ var hasUnansweredStep = function hasUnansweredStep(_ref19) {
     });
   });
 };
-var isRuleComplete = function isRuleComplete(_ref20) {
-  var rule = _ref20.rule,
-    schema = _ref20.schema;
+var isRuleComplete = function isRuleComplete(_ref21) {
+  var rule = _ref21.rule,
+    schema = _ref21.schema;
   return isTriggerSatisfied({
     rule: rule,
     schema: schema
@@ -590,28 +641,28 @@ var isRuleComplete = function isRuleComplete(_ref20) {
     schema: schema
   });
 };
-var scopeOptionFor = function scopeOptionFor(_ref21) {
+var scopeOptionFor = function scopeOptionFor(_ref22) {
   var _item$value, _schema$scope;
-  var schema = _ref21.schema,
-    item = _ref21.item;
+  var schema = _ref22.schema,
+    item = _ref22.item;
   var value = (_item$value = item === null || item === void 0 ? void 0 : item.value) !== null && _item$value !== void 0 ? _item$value : item;
   return ((schema === null || schema === void 0 || (_schema$scope = schema.scope) === null || _schema$scope === void 0 ? void 0 : _schema$scope.options) || []).find(function (candidate) {
     var _candidate$value2;
     return ((_candidate$value2 = candidate.value) !== null && _candidate$value2 !== void 0 ? _candidate$value2 : candidate.id) === value;
   });
 };
-var scopePhoneFields = function scopePhoneFields(_ref22) {
-  var _ref23, _item$phoneFields, _scopeOptionFor;
-  var schema = _ref22.schema,
-    item = _ref22.item;
-  return (_ref23 = (_item$phoneFields = item === null || item === void 0 ? void 0 : item.phoneFields) !== null && _item$phoneFields !== void 0 ? _item$phoneFields : (_scopeOptionFor = scopeOptionFor({
+var scopePhoneFields = function scopePhoneFields(_ref23) {
+  var _ref24, _item$phoneFields, _scopeOptionFor;
+  var schema = _ref23.schema,
+    item = _ref23.item;
+  return (_ref24 = (_item$phoneFields = item === null || item === void 0 ? void 0 : item.phoneFields) !== null && _item$phoneFields !== void 0 ? _item$phoneFields : (_scopeOptionFor = scopeOptionFor({
     schema: schema,
     item: item
-  })) === null || _scopeOptionFor === void 0 ? void 0 : _scopeOptionFor.phoneFields) !== null && _ref23 !== void 0 ? _ref23 : null;
+  })) === null || _scopeOptionFor === void 0 ? void 0 : _scopeOptionFor.phoneFields) !== null && _ref24 !== void 0 ? _ref24 : null;
 };
-var effectiveScopePhoneField = function effectiveScopePhoneField(_ref24) {
-  var schema = _ref24.schema,
-    item = _ref24.item;
+var effectiveScopePhoneField = function effectiveScopePhoneField(_ref25) {
+  var schema = _ref25.schema,
+    item = _ref25.item;
   if (item !== null && item !== void 0 && item.phoneField) return item.phoneField;
   var phoneFields = scopePhoneFields({
     schema: schema,
@@ -619,14 +670,14 @@ var effectiveScopePhoneField = function effectiveScopePhoneField(_ref24) {
   });
   return (phoneFields === null || phoneFields === void 0 ? void 0 : phoneFields.length) === 1 ? phoneFields[0].value : undefined;
 };
-var invalidScopeIndexes = function invalidScopeIndexes(_ref25) {
+var invalidScopeIndexes = function invalidScopeIndexes(_ref26) {
   var _scope$requiresPhone;
-  var rule = _ref25.rule,
-    schema = _ref25.schema;
+  var rule = _ref26.rule,
+    schema = _ref26.schema;
   var scope = schema === null || schema === void 0 ? void 0 : schema.scope;
   if (!(scope !== null && scope !== void 0 && scope.enabled) || !((_scope$requiresPhone = scope.requiresPhone) !== null && _scope$requiresPhone !== void 0 && _scope$requiresPhone.call(scope, (rule === null || rule === void 0 ? void 0 : rule.actions) || []))) return [];
   return ((rule === null || rule === void 0 ? void 0 : rule.scope) || []).reduce(function (indexes, item, index) {
-    var _ref26, _item$hasPhoneField;
+    var _ref27, _item$hasPhoneField;
     var option = scopeOptionFor({
       schema: schema,
       item: item
@@ -635,15 +686,15 @@ var invalidScopeIndexes = function invalidScopeIndexes(_ref25) {
       schema: schema,
       item: item
     });
-    var hasPhoneField = (_ref26 = (_item$hasPhoneField = item === null || item === void 0 ? void 0 : item.hasPhoneField) !== null && _item$hasPhoneField !== void 0 ? _item$hasPhoneField : option === null || option === void 0 ? void 0 : option.hasPhoneField) !== null && _ref26 !== void 0 ? _ref26 : phoneFields ? phoneFields.length > 0 : undefined;
+    var hasPhoneField = (_ref27 = (_item$hasPhoneField = item === null || item === void 0 ? void 0 : item.hasPhoneField) !== null && _item$hasPhoneField !== void 0 ? _item$hasPhoneField : option === null || option === void 0 ? void 0 : option.hasPhoneField) !== null && _ref27 !== void 0 ? _ref27 : phoneFields ? phoneFields.length > 0 : undefined;
     if (hasPhoneField === false) indexes.push(index);
     return indexes;
   }, []);
 };
-var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref27) {
+var invalidScopePhoneFieldIndexes = function invalidScopePhoneFieldIndexes(_ref28) {
   var _scope$requiresPhone2;
-  var rule = _ref27.rule,
-    schema = _ref27.schema;
+  var rule = _ref28.rule,
+    schema = _ref28.schema;
   var scope = schema === null || schema === void 0 ? void 0 : schema.scope;
   if (!(scope !== null && scope !== void 0 && scope.enabled) || !((_scope$requiresPhone2 = scope.requiresPhone) !== null && _scope$requiresPhone2 !== void 0 && _scope$requiresPhone2.call(scope, (rule === null || rule === void 0 ? void 0 : rule.actions) || []))) return [];
   return ((rule === null || rule === void 0 ? void 0 : rule.scope) || []).reduce(function (indexes, item, index) {
@@ -680,9 +731,9 @@ var minutesToParts = function minutesToParts(minutes) {
     unit: "minutes"
   };
 };
-var partsToMinutes = function partsToMinutes(_ref28) {
-  var value = _ref28.value,
-    unit = _ref28.unit;
+var partsToMinutes = function partsToMinutes(_ref29) {
+  var value = _ref29.value,
+    unit = _ref29.unit;
   return (
     // eslint-disable-next-line security/detect-object-injection
     (Number(value) || 0) * (UNIT_MINUTES[unit] || 1)
@@ -736,11 +787,11 @@ var recipientStorageField = function recipientStorageField(field) {
 // Which metadata fields the recipient pane renders, and therefore owns: no
 // other pane may block Continue on them. Canvas and ConfigPane both ask here
 // so the two lists cannot drift apart.
-var recipientOwnedFields = function recipientOwnedFields(_ref29) {
+var recipientOwnedFields = function recipientOwnedFields(_ref30) {
   var _actions$actionForNam2, _action$recipient2, _actions$renderRecipi, _actions$renderRecipi2, _actions$optionForNam, _actions$optionForCha;
-  var schema = _ref29.schema,
-    action = _ref29.action,
-    name = _ref29.name;
+  var schema = _ref30.schema,
+    action = _ref30.action,
+    name = _ref30.name;
   var actions = (schema === null || schema === void 0 ? void 0 : schema.actions) || {};
   var resolved = ((_actions$actionForNam2 = actions.actionForName) === null || _actions$actionForNam2 === void 0 ? void 0 : _actions$actionForNam2.call(actions, action === null || action === void 0 ? void 0 : action.name)) || {};
   var channel = (action === null || action === void 0 ? void 0 : action.channel) || resolved.channel;
@@ -771,10 +822,10 @@ var modeFromJoinType = function modeFromJoinType(joinType) {
 };
 
 // eslint-disable-next-line security/detect-object-injection
-var valueAt = function valueAt(_ref30) {
+var valueAt = function valueAt(_ref31) {
   var _values$key;
-  var values = _ref30.values,
-    key = _ref30.key;
+  var values = _ref31.values,
+    key = _ref31.key;
   return values === null || values === void 0 || (_values$key = values[key]) === null || _values$key === void 0 ? void 0 : _values$key.value;
 };
 var asArray = function asArray(maybeArray) {
@@ -797,11 +848,11 @@ var fieldKeysFromSchema = function fieldKeysFromSchema() {
 };
 var valuesToRuleModel = function valuesToRuleModel() {
   var _valueAt, _conditions$;
-  var _ref31 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref31$values = _ref31.values,
-    values = _ref31$values === void 0 ? {} : _ref31$values,
-    _ref31$schema = _ref31.schema,
-    schema = _ref31$schema === void 0 ? {} : _ref31$schema;
+  var _ref32 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref32$values = _ref32.values,
+    values = _ref32$values === void 0 ? {} : _ref32$values,
+    _ref32$schema = _ref32.schema,
+    schema = _ref32$schema === void 0 ? {} : _ref32$schema;
   var keys = fieldKeysFromSchema(schema);
   var conditions = asArray(valueAt({
     values: values,
@@ -845,42 +896,42 @@ var valuesToRuleModel = function valuesToRuleModel() {
     }))
   };
 };
-var setTriggers = function setTriggers(_ref32) {
-  var schema = _ref32.schema,
-    triggers = _ref32.triggers;
+var setTriggers = function setTriggers(_ref33) {
+  var schema = _ref33.schema,
+    triggers = _ref33.triggers;
   return {
     path: "".concat(fieldKeysFromSchema(schema).triggers, ".value"),
     value: triggers
   };
 };
-var setPerformer = function setPerformer(_ref33) {
-  var schema = _ref33.schema,
-    performer = _ref33.performer;
+var setPerformer = function setPerformer(_ref34) {
+  var schema = _ref34.schema,
+    performer = _ref34.performer;
   return {
     path: "".concat(fieldKeysFromSchema(schema).performer, ".value"),
     value: performer
   };
 };
-var setActions = function setActions(_ref34) {
-  var schema = _ref34.schema,
-    actions = _ref34.actions;
+var setActions = function setActions(_ref35) {
+  var schema = _ref35.schema,
+    actions = _ref35.actions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).actions, ".value"),
     value: actions
   };
 };
-var setConditions = function setConditions(_ref35) {
-  var schema = _ref35.schema,
-    conditions = _ref35.conditions;
+var setConditions = function setConditions(_ref36) {
+  var schema = _ref36.schema,
+    conditions = _ref36.conditions;
   return {
     path: "".concat(fieldKeysFromSchema(schema).conditions, ".value"),
     value: conditions
   };
 };
-var setConditionMode = function setConditionMode(_ref36) {
-  var schema = _ref36.schema,
-    conditions = _ref36.conditions,
-    joinType = _ref36.joinType;
+var setConditionMode = function setConditionMode(_ref37) {
+  var schema = _ref37.schema,
+    conditions = _ref37.conditions,
+    joinType = _ref37.joinType;
   return setConditions({
     schema: schema,
     conditions: conditions.map(function (condition) {
@@ -888,34 +939,34 @@ var setConditionMode = function setConditionMode(_ref36) {
     })
   });
 };
-var setDelay = function setDelay(_ref37) {
-  var schema = _ref37.schema,
-    delay = _ref37.delay;
+var setDelay = function setDelay(_ref38) {
+  var schema = _ref38.schema,
+    delay = _ref38.delay;
   return {
     path: "".concat(fieldKeysFromSchema(schema).delay, ".value"),
     value: delay !== null && delay !== void 0 ? delay : {}
   };
 };
-var setActive = function setActive(_ref38) {
-  var schema = _ref38.schema,
-    active = _ref38.active;
+var setActive = function setActive(_ref39) {
+  var schema = _ref39.schema,
+    active = _ref39.active;
   return {
     path: "".concat(fieldKeysFromSchema(schema).status, ".value"),
     value: active ? STATUS_KEYS.ENABLED : STATUS_KEYS.DISABLED
   };
 };
-var setScope = function setScope(_ref39) {
-  var schema = _ref39.schema,
-    scope = _ref39.scope;
+var setScope = function setScope(_ref40) {
+  var schema = _ref40.schema,
+    scope = _ref40.scope;
   return {
     path: "".concat(fieldKeysFromSchema(schema).scope, ".value"),
     value: scope
   };
 };
-var removeArrayItem = function removeArrayItem(_ref40) {
-  var values = _ref40.values,
-    fieldKey = _ref40.fieldKey,
-    index = _ref40.index;
+var removeArrayItem = function removeArrayItem(_ref41) {
+  var values = _ref41.values,
+    fieldKey = _ref41.fieldKey,
+    index = _ref41.index;
   var list = asArray(valueAt({
     values: values,
     key: fieldKey
@@ -942,9 +993,9 @@ var removeArrayItem = function removeArrayItem(_ref40) {
   }
   return result;
 };
-var clearArrayItems = function clearArrayItems(_ref41) {
-  var values = _ref41.values,
-    fieldKey = _ref41.fieldKey;
+var clearArrayItems = function clearArrayItems(_ref42) {
+  var values = _ref42.values,
+    fieldKey = _ref42.fieldKey;
   var list = asArray(valueAt({
     values: values,
     key: fieldKey
@@ -1001,7 +1052,7 @@ var ConditionRow = function ConditionRow(_ref) {
     return ((_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : field.id) === (condition === null || condition === void 0 ? void 0 : condition.field);
   });
   var operatorPlaceholder = (conditionField === null || conditionField === void 0 ? void 0 : conditionField.operatorPlaceholder) || t("neetoRules.builder.selectOperator");
-  var value = conditionValueLabel({
+  var value = conditionValueParts({
     schema: schema,
     condition: condition
   });
@@ -1090,7 +1141,7 @@ var ConditionRow = function ConditionRow(_ref) {
               index: index
             });
           },
-          children: value || t("neetoRules.form.addValue")
+          children: value ? /*#__PURE__*/jsxRuntime.jsx(Values, _objectSpread$a({}, value)) : t("neetoRules.form.addValue")
         })]
       }) : /*#__PURE__*/jsxRuntime.jsx(Token, {
         active: isActive({
@@ -1519,6 +1570,7 @@ var ActionRow = function ActionRow(_ref) {
     recipientLabel = _actionParts.recipientLabel,
     separator = _actionParts.separator,
     configValue = _actionParts.configValue,
+    configValueParts = _actionParts.configValueParts,
     configValuePlaceholder = _actionParts.configValuePlaceholder,
     paramKind = _actionParts.paramKind,
     valueNoun = _actionParts.valueNoun,
@@ -1553,7 +1605,7 @@ var ActionRow = function ActionRow(_ref) {
     configSeparator = _ref3[1];
   var isConfigured = neetoCist.isNotEmpty(action === null || action === void 0 ? void 0 : action.metadata);
   // A host that shows no value label still needs the token to read as filled.
-  var configState = configValue || isConfigured ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED;
+  var configState = configValueParts || isConfigured ? TOKEN_STATE.FILLED : TOKEN_STATE.MUTED;
   var _useClearingHover = useClearingHover(),
     clearing = _useClearingHover.clearing,
     clearingHoverProps = _useClearingHover.clearingHoverProps;
@@ -1578,7 +1630,7 @@ var ActionRow = function ActionRow(_ref) {
           index: index
         });
       },
-      children: configValue || sentencify(configValuePlaceholder) || t("neetoRules.builder.selectFallback")
+      children: configValueParts ? /*#__PURE__*/jsxRuntime.jsx(Values, _objectSpread$7({}, configValueParts)) : sentencify(configValuePlaceholder) || t("neetoRules.builder.selectFallback")
     })]
   }, "config") : null;
   var recipientToken = needsRecipient ? /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
@@ -1681,7 +1733,7 @@ var ActionRow = function ActionRow(_ref) {
               index: index
             });
           },
-          children: configValue || sentencify(configValuePlaceholder) || paramPlaceholder
+          children: configValueParts ? /*#__PURE__*/jsxRuntime.jsx(Values, _objectSpread$7({}, configValueParts)) : sentencify(configValuePlaceholder) || paramPlaceholder
         }) : configLabel && /*#__PURE__*/jsxRuntime.jsxs(Token, {
           className: "mb-tok-medium",
           dataTestid: "action-config-".concat(index),