@uipath/apollo-wind 2.42.0 → 2.43.0

package/dist/components/ui/combobox.cjs

@@ -50,7 +50,7 @@ const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRe
                     role: "combobox",
                     "aria-expanded": open,
                     "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', className),
+                    className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         selectedItem ? selectedItem.label : placeholder,

package/dist/components/ui/combobox.js

@@ -22,7 +22,7 @@ const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ items, value, onVa
                     role: "combobox",
                     "aria-expanded": open,
                     "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: cn('w-[280px] justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', className),
+                    className: cn('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         selectedItem ? selectedItem.label : placeholder,

package/dist/components/ui/dropdown-menu.cjs

@@ -52,11 +52,21 @@ const DropdownMenu = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)
         ...props
     });
 DropdownMenu.displayName = 'DropdownMenu';
-const DropdownMenuTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Trigger, {
+const DropdownMenuTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, field, error, errorId, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-errormessage': ariaErrorMessage, ...props }, ref)=>{
+    const describedBy = [
+        ariaDescribedBy,
+        error ? errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Trigger, {
         ref: ref,
         "data-slot": "dropdown-menu-trigger",
+        className: (0, index_cjs_namespaceObject.cn)(field && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:font-normal future:text-muted-foreground future:hover:bg-surface-hover', error && 'border-error ring-1 ring-error/20 future:ring-error/40', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": error ? errorId ?? ariaErrorMessage : ariaErrorMessage,
+        "aria-invalid": error ? true : ariaInvalid,
         ...props
-    }));
+    });
+});
 DropdownMenuTrigger.displayName = react_dropdown_menu_namespaceObject.Trigger.displayName;
 const DropdownMenuGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef((props, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Group, {
         ref: ref,

package/dist/components/ui/dropdown-menu.d.ts

@@ -5,7 +5,14 @@ declare const DropdownMenu: {
     (props: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Apply the Future theme field treatment when the trigger is used as a form control. */
+    field?: boolean;
+    /** Field-specific validation feedback rendered below the trigger by the consumer. */
+    error?: React.ReactNode;
+    /** Optional id for the validation message referenced by aria-describedby. */
+    errorId?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: {
     (props: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/dropdown-menu.js

@@ -10,11 +10,21 @@ const DropdownMenu = (props)=>/*#__PURE__*/ jsx(Root, {
         ...props
     });
 DropdownMenu.displayName = 'DropdownMenu';
-const DropdownMenuTrigger = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Trigger, {
+const DropdownMenuTrigger = /*#__PURE__*/ forwardRef(({ className, field, error, errorId, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-errormessage': ariaErrorMessage, ...props }, ref)=>{
+    const describedBy = [
+        ariaDescribedBy,
+        error ? errorId : void 0
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ jsx(Trigger, {
         ref: ref,
         "data-slot": "dropdown-menu-trigger",
+        className: cn(field && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:font-normal future:text-muted-foreground future:hover:bg-surface-hover', error && 'border-error ring-1 ring-error/20 future:ring-error/40', className),
+        "aria-describedby": describedBy || void 0,
+        "aria-errormessage": error ? errorId ?? ariaErrorMessage : ariaErrorMessage,
+        "aria-invalid": error ? true : ariaInvalid,
         ...props
-    }));
+    });
+});
 DropdownMenuTrigger.displayName = Trigger.displayName;
 const DropdownMenuGroup = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Group, {
         ref: ref,

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "./badge" (module) {
+    "@/components/ui/badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -36,7 +36,7 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "./checkbox" (module) {
+    "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -60,7 +60,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
@@ -84,13 +84,13 @@ var __webpack_modules__ = {
     "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/input-group" (module) {
+    "./input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -171,7 +171,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -265,7 +265,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("./badge");
+    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -314,7 +314,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
@@ -370,7 +370,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -426,21 +426,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_27[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_28 = __webpack_require__("./input");
+    var _input__rspack_import_28 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_28)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_29 = __webpack_require__("@/components/ui/input-group");
+    var _input_group__rspack_import_29 = __webpack_require__("./input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_29)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_30 = __webpack_require__("./label");
+    var _label__rspack_import_30 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_30)if ([
         "TreeView",
@@ -622,7 +622,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_56 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_56 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_56)if ([
         "TreeView",

package/dist/components/ui/multi-select.cjs

@@ -75,13 +75,13 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                         "aria-describedby": ariaDescribedBy,
                         "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
-                        className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
+                        className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: "flex flex-wrap gap-1 flex-1",
                                 children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                    className: "text-muted-foreground",
+                                    className: "text-muted-foreground future:text-foreground-muted",
                                     children: placeholder
                                 }) : selected.map((value)=>{
                                     const option = options.find((opt)=>opt.value === value);

package/dist/components/ui/multi-select.js

@@ -47,13 +47,13 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                         "aria-describedby": ariaDescribedBy,
                         "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
-                        className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:font-normal future:text-muted-foreground', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
+                        className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 className: "flex flex-wrap gap-1 flex-1",
                                 children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
-                                    className: "text-muted-foreground",
+                                    className: "text-muted-foreground future:text-foreground-muted",
                                     children: placeholder
                                 }) : selected.map((value)=>{
                                     const option = options.find((opt)=>opt.value === value);

package/dist/components/ui/prompt-editor/components/EditorToolbar.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_lucide_react_namespaceObject = require("lucide-react");
-const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
 const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
 const ToolbarButton = ({ icon: Icon, label, disabled, onClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
@@ -58,7 +58,7 @@ const ToolbarSeparator = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
         "aria-hidden": true,
         className: "mx-1 h-4 w-px bg-border/60"
     });
-const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen })=>{
+const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen })=>{
     const isEditMode = 'edit' === mode;
     const handleFormat = (actionName)=>()=>{
             if (!disabled && isEditMode) {
@@ -67,7 +67,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
             }
         };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1",
+        className: (0, index_cjs_namespaceObject.cn)('relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1 future:rounded-t-xl future:border-0 future:bg-surface-overlay', error && 'border-error ring-1 ring-error/20 future:ring-error/40'),
         "data-testid": "editor-toolbar",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {

package/dist/components/ui/prompt-editor/components/EditorToolbar.d.ts

@@ -3,7 +3,8 @@ export interface EditorToolbarProps {
     mode: PromptEditorMode;
     onModeChange: (mode: PromptEditorMode) => void;
     disabled?: boolean;
+    error?: boolean;
     actionsRef?: React.RefObject<PromptEditorToolbarActionsRef | null>;
     onFullscreen?: () => void;
 }
-export declare const EditorToolbar: ({ mode, onModeChange, disabled, actionsRef, onFullscreen, }: EditorToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorToolbar: ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen, }: EditorToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/prompt-editor/components/EditorToolbar.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Bold, Italic, List, ListOrdered, Maximize2, Strikethrough } from "lucide-react";
-import { cn } from "../../../../lib/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../tooltip.js";
+import { cn } from "../../../../lib/index.js";
 const ToolbarButton = ({ icon: Icon, label, disabled, onClick })=>/*#__PURE__*/ jsxs(Tooltip, {
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
@@ -30,7 +30,7 @@ const ToolbarSeparator = ()=>/*#__PURE__*/ jsx("span", {
         "aria-hidden": true,
         className: "mx-1 h-4 w-px bg-border/60"
     });
-const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen })=>{
+const EditorToolbar = ({ mode, onModeChange, disabled, error, actionsRef, onFullscreen })=>{
     const isEditMode = 'edit' === mode;
     const handleFormat = (actionName)=>()=>{
             if (!disabled && isEditMode) {
@@ -39,7 +39,7 @@ const EditorToolbar = ({ mode, onModeChange, disabled, actionsRef, onFullscreen
             }
         };
     return /*#__PURE__*/ jsxs("div", {
-        className: "relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1",
+        className: cn('relative flex items-center justify-between gap-1 overflow-hidden rounded-t-md border border-b-0 bg-background px-2 py-1 future:rounded-t-xl future:border-0 future:bg-surface-overlay', error && 'border-error ring-1 ring-error/20 future:ring-error/40'),
         "data-testid": "editor-toolbar",
         children: [
             /*#__PURE__*/ jsx("span", {

package/dist/components/ui/prompt-editor/prompt-editor.cjs

@@ -35,6 +35,7 @@ const LexicalOnChangePlugin_namespaceObject = require("@lexical/react/LexicalOnC
 const LexicalPlainTextPlugin_namespaceObject = require("@lexical/react/LexicalPlainTextPlugin");
 const external_lexical_namespaceObject = require("lexical");
 const external_react_namespaceObject = require("react");
+const external_form_field_cjs_namespaceObject = require("../form-field.cjs");
 const external_tooltip_cjs_namespaceObject = require("../tooltip.cjs");
 const EditorToolbar_cjs_namespaceObject = require("./components/EditorToolbar.cjs");
 const MarkdownPreview_cjs_namespaceObject = require("./components/MarkdownPreview.cjs");
@@ -56,7 +57,7 @@ const LINE_HEIGHT = 20;
 const EMPTY_AUTOCOMPLETE_OPTIONS = [];
 const EMPTY_TOKENS = [];
 const toTokenArray = (v)=>void 0 === v ? void 0 : Array.isArray(v) ? v : EMPTY_TOKENS;
-const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
+const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, error, errorId, ariaDescribedBy, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
     const editorRef = (0, external_react_namespaceObject.useRef)(null);
     const [isEmpty, setIsEmpty] = (0, external_react_namespaceObject.useState)(()=>{
         const seed = initialValue ?? value;
@@ -195,9 +196,10 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
         disabled
     ]);
     const options = Array.isArray(autoCompleteOptions) ? autoCompleteOptions : EMPTY_AUTOCOMPLETE_OPTIONS;
-    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`;
+    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: wrapperClassName,
+        "data-invalid": error ? 'true' : void 0,
         style: {
             fontFamily: "'Noto Sans', sans-serif",
             fontSize: '14px',
@@ -211,7 +213,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
                 children: `
           .prompt-editor-paragraph { padding: 0; margin: 0; }
-          ${borderless ? '' : '.prompt-editor-shell:focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); }'}
+          ${borderless ? '' : '.prompt-editor-shell:not([data-invalid="true"]):focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); } .future .prompt-editor-shell:not([data-invalid="true"]):focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring) 35%, transparent); }'}
           .prompt-editor-root *::selection { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
         `
             }),
@@ -230,7 +232,10 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalPlainTextPlugin_namespaceObject.PlainTextPlugin, {
                         contentEditable: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LexicalContentEditable_namespaceObject.ContentEditable, {
                             style: contentEditableStyle,
-                            ariaLabel: ariaLabel
+                            ariaLabel: ariaLabel,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": ariaDescribedBy,
+                            "aria-errormessage": error ? errorId : void 0
                         }),
                         placeholder: null,
                         ErrorBoundary: LexicalErrorBoundary_namespaceObject.LexicalErrorBoundary
@@ -252,7 +257,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
                                 textOverflow: 'ellipsis'
                             }
                         },
-                        className: "text-muted-foreground/60",
+                        className: "text-muted-foreground future:text-foreground-muted future:font-normal",
                         children: placeholder
                     })
                 ]
@@ -297,7 +302,7 @@ const EditorInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)
     });
 });
 EditorInner.displayName = 'PromptEditorInner';
-const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, mapVarDropToToken })=>{
+const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, 'aria-describedby': nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken })=>{
     const value = toTokenArray(rawValue);
     const initialValue = toTokenArray(rawInitialValue);
     const [internalMode, setInternalMode] = (0, external_react_namespaceObject.useState)('edit');
@@ -325,6 +330,13 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
         }), []);
     const isControlled = void 0 !== value;
     const previewTokens = isControlled ? value : uncontrolledPreviewTokens;
+    const generatedErrorId = (0, external_react_namespaceObject.useId)();
+    const errorId = providedErrorId ?? `prompt-editor-${generatedErrorId.replace(/:/g, '')}-error`;
+    const additionalDescribedBy = nativeAriaDescribedBy ?? legacyAriaDescribedBy;
+    const describedBy = [
+        additionalDescribedBy,
+        error ? errorId : void 0
+    ].filter(Boolean).join(' ');
     const handleEditorChange = (0, external_react_namespaceObject.useCallback)((tokens)=>{
         if (!isControlled) setUncontrolledPreviewTokens(tokens);
         onChange?.(tokens);
@@ -347,12 +359,14 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                 showToolbar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EditorToolbar_cjs_namespaceObject.EditorToolbar, {
                     mode: mode,
                     disabled: disabled,
+                    error: Boolean(error),
                     actionsRef: toolbarActionsRef,
                     onModeChange: handleModeChange,
                     onFullscreen: onFullscreen
                 }),
                 'preview' === mode && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: borderless ? void 0 : `border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`,
+                    "data-invalid": error ? 'true' : void 0,
+                    className: borderless ? void 0 : `border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MarkdownPreview_cjs_namespaceObject.MarkdownPreview, {
                         tokens: previewTokens,
                         minRows: minRows
@@ -374,6 +388,9 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                             autoCompleteOptions: autoCompleteOptions,
                             disabled: disabled,
                             ariaLabel: ariaLabel,
+                            error: error,
+                            errorId: error ? errorId : void 0,
+                            ariaDescribedBy: describedBy || void 0,
                             initialValue: initialValue,
                             maxRows: maxRows,
                             minRows: minRows,
@@ -388,6 +405,12 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                             onChange: handleEditorChange
                         })
                     })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+                    id: errorId,
+                    "data-slot": "prompt-editor-error",
+                    className: "mt-1",
+                    children: error
                 })
             ]
         })

package/dist/components/ui/prompt-editor/prompt-editor.d.ts

@@ -25,6 +25,14 @@ export interface PromptEditorProps {
     fillHeight?: boolean;
     /** Drop the editor's own border/background/rounding so a parent can provide the field chrome. */
     borderless?: boolean;
+    /** Field-specific validation feedback rendered below the editor. */
+    error?: React.ReactNode;
+    /** Optional id for the inline validation message. */
+    errorId?: string;
+    /** Additional description id(s) associated with the editor. */
+    'aria-describedby'?: string;
+    /** @deprecated Use the native `aria-describedby` prop instead. */
+    ariaDescribedBy?: string;
     /**
      * Enable variable drag-drop: map a path dropped onto the editor (see `VARIABLE_DRAG_MIME`) to the
      * token to insert at the drop point. The drag *source* is the consumer's (it sets the path on
@@ -32,4 +40,4 @@ export interface PromptEditorProps {
      */
     mapVarDropToToken?: (insertPath: string) => PromptEditorAutoCompleteOption;
 }
-export declare const PromptEditor: ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline, minRows, maxRows, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, mapVarDropToToken, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PromptEditor: ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline, minRows, maxRows, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, "aria-describedby": nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/prompt-editor/prompt-editor.js

@@ -6,7 +6,8 @@ import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { $getSelection, $isRangeSelection } from "lexical";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { FormFieldError } from "../form-field.js";
 import { TooltipProvider } from "../tooltip.js";
 import { EditorToolbar } from "./components/EditorToolbar.js";
 import { MarkdownPreview } from "./components/MarkdownPreview.js";
@@ -28,7 +29,7 @@ const LINE_HEIGHT = 20;
 const EMPTY_AUTOCOMPLETE_OPTIONS = [];
 const EMPTY_TOKENS = [];
 const toTokenArray = (v)=>void 0 === v ? void 0 : Array.isArray(v) ? v : EMPTY_TOKENS;
-const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
+const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, autoCompleteOptions = EMPTY_AUTOCOMPLETE_OPTIONS, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, fillHeight, borderless, error, errorId, ariaDescribedBy, mapVarDropToToken, toolbarActionsRef, showToolbar }, ref)=>{
     const editorRef = useRef(null);
     const [isEmpty, setIsEmpty] = useState(()=>{
         const seed = initialValue ?? value;
@@ -167,9 +168,10 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
         disabled
     ]);
     const options = Array.isArray(autoCompleteOptions) ? autoCompleteOptions : EMPTY_AUTOCOMPLETE_OPTIONS;
-    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`;
+    const wrapperClassName = borderless ? 'flex flex-col w-full relative' : `prompt-editor-shell flex flex-col w-full relative border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`;
     return /*#__PURE__*/ jsxs("div", {
         className: wrapperClassName,
+        "data-invalid": error ? 'true' : void 0,
         style: {
             fontFamily: "'Noto Sans', sans-serif",
             fontSize: '14px',
@@ -183,7 +185,7 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
             /*#__PURE__*/ jsx("style", {
                 children: `
           .prompt-editor-paragraph { padding: 0; margin: 0; }
-          ${borderless ? '' : '.prompt-editor-shell:focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); }'}
+          ${borderless ? '' : '.prompt-editor-shell:not([data-invalid="true"]):focus-within { border-color: var(--color-ring); box-shadow: 0 0 0 1px var(--color-ring); } .future .prompt-editor-shell:not([data-invalid="true"]):focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring) 35%, transparent); }'}
           .prompt-editor-root *::selection { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
         `
             }),
@@ -202,7 +204,10 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
                     /*#__PURE__*/ jsx(PlainTextPlugin, {
                         contentEditable: /*#__PURE__*/ jsx(ContentEditable, {
                             style: contentEditableStyle,
-                            ariaLabel: ariaLabel
+                            ariaLabel: ariaLabel,
+                            "aria-invalid": error ? true : void 0,
+                            "aria-describedby": ariaDescribedBy,
+                            "aria-errormessage": error ? errorId : void 0
                         }),
                         placeholder: null,
                         ErrorBoundary: LexicalErrorBoundary
@@ -224,7 +229,7 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
                                 textOverflow: 'ellipsis'
                             }
                         },
-                        className: "text-muted-foreground/60",
+                        className: "text-muted-foreground future:text-foreground-muted future:font-normal",
                         children: placeholder
                     })
                 ]
@@ -269,7 +274,7 @@ const EditorInner = /*#__PURE__*/ forwardRef(({ initialValue, value, onChange, a
     });
 });
 EditorInner.displayName = 'PromptEditorInner';
-const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, mapVarDropToToken })=>{
+const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange, multiline = true, minRows = DEFAULT_MIN_ROWS, maxRows = DEFAULT_MAX_ROWS, placeholder, disabled, ariaLabel, autoCompleteOptions, showToolbar = false, mode: controlledMode, onModeChange, onFullscreen, editorRef, fillHeight, borderless, error, errorId: providedErrorId, 'aria-describedby': nativeAriaDescribedBy, ariaDescribedBy: legacyAriaDescribedBy, mapVarDropToToken })=>{
     const value = toTokenArray(rawValue);
     const initialValue = toTokenArray(rawInitialValue);
     const [internalMode, setInternalMode] = useState('edit');
@@ -297,6 +302,13 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
         }), []);
     const isControlled = void 0 !== value;
     const previewTokens = isControlled ? value : uncontrolledPreviewTokens;
+    const generatedErrorId = useId();
+    const errorId = providedErrorId ?? `prompt-editor-${generatedErrorId.replace(/:/g, '')}-error`;
+    const additionalDescribedBy = nativeAriaDescribedBy ?? legacyAriaDescribedBy;
+    const describedBy = [
+        additionalDescribedBy,
+        error ? errorId : void 0
+    ].filter(Boolean).join(' ');
     const handleEditorChange = useCallback((tokens)=>{
         if (!isControlled) setUncontrolledPreviewTokens(tokens);
         onChange?.(tokens);
@@ -319,12 +331,14 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                 showToolbar && /*#__PURE__*/ jsx(EditorToolbar, {
                     mode: mode,
                     disabled: disabled,
+                    error: Boolean(error),
                     actionsRef: toolbarActionsRef,
                     onModeChange: handleModeChange,
                     onFullscreen: onFullscreen
                 }),
                 'preview' === mode && /*#__PURE__*/ jsx("div", {
-                    className: borderless ? void 0 : `border bg-background ${showToolbar ? 'border-t-0 rounded-b-md' : 'rounded-md'}`,
+                    "data-invalid": error ? 'true' : void 0,
+                    className: borderless ? void 0 : `border bg-background future:border-0 future:bg-surface-overlay ${showToolbar ? 'border-t-0 rounded-b-md future:rounded-b-xl' : 'rounded-md future:rounded-xl'} ${error ? 'border-error ring-1 ring-error/20 future:ring-error/40' : ''}`,
                     children: /*#__PURE__*/ jsx(MarkdownPreview, {
                         tokens: previewTokens,
                         minRows: minRows
@@ -346,6 +360,9 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                             autoCompleteOptions: autoCompleteOptions,
                             disabled: disabled,
                             ariaLabel: ariaLabel,
+                            error: error,
+                            errorId: error ? errorId : void 0,
+                            ariaDescribedBy: describedBy || void 0,
                             initialValue: initialValue,
                             maxRows: maxRows,
                             minRows: minRows,
@@ -360,6 +377,12 @@ const PromptEditor = ({ value: rawValue, initialValue: rawInitialValue, onChange
                             onChange: handleEditorChange
                         })
                     })
+                }),
+                /*#__PURE__*/ jsx(FormFieldError, {
+                    id: errorId,
+                    "data-slot": "prompt-editor-error",
+                    className: "mt-1",
+                    children: error
                 })
             ]
         })

package/dist/styles.css

@@ -4070,12 +4070,6 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
-  .text-muted-foreground\/60 {
-    color: var(--muted-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
-    }
-  }
   .text-muted-foreground\/70 {
     color: var(--muted-foreground);
     @supports (color: color-mix(in lab, red, red)) {
@@ -6235,6 +6229,18 @@
       border-radius: var(--radius-xl);
     }
   }
+  .future\:rounded-t-xl {
+    :is(.future-dark, .future-light) & {
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+    }
+  }
+  .future\:rounded-b-xl {
+    :is(.future-dark, .future-light) & {
+      border-bottom-right-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
+    }
+  }
   .future\:border-0 {
     :is(.future-dark, .future-light) & {
       border-style: var(--tw-border-style);
@@ -6323,6 +6329,11 @@
       color: var(--foreground-inverse);
     }
   }
+  .future\:text-foreground-muted {
+    :is(.future-dark, .future-light) & {
+      color: var(--foreground-muted);
+    }
+  }
   .future\:text-muted-foreground {
     :is(.future-dark, .future-light) & {
       color: var(--muted-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.42.0",
+  "version": "2.43.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",