@uipath/apollo-wind 2.22.0 → 2.24.0

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

@@ -0,0 +1,200 @@
+import { $createLineBreakNode, $createParagraphNode, $createTextNode, $getRoot, $isLineBreakNode, $isParagraphNode, $isRangeSelection, $isTextNode } from "lexical";
+import { createInputTokenNode, createOutputTokenNode, createResourceTokenNode, createStateTokenNode, isInputTokenNode, isOutputTokenNode, isResourceTokenNode, isStateTokenNode } from "../nodes/index.js";
+const WORD_JOINER = '\u2060';
+const appendTextToken = (tokens, raw)=>{
+    const text = raw.split(WORD_JOINER).join('');
+    if (!text) return;
+    const lastToken = tokens[tokens.length - 1];
+    if (lastToken && 'text' === lastToken.type) lastToken.value += text;
+    else tokens.push({
+        type: 'text',
+        value: text
+    });
+};
+const $getEditorTokensInternal = ()=>{
+    const root = $getRoot();
+    const tokens = [];
+    const addText = (raw)=>appendTextToken(tokens, raw);
+    const traverseChildren = (children)=>{
+        for (const node of children)if ($isTextNode(node)) addText(node.getTextContent());
+        else if ($isLineBreakNode(node)) addText('\n');
+        else if (isInputTokenNode(node)) tokens.push({
+            type: 'input',
+            value: node.getValue()
+        });
+        else if (isOutputTokenNode(node)) tokens.push({
+            type: 'output',
+            value: node.getValue()
+        });
+        else if (isStateTokenNode(node)) tokens.push({
+            type: 'state',
+            value: node.getValue()
+        });
+        else if (isResourceTokenNode(node)) tokens.push({
+            type: 'resource',
+            value: node.getValue()
+        });
+    };
+    const paragraphs = root.getChildren();
+    for(let i = 0; i < paragraphs.length; i++){
+        const paragraph = paragraphs[i];
+        if ($isParagraphNode(paragraph)) {
+            traverseChildren(paragraph.getChildren());
+            if (i < paragraphs.length - 1) addText('\n');
+        }
+    }
+    return tokens;
+};
+const $setEditorTokensInternal = (tokens)=>{
+    if (!Array.isArray(tokens)) throw new TypeError('setEditorTokensInternal: tokens must be an array');
+    const root = $getRoot();
+    root.clear();
+    const currentParagraph = $createParagraphNode();
+    for (const token of tokens)if ('text' === token.type) {
+        const lines = token.value.split('\n');
+        for(let i = 0; i < lines.length; i++){
+            if (lines[i]) currentParagraph.append($createTextNode(lines[i]));
+            if (i < lines.length - 1) currentParagraph.append($createLineBreakNode());
+        }
+    } else {
+        let node;
+        switch(token.type){
+            case 'input':
+                node = createInputTokenNode(token.value);
+                break;
+            case 'output':
+                node = createOutputTokenNode(token.value);
+                break;
+            case 'state':
+                node = createStateTokenNode(token.value);
+                break;
+            case 'resource':
+                node = createResourceTokenNode(token.value);
+                break;
+            default:
+                throw new Error(`Unknown token type: ${token.type}`);
+        }
+        currentParagraph.append(node);
+    }
+    root.append(currentParagraph);
+};
+const getEditorTokens = (editor)=>{
+    let tokens = [];
+    editor.getEditorState().read(()=>{
+        tokens = $getEditorTokensInternal();
+    });
+    return tokens;
+};
+const setEditorTokens = (editor, tokens)=>{
+    editor.update(()=>$setEditorTokensInternal(tokens), {
+        discrete: true
+    });
+};
+const tokensToClipboardString = (tokens)=>{
+    let result = '';
+    for (const token of tokens)if ('text' === token.type) result += token.value;
+    else result += `{{ ${token.value} }}`;
+    return result;
+};
+const clipboardStringToTokens = (str)=>{
+    const tokens = [];
+    let currentText = '';
+    let i = 0;
+    const flushText = ()=>{
+        if (currentText.length > 0) {
+            tokens.push({
+                type: 'text',
+                value: currentText
+            });
+            currentText = '';
+        }
+    };
+    while(i < str.length){
+        if ('{' === str[i] && i + 1 < str.length && '{' === str[i + 1]) {
+            flushText();
+            i += 2;
+            let inner = '';
+            let foundClosing = false;
+            while(i < str.length){
+                if ('}' === str[i] && i + 1 < str.length && '}' === str[i + 1]) {
+                    i += 2;
+                    foundClosing = true;
+                    break;
+                }
+                inner += str[i];
+                i++;
+            }
+            if (foundClosing && inner.trim()) tokens.push({
+                type: 'input',
+                value: inner.trim()
+            });
+            else if (foundClosing) currentText += '{{}}';
+            else currentText += `{{${inner}`;
+            continue;
+        }
+        currentText += str[i];
+        i++;
+    }
+    flushText();
+    return tokens;
+};
+const getEditorTokensFromSelection = (selection)=>{
+    if (!$isRangeSelection(selection)) return [];
+    if (selection.isCollapsed()) return [];
+    const tokens = [];
+    const addText = (raw)=>appendTextToken(tokens, raw);
+    const selectedNodes = selection.getNodes();
+    const anchorKey = selection.anchor.key;
+    const focusKey = selection.focus.key;
+    const anchorOffset = selection.anchor.offset;
+    const focusOffset = selection.focus.offset;
+    const anchorNode = selection.anchor.getNode();
+    const nodeKeys = new Set(selectedNodes.map((n)=>n.getKey()));
+    const nodesToProcess = [];
+    if ($isTextNode(anchorNode) && !nodeKeys.has(anchorKey)) nodesToProcess.push(anchorNode);
+    nodesToProcess.push(...selectedNodes);
+    if (0 === nodesToProcess.length) return [];
+    const firstSelectedNode = nodesToProcess[0];
+    const isForward = 1 === nodesToProcess.length ? anchorOffset <= focusOffset : firstSelectedNode.getKey() === anchorKey || firstSelectedNode.getParent()?.getKey() === anchorKey;
+    let prevNodeParagraph = null;
+    for (const node of nodesToProcess){
+        const nodeKey = node.getKey();
+        const nodeType = node.getType();
+        const nodeParagraph = $isParagraphNode(node) ? node : node.getParent();
+        if (prevNodeParagraph && nodeParagraph && prevNodeParagraph !== nodeParagraph) addText('\n');
+        prevNodeParagraph = nodeParagraph;
+        if (!$isParagraphNode(node)) {
+            if ('input-token' === nodeType) tokens.push({
+                type: 'input',
+                value: node.getValue()
+            });
+            else if ('output-token' === nodeType) tokens.push({
+                type: 'output',
+                value: node.getValue()
+            });
+            else if ('state-token' === nodeType) tokens.push({
+                type: 'state',
+                value: node.getValue()
+            });
+            else if ('resource-token' === nodeType) tokens.push({
+                type: 'resource',
+                value: node.getValue()
+            });
+            else if ($isTextNode(node)) {
+                const textContent = node.getTextContent();
+                let selectedText = textContent;
+                const isAnchorNode = nodeKey === anchorKey;
+                const isFocusNode = nodeKey === focusKey;
+                if (isAnchorNode && isFocusNode) {
+                    const start = Math.min(anchorOffset, focusOffset);
+                    const end = Math.max(anchorOffset, focusOffset);
+                    selectedText = textContent.slice(start, end);
+                } else if (isAnchorNode) selectedText = isForward ? textContent.slice(anchorOffset) : textContent.slice(0, anchorOffset);
+                else if (isFocusNode) selectedText = isForward ? textContent.slice(0, focusOffset) : textContent.slice(focusOffset);
+                if (selectedText) addText(selectedText);
+            } else if ($isLineBreakNode(node)) addText('\n');
+        }
+    }
+    return tokens;
+};
+export { $getEditorTokensInternal, $setEditorTokensInternal, WORD_JOINER, clipboardStringToTokens, getEditorTokens, getEditorTokensFromSelection, setEditorTokens, tokensToClipboardString };

