@uipath/apollo-wind 2.20.1 → 2.22.0

package/dist/index.cjs

@@ -109,8 +109,8 @@ __webpack_require__.d(__webpack_exports__, {
     SelectSeparator: ()=>select_cjs_namespaceObject.SelectSeparator,
     Select: ()=>select_cjs_namespaceObject.Select,
     Stepper: ()=>stepper_cjs_namespaceObject.Stepper,
-    CodeBlock: ()=>code_block_cjs_namespaceObject.CodeBlock,
     HoverCard: ()=>hover_card_cjs_namespaceObject.HoverCard,
+    SelectScrollUpButton: ()=>select_cjs_namespaceObject.SelectScrollUpButton,
     AlertDialog: ()=>alert_dialog_cjs_namespaceObject.AlertDialog,
     CommandItem: ()=>command_cjs_namespaceObject.CommandItem,
     ResizablePanel: ()=>resizable_cjs_namespaceObject.ResizablePanel,
@@ -120,16 +120,15 @@ __webpack_require__.d(__webpack_exports__, {
     PaginationNext: ()=>pagination_cjs_namespaceObject.PaginationNext,
     Grid: ()=>grid_cjs_namespaceObject.Grid,
     Label: ()=>label_cjs_namespaceObject.Label,
-    SelectScrollUpButton: ()=>select_cjs_namespaceObject.SelectScrollUpButton,
+    SheetTitle: ()=>sheet_cjs_namespaceObject.SheetTitle,
     AccordionContent: ()=>accordion_cjs_namespaceObject.AccordionContent,
     Checkbox: ()=>checkbox_cjs_namespaceObject.Checkbox,
     DropdownMenuItem: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuItem,
     ContextMenuGroup: ()=>context_menu_cjs_namespaceObject.ContextMenuGroup,
-    SheetTitle: ()=>sheet_cjs_namespaceObject.SheetTitle,
     TableFooter: ()=>table_cjs_namespaceObject.TableFooter,
+    TooltipProvider: ()=>tooltip_cjs_namespaceObject.TooltipProvider,
     DataFetcher: ()=>data_fetcher_cjs_namespaceObject.DataFetcher,
     DialogPortal: ()=>dialog_cjs_namespaceObject.DialogPortal,
-    TooltipProvider: ()=>tooltip_cjs_namespaceObject.TooltipProvider,
     analyticsPlugin: ()=>form_plugins_cjs_namespaceObject.analyticsPlugin,
     cn: ()=>utils_cjs_namespaceObject.cn,
     DropdownMenuSub: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuSub,
@@ -202,21 +201,21 @@ __webpack_require__.d(__webpack_exports__, {
     DropdownMenuShortcut: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuShortcut,
     FetchAdapter: ()=>data_fetcher_cjs_namespaceObject.FetchAdapter,
     DataTableSelectColumn: ()=>data_table_cjs_namespaceObject.DataTableSelectColumn,
-    DropdownMenu: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenu,
-    CollapsibleTrigger: ()=>collapsible_cjs_namespaceObject.CollapsibleTrigger,
     FormStateViewer: ()=>form_state_viewer_cjs_namespaceObject.FormStateViewer,
+    CollapsibleTrigger: ()=>collapsible_cjs_namespaceObject.CollapsibleTrigger,
+    DropdownMenu: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenu,
     RadioGroup: ()=>radio_group_cjs_namespaceObject.RadioGroup,
     MultiSelect: ()=>multi_select_cjs_namespaceObject.MultiSelect,
     AspectRatio: ()=>aspect_ratio_cjs_namespaceObject.AspectRatio,
     DataTableColumnHeader: ()=>data_table_cjs_namespaceObject.DataTableColumnHeader,
-    FormDesigner: ()=>form_designer_cjs_namespaceObject.FormDesigner,
-    Alert: ()=>alert_cjs_namespaceObject.Alert,
     DialogContent: ()=>dialog_cjs_namespaceObject.DialogContent,
-    CommandDialog: ()=>command_cjs_namespaceObject.CommandDialog,
+    Alert: ()=>alert_cjs_namespaceObject.Alert,
     DialogTrigger: ()=>dialog_cjs_namespaceObject.DialogTrigger,
+    CommandDialog: ()=>command_cjs_namespaceObject.CommandDialog,
     DropdownMenuRadioGroup: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuRadioGroup,
-    Accordion: ()=>accordion_cjs_namespaceObject.Accordion,
     DropdownMenuRadioItem: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuRadioItem,
+    Accordion: ()=>accordion_cjs_namespaceObject.Accordion,
+    FormDesigner: ()=>form_designer_cjs_namespaceObject.FormDesigner,
     Progress: ()=>progress_cjs_namespaceObject.Progress,
     ResizableHandle: ()=>resizable_cjs_namespaceObject.ResizableHandle,
     AlertDialogCancel: ()=>alert_dialog_cjs_namespaceObject.AlertDialogCancel,
@@ -272,7 +271,6 @@ const file_upload_cjs_namespaceObject = require("./components/ui/file-upload.cjs
 const card_cjs_namespaceObject = require("./components/ui/card.cjs");
 const stats_card_cjs_namespaceObject = require("./components/ui/stats-card.cjs");
 const badge_cjs_namespaceObject = require("./components/ui/badge.cjs");
-const code_block_cjs_namespaceObject = require("./components/ui/code-block.cjs");
 const avatar_cjs_namespaceObject = require("./components/ui/avatar.cjs");
 const table_cjs_namespaceObject = require("./components/ui/table.cjs");
 const data_table_cjs_namespaceObject = require("./components/ui/data-table.cjs");
@@ -354,7 +352,6 @@ exports.CardFooter = __webpack_exports__.CardFooter;
 exports.CardHeader = __webpack_exports__.CardHeader;
 exports.CardTitle = __webpack_exports__.CardTitle;
 exports.Checkbox = __webpack_exports__.Checkbox;
-exports.CodeBlock = __webpack_exports__.CodeBlock;
 exports.Collapsible = __webpack_exports__.Collapsible;
 exports.CollapsibleContent = __webpack_exports__.CollapsibleContent;
 exports.CollapsibleTrigger = __webpack_exports__.CollapsibleTrigger;
@@ -567,7 +564,6 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CardHeader",
     "CardTitle",
     "Checkbox",
-    "CodeBlock",
     "Collapsible",
     "CollapsibleContent",
     "CollapsibleTrigger",

package/dist/index.d.ts

@@ -37,8 +37,6 @@ export { StatsCard } from './components/ui/stats-card';
 export type { StatsCardProps } from './components/ui/stats-card';
 export { Badge, badgeVariants } from './components/ui/badge';
 export type { BadgeProps } from './components/ui/badge';
-export { CodeBlock } from './components/ui/code-block';
-export type { CodeBlockProps } from './components/ui/code-block';
 export { Avatar, AvatarFallback, AvatarImage } from './components/ui/avatar';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/ui/table';
 export { DataTable, DataTableColumnHeader, DataTableSelectColumn, } from './components/ui/data-table';

package/dist/index.js

@@ -24,7 +24,6 @@ import { FileUpload } from "./components/ui/file-upload.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
 import { StatsCard } from "./components/ui/stats-card.js";
 import { Badge, badgeVariants } from "./components/ui/badge.js";
-import { CodeBlock } from "./components/ui/code-block.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/ui/table.js";
 import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "./components/ui/data-table.js";
@@ -63,4 +62,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, CodeBlock, 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, 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 };

package/dist/styles.css

@@ -761,6 +761,9 @@
   .-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);
   }
@@ -815,6 +818,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
@@ -833,9 +839,15 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mr-auto {
     margin-right: auto;
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -854,12 +866,18 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
   .-ml-3 {
     margin-left: calc(var(--spacing) * -3);
   }
@@ -1885,6 +1903,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
@@ -2256,6 +2277,12 @@
       border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
     }
   }
+  .border-white\/10 {
+    border-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
   .border-yellow-300 {
     border-color: var(--color-yellow-300);
   }
@@ -3353,6 +3380,9 @@
   .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);
   }
@@ -3509,6 +3539,9 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
   .pl-0 {
     padding-left: calc(var(--spacing) * 0);
   }
@@ -3824,6 +3857,12 @@
       color: color-mix(in oklab, var(--foreground) 50%, transparent);
     }
   }
