@uipath/apollo-react 6.49.0 → 6.50.0

package/dist/canvas/components/Guardrails/guardrail-list-utils.js

@@ -0,0 +1,60 @@
+function getGuardrailListItemId(item) {
+    return item.id ?? item.name;
+}
+function matchesGuardrailListDefinition(definition, item) {
+    return void 0 === item.byoValidatorName ? void 0 === definition.byoValidatorName && definition.validator === item.validatorType : definition.byoValidatorName === item.byoValidatorName;
+}
+function resolveGuardrailListItemState(item, definitions = []) {
+    const isByo = void 0 !== item.byoValidatorName;
+    const definition = definitions.find((candidate)=>matchesGuardrailListDefinition(candidate, item));
+    const byoUnavailable = isByo && definitions.length > 0 && void 0 === definition;
+    const byoDisabled = isByo && definition?.status === 'Disabled';
+    return {
+        definition,
+        status: byoUnavailable ? 'Unavailable' : definition?.status,
+        isByo,
+        provider: definition?.byoConnectorName,
+        byoDisabled,
+        byoUnavailable
+    };
+}
+function getGuardrailListChips(input, labels) {
+    const chips = [];
+    const statusChip = (()=>{
+        switch(input.status){
+            case 'FeatureDisabled':
+                return {
+                    tone: 'warning',
+                    label: labels.statusFeatureDisabled
+                };
+            case 'Unauthorised':
+                return {
+                    tone: 'warning',
+                    label: labels.statusUnauthorized
+                };
+            case 'Disabled':
+                return {
+                    tone: 'error',
+                    label: labels.statusDisabled
+                };
+            case 'Unavailable':
+                return {
+                    tone: 'error',
+                    label: labels.statusUnavailable
+                };
+            default:
+                return;
+        }
+    })();
+    if (statusChip) chips.push({
+        id: 'status',
+        ...statusChip
+    });
+    if ('governance' === input.administration) chips.push({
+        id: 'administration',
+        tone: 'neutral',
+        label: labels.administrationGovernance
+    });
+    return chips;
+}
+export { getGuardrailListChips, getGuardrailListItemId, matchesGuardrailListDefinition, resolveGuardrailListItemState };

package/dist/canvas/components/Guardrails/guardrail-list.cjs

