@uipath/apollo-react 6.45.3 → 6.46.0

package/dist/canvas/components/Guardrails/components/escalate-action-fields.cjs

@@ -0,0 +1,268 @@
+"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__, {
+    EscalateActionFields: ()=>EscalateActionFields
+});
+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_builder_types_cjs_namespaceObject = require("../builder-types.cjs");
+function EscalateActionFields({ action, onChange, actionTypeSelect, errors, labels, renderRecipientSearch, renderStaticRecipient, renderAppPicker, escalateHelp }) {
+    const uid = (0, external_react_namespaceObject.useId)();
+    const recipientTypeLabels = {
+        [external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User]: labels.recipientUserLabel,
+        [external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group]: labels.recipientGroupLabel,
+        [external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail]: labels.recipientEmailLabel,
+        [external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticGroupName]: labels.recipientGroupNameLabel
+    };
+    const recipientType = action.recipient.type;
+    const displayedRecipientType = recipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.AssetEmail ? external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail : recipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.AssetGroupName ? external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticGroupName : recipientType;
+    const handleRecipientTypeChange = (0, external_react_namespaceObject.useCallback)((value)=>{
+        const newType = Number(value);
+        let recipient;
+        switch(newType){
+            case external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group:
+                recipient = {
+                    type: external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group,
+                    value: '',
+                    displayName: ''
+                };
+                break;
+            case external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail:
+                recipient = {
+                    type: external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail,
+                    value: ''
+                };
+                break;
+            case external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticGroupName:
+                recipient = {
+                    type: external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticGroupName,
+                    value: ''
+                };
+                break;
+            default:
+                recipient = {
+                    type: external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User,
+                    value: '',
+                    displayName: ''
+                };
+        }
+        onChange({
+            ...action,
+            recipient
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleRecipientSelect = (0, external_react_namespaceObject.useCallback)((selection)=>{
+        const r = action.recipient;
+        if (r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User || r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value: selection.value,
+                displayName: selection.displayName
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleRecipientClear = (0, external_react_namespaceObject.useCallback)(()=>{
+        const r = action.recipient;
+        if (r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User || r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value: '',
+                displayName: ''
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleTextValueChange = (0, external_react_namespaceObject.useCallback)((value)=>{
+        const r = action.recipient;
+        if (r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail || r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticGroupName) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value
+            }
+        });
+        else if (r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.AssetEmail || r.type === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.AssetGroupName) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                assetName: value
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const recipientValue = 'value' in action.recipient ? action.recipient.value : action.recipient.assetName;
+    const recipientDisplayValue = ('displayName' in action.recipient ? action.recipient.displayName : '') || recipientValue;
+    const isSearchable = recipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User || recipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.Group;
+    const searchKind = recipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.User ? 'user' : 'group';
+    const searchPlaceholder = 'user' === searchKind ? labels.userSearchPlaceholder : labels.groupSearchPlaceholder;
+    const appPickerCtx = {
+        app: action.app.name ? action.app : null,
+        onChange: (app)=>onChange({
+                ...action,
+                app: app ?? {
+                    id: '',
+                    version: '',
+                    name: ''
+                }
+            }),
+        label: labels.actionAppLabel,
+        error: errors?.actionApp
+    };
+    const fields = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
+                        htmlFor: `${uid}-escalate-recipient-type`,
+                        children: labels.assignToLabel
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Select, {
+                        value: String(displayedRecipientType),
+                        onValueChange: handleRecipientTypeChange,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectTrigger, {
+                                id: `${uid}-escalate-recipient-type`,
+                                "aria-label": `${labels.assignToLabel}: ${recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel}`,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectValue, {})
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectContent, {
+                                children: Object.entries(recipientTypeLabels).map(([typeValue, label])=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.SelectItem, {
+                                        value: typeValue,
+                                        children: label
+                                    }, typeValue))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.FormField, {
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Label, {
+                        children: [
+                            recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RequiredIndicator, {})
+                        ]
+                    }),
+                    isSearchable ? renderRecipientSearch ? renderRecipientSearch({
+                        kind: searchKind,
+                        displayValue: recipientDisplayValue,
+                        placeholder: searchPlaceholder,
+                        invalid: Boolean(errors?.recipient),
+                        error: errors?.recipient,
+                        onSelect: handleRecipientSelect,
+                        onClear: handleRecipientClear
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+                        value: recipientDisplayValue,
+                        onChange: (e)=>handleRecipientSelect({
+                                value: e.target.value,
+                                displayName: e.target.value
+                            }),
+                        placeholder: searchPlaceholder,
+                        error: errors?.recipient
+                    }) : (()=>{
+                        const staticNode = renderStaticRecipient?.({
+                            kind: displayedRecipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail ? 'email' : 'groupName',
+                            recipient: action.recipient,
+                            label: recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel,
+                            invalid: Boolean(errors?.recipient),
+                            error: errors?.recipient,
+                            onChange: (recipient)=>onChange({
+                                    ...action,
+                                    recipient
+                                })
+                        });
+                        if (void 0 !== staticNode) return staticNode;
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
+                            value: recipientValue,
+                            onChange: (e)=>handleTextValueChange(e.target.value),
+                            placeholder: displayedRecipientType === external_builder_types_cjs_namespaceObject.GuardrailRecipientType.StaticEmail ? labels.emailPlaceholder : labels.groupNamePlaceholder,
+                            error: errors?.recipient
+                        });
+                    })()
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormField, {
+                children: renderAppPicker ? renderAppPicker(appPickerCtx) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Label, {
+                            children: [
+                                labels.actionAppLabel,
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RequiredIndicator, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Alert, {
+                            variant: "info",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Info, {}),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.AlertDescription, {
+                                    children: labels.appPickerUnavailable
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldError, {
+                            children: errors?.actionApp
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        "data-slot": "guardrail-escalate-fields",
+        className: "@container space-y-3",
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "grid grid-cols-1 @sm:grid-cols-2 gap-3 items-start",
+                children: [
+                    actionTypeSelect,
+                    fields
+                ]
+            }),
+            escalateHelp
+        ]
+    });
+}
+exports.EscalateActionFields = __webpack_exports__.EscalateActionFields;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EscalateActionFields"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Guardrails/components/escalate-action-fields.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type GuardrailAction, type GuardrailAppPickerContext, type GuardrailRecipientSearchContext, type GuardrailStaticRecipientContext } from '../builder-types';
+import type { GuardrailBuilderLabels } from '../i18n';
+type EscalateAction = Extract<GuardrailAction, {
+    $actionType: 'escalate';
+}>;
+export interface EscalateActionFieldsProps {
+    action: EscalateAction;
+    onChange: (action: EscalateAction) => void;
+    actionTypeSelect: ReactNode;
+    errors?: {
+        recipient?: string;
+        actionApp?: string;
+    };
+    labels: GuardrailBuilderLabels;
+    renderRecipientSearch?: (ctx: GuardrailRecipientSearchContext) => ReactNode;
+    renderStaticRecipient?: (ctx: GuardrailStaticRecipientContext) => ReactNode | undefined;
+    renderAppPicker?: (ctx: GuardrailAppPickerContext) => ReactNode;
+    escalateHelp?: ReactNode;
+}
+export declare function EscalateActionFields({ action, onChange, actionTypeSelect, errors, labels, renderRecipientSearch, renderStaticRecipient, renderAppPicker, escalateHelp, }: EscalateActionFieldsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=escalate-action-fields.d.ts.map

package/dist/canvas/components/Guardrails/components/escalate-action-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escalate-action-fields.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/escalate-action-fields.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC3D,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAE9B,KAAK,+BAA+B,EAEpC,KAAK,+BAA+B,EACrC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,KAAK,cAAc,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,WAAW,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AAE5E,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAE3C,gBAAgB,EAAE,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,MAAM,EAAE,sBAAsB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAC5E,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,GAAG,SAAS,CAAC;IACxF,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,yBAAyB,KAAK,SAAS,CAAC;IAEhE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAOD,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,YAAY,GACb,EAAE,yBAAyB,2CA4N3B"}

package/dist/canvas/components/Guardrails/components/escalate-action-fields.js

@@ -0,0 +1,234 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Alert, AlertDescription, FormField, FormFieldError, Input, Label, RequiredIndicator, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@uipath/apollo-wind";
+import { Info } from "lucide-react";
+import { useCallback, useId } from "react";
+import { GuardrailRecipientType } from "../builder-types.js";
+function EscalateActionFields({ action, onChange, actionTypeSelect, errors, labels, renderRecipientSearch, renderStaticRecipient, renderAppPicker, escalateHelp }) {
+    const uid = useId();
+    const recipientTypeLabels = {
+        [GuardrailRecipientType.User]: labels.recipientUserLabel,
+        [GuardrailRecipientType.Group]: labels.recipientGroupLabel,
+        [GuardrailRecipientType.StaticEmail]: labels.recipientEmailLabel,
+        [GuardrailRecipientType.StaticGroupName]: labels.recipientGroupNameLabel
+    };
+    const recipientType = action.recipient.type;
+    const displayedRecipientType = recipientType === GuardrailRecipientType.AssetEmail ? GuardrailRecipientType.StaticEmail : recipientType === GuardrailRecipientType.AssetGroupName ? GuardrailRecipientType.StaticGroupName : recipientType;
+    const handleRecipientTypeChange = useCallback((value)=>{
+        const newType = Number(value);
+        let recipient;
+        switch(newType){
+            case GuardrailRecipientType.Group:
+                recipient = {
+                    type: GuardrailRecipientType.Group,
+                    value: '',
+                    displayName: ''
+                };
+                break;
+            case GuardrailRecipientType.StaticEmail:
+                recipient = {
+                    type: GuardrailRecipientType.StaticEmail,
+                    value: ''
+                };
+                break;
+            case GuardrailRecipientType.StaticGroupName:
+                recipient = {
+                    type: GuardrailRecipientType.StaticGroupName,
+                    value: ''
+                };
+                break;
+            default:
+                recipient = {
+                    type: GuardrailRecipientType.User,
+                    value: '',
+                    displayName: ''
+                };
+        }
+        onChange({
+            ...action,
+            recipient
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleRecipientSelect = useCallback((selection)=>{
+        const r = action.recipient;
+        if (r.type === GuardrailRecipientType.User || r.type === GuardrailRecipientType.Group) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value: selection.value,
+                displayName: selection.displayName
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleRecipientClear = useCallback(()=>{
+        const r = action.recipient;
+        if (r.type === GuardrailRecipientType.User || r.type === GuardrailRecipientType.Group) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value: '',
+                displayName: ''
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const handleTextValueChange = useCallback((value)=>{
+        const r = action.recipient;
+        if (r.type === GuardrailRecipientType.StaticEmail || r.type === GuardrailRecipientType.StaticGroupName) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                value
+            }
+        });
+        else if (r.type === GuardrailRecipientType.AssetEmail || r.type === GuardrailRecipientType.AssetGroupName) onChange({
+            ...action,
+            recipient: {
+                ...r,
+                assetName: value
+            }
+        });
+    }, [
+        action,
+        onChange
+    ]);
+    const recipientValue = 'value' in action.recipient ? action.recipient.value : action.recipient.assetName;
+    const recipientDisplayValue = ('displayName' in action.recipient ? action.recipient.displayName : '') || recipientValue;
+    const isSearchable = recipientType === GuardrailRecipientType.User || recipientType === GuardrailRecipientType.Group;
+    const searchKind = recipientType === GuardrailRecipientType.User ? 'user' : 'group';
+    const searchPlaceholder = 'user' === searchKind ? labels.userSearchPlaceholder : labels.groupSearchPlaceholder;
+    const appPickerCtx = {
+        app: action.app.name ? action.app : null,
+        onChange: (app)=>onChange({
+                ...action,
+                app: app ?? {
+                    id: '',
+                    version: '',
+                    name: ''
+                }
+            }),
+        label: labels.actionAppLabel,
+        error: errors?.actionApp
+    };
+    const fields = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        htmlFor: `${uid}-escalate-recipient-type`,
+                        children: labels.assignToLabel
+                    }),
+                    /*#__PURE__*/ jsxs(Select, {
+                        value: String(displayedRecipientType),
+                        onValueChange: handleRecipientTypeChange,
+                        children: [
+                            /*#__PURE__*/ jsx(SelectTrigger, {
+                                id: `${uid}-escalate-recipient-type`,
+                                "aria-label": `${labels.assignToLabel}: ${recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel}`,
+                                children: /*#__PURE__*/ jsx(SelectValue, {})
+                            }),
+                            /*#__PURE__*/ jsx(SelectContent, {
+                                children: Object.entries(recipientTypeLabels).map(([typeValue, label])=>/*#__PURE__*/ jsx(SelectItem, {
+                                        value: typeValue,
+                                        children: label
+                                    }, typeValue))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                children: [
+                    /*#__PURE__*/ jsxs(Label, {
+                        children: [
+                            recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel,
+                            /*#__PURE__*/ jsx(RequiredIndicator, {})
+                        ]
+                    }),
+                    isSearchable ? renderRecipientSearch ? renderRecipientSearch({
+                        kind: searchKind,
+                        displayValue: recipientDisplayValue,
+                        placeholder: searchPlaceholder,
+                        invalid: Boolean(errors?.recipient),
+                        error: errors?.recipient,
+                        onSelect: handleRecipientSelect,
+                        onClear: handleRecipientClear
+                    }) : /*#__PURE__*/ jsx(Input, {
+                        value: recipientDisplayValue,
+                        onChange: (e)=>handleRecipientSelect({
+                                value: e.target.value,
+                                displayName: e.target.value
+                            }),
+                        placeholder: searchPlaceholder,
+                        error: errors?.recipient
+                    }) : (()=>{
+                        const staticNode = renderStaticRecipient?.({
+                            kind: displayedRecipientType === GuardrailRecipientType.StaticEmail ? 'email' : 'groupName',
+                            recipient: action.recipient,
+                            label: recipientTypeLabels[displayedRecipientType] ?? labels.recipientFallbackLabel,
+                            invalid: Boolean(errors?.recipient),
+                            error: errors?.recipient,
+                            onChange: (recipient)=>onChange({
+                                    ...action,
+                                    recipient
+                                })
+                        });
+                        if (void 0 !== staticNode) return staticNode;
+                        return /*#__PURE__*/ jsx(Input, {
+                            value: recipientValue,
+                            onChange: (e)=>handleTextValueChange(e.target.value),
+                            placeholder: displayedRecipientType === GuardrailRecipientType.StaticEmail ? labels.emailPlaceholder : labels.groupNamePlaceholder,
+                            error: errors?.recipient
+                        });
+                    })()
+                ]
+            }),
+            /*#__PURE__*/ jsx(FormField, {
+                children: renderAppPicker ? renderAppPicker(appPickerCtx) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Label, {
+                            children: [
+                                labels.actionAppLabel,
+                                /*#__PURE__*/ jsx(RequiredIndicator, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Alert, {
+                            variant: "info",
+                            children: [
+                                /*#__PURE__*/ jsx(Info, {}),
+                                /*#__PURE__*/ jsx(AlertDescription, {
+                                    children: labels.appPickerUnavailable
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(FormFieldError, {
+                            children: errors?.actionApp
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "guardrail-escalate-fields",
+        className: "@container space-y-3",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "grid grid-cols-1 @sm:grid-cols-2 gap-3 items-start",
+                children: [
+                    actionTypeSelect,
+                    fields
+                ]
+            }),
+            escalateHelp
+        ]
+    });
+}
+export { EscalateActionFields };

package/dist/canvas/components/Guardrails/components/field-shell.cjs

@@ -0,0 +1,46 @@
+"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__, {
+    FieldShell: ()=>FieldShell
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const FieldShell = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ invalid = false, className, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        "data-slot": "guardrail-field-shell",
+        className: (0, apollo_wind_namespaceObject.cn)('rounded-md px-3 py-2 future:rounded-xl', 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', invalid && 'border-error ring-error/20 future:ring-1 future:ring-error/40', className),
+        ...props,
+        children: children
+    }));
+FieldShell.displayName = 'FieldShell';
+exports.FieldShell = __webpack_exports__.FieldShell;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FieldShell"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Guardrails/components/field-shell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface FieldShellProps extends React.ComponentPropsWithoutRef<'div'> {
+    invalid?: boolean;
+}
+declare const FieldShell: React.ForwardRefExoticComponent<FieldShellProps & React.RefAttributes<HTMLDivElement>>;
+export { FieldShell };
+//# sourceMappingURL=field-shell.d.ts.map

package/dist/canvas/components/Guardrails/components/field-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-shell.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Guardrails/components/field-shell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAE5E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAWD,QAAA,MAAM,UAAU,wFAgBf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/canvas/components/Guardrails/components/field-shell.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { forwardRef } from "react";
+const FieldShell = /*#__PURE__*/ forwardRef(({ invalid = false, className, children, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "guardrail-field-shell",
+        className: cn('rounded-md px-3 py-2 future:rounded-xl', 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', invalid && 'border-error ring-error/20 future:ring-1 future:ring-error/40', className),
+        ...props,
+        children: children
+    }));
+FieldShell.displayName = 'FieldShell';
+export { FieldShell };