package/dist/editor-themes/monaco.cjs

@@ -296,7 +296,7 @@ const apolloFutureDarkMonaco = {
     inherit: false,
     rules: darkRules,
     colors: {
-        'editor.background': '#18181b',
+        'editor.background': '#27272a',
         'editor.foreground': '#a1a1aa',
         'editorLineNumber.foreground': '#52525b',
         'editorLineNumber.activeForeground': '#a1a1aa',
@@ -333,7 +333,7 @@ const apolloFutureLightMonaco = {
     inherit: false,
     rules: lightRules,
     colors: {
-        'editor.background': '#f4f4f5',
+        'editor.background': '#e4e4e7',
         'editor.foreground': '#52525b',
         'editorLineNumber.foreground': '#a1a1aa',
         'editorLineNumber.activeForeground': '#71717a',

package/dist/editor-themes/monaco.js

@@ -263,7 +263,7 @@ const apolloFutureDarkMonaco = {
     inherit: false,
     rules: darkRules,
     colors: {
-        'editor.background': '#18181b',
+        'editor.background': '#27272a',
         'editor.foreground': '#a1a1aa',
         'editorLineNumber.foreground': '#52525b',
         'editorLineNumber.activeForeground': '#a1a1aa',
@@ -300,7 +300,7 @@ const apolloFutureLightMonaco = {
     inherit: false,
     rules: lightRules,
     colors: {
-        'editor.background': '#f4f4f5',
+        'editor.background': '#e4e4e7',
         'editor.foreground': '#52525b',
         'editorLineNumber.foreground': '#a1a1aa',
         'editorLineNumber.activeForeground': '#71717a',

package/dist/index.cjs

@@ -67,6 +67,7 @@ __webpack_require__.d(__webpack_exports__, {
     CommandSeparator: ()=>command_cjs_namespaceObject.CommandSeparator,
     FormFieldRenderer: ()=>field_renderer_cjs_namespaceObject.FormFieldRenderer,
     EditableCell: ()=>editable_cell_cjs_namespaceObject.EditableCell,
+    PromptEditor: ()=>index_cjs_namespaceObject.PromptEditor,
     Spinner: ()=>spinner_cjs_namespaceObject.Spinner,
     buttonVariants: ()=>button_cjs_namespaceObject.buttonVariants,
     SheetOverlay: ()=>sheet_cjs_namespaceObject.SheetOverlay,
@@ -129,6 +130,7 @@ __webpack_require__.d(__webpack_exports__, {
     TooltipProvider: ()=>tooltip_cjs_namespaceObject.TooltipProvider,
     DataFetcher: ()=>data_fetcher_cjs_namespaceObject.DataFetcher,
     DialogPortal: ()=>dialog_cjs_namespaceObject.DialogPortal,
+    VARIABLE_DRAG_MIME: ()=>index_cjs_namespaceObject.VARIABLE_DRAG_MIME,
     analyticsPlugin: ()=>form_plugins_cjs_namespaceObject.analyticsPlugin,
     cn: ()=>utils_cjs_namespaceObject.cn,
     DropdownMenuSub: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuSub,
@@ -276,6 +278,7 @@ const table_cjs_namespaceObject = require("./components/ui/table.cjs");
 const data_table_cjs_namespaceObject = require("./components/ui/data-table.cjs");
 const editable_cell_cjs_namespaceObject = require("./components/ui/editable-cell.cjs");
 const progress_cjs_namespaceObject = require("./components/ui/progress.cjs");
+const index_cjs_namespaceObject = require("./components/ui/prompt-editor/index.cjs");
 const skeleton_cjs_namespaceObject = require("./components/ui/skeleton.cjs");
 const spinner_cjs_namespaceObject = require("./components/ui/spinner.cjs");
 const empty_state_cjs_namespaceObject = require("./components/ui/empty-state.cjs");
@@ -442,6 +445,7 @@ exports.PopoverAnchor = __webpack_exports__.PopoverAnchor;
 exports.PopoverContent = __webpack_exports__.PopoverContent;
 exports.PopoverTrigger = __webpack_exports__.PopoverTrigger;
 exports.Progress = __webpack_exports__.Progress;
+exports.PromptEditor = __webpack_exports__.PromptEditor;
 exports.RadioGroup = __webpack_exports__.RadioGroup;
 exports.RadioGroupItem = __webpack_exports__.RadioGroupItem;
 exports.ResizableHandle = __webpack_exports__.ResizableHandle;
@@ -504,6 +508,7 @@ exports.TooltipPortal = __webpack_exports__.TooltipPortal;
 exports.TooltipProvider = __webpack_exports__.TooltipProvider;
 exports.TooltipTrigger = __webpack_exports__.TooltipTrigger;
 exports.TreeView = __webpack_exports__.TreeView;
+exports.VARIABLE_DRAG_MIME = __webpack_exports__.VARIABLE_DRAG_MIME;
 exports.analyticsPlugin = __webpack_exports__.analyticsPlugin;
 exports.auditPlugin = __webpack_exports__.auditPlugin;
 exports.autoSavePlugin = __webpack_exports__.autoSavePlugin;
@@ -654,6 +659,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "PopoverContent",
     "PopoverTrigger",
     "Progress",
+    "PromptEditor",
     "RadioGroup",
     "RadioGroupItem",
     "ResizableHandle",
@@ -716,6 +722,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "TooltipProvider",
     "TooltipTrigger",
     "TreeView",
+    "VARIABLE_DRAG_MIME",
     "analyticsPlugin",
     "auditPlugin",
     "autoSavePlugin",

package/dist/index.d.ts

@@ -44,6 +44,8 @@ export type { DataTableProps } from './components/ui/data-table';
 export { EditableCell, createEditableColumn, } from './components/ui/editable-cell';
 export type { EditableCellMeta, EditableCellType, } from './components/ui/editable-cell';
 export { Progress } from './components/ui/progress';
+export { PromptEditor, VARIABLE_DRAG_MIME } from './components/ui/prompt-editor';
+export type { PromptEditorAutoCompleteOption, PromptEditorMode, PromptEditorProps, PromptEditorRef, PromptEditorToken, PromptEditorTokenType, } from './components/ui/prompt-editor';
 export { Skeleton } from './components/ui/skeleton';
 export { Spinner, spinnerVariants } from './components/ui/spinner';
 export type { SpinnerProps } from './components/ui/spinner';

package/dist/index.js

@@ -29,6 +29,7 @@ import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, Tabl
 import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "./components/ui/data-table.js";
 import { EditableCell, createEditableColumn } from "./components/ui/editable-cell.js";
 import { Progress } from "./components/ui/progress.js";
+import { PromptEditor, VARIABLE_DRAG_MIME } from "./components/ui/prompt-editor/index.js";
 import { Skeleton } from "./components/ui/skeleton.js";
 import { Spinner, spinnerVariants } from "./components/ui/spinner.js";
 import { EmptyState } from "./components/ui/empty-state.js";
@@ -62,4 +63,4 @@ import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./components/forms/
 import { DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter } from "./components/forms/data-fetcher.js";
 import { analyticsPlugin, auditPlugin, autoSavePlugin, formattingPlugin, validationPlugin, workflowPlugin } from "./components/forms/form-plugins.js";
 import { hasMinMaxStep, hasOptions, isCustomField, isFileField } from "./components/forms/form-schema.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Column, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataFetcher, DataSourceBuilder, DataTable, DataTableColumnHeader, DataTableSelectColumn, DataTransformers, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableCell, EmptyState, ExpressionBuilder, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, Search, SearchWithSuggestions, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, Spinner, StatsCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tree_view as TreeView, VARIABLE_DRAG_MIME, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };

package/dist/styles.css

@@ -291,6 +291,7 @@
     --color-card: var(--card);
     --color-primary: var(--primary);
     --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
     --color-border: var(--ap-wind-border);
     --color-border-de-emp: var(--border-de-emp);
     --color-ring: var(--ring);
@@ -298,6 +299,7 @@
     --color-foreground-link: var(--foreground-link);
     --color-border-disabled: var(--border-disabled);
     --color-border-grid: var(--border-grid);
+    --color-error: var(--error);
     --color-logo: var(--logo);
     --color-background-secondary: var(--color-background-secondary);
     --color-background-inverse: var(--color-background-inverse);
@@ -761,9 +763,6 @@
   .-mx-6 {
     margin-inline: calc(var(--spacing) * -6);
   }
-  .\[margin-inline\:calc\(var\(--mf-content-inset\,0px\)\*-1\)\] {
-    margin-inline: calc(var(--mf-content-inset,0px) * -1);
-  }
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * 0.5);
   }
@@ -845,9 +844,6 @@
   .mr-auto {
     margin-right: auto;
   }
-  .-mb-px {
-    margin-bottom: -1px;
-  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -1481,6 +1477,9 @@
   .max-w-\[220px\] {
     max-width: 220px;
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
   .max-w-\[360px\] {
     max-width: 360px;
   }
@@ -1547,6 +1546,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1786,6 +1788,9 @@
   .gap-\[--spacing\(var\(--gap\)\)\] {
     gap: calc(var(--spacing) * var(--gap));
   }
+  .gap-\[3px\] {
+    gap: 3px;
+  }
   .gap-\[15px\] {
     gap: 15px;
   }
@@ -2096,6 +2101,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -2442,6 +2451,18 @@
   .bg-border-subtle {
     background-color: var(--border-subtle);
   }
+  .bg-border\/40 {
+    background-color: var(--ap-wind-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--ap-wind-border) 40%, transparent);
+    }
+  }
+  .bg-border\/60 {
+    background-color: var(--ap-wind-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--ap-wind-border) 60%, transparent);
+    }
+  }
   .bg-brand {
     background-color: var(--brand);
   }
@@ -3380,9 +3401,6 @@
   .p-px {
     padding: 1px;
   }
-  .\[padding-inline\:var\(--mf-content-inset\,0px\)\] {
-    padding-inline: var(--mf-content-inset,0px);
-  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -3899,6 +3917,12 @@
   .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)) {
@@ -4041,6 +4065,12 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-80 {
+    opacity: 80%;
+  }
+  .opacity-95 {
+    opacity: 95%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -4137,6 +4167,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -5532,11 +5565,6 @@
       }
     }
   }
-  .data-\[state\=active\]\:border-primary {
-    &[data-state="active"] {
-      border-color: var(--primary);
-    }
-  }
   .data-\[state\=active\]\:border-b-primary {
     &[data-state="active"] {
       border-bottom-color: var(--primary);
@@ -5547,9 +5575,9 @@
       background-color: var(--background);
     }
   }
-  .data-\[state\=active\]\:bg-transparent {
+  .data-\[state\=active\]\:bg-surface-overlay {
     &[data-state="active"] {
-      background-color: transparent;
+      background-color: var(--surface-overlay);
     }
   }
   .data-\[state\=active\]\:text-foreground {

package/dist/tailwind.utilities.css

@@ -60,4 +60,4 @@
 
 @utility animate-fade-in {
   animation: apollo-fade-in 250ms ease-out;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.22.0",
+  "version": "2.24.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -70,6 +70,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.2.2",
+    "@lexical/clipboard": "0.42.0",
+    "@lexical/react": "0.42.0",
+    "@lexical/utils": "0.42.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -104,9 +107,12 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.4.0",
     "framer-motion": "^12.26.2",
     "jsep": "^1.4.0",
+    "lexical": "0.42.0",
     "lucide-react": "^0.577.0",
+    "marked": "^17.0.6",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.66.1",