+  .text-foreground\/60 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
+    }
+  }
   .text-gray-50 {
     color: var(--color-gray-50);
   }
@@ -3860,6 +3899,12 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-muted-foreground\/70 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
+    }
+  }
   .text-orange-400 {
     color: var(--color-orange-400);
   }
@@ -3944,6 +3989,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .text-zinc-100 {
+    color: var(--color-zinc-100);
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -4170,6 +4218,17 @@
   .\[--cell-size\:2\.75rem\] {
     --cell-size: 2.75rem;
   }
+  .\[-ms-overflow-style\:none\] {
+    -ms-overflow-style: none;
+  }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
+  .group-open\:rotate-90 {
+    &:is(:where(.group):is([open], :popover-open, :open) *) {
+      rotate: 90deg;
+    }
+  }
   .group-focus-within\/input\:bg-foreground-accent {
     &:is(:where(.group\/input):focus-within *) {
       background-color: var(--foreground-accent);
@@ -4475,6 +4534,12 @@
       border-width: 0px;
     }
   }
+  .last\:border-r-0 {
+    &:last-child {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 0px;
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -4623,13 +4688,6 @@
       }
     }
   }
-  .hover\:bg-background-hover {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-background-hover);
-      }
-    }
-  }
   .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
@@ -5474,6 +5532,11 @@
       }
     }
   }
