@uipath/apollo-wind 2.32.4 → 2.33.1

package/dist/index.js

@@ -18,6 +18,7 @@ import { Slider } from "./components/ui/slider.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
 import { Combobox } from "./components/ui/combobox.js";
 import { MultiSelect } from "./components/ui/multi-select.js";
+import { VariablePicker, VariablePickerContent } from "./components/ui/variable-picker/index.js";
 import { Search, SearchWithSuggestions } from "./components/ui/search.js";
 import { Calendar } from "./components/ui/calendar.js";
 import { DatePicker } from "./components/ui/date-picker.js";
@@ -66,4 +67,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, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, LockableValueField, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, 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 };
+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, FIELD_TYPE_META, FIELD_TYPE_ORDER, FetchAdapter, FileUpload, FormDesigner, FormFieldRenderer, FormStateViewer, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, LockableValueField, MetadataForm, MultiSelect, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerProvider, Progress, PromptEditor, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Row, RuleBuilder, RulesEngine, ScrollArea, ScrollBar, ScrollableTabsList, 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, VariablePicker, VariablePickerContent, analyticsPlugin, auditPlugin, autoSavePlugin, badgeVariants, buttonVariants, cn, createEditableColumn, formattingPlugin, hasMinMaxStep, hasOptions, isCustomField, isFileField, spinnerVariants, toast, toggleVariants, validationPlugin, workflowPlugin };

package/dist/styles.css

@@ -952,6 +952,14 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .\!size-2\.5 {
+    width: calc(var(--spacing) * 2.5) !important;
+    height: calc(var(--spacing) * 2.5) !important;
+  }
+  .\!size-3\.5 {
+    width: calc(var(--spacing) * 3.5) !important;
+    height: calc(var(--spacing) * 3.5) !important;
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -960,6 +968,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -1158,6 +1170,9 @@
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
   .max-h-\[--radix-context-menu-content-available-height\] {
     max-height: --radix-context-menu-content-available-height;
   }
@@ -1194,6 +1209,9 @@
   .min-h-12 {
     min-height: calc(var(--spacing) * 12);
   }
+  .min-h-28 {
+    min-height: calc(var(--spacing) * 28);
+  }
   .min-h-\[32px\] {
     min-height: 32px;
   }
@@ -1428,6 +1446,9 @@
   .w-\[500px\] {
     width: 500px;
   }
+  .w-\[520px\] {
+    width: 520px;
+  }
   .w-\[550px\] {
     width: 550px;
   }
@@ -1527,6 +1548,9 @@
   .max-w-\[calc\(100\%-32px\)\] {
     max-width: calc(100% - 32px);
   }
+  .max-w-\[calc\(100vw-1rem\)\] {
+    max-width: calc(100vw - 1rem);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1569,6 +1593,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[18px\] {
+    min-width: 18px;
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -1643,6 +1670,9 @@
     --tw-scale-z: 110%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .-rotate-90 {
+    rotate: calc(90deg * -1);
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -3137,6 +3167,12 @@
   .bg-surface-overlay {
     background-color: var(--surface-overlay);
   }
+  .bg-surface-overlay\/40 {
+    background-color: var(--surface-overlay);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--surface-overlay) 40%, transparent);
+    }
+  }
   .bg-surface-overlay\/50 {
     background-color: var(--surface-overlay);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3475,6 +3511,9 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -3601,6 +3640,9 @@
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
+  .pr-3\.5 {
+    padding-right: calc(var(--spacing) * 3.5);
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -4305,6 +4347,10 @@
   .transition-none {
     transition-property: none;
   }
+  .duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
   .duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -4497,6 +4543,11 @@
       }
     }
   }
+  .group-data-\[selected\=true\]\:opacity-100 {
+    &:is(:where(.group)[data-selected="true"] *) {
+      opacity: 100%;
+    }
+  }
   .group-data-\[separator\=active\]\:bg-primary {
     &:is(:where(.group)[data-separator="active"] *) {
       background-color: var(--primary);
@@ -5316,6 +5367,11 @@
       z-index: 10;
     }
   }
+  .focus-visible\:opacity-100 {
+    &:focus-visible {
+      opacity: 100%;
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -5654,11 +5710,21 @@
       background-color: var(--accent);
     }
   }
+  .data-\[selected\=true\]\:bg-surface-overlay {
+    &[data-selected="true"] {
+      background-color: var(--surface-overlay);
+    }
+  }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected="true"] {
       color: var(--accent-foreground);
     }
   }
+  .data-\[selected\=true\]\:text-foreground {
+    &[data-selected="true"] {
+      color: var(--foreground);
+    }
+  }
   .data-\[separator\=active\]\:bg-primary {
     &[data-separator="active"] {
       background-color: var(--primary);
@@ -6122,12 +6188,12 @@
     }
   }
   .dark\:border-destructive {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
       border-color: var(--destructive);
     }
   }
   .dark\:bg-green-900\/10 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
       background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);
@@ -6135,12 +6201,12 @@
     }
   }
   .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
       color: var(--color-green-400);
     }
   }
   .dark\:text-red-400 {
-    @media (prefers-color-scheme: dark) {
+    &:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *) {
       color: var(--color-red-400);
     }
   }
@@ -6590,6 +6656,12 @@
       pointer-events: none;
     }
   }
+  .\[\&_svg\]\:size-2\.75 {
+    & svg {
+      width: calc(var(--spacing) * 2.75);
+      height: calc(var(--spacing) * 2.75);
+    }
+  }
   .\[\&_svg\]\:size-3 {
     & svg {
       width: calc(var(--spacing) * 3);

package/dist/tailwind.css

@@ -24,6 +24,19 @@
 /* Variant active when the component is inside a Future Dark or Light theme */
 @custom-variant future (:is(.future-dark, .future-light) &);
 
+/* Apollo theming is class-driven (see apollo-core theme-variables.css), so
+   override Tailwind's default OS-media `dark` variant to match. Covers the
+   three apollo-core themes that are dark: .dark, .dark-hc, .future-dark.
+   The prototype-only .vertex / .canvas themes are deliberately left out;
+   they name a palette, not a mode, and are snapshots of the dark half of a
+   two-mode source, so they can't be assumed dark long-term.
+
+   The :not(.react-flow) exclusion mirrors the token selectors below, so a
+   ReactFlow wrapper's colorMode class can't flip `dark:` utilities while the
+   tokens around them stay on the host theme. Only .dark needs it, since
+   colorMode emits `light`/`dark` and never `dark-hc`/`future-dark`. */
+@custom-variant dark (&:is(.dark:not(.react-flow), .dark-hc, .future-dark, .dark:not(.react-flow) *, .dark-hc *, .future-dark *));
+
 /**
  * Theme definitions
  *

package/package.json

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