@@ -0,0 +1,214 @@
+"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__, {
+    GuardrailList: ()=>GuardrailList
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const core_namespaceObject = require("@dnd-kit/core");
+const modifiers_namespaceObject = require("@dnd-kit/modifiers");
+const sortable_namespaceObject = require("@dnd-kit/sortable");
+const utilities_namespaceObject = require("@dnd-kit/utilities");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const guardrail_list_row_cjs_namespaceObject = require("./components/guardrail-list-row.cjs");
+const external_guardrail_list_utils_cjs_namespaceObject = require("./guardrail-list-utils.cjs");
+const external_i18n_cjs_namespaceObject = require("./i18n.cjs");
+const DND_MODIFIERS = [
+    modifiers_namespaceObject.restrictToVerticalAxis,
+    modifiers_namespaceObject.restrictToParentElement
+];
+const POINTER_SENSOR_OPTIONS = {
+    activationConstraint: {
+        distance: 8
+    }
+};
+function SortableRows({ ids, onDragEnd, children }) {
+    const sensors = (0, core_namespaceObject.useSensors)((0, core_namespaceObject.useSensor)(core_namespaceObject.PointerSensor, POINTER_SENSOR_OPTIONS), (0, core_namespaceObject.useSensor)(core_namespaceObject.KeyboardSensor, {
+        coordinateGetter: sortable_namespaceObject.sortableKeyboardCoordinates
+    }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DndContext, {
+        sensors: sensors,
+        collisionDetection: core_namespaceObject.closestCenter,
+        modifiers: DND_MODIFIERS,
+        autoScroll: false,
+        onDragEnd: onDragEnd,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(sortable_namespaceObject.SortableContext, {
+            items: ids,
+            strategy: sortable_namespaceObject.verticalListSortingStrategy,
+            children: children
+        })
+    });
+}
+function SortableGuardrailRow({ id, item, labels, ...rowProps }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = (0, sortable_namespaceObject.useSortable)({
+        id
+    });
+    const handle = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+        ref: setActivatorNodeRef,
+        type: "button",
+        variant: "ghost",
+        size: "3xs",
+        icon: true,
+        className: "cursor-grab touch-none",
+        "aria-label": (0, external_i18n_cjs_namespaceObject.formatGuardrailFormMessage)(labels.reorderItem, {
+            name: item.name
+        }),
+        ...attributes,
+        ...listeners,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {})
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(guardrail_list_row_cjs_namespaceObject.GuardrailListRow, {
+        ref: setNodeRef,
+        id: id,
+        item: item,
+        labels: labels,
+        handle: handle,
+        style: {
+            transform: utilities_namespaceObject.CSS.Translate.toString(transform),
+            transition,
+            opacity: isDragging ? 0.5 : void 0
+        },
+        ...rowProps
+    });
+}
+function GuardrailList({ guardrails, definitions, disabled = false, reorderDisabled, onEdit, onRemove, onAdd, onReorder, getItemId = external_guardrail_list_utils_cjs_namespaceObject.getGuardrailListItemId, getItemAdministration, statusChips = false, previewChip = false, byoChip = false, unstyled = false, hideHeader = false, rowActivatesEdit = false, emptyState, footer, addSlot, statusBanner, renderRowTooltip, renderItemActions, formatScopes, formatAction, labels: labelOverrides, className }) {
+    const labels = (0, external_i18n_cjs_namespaceObject.useGuardrailListLabels)(labelOverrides);
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>guardrails.map((item)=>({
+                item,
+                id: getItemId(item)
+            })), [
+        guardrails,
+        getItemId
+    ]);
+    const ids = (0, external_react_namespaceObject.useMemo)(()=>rows.map((row)=>row.id), [
+        rows
+    ]);
+    const isReorderable = !(reorderDisabled ?? disabled) && void 0 !== onReorder && guardrails.length > 1;
+    const handleDragEnd = (0, external_react_namespaceObject.useCallback)(({ active, over })=>{
+        if (!onReorder || !over || active.id === over.id) return;
+        const from = ids.indexOf(String(active.id));
+        const to = ids.indexOf(String(over.id));
+        if (-1 === from || -1 === to) return;
+        onReorder((0, sortable_namespaceObject.arrayMove)(guardrails, from, to), {
+            from,
+            to,
+            id: String(active.id)
+        });
+    }, [
+        guardrails,
+        ids,
+        onReorder
+    ]);
+    const renderedRows = rows.map(({ item, id }, index)=>{
+        const rowProps = {
+            item,
+            id,
+            index,
+            state: (0, external_guardrail_list_utils_cjs_namespaceObject.resolveGuardrailListItemState)(item, definitions),
+            labels,
+            disabled,
+            administration: getItemAdministration?.(item),
+            statusChips,
+            previewChip,
+            byoChip,
+            rowActivatesEdit,
+            onEdit,
+            onRemove,
+            renderRowTooltip,
+            renderItemActions,
+            formatScopes,
+            formatAction
+        };
+        return isReorderable ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SortableGuardrailRow, {
+            ...rowProps
+        }, id) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(guardrail_list_row_cjs_namespaceObject.GuardrailListRow, {
+            ...rowProps
+        }, id);
+    });
+    const content = guardrails.length > 0 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "space-y-2",
+        children: renderedRows
+    }) : void 0 === emptyState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
+        className: "text-sm text-muted-foreground",
+        children: labels.empty
+    }) : emptyState;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        "data-slot": "guardrail-list",
+        className: (0, apollo_wind_namespaceObject.cn)(!unstyled && 'rounded-md border', className),
+        children: [
+            !hideHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, apollo_wind_namespaceObject.cn)('flex items-center justify-between', !unstyled && 'px-3 py-2'),
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Shield, {
+                                className: "size-4 text-muted-foreground",
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-sm font-medium",
+                                children: labels.title
+                            })
+                        ]
+                    }),
+                    void 0 !== addSlot ? addSlot : onAdd && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.Button, {
+                        type: "button",
+                        variant: "text",
+                        size: "2xs",
+                        className: "w-fit p-0",
+                        disabled: disabled,
+                        onClick: onAdd,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {}),
+                            labels.add
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: (0, apollo_wind_namespaceObject.cn)('space-y-2', !unstyled && 'p-3'),
+                children: [
+                    statusBanner,
+                    isReorderable ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SortableRows, {
+                        ids: ids,
+                        onDragEnd: handleDragEnd,
+                        children: content
+                    }) : content,
+                    footer
+                ]
+            })
+        ]
+    });
+}
+exports.GuardrailList = __webpack_exports__.GuardrailList;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GuardrailList"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/Guardrails/guardrail-list.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type GuardrailListLabels } from './i18n';
+import type { GuardrailListAdministration, GuardrailListDefinition, GuardrailListItem, GuardrailListItemActionsContext, GuardrailReorderMove, GuardrailRowTooltipRenderer } from './list-types';
+export interface GuardrailListProps {
+    guardrails: GuardrailListItem[];
+    definitions?: GuardrailListDefinition[];
+    disabled?: boolean;
+    reorderDisabled?: boolean;
+    onEdit?: (item: GuardrailListItem) => void;
+    onRemove?: (item: GuardrailListItem) => void;
+    onAdd?: () => void;
+    onReorder?: (guardrails: GuardrailListItem[], move: GuardrailReorderMove) => void;
+    getItemId?: (item: GuardrailListItem) => string;
+    getItemAdministration?: (item: GuardrailListItem) => GuardrailListAdministration | undefined;
+    statusChips?: boolean;
+    previewChip?: boolean;
+    byoChip?: boolean;
+    unstyled?: boolean;
+    hideHeader?: boolean;
+    rowActivatesEdit?: boolean;
+    emptyState?: ReactNode;
+    footer?: ReactNode;
+    addSlot?: ReactNode;
+    statusBanner?: ReactNode;
+    renderRowTooltip?: GuardrailRowTooltipRenderer;
+    renderItemActions?: (ctx: GuardrailListItemActionsContext) => ReactNode;
+    formatScopes?: (item: GuardrailListItem) => ReactNode;
+    formatAction?: (item: GuardrailListItem) => ReactNode;
+    labels?: Partial<GuardrailListLabels>;
+    className?: string;
+}
+export declare function GuardrailList({ guardrails, definitions, disabled, reorderDisabled, onEdit, onRemove, onAdd, onReorder, getItemId, getItemAdministration, statusChips, previewChip, byoChip, unstyled, hideHeader, rowActivatesEdit, emptyState, footer, addSlot, statusBanner, renderRowTooltip, renderItemActions, formatScopes, formatAction, labels: labelOverrides, className, }: GuardrailListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=guardrail-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"guardrail-list.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Guardrails/guardrail-list.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAG7D,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EACV,2BAA2B,EAC3B,uBAAuB,EACvB,iBAAiB,EACjB,+BAA+B,EAC/B,oBAAoB,EACpB,2BAA2B,EAC5B,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,kBAAkB;IAKjC,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAMhC,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAExC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAK3C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAE7C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IAKnB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAGlF,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAEhD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,2BAA2B,GAAG,SAAS,CAAC;IAG7F,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,SAAS,CAAC;IAGzB,gBAAgB,CAAC,EAAE,2BAA2B,CAAC;IAE/C,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAExE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAEtD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAEtD,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoGD,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,WAAW,EACX,QAAgB,EAChB,eAAe,EACf,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAkC,EAClC,qBAAqB,EACrB,WAAmB,EACnB,WAAmB,EACnB,OAAe,EACf,QAAgB,EAChB,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,kBAAkB,2CAkGpB"}

