@uipath/apollo-react 6.58.3 → 6.60.0

package/dist/canvas/components/Guardrails/components/guardrail-rule-card.cjs

@@ -0,0 +1,276 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    GuardrailRuleCard: ()=>GuardrailRuleCard
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_i18n_cjs_namespaceObject = require("../i18n.cjs");
+const external_rules_types_cjs_namespaceObject = require("../rules-types.cjs");
+const external_rules_utils_cjs_namespaceObject = require("../rules-utils.cjs");
+const external_guardrail_field_picker_cjs_namespaceObject = require("./guardrail-field-picker.cjs");
+const RULE_TYPE_LABEL_KEYS = {
+    word: 'ruleTypeWord',
+    number: 'ruleTypeNumber',
+    boolean: 'ruleTypeBoolean'
+};
+const OPERATOR_LABEL_KEYS = {
+    contains: 'operatorContains',
+    doesNotContain: 'operatorDoesNotContain',
+    equals: 'operatorEquals',
+    doesNotEqual: 'operatorDoesNotEqual',
+    startsWith: 'operatorStartsWith',
+    doesNotStartWith: 'operatorDoesNotStartWith',
+    endsWith: 'operatorEndsWith',
+    doesNotEndWith: 'operatorDoesNotEndWith',
+    isEmpty: 'operatorIsEmpty',
+    isNotEmpty: 'operatorIsNotEmpty',
+    matchesRegex: 'operatorMatchesRegex',
+    greaterThan: 'operatorGreaterThan',
+    greaterThanOrEqual: 'operatorGreaterThanOrEqual',
+    lessThan: 'operatorLessThan',
+    lessThanOrEqual: 'operatorLessThanOrEqual'
+};
+function NumberValueInput({ id, rule, onChange, error, placeholder }) {
+    const [draft, setDraft] = (0, external_react_namespaceObject.useState)(null);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+        id: id,
+        type: "number",
+        step: "any",
+        value: draft ?? String(rule.value),
+        placeholder: placeholder,
+        error: error,
+        onChange: (e)=>{
+            setDraft(e.target.value);
+            const parsed = Number.parseFloat(e.target.value);
+            onChange({
+                ...rule,
+                value: Number.isFinite(parsed) ? parsed : 0
+            });
+        },
+        onBlur: ()=>setDraft(null)
+    });
+}
+function GuardrailRuleCard({ index, position, rule, ruleTypes, fields, onChange, onDelete, errors, renderFieldSelector, selectionChips, labels }) {
+    const uid = (0, external_react_namespaceObject.useId)();
+    const typeOptions = ruleTypes.includes(rule.$ruleType) ? ruleTypes : [
+        ...ruleTypes,
+        rule.$ruleType
+    ];
+    const fieldSelectorContext = {
+        index,
+        ruleType: rule.$ruleType,
+        selector: rule.fieldSelector,
+        fields,
+        onChange: (fieldSelector)=>onChange({
+                ...rule,
+                fieldSelector
+            }),
+        label: labels.fieldsLabel,
+        labelId: `${uid}-fields-label`,
+        invalid: Boolean(errors?.fields),
+        error: errors?.fields
+    };
+    const customFieldSelector = renderFieldSelector?.(fieldSelectorContext);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        role: "group",
+        "aria-labelledby": `${uid}-title`,
+        "data-slot": "guardrail-rule",
+        className: "rounded-lg border border-border p-3 space-y-3",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        id: `${uid}-title`,
+                        className: "text-xs font-medium text-muted-foreground",
+                        children: (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.ruleTitle, {
+                            position
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "3xs",
+                        icon: true,
+                        "aria-label": (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.deleteRule, {
+                            position
+                        }),
+                        className: "text-destructive future:text-destructive hover:text-destructive future:hover:text-destructive",
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Trash2, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "grid grid-cols-1 @sm:grid-cols-2 @3xl:grid-cols-4 gap-3 items-start",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${uid}-type`,
+                                required: true,
+                                children: labels.ruleTypeLabel
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Select, {
+                                value: rule.$ruleType,
+                                onValueChange: (type)=>onChange((0, external_rules_utils_cjs_namespaceObject.changeGuardrailRuleType)(rule, type)),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectTrigger, {
+                                        id: `${uid}-type`,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectContent, {
+                                        children: typeOptions.map((type)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                                value: type,
+                                                children: labels[RULE_TYPE_LABEL_KEYS[type]]
+                                            }, type))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    void 0 === customFieldSelector ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_guardrail_field_picker_cjs_namespaceObject.GuardrailFieldPicker, {
+                        id: `${uid}-fields`,
+                        labelId: fieldSelectorContext.labelId,
+                        label: labels.fieldsLabel,
+                        fields: fields,
+                        selected: 'specific' === rule.fieldSelector.$selectorType ? rule.fieldSelector.fields : [],
+                        onToggle: (field)=>fieldSelectorContext.onChange((0, external_rules_utils_cjs_namespaceObject.toggleGuardrailSelectorField)(rule.fieldSelector, field)),
+                        allFields: {
+                            label: labels.allFields,
+                            selected: 'all' === rule.fieldSelector.$selectorType,
+                            onSelect: ()=>fieldSelectorContext.onChange({
+                                    $selectorType: 'all'
+                                })
+                        },
+                        chips: selectionChips,
+                        error: errors?.fields,
+                        labels: labels
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                id: fieldSelectorContext.labelId,
+                                required: true,
+                                children: labels.fieldsLabel
+                            }),
+                            customFieldSelector
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${uid}-operator`,
+                                required: true,
+                                children: labels.operatorLabel
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Select, {
+                                value: rule.operator,
+                                onValueChange: (operator)=>onChange({
+                                        ...rule,
+                                        operator
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectTrigger, {
+                                        id: `${uid}-operator`,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectContent, {
+                                        children: external_rules_types_cjs_namespaceObject.GUARDRAIL_RULE_OPERATORS[rule.$ruleType].map((operator)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                                value: operator,
+                                                children: labels[OPERATOR_LABEL_KEYS[operator]]
+                                            }, operator))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    (0, external_rules_utils_cjs_namespaceObject.guardrailOperatorTakesValue)(rule.operator) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldLabel, {
+                                htmlFor: `${uid}-value`,
+                                required: true,
+                                children: labels.valueLabel
+                            }),
+                            'word' === rule.$ruleType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+                                id: `${uid}-value`,
+                                value: rule.value ?? '',
+                                placeholder: labels.valuePlaceholder,
+                                error: errors?.value,
+                                onChange: (e)=>onChange({
+                                        ...rule,
+                                        value: e.target.value
+                                    })
+                            }),
+                            'number' === rule.$ruleType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NumberValueInput, {
+                                id: `${uid}-value`,
+                                rule: rule,
+                                onChange: onChange,
+                                error: errors?.value,
+                                placeholder: labels.valuePlaceholder
+                            }),
+                            'boolean' === rule.$ruleType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Select, {
+                                value: String(rule.value),
+                                onValueChange: (value)=>onChange({
+                                        ...rule,
+                                        value: 'true' === value
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectTrigger, {
+                                        id: `${uid}-value`,
+                                        error: errors?.value,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.SelectContent, {
+                                        children: [
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                                value: "true",
+                                                children: labels.valueTrue
+                                            }),
+                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                                value: "false",
+                                                children: labels.valueFalse
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.GuardrailRuleCard = __webpack_exports__.GuardrailRuleCard;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GuardrailRuleCard"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Guardrails/components/guardrail-rule-card.d.ts

@@ -0,0 +1,17 @@
+import { type GuardrailRulesLabels } from '../i18n';
+import { type GuardrailFieldGroup, type GuardrailFieldRule, type GuardrailFieldRuleType, type GuardrailRule, type GuardrailRuleErrors, type GuardrailRuleFieldSelectorRenderer } from '../rules-types';
+export interface GuardrailRuleCardProps {
+    index: number;
+    position: number;
+    rule: GuardrailFieldRule;
+    ruleTypes: readonly GuardrailFieldRuleType[];
+    fields: GuardrailFieldGroup;
+    onChange: (rule: GuardrailRule) => void;
+    onDelete: () => void;
+    errors?: GuardrailRuleErrors;
+    renderFieldSelector?: GuardrailRuleFieldSelectorRenderer;
+    selectionChips?: boolean;
+    labels: GuardrailRulesLabels;
+}
+export declare function GuardrailRuleCard({ index, position, rule, ruleTypes, fields, onChange, onDelete, errors, renderFieldSelector, selectionChips, labels, }: GuardrailRuleCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=guardrail-rule-card.d.ts.map

package/dist/canvas/components/Guardrails/components/guardrail-rule-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"guardrail-rule-card.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/guardrail-rule-card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAE3B,KAAK,aAAa,EAClB,KAAK,mBAAmB,EAExB,KAAK,kCAAkC,EAExC,MAAM,gBAAgB,CAAC;AAkCxB,MAAM,WAAW,sBAAsB;IAErC,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,kBAAkB,CAAC;IAEzB,SAAS,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC7C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,mBAAmB,CAAC,EAAE,kCAAkC,CAAC;IAEzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAqCD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,mBAAmB,EACnB,cAAc,EACd,MAAM,GACP,EAAE,sBAAsB,2CAwKxB"}

package/dist/canvas/components/Guardrails/components/guardrail-rule-card.js

@@ -0,0 +1,242 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, FormField, FormFieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@uipath/apollo-wind";
+import { Trash2 } from "lucide-react";
+import { useId, useState } from "react";
+import { formatGuardrailFormMessage } from "../i18n.js";
+import { GUARDRAIL_RULE_OPERATORS } from "../rules-types.js";
+import { changeGuardrailRuleType, guardrailOperatorTakesValue, toggleGuardrailSelectorField } from "../rules-utils.js";
+import { GuardrailFieldPicker } from "./guardrail-field-picker.js";
+const RULE_TYPE_LABEL_KEYS = {
+    word: 'ruleTypeWord',
+    number: 'ruleTypeNumber',
+    boolean: 'ruleTypeBoolean'
+};
+const OPERATOR_LABEL_KEYS = {
+    contains: 'operatorContains',
+    doesNotContain: 'operatorDoesNotContain',
+    equals: 'operatorEquals',
+    doesNotEqual: 'operatorDoesNotEqual',
+    startsWith: 'operatorStartsWith',
+    doesNotStartWith: 'operatorDoesNotStartWith',
+    endsWith: 'operatorEndsWith',
+    doesNotEndWith: 'operatorDoesNotEndWith',
+    isEmpty: 'operatorIsEmpty',
+    isNotEmpty: 'operatorIsNotEmpty',
+    matchesRegex: 'operatorMatchesRegex',
+    greaterThan: 'operatorGreaterThan',
+    greaterThanOrEqual: 'operatorGreaterThanOrEqual',
+    lessThan: 'operatorLessThan',
+    lessThanOrEqual: 'operatorLessThanOrEqual'
+};
+function NumberValueInput({ id, rule, onChange, error, placeholder }) {
+    const [draft, setDraft] = useState(null);
+    return /*#__PURE__*/ jsx(Input, {
+        id: id,
+        type: "number",
+        step: "any",
+        value: draft ?? String(rule.value),
+        placeholder: placeholder,
+        error: error,
+        onChange: (e)=>{
+            setDraft(e.target.value);
+            const parsed = Number.parseFloat(e.target.value);
+            onChange({
+                ...rule,
+                value: Number.isFinite(parsed) ? parsed : 0
+            });
+        },
+        onBlur: ()=>setDraft(null)
+    });
+}
+function GuardrailRuleCard({ index, position, rule, ruleTypes, fields, onChange, onDelete, errors, renderFieldSelector, selectionChips, labels }) {
+    const uid = useId();
+    const typeOptions = ruleTypes.includes(rule.$ruleType) ? ruleTypes : [
+        ...ruleTypes,
+        rule.$ruleType
+    ];
+    const fieldSelectorContext = {
+        index,
+        ruleType: rule.$ruleType,
+        selector: rule.fieldSelector,
+        fields,
+        onChange: (fieldSelector)=>onChange({
+                ...rule,
+                fieldSelector
+            }),
+        label: labels.fieldsLabel,
+        labelId: `${uid}-fields-label`,
+        invalid: Boolean(errors?.fields),
+        error: errors?.fields
+    };
+    const customFieldSelector = renderFieldSelector?.(fieldSelectorContext);
+    return /*#__PURE__*/ jsxs("div", {
+        role: "group",
+        "aria-labelledby": `${uid}-title`,
+        "data-slot": "guardrail-rule",
+        className: "rounded-lg border border-border p-3 space-y-3",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        id: `${uid}-title`,
+                        className: "text-xs font-medium text-muted-foreground",
+                        children: formatGuardrailFormMessage(labels.ruleTitle, {
+                            position
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "3xs",
+                        icon: true,
+                        "aria-label": formatGuardrailFormMessage(labels.deleteRule, {
+                            position
+                        }),
+                        className: "text-destructive future:text-destructive hover:text-destructive future:hover:text-destructive",
+                        onClick: onDelete,
+                        children: /*#__PURE__*/ jsx(Trash2, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "grid grid-cols-1 @sm:grid-cols-2 @3xl:grid-cols-4 gap-3 items-start",
+                children: [
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${uid}-type`,
+                                required: true,
+                                children: labels.ruleTypeLabel
+                            }),
+                            /*#__PURE__*/ jsxs(Select, {
+                                value: rule.$ruleType,
+                                onValueChange: (type)=>onChange(changeGuardrailRuleType(rule, type)),
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectTrigger, {
+                                        id: `${uid}-type`,
+                                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectContent, {
+                                        children: typeOptions.map((type)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                value: type,
+                                                children: labels[RULE_TYPE_LABEL_KEYS[type]]
+                                            }, type))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    void 0 === customFieldSelector ? /*#__PURE__*/ jsx(GuardrailFieldPicker, {
+                        id: `${uid}-fields`,
+                        labelId: fieldSelectorContext.labelId,
+                        label: labels.fieldsLabel,
+                        fields: fields,
+                        selected: 'specific' === rule.fieldSelector.$selectorType ? rule.fieldSelector.fields : [],
+                        onToggle: (field)=>fieldSelectorContext.onChange(toggleGuardrailSelectorField(rule.fieldSelector, field)),
+                        allFields: {
+                            label: labels.allFields,
+                            selected: 'all' === rule.fieldSelector.$selectorType,
+                            onSelect: ()=>fieldSelectorContext.onChange({
+                                    $selectorType: 'all'
+                                })
+                        },
+                        chips: selectionChips,
+                        error: errors?.fields,
+                        labels: labels
+                    }) : /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                id: fieldSelectorContext.labelId,
+                                required: true,
+                                children: labels.fieldsLabel
+                            }),
+                            customFieldSelector
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${uid}-operator`,
+                                required: true,
+                                children: labels.operatorLabel
+                            }),
+                            /*#__PURE__*/ jsxs(Select, {
+                                value: rule.operator,
+                                onValueChange: (operator)=>onChange({
+                                        ...rule,
+                                        operator
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectTrigger, {
+                                        id: `${uid}-operator`,
+                                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ jsx(SelectContent, {
+                                        children: GUARDRAIL_RULE_OPERATORS[rule.$ruleType].map((operator)=>/*#__PURE__*/ jsx(SelectItem, {
+                                                value: operator,
+                                                children: labels[OPERATOR_LABEL_KEYS[operator]]
+                                            }, operator))
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    guardrailOperatorTakesValue(rule.operator) && /*#__PURE__*/ jsxs(FormField, {
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                htmlFor: `${uid}-value`,
+                                required: true,
+                                children: labels.valueLabel
+                            }),
+                            'word' === rule.$ruleType && /*#__PURE__*/ jsx(Input, {
+                                id: `${uid}-value`,
+                                value: rule.value ?? '',
+                                placeholder: labels.valuePlaceholder,
+                                error: errors?.value,
+                                onChange: (e)=>onChange({
+                                        ...rule,
+                                        value: e.target.value
+                                    })
+                            }),
+                            'number' === rule.$ruleType && /*#__PURE__*/ jsx(NumberValueInput, {
+                                id: `${uid}-value`,
+                                rule: rule,
+                                onChange: onChange,
+                                error: errors?.value,
+                                placeholder: labels.valuePlaceholder
+                            }),
+                            'boolean' === rule.$ruleType && /*#__PURE__*/ jsxs(Select, {
+                                value: String(rule.value),
+                                onValueChange: (value)=>onChange({
+                                        ...rule,
+                                        value: 'true' === value
+                                    }),
+                                children: [
+                                    /*#__PURE__*/ jsx(SelectTrigger, {
+                                        id: `${uid}-value`,
+                                        error: errors?.value,
+                                        children: /*#__PURE__*/ jsx(SelectValue, {})
+                                    }),
+                                    /*#__PURE__*/ jsxs(SelectContent, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "true",
+                                                children: labels.valueTrue
+                                            }),
+                                            /*#__PURE__*/ jsx(SelectItem, {
+                                                value: "false",
+                                                children: labels.valueFalse
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { GuardrailRuleCard };

package/dist/canvas/components/Guardrails/components/guardrail-scope-selector.cjs

@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_i18n_cjs_namespaceObject = require("../i18n.cjs");
 const external_field_shell_cjs_namespaceObject = require("./field-shell.cjs");
 const external_guardrail_chip_cjs_namespaceObject = require("./guardrail-chip.cjs");
 const ALL_SCOPES = [
@@ -37,7 +38,8 @@ const ALL_SCOPES = [
     'Llm',
     'Tool'
 ];
-function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], allowedScopes, errors, labels }) {
+function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], allowedScopes, errors, labels: labelOverrides, className }) {
+    const labels = (0, external_i18n_cjs_namespaceObject.useGuardrailScopeSelectorLabels)(labelOverrides);
     const uid = (0, external_react_namespaceObject.useId)();
     const scopeLabels = (0, external_react_namespaceObject.useMemo)(()=>({
             Agent: labels.scopeAgentLabel,
@@ -125,7 +127,7 @@ function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], a
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-slot": "guardrail-scope-selector",
-        className: "space-y-3",
+        className: (0, apollo_wind_namespaceObject.cn)('space-y-3', className),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
                 children: [

package/dist/canvas/components/Guardrails/components/guardrail-scope-selector.d.ts

@@ -1,15 +1,13 @@
-import type { GuardrailScope, GuardrailSelector } from '../builder-types';
-import type { GuardrailBuilderLabels } from '../i18n';
+import type { GuardrailScope, GuardrailScopeSelectorErrors, GuardrailSelector } from '../builder-types';
+import { type GuardrailScopeSelectorLabels } from '../i18n';
 export interface GuardrailScopeSelectorProps {
     selector: GuardrailSelector;
     onChange: (selector: GuardrailSelector) => void;
     availableToolNames?: string[];
     allowedScopes?: GuardrailScope[];
-    errors?: {
-        scopes?: string;
-        toolNames?: string;
-    };
-    labels: GuardrailBuilderLabels;
+    errors?: GuardrailScopeSelectorErrors;
+    labels?: Partial<GuardrailScopeSelectorLabels>;
+    className?: string;
 }
-export declare function GuardrailScopeSelector({ selector, onChange, availableToolNames, allowedScopes, errors, labels, }: GuardrailScopeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function GuardrailScopeSelector({ selector, onChange, availableToolNames, allowedScopes, errors, labels: labelOverrides, className, }: GuardrailScopeSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=guardrail-scope-selector.d.ts.map

package/dist/canvas/components/Guardrails/components/guardrail-scope-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guardrail-scope-selector.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/guardrail-scope-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAMtD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE9B,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,MAAM,EAAE,sBAAsB,CAAC;CAChC;AAMD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,kBAAuB,EACvB,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,2BAA2B,2CAkK7B"}
+{"version":3,"file":"guardrail-scope-selector.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/guardrail-scope-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,cAAc,EACd,4BAA4B,EAC5B,iBAAiB,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,4BAA4B,EAAmC,MAAM,SAAS,CAAC;AAM7F,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhD,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAE9B,aAAa,CAAC,EAAE,cAAc,EAAE,CAAC;IAEjC,MAAM,CAAC,EAAE,4BAA4B,CAAC;IAEtC,MAAM,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,kBAAuB,EACvB,aAAa,EACb,MAAM,EACN,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,2BAA2B,2CAmK7B"}

package/dist/canvas/components/Guardrails/components/guardrail-scope-selector.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FormField, FormFieldError, Label, RequiredIndicator } from "@uipath/apollo-wind";
+import { FormField, FormFieldError, Label, RequiredIndicator, cn } from "@uipath/apollo-wind";
 import { Check, Plus } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo } from "react";
+import { useGuardrailScopeSelectorLabels } from "../i18n.js";
 import { FieldShell } from "./field-shell.js";
 import { GuardrailChip } from "./guardrail-chip.js";
 const ALL_SCOPES = [
@@ -9,7 +10,8 @@ const ALL_SCOPES = [
     'Llm',
     'Tool'
 ];
-function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], allowedScopes, errors, labels }) {
+function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], allowedScopes, errors, labels: labelOverrides, className }) {
+    const labels = useGuardrailScopeSelectorLabels(labelOverrides);
     const uid = useId();
     const scopeLabels = useMemo(()=>({
             Agent: labels.scopeAgentLabel,
@@ -97,7 +99,7 @@ function GuardrailScopeSelector({ selector, onChange, availableToolNames = [], a
     ]);
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "guardrail-scope-selector",
-        className: "space-y-3",
+        className: cn('space-y-3', className),
         children: [
             /*#__PURE__*/ jsxs(FormField, {
                 children: [