@uipath/apollo-wind 2.20.0 → 2.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -109,8 +109,8 @@ __webpack_require__.d(__webpack_exports__, {
109
109
  SelectSeparator: ()=>select_cjs_namespaceObject.SelectSeparator,
110
110
  Select: ()=>select_cjs_namespaceObject.Select,
111
111
  Stepper: ()=>stepper_cjs_namespaceObject.Stepper,
112
- CodeBlock: ()=>code_block_cjs_namespaceObject.CodeBlock,
113
112
  HoverCard: ()=>hover_card_cjs_namespaceObject.HoverCard,
113
+ SelectScrollUpButton: ()=>select_cjs_namespaceObject.SelectScrollUpButton,
114
114
  AlertDialog: ()=>alert_dialog_cjs_namespaceObject.AlertDialog,
115
115
  CommandItem: ()=>command_cjs_namespaceObject.CommandItem,
116
116
  ResizablePanel: ()=>resizable_cjs_namespaceObject.ResizablePanel,
@@ -120,16 +120,15 @@ __webpack_require__.d(__webpack_exports__, {
120
120
  PaginationNext: ()=>pagination_cjs_namespaceObject.PaginationNext,
121
121
  Grid: ()=>grid_cjs_namespaceObject.Grid,
122
122
  Label: ()=>label_cjs_namespaceObject.Label,
123
- SelectScrollUpButton: ()=>select_cjs_namespaceObject.SelectScrollUpButton,
123
+ SheetTitle: ()=>sheet_cjs_namespaceObject.SheetTitle,
124
124
  AccordionContent: ()=>accordion_cjs_namespaceObject.AccordionContent,
125
125
  Checkbox: ()=>checkbox_cjs_namespaceObject.Checkbox,
126
126
  DropdownMenuItem: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuItem,
127
127
  ContextMenuGroup: ()=>context_menu_cjs_namespaceObject.ContextMenuGroup,
128
- SheetTitle: ()=>sheet_cjs_namespaceObject.SheetTitle,
129
128
  TableFooter: ()=>table_cjs_namespaceObject.TableFooter,
129
+ TooltipProvider: ()=>tooltip_cjs_namespaceObject.TooltipProvider,
130
130
  DataFetcher: ()=>data_fetcher_cjs_namespaceObject.DataFetcher,
131
131
  DialogPortal: ()=>dialog_cjs_namespaceObject.DialogPortal,
132
- TooltipProvider: ()=>tooltip_cjs_namespaceObject.TooltipProvider,
133
132
  analyticsPlugin: ()=>form_plugins_cjs_namespaceObject.analyticsPlugin,
134
133
  cn: ()=>utils_cjs_namespaceObject.cn,
135
134
  DropdownMenuSub: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuSub,
@@ -202,21 +201,21 @@ __webpack_require__.d(__webpack_exports__, {
202
201
  DropdownMenuShortcut: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuShortcut,
203
202
  FetchAdapter: ()=>data_fetcher_cjs_namespaceObject.FetchAdapter,
204
203
  DataTableSelectColumn: ()=>data_table_cjs_namespaceObject.DataTableSelectColumn,
205
- DropdownMenu: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenu,
206
- CollapsibleTrigger: ()=>collapsible_cjs_namespaceObject.CollapsibleTrigger,
207
204
  FormStateViewer: ()=>form_state_viewer_cjs_namespaceObject.FormStateViewer,
205
+ CollapsibleTrigger: ()=>collapsible_cjs_namespaceObject.CollapsibleTrigger,
206
+ DropdownMenu: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenu,
208
207
  RadioGroup: ()=>radio_group_cjs_namespaceObject.RadioGroup,
209
208
  MultiSelect: ()=>multi_select_cjs_namespaceObject.MultiSelect,
210
209
  AspectRatio: ()=>aspect_ratio_cjs_namespaceObject.AspectRatio,
211
210
  DataTableColumnHeader: ()=>data_table_cjs_namespaceObject.DataTableColumnHeader,
212
- FormDesigner: ()=>form_designer_cjs_namespaceObject.FormDesigner,
213
- Alert: ()=>alert_cjs_namespaceObject.Alert,
214
211
  DialogContent: ()=>dialog_cjs_namespaceObject.DialogContent,
215
- CommandDialog: ()=>command_cjs_namespaceObject.CommandDialog,
212
+ Alert: ()=>alert_cjs_namespaceObject.Alert,
216
213
  DialogTrigger: ()=>dialog_cjs_namespaceObject.DialogTrigger,
214
+ CommandDialog: ()=>command_cjs_namespaceObject.CommandDialog,
217
215
  DropdownMenuRadioGroup: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuRadioGroup,
218
- Accordion: ()=>accordion_cjs_namespaceObject.Accordion,
219
216
  DropdownMenuRadioItem: ()=>dropdown_menu_cjs_namespaceObject.DropdownMenuRadioItem,
217
+ Accordion: ()=>accordion_cjs_namespaceObject.Accordion,
218
+ FormDesigner: ()=>form_designer_cjs_namespaceObject.FormDesigner,
220
219
  Progress: ()=>progress_cjs_namespaceObject.Progress,
221
220
  ResizableHandle: ()=>resizable_cjs_namespaceObject.ResizableHandle,
222
221
  AlertDialogCancel: ()=>alert_dialog_cjs_namespaceObject.AlertDialogCancel,
@@ -272,7 +271,6 @@ const file_upload_cjs_namespaceObject = require("./components/ui/file-upload.cjs
272
271
  const card_cjs_namespaceObject = require("./components/ui/card.cjs");
273
272
  const stats_card_cjs_namespaceObject = require("./components/ui/stats-card.cjs");
274
273
  const badge_cjs_namespaceObject = require("./components/ui/badge.cjs");
275
- const code_block_cjs_namespaceObject = require("./components/ui/code-block.cjs");
276
274
  const avatar_cjs_namespaceObject = require("./components/ui/avatar.cjs");
277
275
  const table_cjs_namespaceObject = require("./components/ui/table.cjs");
278
276
  const data_table_cjs_namespaceObject = require("./components/ui/data-table.cjs");
@@ -354,7 +352,6 @@ exports.CardFooter = __webpack_exports__.CardFooter;
354
352
  exports.CardHeader = __webpack_exports__.CardHeader;
355
353
  exports.CardTitle = __webpack_exports__.CardTitle;
356
354
  exports.Checkbox = __webpack_exports__.Checkbox;
357
- exports.CodeBlock = __webpack_exports__.CodeBlock;
358
355
  exports.Collapsible = __webpack_exports__.Collapsible;
359
356
  exports.CollapsibleContent = __webpack_exports__.CollapsibleContent;
360
357
  exports.CollapsibleTrigger = __webpack_exports__.CollapsibleTrigger;
@@ -567,7 +564,6 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
567
564
  "CardHeader",
568
565
  "CardTitle",
569
566
  "Checkbox",
570
- "CodeBlock",
571
567
  "Collapsible",
572
568
  "CollapsibleContent",
573
569
  "CollapsibleTrigger",
package/dist/index.d.ts CHANGED
@@ -37,8 +37,6 @@ export { StatsCard } from './components/ui/stats-card';
37
37
  export type { StatsCardProps } from './components/ui/stats-card';
38
38
  export { Badge, badgeVariants } from './components/ui/badge';
39
39
  export type { BadgeProps } from './components/ui/badge';
40
- export { CodeBlock } from './components/ui/code-block';
41
- export type { CodeBlockProps } from './components/ui/code-block';
42
40
  export { Avatar, AvatarFallback, AvatarImage } from './components/ui/avatar';
43
41
  export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/ui/table';
44
42
  export { DataTable, DataTableColumnHeader, DataTableSelectColumn, } from './components/ui/data-table';
package/dist/index.js CHANGED
@@ -24,7 +24,6 @@ import { FileUpload } from "./components/ui/file-upload.js";
24
24
  import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card.js";
25
25
  import { StatsCard } from "./components/ui/stats-card.js";
26
26
  import { Badge, badgeVariants } from "./components/ui/badge.js";
27
- import { CodeBlock } from "./components/ui/code-block.js";
28
27
  import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar.js";
29
28
  import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/ui/table.js";
30
29
  import { DataTable, DataTableColumnHeader, DataTableSelectColumn } from "./components/ui/data-table.js";
@@ -63,4 +62,4 @@ import { ExpressionBuilder, RuleBuilder, RulesEngine } from "./components/forms/
63
62
  import { DataFetcher, DataSourceBuilder, DataTransformers, FetchAdapter } from "./components/forms/data-fetcher.js";
64
63
  import { analyticsPlugin, auditPlugin, autoSavePlugin, formattingPlugin, validationPlugin, workflowPlugin } from "./components/forms/form-plugins.js";
65
64
  import { hasMinMaxStep, hasOptions, isCustomField, isFileField } from "./components/forms/form-schema.js";
66
- 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 };
65
+ 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 CHANGED
@@ -815,6 +815,9 @@
815
815
  .mt-8 {
816
816
  margin-top: calc(var(--spacing) * 8);
817
817
  }
818
+ .mt-10 {
819
+ margin-top: calc(var(--spacing) * 10);
820
+ }
818
821
  .mt-20 {
819
822
  margin-top: calc(var(--spacing) * 20);
820
823
  }
@@ -833,6 +836,9 @@
833
836
  .mr-2 {
834
837
  margin-right: calc(var(--spacing) * 2);
835
838
  }
839
+ .mr-4 {
840
+ margin-right: calc(var(--spacing) * 4);
841
+ }
836
842
  .mr-auto {
837
843
  margin-right: auto;
838
844
  }
@@ -854,12 +860,18 @@
854
860
  .mb-4 {
855
861
  margin-bottom: calc(var(--spacing) * 4);
856
862
  }
863
+ .mb-5 {
864
+ margin-bottom: calc(var(--spacing) * 5);
865
+ }
857
866
  .mb-6 {
858
867
  margin-bottom: calc(var(--spacing) * 6);
859
868
  }
860
869
  .mb-8 {
861
870
  margin-bottom: calc(var(--spacing) * 8);
862
871
  }
872
+ .mb-10 {
873
+ margin-bottom: calc(var(--spacing) * 10);
874
+ }
863
875
  .-ml-3 {
864
876
  margin-left: calc(var(--spacing) * -3);
865
877
  }
@@ -1885,6 +1897,9 @@
1885
1897
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
1886
1898
  }
1887
1899
  }
1900
+ .gap-y-1\.5 {
1901
+ row-gap: calc(var(--spacing) * 1.5);
1902
+ }
1888
1903
  .gap-y-2 {
1889
1904
  row-gap: calc(var(--spacing) * 2);
1890
1905
  }
@@ -2256,6 +2271,12 @@
2256
2271
  border-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
2257
2272
  }
2258
2273
  }
2274
+ .border-white\/10 {
2275
+ border-color: color-mix(in srgb, #fff 10%, transparent);
2276
+ @supports (color: color-mix(in lab, red, red)) {
2277
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2278
+ }
2279
+ }
2259
2280
  .border-yellow-300 {
2260
2281
  border-color: var(--color-yellow-300);
2261
2282
  }
@@ -3509,6 +3530,9 @@
3509
3530
  .pb-6 {
3510
3531
  padding-bottom: calc(var(--spacing) * 6);
3511
3532
  }
3533
+ .pb-8 {
3534
+ padding-bottom: calc(var(--spacing) * 8);
3535
+ }
3512
3536
  .pl-0 {
3513
3537
  padding-left: calc(var(--spacing) * 0);
3514
3538
  }
@@ -3824,6 +3848,12 @@
3824
3848
  color: color-mix(in oklab, var(--foreground) 50%, transparent);
3825
3849
  }
3826
3850
  }
3851
+ .text-foreground\/60 {
3852
+ color: var(--foreground);
3853
+ @supports (color: color-mix(in lab, red, red)) {
3854
+ color: color-mix(in oklab, var(--foreground) 60%, transparent);
3855
+ }
3856
+ }
3827
3857
  .text-gray-50 {
3828
3858
  color: var(--color-gray-50);
3829
3859
  }
@@ -3860,6 +3890,12 @@
3860
3890
  .text-muted-foreground {
3861
3891
  color: var(--muted-foreground);
3862
3892
  }
3893
+ .text-muted-foreground\/70 {
3894
+ color: var(--muted-foreground);
3895
+ @supports (color: color-mix(in lab, red, red)) {
3896
+ color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
3897
+ }
3898
+ }
3863
3899
  .text-orange-400 {
3864
3900
  color: var(--color-orange-400);
3865
3901
  }
@@ -3944,6 +3980,9 @@
3944
3980
  .text-yellow-800 {
3945
3981
  color: var(--color-yellow-800);
3946
3982
  }
3983
+ .text-zinc-100 {
3984
+ color: var(--color-zinc-100);
3985
+ }
3947
3986
  .capitalize {
3948
3987
  text-transform: capitalize;
3949
3988
  }
@@ -4170,6 +4209,11 @@
4170
4209
  .\[--cell-size\:2\.75rem\] {
4171
4210
  --cell-size: 2.75rem;
4172
4211
  }
4212
+ .group-open\:rotate-90 {
4213
+ &:is(:where(.group):is([open], :popover-open, :open) *) {
4214
+ rotate: 90deg;
4215
+ }
4216
+ }
4173
4217
  .group-focus-within\/input\:bg-foreground-accent {
4174
4218
  &:is(:where(.group\/input):focus-within *) {
4175
4219
  background-color: var(--foreground-accent);
@@ -4475,6 +4519,12 @@
4475
4519
  border-width: 0px;
4476
4520
  }
4477
4521
  }
4522
+ .last\:border-r-0 {
4523
+ &:last-child {
4524
+ border-right-style: var(--tw-border-style);
4525
+ border-right-width: 0px;
4526
+ }
4527
+ }
4478
4528
  .last\:border-b-0 {
4479
4529
  &:last-child {
4480
4530
  border-bottom-style: var(--tw-border-style);
@@ -4623,13 +4673,6 @@
4623
4673
  }
4624
4674
  }
4625
4675
  }