package/dist/canvas/components/Guardrails/guardrail-list.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Button, cn } from "@uipath/apollo-wind";
+import { GripVertical, Plus, Shield } from "lucide-react";
+import { useCallback, useMemo } from "react";
+import { GuardrailListRow } from "./components/guardrail-list-row.js";
+import { getGuardrailListItemId, resolveGuardrailListItemState } from "./guardrail-list-utils.js";
+import { formatGuardrailFormMessage, useGuardrailListLabels } from "./i18n.js";
+const DND_MODIFIERS = [
+    restrictToVerticalAxis,
+    restrictToParentElement
+];
+const POINTER_SENSOR_OPTIONS = {
+    activationConstraint: {
+        distance: 8
+    }
+};
+function SortableRows({ ids, onDragEnd, children }) {
+    const sensors = useSensors(useSensor(PointerSensor, POINTER_SENSOR_OPTIONS), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    return /*#__PURE__*/ jsx(DndContext, {
+        sensors: sensors,
+        collisionDetection: closestCenter,
+        modifiers: DND_MODIFIERS,
+        autoScroll: false,
+        onDragEnd: onDragEnd,
+        children: /*#__PURE__*/ jsx(SortableContext, {
+            items: ids,
+            strategy: verticalListSortingStrategy,
+            children: children
+        })
+    });
+}
+function SortableGuardrailRow({ id, item, labels, ...rowProps }) {
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+        id
+    });
+    const handle = /*#__PURE__*/ jsx(Button, {
+        ref: setActivatorNodeRef,
+        type: "button",
+        variant: "ghost",
+        size: "3xs",
+        icon: true,
+        className: "cursor-grab touch-none",
+        "aria-label": formatGuardrailFormMessage(labels.reorderItem, {
+            name: item.name
+        }),
+        ...attributes,
+        ...listeners,
+        children: /*#__PURE__*/ jsx(GripVertical, {})
+    });
+    return /*#__PURE__*/ jsx(GuardrailListRow, {
+        ref: setNodeRef,
+        id: id,
+        item: item,
+        labels: labels,
+        handle: handle,
+        style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            opacity: isDragging ? 0.5 : void 0
+        },
+        ...rowProps
+    });
+}
+function GuardrailList({ guardrails, definitions, disabled = false, reorderDisabled, onEdit, onRemove, onAdd, onReorder, getItemId = getGuardrailListItemId, getItemAdministration, statusChips = false, previewChip = false, byoChip = false, unstyled = false, hideHeader = false, rowActivatesEdit = false, emptyState, footer, addSlot, statusBanner, renderRowTooltip, renderItemActions, formatScopes, formatAction, labels: labelOverrides, className }) {
+    const labels = useGuardrailListLabels(labelOverrides);
+    const rows = useMemo(()=>guardrails.map((item)=>({
+                item,
+                id: getItemId(item)
+            })), [
+        guardrails,
+        getItemId
+    ]);
+    const ids = useMemo(()=>rows.map((row)=>row.id), [
+        rows
+    ]);
+    const isReorderable = !(reorderDisabled ?? disabled) && void 0 !== onReorder && guardrails.length > 1;
+    const handleDragEnd = useCallback(({ active, over })=>{
+        if (!onReorder || !over || active.id === over.id) return;
+        const from = ids.indexOf(String(active.id));
+        const to = ids.indexOf(String(over.id));
+        if (-1 === from || -1 === to) return;
+        onReorder(arrayMove(guardrails, from, to), {
+            from,
+            to,
+            id: String(active.id)
+        });
+    }, [
+        guardrails,
+        ids,
+        onReorder
+    ]);
+    const renderedRows = rows.map(({ item, id }, index)=>{
+        const rowProps = {
+            item,
+            id,
+            index,
+            state: resolveGuardrailListItemState(item, definitions),
+            labels,
+            disabled,
+            administration: getItemAdministration?.(item),
+            statusChips,
+            previewChip,
+            byoChip,
+            rowActivatesEdit,
+            onEdit,
+            onRemove,
+            renderRowTooltip,
+            renderItemActions,
+            formatScopes,
+            formatAction
+        };
+        return isReorderable ? /*#__PURE__*/ jsx(SortableGuardrailRow, {
+            ...rowProps
+        }, id) : /*#__PURE__*/ jsx(GuardrailListRow, {
+            ...rowProps
+        }, id);
+    });
+    const content = guardrails.length > 0 ? /*#__PURE__*/ jsx("div", {
+        className: "space-y-2",
+        children: renderedRows
+    }) : void 0 === emptyState ? /*#__PURE__*/ jsx("p", {
+        className: "text-sm text-muted-foreground",
+        children: labels.empty
+    }) : emptyState;
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "guardrail-list",
+        className: cn(!unstyled && 'rounded-md border', className),
+        children: [
+            !hideHeader && /*#__PURE__*/ jsxs("div", {
+                className: cn('flex items-center justify-between', !unstyled && 'px-3 py-2'),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Shield, {
+                                className: "size-4 text-muted-foreground",
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm font-medium",
+                                children: labels.title
+                            })
+                        ]
+                    }),
+                    void 0 !== addSlot ? addSlot : onAdd && /*#__PURE__*/ jsxs(Button, {
+                        type: "button",
+                        variant: "text",
+                        size: "2xs",
+                        className: "w-fit p-0",
+                        disabled: disabled,
+                        onClick: onAdd,
+                        children: [
+                            /*#__PURE__*/ jsx(Plus, {}),
+                            labels.add
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: cn('space-y-2', !unstyled && 'p-3'),
+                children: [
+                    statusBanner,
+                    isReorderable ? /*#__PURE__*/ jsx(SortableRows, {
+                        ids: ids,
+                        onDragEnd: handleDragEnd,
+                        children: content
+                    }) : content,
+                    footer
+                ]
+            })
+        ]
+    });
+}
+export { GuardrailList };

