@bigbinary/neeto-rules-frontend 2.7.26 → 2.7.27

package/dist/v2/NeetoRulesBuilder.js

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { f as flatten, S as SHORTCUTS } from '../keyboardShortcuts-DwgF8Mcu.js';
+import { f as flatten, S as SHORTCUTS } from '../keyboardShortcuts-CsMwT9YF.js';
 import { useShallow } from 'zustand/shallow';
-import { useState, useRef, useEffect, createElement, Fragment as Fragment$1, useCallback, useMemo, isValidElement } from 'react';
+import { useState, useRef, useEffect, Fragment, createElement, useCallback, useMemo, isValidElement } from 'react';
 import { Button, Select, Input, Checkbox, Typography, RadioGroup, Textarea, DatePicker, Popover, Tooltip, MultiEmailInput, Spinner } from '@bigbinary/neeto-atoms';
 import { Input as Input$1, Select as Select$1, ActionBlock } from '@bigbinary/neeto-atoms/formik';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ import { isNotEmpty, toLabelAndValue, removeBy, isNot, noop } from '@bigbinary/n
 import Container from '@bigbinary/neeto-molecules/v2/Container';
 import Header from '@bigbinary/neeto-molecules/v2/Header';
 import { useTranslation } from 'react-i18next';
-import { r as ApiFields, E as EditorAction, L as ListField, o as Panel, s as ErrorCallout, t as SmsFields, M as MIN_DELAY_VALUE, v as MAX_DELAY_VALUE, w as PhoneNumberField, l as formatData, u as usePollRuleName, T as TouchErrors, n as ScrollToErrorField, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE, m as buildPayload } from '../index-Br0dDuGK.js';
+import { r as ApiFields, E as EditorAction, L as ListField, o as Panel, s as ErrorCallout, t as SmsFields, M as MIN_DELAY_VALUE, v as MAX_DELAY_VALUE, w as PhoneNumberField, l as formatData, u as usePollRuleName, T as TouchErrors, n as ScrollToErrorField, p as getValidationSchema, q as DEFAULT_INITIAL_VALUE, m as buildPayload } from '../index-DfYO62zW.js';
 import { u as useCustomDataStore } from '../useCustomDataStore-CEbhXugO.js';
 import { u as useUtilityStore } from '../useUtilityStore-BVCulMEC.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -20,7 +20,8 @@ import Plus from '@bigbinary/neeto-icons/Plus';
 import { isNil, isEmpty, assoc, mergeDeepRight, pluck } from 'ramda';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import _typeof from '@babel/runtime/helpers/typeof';
 import { t } from 'i18next';
 import * as yup from 'yup';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
@@ -31,7 +32,6 @@ import { D as DATE_FORMAT } from '../utils-DeqHhpwQ.js';
 import Up from '@bigbinary/neeto-icons/Up';
 import Down from '@bigbinary/neeto-icons/Down';
 import Info from '@bigbinary/neeto-icons/Info';
-import '@babel/runtime/helpers/typeof';
 import '../useAutomationRulesApi-C9I3wUZ8.js';
 import '@tanstack/react-query';
 import '@bigbinary/neeto-commons-frontend/react-utils';