+  .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);
@@ -5484,6 +5547,11 @@
       background-color: var(--background);
     }
   }
+  .data-\[state\=active\]\:bg-transparent {
+    &[data-state="active"] {
+      background-color: transparent;
+    }
+  }
   .data-\[state\=active\]\:text-foreground {
     &[data-state="active"] {
       color: var(--foreground);
@@ -6329,6 +6397,11 @@
       border-width: 0px;
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
     &:has([role=checkbox]) {
       padding-right: calc(var(--spacing) * 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.20.1",
+  "version": "2.22.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -49,6 +49,11 @@
     "./postcss": {
       "import": "./dist/postcss.config.export.js",
       "require": "./dist/postcss.config.export.cjs"
+    },
+    "./editor-themes": {
+      "import": "./dist/editor-themes/index.js",
+      "require": "./dist/editor-themes/index.cjs",
+      "types": "./dist/editor-themes/index.d.ts"
     }
   },
   "files": [
@@ -107,7 +112,6 @@
     "react-hook-form": "^7.66.1",
     "react-live": "^4.1.8",
     "react-resizable-panels": "^4.7.3",
-    "react-syntax-highlighter": "^16.1.1",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
@@ -117,6 +121,12 @@
     "@uipath/apollo-core": "5.10.0"
   },
   "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
+    "@lezer/highlight": "^1.2.3",
+    "@monaco-editor/react": "^4.7.0",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rslib/core": "^0.19.6",
     "@semantic-release/changelog": "^6.0.3",
@@ -136,7 +146,6 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.2",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitest/coverage-v8": "^4.1.5",
     "@vitest/ui": "^4.1.5",
     "ajv": "^8.18.0",
@@ -144,6 +153,7 @@
     "globals": "^16.5.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^27.2.0",
+    "monaco-editor": "^0.55.1",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
     "react": "19.2.3",

package/dist/components/ui/code-block.cjs

@@ -1,235 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    CodeBlock: ()=>CodeBlock
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_lucide_react_namespaceObject = require("lucide-react");
-const external_react_namespaceObject = require("react");
-const external_react_syntax_highlighter_namespaceObject = require("react-syntax-highlighter");
-const index_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/index.js");
-const external_button_cjs_namespaceObject = require("./button.cjs");
-const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const THEME_CONFIG = {
-    dark: {
-        prismStyle: index_js_namespaceObject.nord,
-        bg: '#182027',
-        headerBg: '#111920',
-        labelColor: '#8ea1b1',
-        iconColor: '#6b8899',
-        lineNumberColor: '#2e3f4c'
-    },
-    light: {
-        prismStyle: index_js_namespaceObject.vs,
-        bg: '#ffffff',
-        headerBg: '#f0f4f8',
-        labelColor: '#374151',
-        iconColor: '#6b7280',
-        lineNumberColor: '#c8d4de'
-    },
-    'future-dark': {
-        prismStyle: index_js_namespaceObject.vscDarkPlus,
-        bg: 'var(--surface-raised)',
-        headerBg: '#09090b',
-        labelColor: '#a1a1aa',
-        iconColor: '#71717a',
-        lineNumberColor: '#3f3f46'
-    },
-    'future-light': {
-        prismStyle: index_js_namespaceObject.vs,
-        bg: 'var(--surface-raised)',
-        headerBg: '#f4f4f5',
-        labelColor: '#52525b',
-        iconColor: '#71717a',
-        lineNumberColor: '#d4d4d8'
-    },
-    wireframe: {
-        prismStyle: index_js_namespaceObject.prism,
-        bg: '#f9fafb',
-        headerBg: '#f3f4f6',
-        labelColor: '#6b7280',
-        iconColor: '#9ca3af',
-        lineNumberColor: '#d1d5db'
-    },
-    vertex: {
-        prismStyle: index_js_namespaceObject.nightOwl,
-        bg: 'oklch(0.21 0.03 258.5)',
-        headerBg: 'oklch(0.188 0.028 258.5)',
-        labelColor: '#a6b5c9',
-        iconColor: '#7a90a8',
-        lineNumberColor: 'oklch(0.32 0.03 258.5)'
-    },
-    canvas: {
-        prismStyle: index_js_namespaceObject.atomDark,
-        bg: '#182027',
-        headerBg: '#111920',
-        labelColor: '#8ea1b1',
-        iconColor: '#6b8899',
-        lineNumberColor: '#2e3f4c'
-    },
-    'dark-hc': {
-        prismStyle: index_js_namespaceObject.oneDark,
-        bg: '#0a0a0a',
-        headerBg: '#141414',
-        labelColor: '#e4e4e4',
-        iconColor: '#c8c8c8',
-        lineNumberColor: '#505050'
-    },
-    'light-hc': {
-        prismStyle: index_js_namespaceObject.oneLight,
-        bg: '#ffffff',
-        headerBg: '#e8e8e8',
-        labelColor: '#111827',
-        iconColor: '#374151',
-        lineNumberColor: '#9ca3af'
-    }
-};
-const BODY_CLASS_PRIORITY = [
-    'future-dark',
-    'future-light',
-    'dark-hc',
-    'light-hc',
-    'dark',
-    'light',
-    'wireframe',
-    'vertex',
-    'canvas'
-];
-function getBodyTheme() {
-    if ("u" < typeof document) return 'dark';
-    const bodyClasses = document.body.classList;
-    const htmlClasses = document.documentElement.classList;
-    return BODY_CLASS_PRIORITY.find((t)=>bodyClasses.contains(t) || htmlClasses.contains(t)) ?? 'future-dark';
-}
-function useApolloTheme() {
-    const [theme, setTheme] = (0, external_react_namespaceObject.useState)(getBodyTheme);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if ("u" < typeof document) return;
-        const observer = new MutationObserver(()=>setTheme(getBodyTheme()));
-        const targets = [
-            document.body,
-            document.documentElement
-        ];
-        targets.forEach((target)=>{
-            if (target) observer.observe(target, {
-                attributes: true,
-                attributeFilter: [
-                    'class'
-                ]
-            });
-        });
-        return ()=>observer.disconnect();
-    }, []);
-    return theme;
-}
-function CodeBlock({ children, language = 'tsx', showLineNumbers = true, showCopyButton = true, fileName, theme, wrapLines = false, className }) {
-    const [copied, setCopied] = (0, external_react_namespaceObject.useState)(false);
-    const timeoutRef = (0, external_react_namespaceObject.useRef)(null);
-    const detectedTheme = useApolloTheme();
-    const activeTheme = theme ?? detectedTheme;
-    const config = THEME_CONFIG[activeTheme];
-    const code = children.trim();
-    async function handleCopy() {
-        try {
-            await navigator.clipboard.writeText(code);
-            setCopied(true);
-            timeoutRef.current = setTimeout(()=>setCopied(false), 1500);
-        } catch  {}
-    }
-    (0, external_react_namespaceObject.useEffect)(()=>()=>{
-            if (timeoutRef.current) clearTimeout(timeoutRef.current);
-        }, []);
-    const showHeader = !!(fileName || language || showCopyButton);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, index_cjs_namespaceObject.cn)('overflow-hidden rounded-lg border border-border future:border-border-subtle font-mono text-sm', className),
-        style: {
-            background: config.bg
-        },
-        children: [
-            showHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex items-center justify-between px-4 py-2 border-b border-border future:border-border-subtle",
-                style: {
-                    background: config.headerBg
-                },
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: "text-xs font-medium",
-                        style: {
-                            color: config.labelColor
-                        },
-                        children: fileName ?? language
-                    }),
-                    showCopyButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
-                        icon: true,
-                        variant: "ghost",
-                        size: "2xs",
-                        style: {
-                            color: config.iconColor
-                        },
-                        onClick: handleCopy,
-                        "aria-label": copied ? 'Copied!' : 'Copy code',
-                        children: copied ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {})
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_syntax_highlighter_namespaceObject.Prism, {
-                language: language,
-                style: config.prismStyle,
-                showLineNumbers: showLineNumbers,
-                wrapLines: wrapLines,
-                wrapLongLines: wrapLines,
-                customStyle: {
-                    margin: 0,
-                    border: 'none',
-                    borderRadius: 0,
-                    background: 'transparent',
-                    padding: '1rem',
-                    fontSize: 13,
-                    lineHeight: 1.6
-                },
-                lineNumberStyle: {
-                    color: config.lineNumberColor,
-                    minWidth: '2.5em',
-                    paddingRight: '1.25em',
-                    userSelect: 'none'
-                },
-                codeTagProps: {
-                    style: {
-                        fontFamily: 'inherit'
-                    }
-                },
-                children: code
-            })
-        ]
-    });
-}
-exports.CodeBlock = __webpack_exports__.CodeBlock;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "CodeBlock"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/components/ui/code-block.d.ts