package/dist/canvas/components/Guardrails/i18n.cjs

@@ -26,11 +26,15 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     GUARDRAIL_BUILDER_EN_LABELS: ()=>GUARDRAIL_BUILDER_EN_LABELS,
     GUARDRAIL_FORM_EN_LABELS: ()=>GUARDRAIL_FORM_EN_LABELS,
-    useGuardrailBuilderLabels: ()=>useGuardrailBuilderLabels,
+    resolveGuardrailListLabels: ()=>resolveGuardrailListLabels,
+    GUARDRAIL_LIST_EN_LABELS: ()=>GUARDRAIL_LIST_EN_LABELS,
     resolveGuardrailFormLabels: ()=>resolveGuardrailFormLabels,
+    useGuardrailFormLabels: ()=>useGuardrailFormLabels,
+    useGuardrailBuilderLabels: ()=>useGuardrailBuilderLabels,
     resolveGuardrailBuilderLabels: ()=>resolveGuardrailBuilderLabels,
     formatGuardrailFormMessage: ()=>formatGuardrailFormMessage,
-    useGuardrailFormLabels: ()=>useGuardrailFormLabels
+    useGuardrailListLabels: ()=>useGuardrailListLabels,
+    GUARDRAIL_LIST_EN_MESSAGES: ()=>GUARDRAIL_LIST_EN_MESSAGES
 });
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
@@ -102,9 +106,9 @@ const GUARDRAIL_BUILDER_EN_LABELS = {
     recipientRequiredError: 'Recipient is required',
     actionAppRequiredError: 'Action app is required'
 };
