@uipath/apollo-wind 2.41.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

@@ -60,16 +60,16 @@ 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) {
         module.exports = require("./drawer.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -159,13 +159,13 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
@@ -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",
@@ -384,14 +384,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_22 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_22 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_22)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -601,7 +601,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_52[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_53 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_53 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_53)if ([
         "TreeView",
@@ -615,7 +615,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_54[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_55 = __webpack_require__("@/components/ui/textarea");
+    var _textarea__rspack_import_55 = __webpack_require__("./textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_55)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

@@ -774,9 +774,6 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-1 {
-    margin-block: calc(var(--spacing) * -1);
-  }
   .my-0\.5 {
     margin-block: calc(var(--spacing) * 0.5);
   }
@@ -843,9 +840,6 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .mr-4 {
     margin-right: calc(var(--spacing) * 4);
   }
@@ -1070,9 +1064,6 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
-  .h-28 {
-    height: calc(var(--spacing) * 28);
-  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -1235,9 +1226,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .min-h-\[680px\] {
-    min-height: 680px;
-  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -1367,21 +1355,12 @@
   .w-\[2px\] {
     width: 2px;
   }
-  .w-\[18\%\] {
-    width: 18%;
-  }
   .w-\[18px\] {
     width: 18px;
   }
-  .w-\[20\%\] {
-    width: 20%;
-  }
   .w-\[22px\] {
     width: 22px;
   }
-  .w-\[31\%\] {
-    width: 31%;
-  }
   .w-\[40px\] {
     width: 40px;
   }
@@ -1610,12 +1589,6 @@
   .min-w-\[18px\] {
     min-width: 18px;
   }
-  .min-w-\[340px\] {
-    min-width: 340px;
-  }
-  .min-w-\[840px\] {
-    min-width: 840px;
-  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -1991,9 +1964,6 @@
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
-  .gap-x-10 {
-    column-gap: calc(var(--spacing) * 10);
-  }
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -2152,10 +2122,6 @@
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
   }
-  .rounded-r-none {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
   .rounded-tr-2xl {
     border-top-right-radius: var(--radius-2xl);
   }
@@ -2196,10 +2162,6 @@
     border-style: var(--tw-border-style);
     border-width: 1.5px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -2228,10 +2190,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-l-0 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 0px;
-  }
   .border-l-2 {
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
@@ -2918,12 +2876,6 @@
       background-color: color-mix(in oklab, var(--muted) 30%, transparent);
     }
   }
-  .bg-muted\/35 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 35%, transparent);
-    }
-  }
   .bg-muted\/40 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2936,18 +2888,6 @@
       background-color: color-mix(in oklab, var(--muted) 50%, transparent);
     }
   }
-  .bg-muted\/60 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
-    }
-  }
-  .bg-muted\/70 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
-    }
-  }
   .bg-muted\/80 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3047,12 +2987,6 @@
       background-color: color-mix(in oklab, var(--primary) 10%, transparent);
     }
   }
-  .bg-primary\/15 {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
-    }
-  }
   .bg-primary\/20 {
     background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3398,12 +3332,6 @@
       background-color: color-mix(in oklab, var(--warning) 5%, transparent);
     }
   }
-  .bg-warning\/10 {
-    background-color: var(--warning);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -3682,9 +3610,6 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-3\.5 {
-    padding-block: calc(var(--spacing) * 3.5);
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -3694,15 +3619,9 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
-  .py-7 {
-    padding-block: calc(var(--spacing) * 7);
-  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-9 {
-    padding-block: calc(var(--spacing) * 9);
-  }
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
@@ -3778,9 +3697,6 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
-  .pb-1\.5 {
-    padding-bottom: calc(var(--spacing) * 1.5);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -3844,9 +3760,6 @@
   .align-middle {
     vertical-align: middle;
   }
-  .align-top {
-    vertical-align: top;
-  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -4157,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)) {
@@ -4811,11 +4718,6 @@
       color: var(--foreground);
     }
   }
-  .last\:mb-0 {
-    &:last-child {
-      margin-bottom: calc(var(--spacing) * 0);
-    }
-  }
   .last\:border-0 {
     &:last-child {
       border-style: var(--tw-border-style);
@@ -5111,16 +5013,6 @@
       }
     }
   }
-  .hover\:bg-muted\/40 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--muted);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--muted) 40%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-muted\/50 {
     &:hover {
       @media (hover: hover) {
@@ -6094,11 +5986,6 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
-  .sm\:table-cell {
-    @media (width >= 40rem) {
-      display: table-cell;
-    }
-  }
   .sm\:max-w-2xl {
     @media (width >= 40rem) {
       max-width: var(--container-2xl);
@@ -6175,46 +6062,16 @@
       border-left-width: 1px;
     }
   }
-  .sm\:p-5 {
-    @media (width >= 40rem) {
-      padding: calc(var(--spacing) * 5);
-    }
-  }
-  .sm\:p-10 {
-    @media (width >= 40rem) {
-      padding: calc(var(--spacing) * 10);
-    }
-  }
-  .sm\:px-6 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
   .sm\:px-8 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 8);
     }
   }
-  .sm\:px-10 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 10);
-    }
-  }
   .sm\:py-6 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 6);
     }
   }
-  .sm\:py-9 {
-    @media (width >= 40rem) {
-      padding-block: calc(var(--spacing) * 9);
-    }
-  }
-  .sm\:py-14 {
-    @media (width >= 40rem) {
-      padding-block: calc(var(--spacing) * 14);
-    }
-  }
   .sm\:text-left {
     @media (width >= 40rem) {
       text-align: left;
@@ -6231,11 +6088,6 @@
       grid-column: span 2 / span 2;
     }
   }
-  .md\:table-cell {
-    @media (width >= 48rem) {
-      display: table-cell;
-    }
-  }
   .md\:w-1\/2 {
     @media (width >= 48rem) {
       width: calc(1/2 * 100%);
@@ -6307,11 +6159,6 @@
       grid-template-columns: 2fr 3fr 3fr;
     }
   }
-  .lg\:grid-cols-\[auto_minmax\(180px\,1fr\)_minmax\(160px\,0\.55fr\)_minmax\(240px\,1fr\)_auto\] {
-    @media (width >= 64rem) {
-      grid-template-columns: auto minmax(180px,1fr) minmax(160px,0.55fr) minmax(240px,1fr) auto;
-    }
-  }
   .\@max-\[259px\]\:block {
     @container (width < 259px) {
       display: block;
@@ -6382,22 +6229,16 @@
       border-radius: var(--radius-xl);
     }
   }
-  .future\:rounded-l-xl {
+  .future\:rounded-t-xl {
     :is(.future-dark, .future-light) & {
       border-top-left-radius: var(--radius-xl);
-      border-bottom-left-radius: var(--radius-xl);
-    }
-  }
-  .future\:rounded-r-none {
-    :is(.future-dark, .future-light) & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      border-top-right-radius: var(--radius-xl);
     }
   }
-  .future\:rounded-r-xl {
+  .future\:rounded-b-xl {
     :is(.future-dark, .future-light) & {
-      border-top-right-radius: var(--radius-xl);
       border-bottom-right-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
     }
   }
   .future\:border-0 {
@@ -6488,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.41.0",
+  "version": "2.43.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",