@@ -289,6 +289,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__*/jsxs(Fragment, {
+      children: [index > 0 && " ", index > 0 && connector && /*#__PURE__*/jsxs(Fragment$1, {
+        children: [/*#__PURE__*/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) {
@@ -381,7 +397,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 (isNil(raw) || raw === "") return null;
+  if (Array.isArray(raw)) {
+    return isEmpty(raw) ? null : {
+      values: raw.map(String)
+    };
+  }
+  if (_typeof(raw) === "object") {
+    var values = Array.isArray(raw.values) ? raw.values.map(String) : [];
+    return 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;
@@ -401,23 +442,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) ? t("neetoRules.operators.and") : 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;
@@ -429,24 +475,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
@@ -456,10 +502,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,
@@ -482,6 +528,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,
@@ -494,7 +544,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,
@@ -509,13 +560,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 !isEmpty((rule === null || rule === void 0 ? void 0 : rule.triggers) || []);
@@ -529,20 +580,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 ? 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 ? 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,
@@ -555,9 +606,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
@@ -569,28 +620,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,
@@ -598,14 +649,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
@@ -614,15 +665,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) {
@@ -659,9 +710,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)
@@ -715,11 +766,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;
@@ -750,10 +801,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) {
@@ -776,11 +827,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,
@@ -824,42 +875,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) {
@@ -867,34 +918,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
@@ -921,9 +972,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
@@ -980,7 +1031,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
   });
@@ -1014,7 +1065,7 @@ var ConditionRow = function ConditionRow(_ref) {
           });
         },
         children: rule.conditionMode === CONDITION_MODE.OR ? t("neetoRules.operators.or") : t("neetoRules.operators.and")
-      }), hasField ? /*#__PURE__*/jsxs(Fragment, {
+      }), hasField ? /*#__PURE__*/jsxs(Fragment$1, {
         children: [/*#__PURE__*/jsx(Token, {
           active: isActive({
             type: BUILDER_ANCHORS.COND_FIELD,
@@ -1069,7 +1120,7 @@ var ConditionRow = function ConditionRow(_ref) {
               index: index
             });
           },
-          children: value || t("neetoRules.form.addValue")
+          children: value ? /*#__PURE__*/jsx(Values, _objectSpread$a({}, value)) : t("neetoRules.form.addValue")
         })]
       }) : /*#__PURE__*/jsx(Token, {
         active: isActive({
@@ -1407,7 +1458,7 @@ var ScopeRow = function ScopeRow(_ref2) {
       }), singlePhoneFieldLabel && /*#__PURE__*/jsxs("span", {
         className: "mb-fixed",
         children: [usingLabel, " ", singlePhoneFieldLabel]
-      }), hasPhoneFieldChoice && /*#__PURE__*/jsxs(Fragment, {
+      }), hasPhoneFieldChoice && /*#__PURE__*/jsxs(Fragment$1, {
         children: [/*#__PURE__*/jsx("span", {
           className: "mb-fixed",
           children: usingLabel
@@ -1498,6 +1549,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,
@@ -1532,11 +1584,11 @@ var ActionRow = function ActionRow(_ref) {
     configSeparator = _ref3[1];
   var isConfigured = 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;
-  var configToken = configSeparator ? /*#__PURE__*/jsxs(Fragment$1, {
+  var configToken = configSeparator ? /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("span", {
       className: "mb-fixed",
       children: configSeparator
@@ -1557,10 +1609,10 @@ var ActionRow = function ActionRow(_ref) {
           index: index
         });
       },
-      children: configValue || sentencify(configValuePlaceholder) || t("neetoRules.builder.selectFallback")
+      children: configValueParts ? /*#__PURE__*/jsx(Values, _objectSpread$7({}, configValueParts)) : sentencify(configValuePlaceholder) || t("neetoRules.builder.selectFallback")
     })]
   }, "config") : null;
-  var recipientToken = needsRecipient ? /*#__PURE__*/jsxs(Fragment$1, {
+  var recipientToken = needsRecipient ? /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("span", {
       className: "mb-fixed",
       children: recipientSeparator || t("neetoRules.common.to")
@@ -1594,7 +1646,7 @@ var ActionRow = function ActionRow(_ref) {
       index: index,
       stepKey: step.key
     };
-    return /*#__PURE__*/jsxs(Fragment$1, {
+    return /*#__PURE__*/jsxs(Fragment, {
       children: [step.separator && /*#__PURE__*/jsx("span", {
         className: "mb-fixed",
         children: step.separator
@@ -1632,7 +1684,7 @@ var ActionRow = function ActionRow(_ref) {
         children: [verbLabel, MediumIcon && /*#__PURE__*/jsx(MediumIcon, {
           size: 14
         }), configLabel]
-      }) : /*#__PURE__*/jsxs(Fragment, {
+      }) : /*#__PURE__*/jsxs(Fragment$1, {
         children: [/*#__PURE__*/jsx(Token, {
           active: isVerbActive,
           dataTestid: "action-verb-".concat(index),
@@ -1660,7 +1712,7 @@ var ActionRow = function ActionRow(_ref) {
               index: index
             });
           },
-          children: configValue || sentencify(configValuePlaceholder) || paramPlaceholder
+          children: configValueParts ? /*#__PURE__*/jsx(Values, _objectSpread$7({}, configValueParts)) : sentencify(configValuePlaceholder) || paramPlaceholder
         }) : configLabel && /*#__PURE__*/jsxs(Token, {
           className: "mb-tok-medium",
           dataTestid: "action-config-".concat(index),
@@ -1765,7 +1817,7 @@ var ThenBlock = function ThenBlock(_ref) {
       })
     });
   }
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [named.map(function (_ref3, position) {
       var _action$id;
       var action = _ref3.action,
@@ -1878,7 +1930,7 @@ var WhenBlock = function WhenBlock(_ref) {
         children: t("neetoRules.common.when")
       }), triggers.map(function (trigger, index) {
         var _trigger$id;
-        return /*#__PURE__*/jsxs(Fragment$1, {
+        return /*#__PURE__*/jsxs(Fragment, {
           children: [index > 0 && /*#__PURE__*/jsx("span", {
             className: "mb-fixed",
             children: t("neetoRules.operators.or")
@@ -1921,7 +1973,7 @@ var WhenBlock = function WhenBlock(_ref) {
             })
           })]
         }, (_trigger$id = trigger.id) !== null && _trigger$id !== void 0 ? _trigger$id : index);
-      }), isActorEnabled && /*#__PURE__*/jsxs(Fragment, {
+      }), isActorEnabled && /*#__PURE__*/jsxs(Fragment$1, {
         children: [/*#__PURE__*/jsx("span", {
           className: "mb-fixed",
           children: t("neetoRules.common.by")
@@ -3420,7 +3472,7 @@ var Canvas = function Canvas(_ref) {
         });
       }), renderSlot("afterConditions"), /*#__PURE__*/jsx(Connector, {
         active: isTriggerSet
-      }), isDelayEnabled && isTriggerSet && (rule.delay ? /*#__PURE__*/jsxs(Fragment$1, {
+      }), isDelayEnabled && isTriggerSet && (rule.delay ? /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(DelayRow, {
           isActive: isActive,
           isInvalid: isInvalid,
@@ -3454,7 +3506,7 @@ var Canvas = function Canvas(_ref) {
         onAddAction: handleAddAction,
         onRemoveAction: handleRemoveAction,
         onToken: openPane
-      }), renderSlot("afterActions"), isScopeEnabled && /*#__PURE__*/jsxs(Fragment$1, {
+      }), renderSlot("afterActions"), isScopeEnabled && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Connector, {
           active: true
         }), /*#__PURE__*/jsx(ScopeBlock, {
@@ -3966,7 +4018,7 @@ var ConfigPane = function ConfigPane(_ref) {
   useHotkeys(SHORTCUTS["continue"].sequence, handleContinue, {
     mode: "global"
   });
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
@@ -4076,7 +4128,7 @@ var DelayPane = function DelayPane(_ref) {
       return first.focus();
     }, 0);
   }, []);
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
@@ -4258,7 +4310,7 @@ var LeadTimePane = function LeadTimePane(_ref) {
     setFieldTouched(path, true, false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rule.leadTime]);
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
@@ -4321,7 +4373,7 @@ var NamePane = function NamePane(_ref) {
     t = _useTranslation.t;
   var _useRuleModel = useRuleModel(schema),
     fieldKeys = _useRuleModel.fieldKeys;
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex flex-col gap-y-1",
@@ -4554,7 +4606,7 @@ var OptionsPane = function OptionsPane(_ref) {
           var _ref3 = _slicedToArray(_ref2, 2),
             category = _ref3[0],
             items = _ref3[1];
-          return /*#__PURE__*/jsxs(Fragment$1, {
+          return /*#__PURE__*/jsxs(Fragment, {
             children: [renderGroupHeader(category), items.map(function (option) {
               return /*#__PURE__*/jsx(Checkbox, _objectSpread$2(_objectSpread$2({
                 checked: isSelected(option.value),
@@ -4596,7 +4648,7 @@ var OptionsPane = function OptionsPane(_ref) {
       }).filter(Boolean)
     });
   };
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
@@ -4785,7 +4837,7 @@ var RecipientPane = function RecipientPane(_ref) {
 
   // eslint-disable-next-line security/detect-object-injection
   var meta = ((_schema$actions9 = schema.actions) === null || _schema$actions9 === void 0 || (_schema$actions9 = _schema$actions9.channelMeta) === null || _schema$actions9 === void 0 ? void 0 : _schema$actions9[channel]) || {};
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",
@@ -4985,7 +5037,7 @@ var ValuePane = function ValuePane(_ref) {
       name: base
     });
   };
-  return /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx(Panel.Header, {
       children: /*#__PURE__*/jsxs("div", {
         className: "flex w-full flex-col gap-y-2",