-function resolveGuardrailBuilderLabels(catalog, overrides) {
+function mergeLabels(defaults, catalog, overrides) {
     const merged = {
-        ...GUARDRAIL_BUILDER_EN_LABELS
+        ...defaults
     };
     for (const source of [
         catalog,
@@ -115,21 +119,14 @@ function resolveGuardrailBuilderLabels(catalog, overrides) {
     }
     return merged;
 }
+function resolveGuardrailBuilderLabels(catalog, overrides) {
+    return mergeLabels(GUARDRAIL_BUILDER_EN_LABELS, catalog, overrides);
+}
 function formatGuardrailFormMessage(template, vars) {
     return template.replace(/\{\{(\w+)\}\}/g, (match, token)=>token in vars ? String(vars[token]) : match);
 }
 function resolveGuardrailFormLabels(catalog, overrides) {
-    const merged = {
-        ...GUARDRAIL_FORM_EN_LABELS
-    };
-    for (const source of [
-        catalog,
-        overrides
-    ])if (source) for (const key of Object.keys(merged)){
-        const value = source[key];
-        if (void 0 !== value) merged[key] = value;
-    }
-    return merged;
+    return mergeLabels(GUARDRAIL_FORM_EN_LABELS, catalog, overrides);
 }
 const TEMPLATE_TOKENS = {
     name: '{{name}}',
@@ -415,21 +412,132 @@ function useGuardrailBuilderLabels(overrides) {
         overrides
     ]);
 }
+function buildGuardrailListLabels(_) {
+    return {
+        title: _({
+            id: 'guardrails.list.title',
+            message: 'Guardrails'
+        }),
+        add: _({
+            id: 'guardrails.list.add',
+            message: 'Add'
+        }),
+        empty: _({
+            id: 'guardrails.list.empty',
+            message: 'No guardrails configured'
+        }),
+        reorderItem: _({
+            id: 'guardrails.list.reorder-item',
+            message: 'Reorder guardrail {name}',
+            values: TEMPLATE_TOKENS
+        }),
+        editItem: _({
+            id: 'guardrails.list.edit-item',
+            message: 'Edit guardrail'
+        }),
+        editRow: _({
+            id: 'guardrails.list.edit-row',
+            message: 'Edit {name}',
+            values: TEMPLATE_TOKENS
+        }),
+        removeItem: _({
+            id: 'guardrails.list.remove-item',
+            message: 'Remove guardrail'
+        }),
+        removeRow: _({
+            id: 'guardrails.list.remove-row',
+            message: 'Remove {name}',
+            values: TEMPLATE_TOKENS
+        }),
+        preview: _({
+            id: 'guardrails.list.preview',
+            message: 'Preview'
+        }),
+        byo: _({
+            id: 'guardrails.list.byo',
+            message: 'BYO'
+        }),
+        provider: _({
+            id: 'guardrails.list.provider',
+            message: 'Provider'
+        }),
+        actionUnknown: _({
+            id: 'guardrails.list.action-unknown',
+            message: 'Unknown'
+        }),
+        byoDisabledNotice: _({
+            id: 'guardrails.list.byo-disabled-notice',
+            message: "This guardrail's configuration has been disabled and can no longer be used. Contact your administrator to re-enable the configuration or replace this guardrail before running the agent."
+        }),
+        byoUnavailableNotice: _({
+            id: 'guardrails.list.byo-unavailable-notice',
+            message: "This guardrail's configuration is no longer available. Replace it before running the agent."
+        }),
+        statusFeatureDisabled: _({
+            id: 'guardrails.list.status-feature-disabled',
+            message: 'Feature disabled'
+        }),
+        statusUnauthorized: _({
+            id: 'guardrails.list.status-unauthorized',
+            message: 'Unauthorized'
+        }),
+        statusDisabled: _({
+            id: 'guardrails.list.status-disabled',
+            message: 'Disabled'
+        }),
+        statusUnavailable: _({
+            id: 'guardrails.list.status-unavailable',
+            message: 'Unavailable'
+        }),
+        administrationGovernance: _({
+            id: 'guardrails.list.administration-governance',
+            message: 'Governance managed'
+        })
+    };
+}
+const englishListTranslate = ({ message, values })=>values ? message.replace(/\{(\w+)\}/g, (match, token)=>values[token] ?? match) : message;
+const GUARDRAIL_LIST_EN_LABELS = buildGuardrailListLabels(englishListTranslate);
+const GUARDRAIL_LIST_EN_MESSAGES = Object.freeze((()=>{
+    const messages = {};
+    buildGuardrailListLabels((descriptor)=>{
+        messages[descriptor.id] = descriptor.message;
+        return descriptor.message;
+    });
+    return messages;
+})());
+function resolveGuardrailListLabels(catalog, overrides) {
+    return mergeLabels(GUARDRAIL_LIST_EN_LABELS, catalog, overrides);
+}
+function useGuardrailListLabels(overrides) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    return (0, external_react_namespaceObject.useMemo)(()=>resolveGuardrailListLabels(buildGuardrailListLabels(_), overrides), [
+        _,
+        overrides
+    ]);
+}
 exports.GUARDRAIL_BUILDER_EN_LABELS = __webpack_exports__.GUARDRAIL_BUILDER_EN_LABELS;
 exports.GUARDRAIL_FORM_EN_LABELS = __webpack_exports__.GUARDRAIL_FORM_EN_LABELS;
+exports.GUARDRAIL_LIST_EN_LABELS = __webpack_exports__.GUARDRAIL_LIST_EN_LABELS;
+exports.GUARDRAIL_LIST_EN_MESSAGES = __webpack_exports__.GUARDRAIL_LIST_EN_MESSAGES;
 exports.formatGuardrailFormMessage = __webpack_exports__.formatGuardrailFormMessage;
 exports.resolveGuardrailBuilderLabels = __webpack_exports__.resolveGuardrailBuilderLabels;
 exports.resolveGuardrailFormLabels = __webpack_exports__.resolveGuardrailFormLabels;
+exports.resolveGuardrailListLabels = __webpack_exports__.resolveGuardrailListLabels;
 exports.useGuardrailBuilderLabels = __webpack_exports__.useGuardrailBuilderLabels;
 exports.useGuardrailFormLabels = __webpack_exports__.useGuardrailFormLabels;
+exports.useGuardrailListLabels = __webpack_exports__.useGuardrailListLabels;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "GUARDRAIL_BUILDER_EN_LABELS",
     "GUARDRAIL_FORM_EN_LABELS",
+    "GUARDRAIL_LIST_EN_LABELS",
+    "GUARDRAIL_LIST_EN_MESSAGES",
     "formatGuardrailFormMessage",
     "resolveGuardrailBuilderLabels",
     "resolveGuardrailFormLabels",
+    "resolveGuardrailListLabels",
     "useGuardrailBuilderLabels",
-    "useGuardrailFormLabels"
+    "useGuardrailFormLabels",
+    "useGuardrailListLabels"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true