4626
- .hover\:bg-background-hover {
4627
- &:hover {
4628
- @media (hover: hover) {
4629
- background-color: var(--color-background-hover);
4630
- }
4631
- }
4632
- }
4633
4676
  .hover\:bg-blue-100 {
4634
4677
  &:hover {
4635
4678
  @media (hover: hover) {
package/package.json CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@uipath/apollo-wind",
3
- "version": "2.20.0",
3
+ "version": "2.21.0",
4
4
  "description": "UiPath wind design system - A Tailwind CSS based React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
9
12
  "exports": {
10
13
  ".": {
11
14
  "types": "./dist/index.d.ts",
@@ -46,6 +49,11 @@
46
49
  "./postcss": {
47
50
  "import": "./dist/postcss.config.export.js",
48
51
  "require": "./dist/postcss.config.export.cjs"
52
+ },
53
+ "./editor-themes": {
54
+ "import": "./dist/editor-themes/index.js",
55
+ "require": "./dist/editor-themes/index.cjs",
56
+ "types": "./dist/editor-themes/index.d.ts"
49
57
  }
50
58
  },
51
59
  "files": [
@@ -104,7 +112,6 @@
104
112
  "react-hook-form": "^7.66.1",
105
113
  "react-live": "^4.1.8",
106
114
  "react-resizable-panels": "^4.7.3",
107
- "react-syntax-highlighter": "^16.1.1",
108
115
  "recharts": "2.15.4",
109
116
  "sonner": "^2.0.7",
110
117
  "tailwind-merge": "^3.4.0",
@@ -114,15 +121,21 @@
114
121
  "@uipath/apollo-core": "5.10.0"
115
122
  },
116
123
  "devDependencies": {
124
+ "@codemirror/lang-javascript": "^6.2.5",
125
+ "@codemirror/language": "^6.12.3",
126
+ "@codemirror/state": "^6.6.0",
127
+ "@codemirror/view": "^6.43.0",
128
+ "@lezer/highlight": "^1.2.3",
129
+ "@monaco-editor/react": "^4.7.0",
117
130
  "@rsbuild/plugin-react": "^1.4.1",
118
131
  "@rslib/core": "^0.19.6",
119
132
  "@semantic-release/changelog": "^6.0.3",
120
133
  "@semantic-release/git": "^10.0.1",
121
- "@storybook/addon-a11y": "^10.2.15",
122
- "@storybook/addon-docs": "^10.2.15",
123
- "@storybook/addon-links": "^10.2.15",
134
+ "@storybook/addon-a11y": "^10.4.1",
135
+ "@storybook/addon-docs": "^10.4.1",
136
+ "@storybook/addon-links": "^10.4.1",
124
137
  "@storybook/addon-mcp": "^0.2.2",
125
- "@storybook/react-vite": "^10.2.15",
138
+ "@storybook/react-vite": "^10.4.1",
126
139
  "@tailwindcss/cli": "^4.1.17",
127
140
  "@tailwindcss/postcss": "^4.1.17",
128
141
  "@testing-library/dom": "^10.4.1",
@@ -133,7 +146,6 @@
133
146
  "@types/node": "^24.10.1",
134
147
  "@types/react": "^19.2.6",
135
148
  "@types/react-dom": "^19.2.2",
136
- "@types/react-syntax-highlighter": "^15.5.13",
137
149
  "@vitest/coverage-v8": "^4.1.5",
138
150
  "@vitest/ui": "^4.1.5",
139
151
  "ajv": "^8.18.0",
@@ -141,13 +153,14 @@
141
153
  "globals": "^16.5.0",
142
154
  "jest-axe": "^10.0.0",
143
155
  "jsdom": "^27.2.0",
156
+ "monaco-editor": "^0.55.1",
144
157
  "postcss": "^8.5.6",
145
158
  "postcss-import": "^16.1.1",
146
159
  "react": "19.2.3",
147
160
  "react-dom": "19.2.3",
148
161
  "react-scan": "^0.5.3",
149
162
  "semantic-release": "^25.0.3",
150
- "storybook": "^10.2.15",
163
+ "storybook": "^10.4.1",
151
164
  "tailwindcss": "^4.1.17",
152
165
  "typescript": "^5.9.3",
153
166
  "vitest": "^4.1.5"
@@ -1,235 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.d = (exports1, definition)=>{
5
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
6
- enumerable: true,
7
- get: definition[key]
8
- });
9
- };
10
- })();
11
- (()=>{
12
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
13
- })();
14
- (()=>{
15
- __webpack_require__.r = (exports1)=>{
16
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
17
- value: 'Module'
18
- });
19
- Object.defineProperty(exports1, '__esModule', {
20
- value: true
21
- });
22
- };
23
- })();
24
- var __webpack_exports__ = {};
25
- __webpack_require__.r(__webpack_exports__);
26
- __webpack_require__.d(__webpack_exports__, {
27
- CodeBlock: ()=>CodeBlock
28
- });
29
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
- const external_lucide_react_namespaceObject = require("lucide-react");
31
- const external_react_namespaceObject = require("react");
32
- const external_react_syntax_highlighter_namespaceObject = require("react-syntax-highlighter");
33
- const index_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/index.js");
34
- const external_button_cjs_namespaceObject = require("./button.cjs");
35
- const index_cjs_namespaceObject = require("../../lib/index.cjs");
36
- const THEME_CONFIG = {
37
- dark: {
38
- prismStyle: index_js_namespaceObject.nord,
39
- bg: '#182027',
40
- headerBg: '#111920',
41
- labelColor: '#8ea1b1',
42
- iconColor: '#6b8899',
43
- lineNumberColor: '#2e3f4c'
44
- },
45
- light: {
46
- prismStyle: index_js_namespaceObject.vs,
47
- bg: '#ffffff',
48
- headerBg: '#f0f4f8',
49
- labelColor: '#374151',
50
- iconColor: '#6b7280',
51
- lineNumberColor: '#c8d4de'
52
- },
53
- 'future-dark': {
54
- prismStyle: index_js_namespaceObject.vscDarkPlus,
55
- bg: 'var(--surface-raised)',
56
- headerBg: '#09090b',
57
- labelColor: '#a1a1aa',
58
- iconColor: '#71717a',
59
- lineNumberColor: '#3f3f46'
60
- },
61
- 'future-light': {
62
- prismStyle: index_js_namespaceObject.vs,
63
- bg: 'var(--surface-raised)',
64
- headerBg: '#f4f4f5',
65
- labelColor: '#52525b',
66
- iconColor: '#71717a',
67
- lineNumberColor: '#d4d4d8'
68
- },
69
- wireframe: {
70
- prismStyle: index_js_namespaceObject.prism,
71
- bg: '#f9fafb',
72
- headerBg: '#f3f4f6',
73
- labelColor: '#6b7280',
74
- iconColor: '#9ca3af',
75
- lineNumberColor: '#d1d5db'
76
- },
77
- vertex: {
78
- prismStyle: index_js_namespaceObject.nightOwl,
79
- bg: 'oklch(0.21 0.03 258.5)',
80
- headerBg: 'oklch(0.188 0.028 258.5)',
81
- labelColor: '#a6b5c9',
82
- iconColor: '#7a90a8',
83
- lineNumberColor: 'oklch(0.32 0.03 258.5)'
84
- },
85
- canvas: {
86
- prismStyle: index_js_namespaceObject.atomDark,
87
- bg: '#182027',
88
- headerBg: '#111920',
89
- labelColor: '#8ea1b1',
90
- iconColor: '#6b8899',
91
- lineNumberColor: '#2e3f4c'
92
- },
93
- 'dark-hc': {
94
- prismStyle: index_js_namespaceObject.oneDark,
95
- bg: '#0a0a0a',
96
- headerBg: '#141414',
97
- labelColor: '#e4e4e4',
98
- iconColor: '#c8c8c8',
99
- lineNumberColor: '#505050'
100
- },
101
- 'light-hc': {
102
- prismStyle: index_js_namespaceObject.oneLight,
103
- bg: '#ffffff',
104
- headerBg: '#e8e8e8',
105
- labelColor: '#111827',
106
- iconColor: '#374151',
107
- lineNumberColor: '#9ca3af'
108
- }
109
- };
110
- const BODY_CLASS_PRIORITY = [
111
- 'future-dark',
112
- 'future-light',
113
- 'dark-hc',
114
- 'light-hc',
115
- 'dark',
116
- 'light',
117
- 'wireframe',
118
- 'vertex',
119
- 'canvas'
120
- ];
121
- function getBodyTheme() {
122
- if ("u" < typeof document) return 'dark';
123
- const bodyClasses = document.body.classList;
124
- const htmlClasses = document.documentElement.classList;
125
- return BODY_CLASS_PRIORITY.find((t)=>bodyClasses.contains(t) || htmlClasses.contains(t)) ?? 'future-dark';
126
- }
127
- function useApolloTheme() {
128
- const [theme, setTheme] = (0, external_react_namespaceObject.useState)(getBodyTheme);
129
- (0, external_react_namespaceObject.useEffect)(()=>{
130
- if ("u" < typeof document) return;
131
- const observer = new MutationObserver(()=>setTheme(getBodyTheme()));
132
- const targets = [
133
- document.body,
134
- document.documentElement
135
- ];
136
- targets.forEach((target)=>{
137
- if (target) observer.observe(target, {
138
- attributes: true,
139
- attributeFilter: [
140
- 'class'
141
- ]
142
- });
143
- });
144
- return ()=>observer.disconnect();
145
- }, []);
146
- return theme;
147
- }
148
- function CodeBlock({ children, language = 'tsx', showLineNumbers = true, showCopyButton = true, fileName, theme, wrapLines = false, className }) {
149
- const [copied, setCopied] = (0, external_react_namespaceObject.useState)(false);
150
- const timeoutRef = (0, external_react_namespaceObject.useRef)(null);
151
- const detectedTheme = useApolloTheme();
152
- const activeTheme = theme ?? detectedTheme;
153
- const config = THEME_CONFIG[activeTheme];
154
- const code = children.trim();
155
- async function handleCopy() {
156
- try {
157
- await navigator.clipboard.writeText(code);
158
- setCopied(true);
159
- timeoutRef.current = setTimeout(()=>setCopied(false), 1500);
160
- } catch {}
161
- }
162
- (0, external_react_namespaceObject.useEffect)(()=>()=>{
163
- if (timeoutRef.current) clearTimeout(timeoutRef.current);
164
- }, []);
165
- const showHeader = !!(fileName || language || showCopyButton);
166
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
167
- className: (0, index_cjs_namespaceObject.cn)('overflow-hidden rounded-lg border border-border future:border-border-subtle font-mono text-sm', className),
168
- style: {
169
- background: config.bg
170
- },
171
- children: [
172
- showHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
173
- className: "flex items-center justify-between px-4 py-2 border-b border-border future:border-border-subtle",
174
- style: {
175
- background: config.headerBg
176
- },
177
- children: [
178
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
179
- className: "text-xs font-medium",
180
- style: {
181
- color: config.labelColor
182
- },
183
- children: fileName ?? language
184
- }),
185
- showCopyButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
186
- icon: true,
187
- variant: "ghost",
188
- size: "2xs",
189
- style: {
190
- color: config.iconColor
191
- },
192
- onClick: handleCopy,
193
- "aria-label": copied ? 'Copied!' : 'Copy code',
194
- children: copied ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {})
195
- })
196
- ]
197
- }),
198
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_syntax_highlighter_namespaceObject.Prism, {
199
- language: language,
200
- style: config.prismStyle,
201
- showLineNumbers: showLineNumbers,
202
- wrapLines: wrapLines,
203
- wrapLongLines: wrapLines,
204
- customStyle: {
205
- margin: 0,
206
- border: 'none',
207
- borderRadius: 0,
208
- background: 'transparent',
209
- padding: '1rem',
210
- fontSize: 13,
211
- lineHeight: 1.6
212
- },
213
- lineNumberStyle: {
214
- color: config.lineNumberColor,
215
- minWidth: '2.5em',
216
- paddingRight: '1.25em',
217
- userSelect: 'none'
218
- },
219
- codeTagProps: {
220
- style: {
221
- fontFamily: 'inherit'
222
- }
223
- },
224
- children: code
225
- })
226
- ]
227
- });
228
- }
229
- exports.CodeBlock = __webpack_exports__.CodeBlock;
230
- for(var __rspack_i in __webpack_exports__)if (-1 === [
231
- "CodeBlock"
232
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
233
- Object.defineProperty(exports, '__esModule', {
234
- value: true
235
- });
@@ -1,48 +0,0 @@
1
- /**
2
- * All Apollo theme variants supported by CodeBlock.
3
- *
4
- * Standard (apollo-core):
5
- * - `'dark'` / `'light'` — Default dark / light
6
- * - `'dark-hc'` / `'light-hc'` — High contrast variants
7
- *
8
- * Future / Demo themes:
9
- * - `'future-dark'` / `'future-light'` — Future zinc palette, cyan brand
10
- * - `'wireframe'` — Greyscale / prototyping
11
- * - `'vertex'` — Deep blue-grey, teal brand
12
- * - `'canvas'` — Apollo MUI dark, orange brand
13
- *
14
- * When no theme is passed the component auto-detects from the Apollo
15
- * `<body>` class and switches live when the theme changes.
16
- */
17
- export type CodeBlockTheme = 'dark' | 'light' | 'dark-hc' | 'light-hc' | 'future-dark' | 'future-light' | 'wireframe' | 'vertex' | 'canvas';
18
- export interface CodeBlockProps {
19
- /** The code string to display */
20
- children: string;
21
- /** Programming language for syntax highlighting (e.g. 'tsx', 'python', 'sql') */
22
- language?: string;
23
- /** Show line numbers on the left */
24
- showLineNumbers?: boolean;
25
- /** Show copy-to-clipboard button in the header */
26
- showCopyButton?: boolean;
27
- /** Optional file name displayed in the header */
28
- fileName?: string;
29
- /**
30
- * Color scheme. When omitted the component auto-follows the active Apollo
31
- * page theme by watching the class on `<body>` — switches live.
32
- */
33
- theme?: CodeBlockTheme;
34
- /** Wrap long lines instead of scrolling horizontally */
35
- wrapLines?: boolean;
36
- className?: string;
37
- }
38
- /**
39
- * Syntax-highlighted code block built on react-syntax-highlighter (Prism engine).
40
- *
41
- * Supports 200+ languages, optional line numbers, a filename header, and a
42
- * one-click copy button. Automatically follows the active Apollo theme by
43
- * watching the body class — or accept an explicit `theme` prop to override.
44
- *
45
- * Supported themes: dark, light, dark-hc, light-hc, future-dark,
46
- * future-light, wireframe, vertex, canvas.
47
- */
48
- export declare function CodeBlock({ children, language, showLineNumbers, showCopyButton, fileName, theme, wrapLines, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;