@@ -1,48 +0,0 @@
-/**
- * All Apollo theme variants supported by CodeBlock.
- *
- * Standard (apollo-core):
- * - `'dark'` / `'light'`               — Default dark / light
- * - `'dark-hc'` / `'light-hc'`         — High contrast variants
- *
- * Future / Demo themes:
- * - `'future-dark'` / `'future-light'`  — Future zinc palette, cyan brand
- * - `'wireframe'`                        — Greyscale / prototyping
- * - `'vertex'`                           — Deep blue-grey, teal brand
- * - `'canvas'`                           — Apollo MUI dark, orange brand
- *
- * When no theme is passed the component auto-detects from the Apollo
- * `<body>` class and switches live when the theme changes.
- */
-export type CodeBlockTheme = 'dark' | 'light' | 'dark-hc' | 'light-hc' | 'future-dark' | 'future-light' | 'wireframe' | 'vertex' | 'canvas';
-export interface CodeBlockProps {
-    /** The code string to display */
-    children: string;
-    /** Programming language for syntax highlighting (e.g. 'tsx', 'python', 'sql') */
-    language?: string;
-    /** Show line numbers on the left */
-    showLineNumbers?: boolean;
-    /** Show copy-to-clipboard button in the header */
-    showCopyButton?: boolean;
-    /** Optional file name displayed in the header */
-    fileName?: string;
-    /**
-     * Color scheme. When omitted the component auto-follows the active Apollo
-     * page theme by watching the class on `<body>` — switches live.
-     */
-    theme?: CodeBlockTheme;
-    /** Wrap long lines instead of scrolling horizontally */
-    wrapLines?: boolean;
-    className?: string;
-}
-/**
- * Syntax-highlighted code block built on react-syntax-highlighter (Prism engine).
- *
- * Supports 200+ languages, optional line numbers, a filename header, and a
- * one-click copy button. Automatically follows the active Apollo theme by
- * watching the body class — or accept an explicit `theme` prop to override.
- *
- * Supported themes: dark, light, dark-hc, light-hc, future-dark,
- * future-light, wireframe, vertex, canvas.
- */
-export declare function CodeBlock({ children, language, showLineNumbers, showCopyButton, fileName, theme, wrapLines, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;