@uipath/apollo-wind 2.1.0 → 2.2.0

package/README.md

@@ -142,7 +142,7 @@ This package is part of a pnpm workspace. All commands should be run using `pnpm
 ```bash
 pnpm install                                    # Install all dependencies
 pnpm build                                      # Build apollo packages
-pnpm storybook:wind                             # Run Storybook on http://localhost:6006
+pnpm storybook:design                           # Run Storybook on http://localhost:6006
 pnpm test --filter=@uipath/apollo-wind          # Run tests
 pnpm lint --filter=@uipath/apollo-wind          # Run lint
 pnpm format --filter=@uipath/apollo-wind        # Run biome format

package/dist/components/UiPath/index.cjs

@@ -0,0 +1,5 @@
+var __webpack_exports__ = {};
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/UiPath/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/custom/flow-properties-simple.cjs

@@ -65,7 +65,7 @@ function FieldItem({ field, onGraphControl }) {
                 onValueChange: setValue,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectTrigger, {
-                        className: (0, index_cjs_namespaceObject.cn)('h-10 rounded-xl border-0 shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted'),
+                        className: "h-10 rounded-xl border-0 bg-surface-overlay text-foreground shadow-sm placeholder:text-foreground-muted",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_cjs_namespaceObject.SelectValue, {
                             placeholder: field.placeholder ?? 'Select...'
                         })
@@ -80,17 +80,17 @@ function FieldItem({ field, onGraphControl }) {
                     })
                 ]
             }) : 'url' === field.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: "flex h-10 items-center overflow-hidden rounded-xl bg-surface-overlay shadow-sm",
+                className: "flex h-10 w-full items-center overflow-hidden rounded-xl bg-surface-overlay shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
                         value: value,
                         onChange: (e)=>setValue(e.target.value),
                         placeholder: field.placeholder,
-                        className: "h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
+                        className: "h-full flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:py-0 future:shadow-none future:focus-visible:ring-0 future:focus-visible:ring-offset-0"
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                         type: "button",
-                        className: "flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground",
+                        className: "flex h-full w-[50px] shrink-0 items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground",
                         "aria-label": "Browse files",
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Folder, {
                             className: "h-5 w-5"
@@ -100,8 +100,7 @@ function FieldItem({ field, onGraphControl }) {
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(input_cjs_namespaceObject.Input, {
                 value: value,
                 onChange: (e)=>setValue(e.target.value),
-                placeholder: field.placeholder,
-                className: (0, index_cjs_namespaceObject.cn)('h-10 rounded-xl border-0 text-sm font-medium shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted placeholder:text-foreground-subtle')
+                placeholder: field.placeholder
             })
         ]
     });

package/dist/components/custom/flow-properties-simple.js

@@ -37,7 +37,7 @@ function FieldItem({ field, onGraphControl }) {
                 onValueChange: setValue,
                 children: [
                     /*#__PURE__*/ jsx(SelectTrigger, {
-                        className: cn('h-10 rounded-xl border-0 shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted'),
+                        className: "h-10 rounded-xl border-0 bg-surface-overlay text-foreground shadow-sm placeholder:text-foreground-muted",
                         children: /*#__PURE__*/ jsx(SelectValue, {
                             placeholder: field.placeholder ?? 'Select...'
                         })
@@ -52,17 +52,17 @@ function FieldItem({ field, onGraphControl }) {
                     })
                 ]
             }) : 'url' === field.type ? /*#__PURE__*/ jsxs("div", {
-                className: "flex h-10 items-center overflow-hidden rounded-xl bg-surface-overlay shadow-sm",
+                className: "flex h-10 w-full items-center overflow-hidden rounded-xl bg-surface-overlay shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
                 children: [
                     /*#__PURE__*/ jsx(Input, {
                         value: value,
                         onChange: (e)=>setValue(e.target.value),
                         placeholder: field.placeholder,
-                        className: "h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
+                        className: "h-full flex-1 rounded-none border-0 bg-transparent px-3 py-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:py-0 future:shadow-none future:focus-visible:ring-0 future:focus-visible:ring-offset-0"
                     }),
                     /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: "flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground",
+                        className: "flex h-full w-[50px] shrink-0 items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground",
                         "aria-label": "Browse files",
                         children: /*#__PURE__*/ jsx(Folder, {
                             className: "h-5 w-5"
@@ -72,8 +72,7 @@ function FieldItem({ field, onGraphControl }) {
             }) : /*#__PURE__*/ jsx(Input, {
                 value: value,
                 onChange: (e)=>setValue(e.target.value),
-                placeholder: field.placeholder,
-                className: cn('h-10 rounded-xl border-0 text-sm font-medium shadow-sm', value ? 'bg-surface-hover text-foreground' : 'bg-surface-overlay text-foreground-muted placeholder:text-foreground-subtle')
+                placeholder: field.placeholder
             })
         ]
     });

package/dist/components/ui/checkbox.cjs

@@ -33,12 +33,12 @@ const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
 const Checkbox = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Root, {
         ref: ref,
-        className: (0, utils_cjs_namespaceObject.cn)('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className),
+        className: (0, utils_cjs_namespaceObject.cn)('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_checkbox_namespaceObject.Indicator, {
-            className: (0, utils_cjs_namespaceObject.cn)('flex items-center justify-center text-current'),
+            className: (0, utils_cjs_namespaceObject.cn)('flex items-center justify-center text-current future:text-foreground-inverse'),
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
-                className: "h-4 w-4"
+                className: "h-4 w-4 future:h-3.5 future:w-3.5"
             })
         })
     }));

package/dist/components/ui/checkbox.js

@@ -5,12 +5,12 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Checkbox = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
-        className: cn('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', className),
+        className: cn('peer h-4 w-4 shrink-0 cursor-pointer rounded-sm border border-border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', 'future:hover:border-border-hover future:data-[state=checked]:border-foreground-accent future:data-[state=checked]:bg-foreground-accent future:data-[state=checked]:text-current', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
-            className: cn('flex items-center justify-center text-current'),
+            className: cn('flex items-center justify-center text-current future:text-foreground-inverse'),
             children: /*#__PURE__*/ jsx(Check, {
-                className: "h-4 w-4"
+                className: "h-4 w-4 future:h-3.5 future:w-3.5"
             })
         })
     }));

package/dist/components/ui/index.cjs

@@ -15,7 +15,7 @@ var __webpack_modules__ = {
     "./avatar" (module) {
         module.exports = require("./avatar.cjs");
     },
-    "./badge" (module) {
+    "@/components/ui/badge" (module) {
         module.exports = require("./badge.cjs");
     },
     "./breadcrumb" (module) {
@@ -27,16 +27,16 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
-    "./dropdown-menu" (module) {
+    "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -75,7 +75,7 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
     "@/components/ui/label" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _badge__rspack_import_5 = __webpack_require__("./badge");
+    var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _badge__rspack_import_5)if ([
         "TreeView",
@@ -269,14 +269,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -290,7 +290,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -339,21 +339,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
+    var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -381,7 +381,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_24[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_25 = __webpack_require__("./input");
+    var _input__rspack_import_25 = __webpack_require__("@/components/ui/input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_25)if ([
         "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_46 = __webpack_require__("./table");
+    var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_46)if ([
         "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/dist/components/ui/input.cjs

@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
 const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
         type: type,
-        className: (0, utils_cjs_namespaceObject.cn)('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className),
+        className: (0, utils_cjs_namespaceObject.cn)('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
         ref: ref,
         ...props
     }));

package/dist/components/ui/input.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Input = /*#__PURE__*/ forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ jsx("input", {
         type: type,
-        className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className),
+        className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
         ref: ref,
         ...props
     }));

package/dist/components/ui/radio-group.cjs

@@ -40,12 +40,12 @@ const RadioGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ cl
 RadioGroup.displayName = react_radio_group_namespaceObject.Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Item, {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className),
+        className: (0, index_cjs_namespaceObject.cn)('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Indicator, {
             className: "flex items-center justify-center",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Circle, {
-                className: "h-2.5 w-2.5 fill-current text-current"
+                className: "h-2.5 w-2.5 fill-current text-current future:fill-foreground-accent future:text-foreground-accent"
             })
         })
     }));

package/dist/components/ui/radio-group.js

@@ -11,12 +11,12 @@ const RadioGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#_
 RadioGroup.displayName = Root.displayName;
 const RadioGroupItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Item, {
         ref: ref,
-        className: cn('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className),
+        className: cn('aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'future:border-border future:text-foreground future:hover:border-border-hover future:data-[state=checked]:border-foreground-muted', className),
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
             className: "flex items-center justify-center",
             children: /*#__PURE__*/ jsx(Circle, {
-                className: "h-2.5 w-2.5 fill-current text-current"
+                className: "h-2.5 w-2.5 fill-current text-current future:fill-foreground-accent future:text-foreground-accent"
             })
         })
     }));

package/dist/components/ui/tooltip.cjs

@@ -41,7 +41,7 @@ const TooltipPortal = react_tooltip_namespaceObject.Portal;
 const TooltipContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tooltip_namespaceObject.Content, {
         ref: ref,
         sideOffset: sideOffset,
-        className: (0, index_cjs_namespaceObject.cn)('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
+        className: (0, index_cjs_namespaceObject.cn)('z-50 overflow-hidden rounded-md border border-border-subtle bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
         ...props
     }));
 TooltipContent.displayName = react_tooltip_namespaceObject.Content.displayName;

package/dist/components/ui/tooltip.js

@@ -9,7 +9,7 @@ const TooltipPortal = Portal;
 const TooltipContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ jsx(Content, {
         ref: ref,
         sideOffset: sideOffset,
-        className: cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
+        className: cn('z-50 overflow-hidden rounded-md border border-border-subtle bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
         ...props
     }));
 TooltipContent.displayName = Content.displayName;

package/dist/styles.css

@@ -279,6 +279,7 @@
     --default-mono-font-family: var(--font-mono);
     --color-brand: var(--brand);
     --color-foreground-inverse: var(--foreground-inverse);
+    --color-border-hover: var(--border-hover);
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-card: var(--card);
@@ -3956,6 +3957,10 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0px_1px_2px_0px_rgba\(0\,0\,0\,0\.05\)\] {
+    --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0,0,0,0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0px_4px_4px_0px_rgba\(0\,0\,0\,0\.05\)\] {
     --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, rgba(0,0,0,0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4426,6 +4431,28 @@
       border-color: var(--border-hover);
     }
   }
+  .focus-within\:ring-2 {
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-within\:ring-ring {
+    &:focus-within {
+      --tw-ring-color: var(--ring);
+    }
+  }
+  .focus-within\:ring-offset-2 {
+    &:focus-within {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-within\:ring-offset-background {
+    &:focus-within {
+      --tw-ring-offset-color: var(--background);
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -5687,6 +5714,188 @@
       color: var(--color-red-400);
     }
   }
+  .future\:h-3\.5 {
+    :is(.future-dark, .future-light) & {
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
+  .future\:h-10 {
+    :is(.future-dark, .future-light) & {
+      height: calc(var(--spacing) * 10);
+    }
+  }
+  .future\:h-full {
+    :is(.future-dark, .future-light) & {
+      height: 100%;
+    }
+  }
+  .future\:w-3\.5 {
+    :is(.future-dark, .future-light) & {
+      width: calc(var(--spacing) * 3.5);
+    }
+  }
+  .future\:rounded-none {
+    :is(.future-dark, .future-light) & {
+      border-radius: 0;
+    }
+  }
+  .future\:rounded-xl {
+    :is(.future-dark, .future-light) & {
+      border-radius: var(--radius-xl);
+    }
+  }
+  .future\:border-0 {
+    :is(.future-dark, .future-light) & {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .future\:border-border {
+    :is(.future-dark, .future-light) & {
+      border-color: var(--ap-wind-border);
+    }
+  }
+  .future\:bg-surface-overlay {
+    :is(.future-dark, .future-light) & {
+      background-color: var(--surface-overlay);
+    }
+  }
+  .future\:bg-transparent {
+    :is(.future-dark, .future-light) & {
+      background-color: transparent;
+    }
+  }
+  .future\:fill-foreground-accent {
+    :is(.future-dark, .future-light) & {
+      fill: var(--foreground-accent);
+    }
+  }
+  .future\:py-0 {
+    :is(.future-dark, .future-light) & {
+      padding-block: calc(var(--spacing) * 0);
+    }
+  }
+  .future\:py-2 {
+    :is(.future-dark, .future-light) & {
+      padding-block: calc(var(--spacing) * 2);
+    }
+  }
+  .future\:text-sm {
+    :is(.future-dark, .future-light) & {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .future\:text-foreground {
+    :is(.future-dark, .future-light) & {
+      color: var(--foreground);
+    }
+  }
+  .future\:text-foreground-accent {
+    :is(.future-dark, .future-light) & {
+      color: var(--foreground-accent);
+    }
+  }
+  .future\:text-foreground-inverse {
+    :is(.future-dark, .future-light) & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .future\:shadow-\[0px_1px_2px_0px_rgba\(0\,0\,0\,0\.05\)\] {
+    :is(.future-dark, .future-light) & {
+      --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0,0,0,0.05));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .future\:shadow-none {
+    :is(.future-dark, .future-light) & {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .future\:placeholder\:font-normal {
+    :is(.future-dark, .future-light) & {
+      &::placeholder {
+        --tw-font-weight: var(--font-weight-normal);
+        font-weight: var(--font-weight-normal);
+      }
+    }
+  }
+  .future\:placeholder\:text-foreground-muted {
+    :is(.future-dark, .future-light) & {
+      &::placeholder {
+        color: var(--foreground-muted);
+      }
+    }
+  }
+  .future\:hover\:border-border-hover {
+    :is(.future-dark, .future-light) & {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--border-hover);
+        }
+      }
+    }
+  }
+  .future\:focus-visible\:ring-0 {
+    :is(.future-dark, .future-light) & {
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .future\:focus-visible\:ring-offset-0 {
+    :is(.future-dark, .future-light) & {
+      &:focus-visible {
+        --tw-ring-offset-width: 0px;
+        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      }
+    }
+  }
+  .future\:focus-visible\:ring-offset-2 {
+    :is(.future-dark, .future-light) & {
+      &:focus-visible {
+        --tw-ring-offset-width: 2px;
+        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      }
+    }
+  }
+  .future\:focus-visible\:ring-offset-background {
+    :is(.future-dark, .future-light) & {
+      &:focus-visible {
+        --tw-ring-offset-color: var(--background);
+      }
+    }
+  }
+  .future\:data-\[state\=checked\]\:border-foreground-accent {
+    :is(.future-dark, .future-light) & {
+      &[data-state="checked"] {
+        border-color: var(--foreground-accent);
+      }
+    }
+  }
+  .future\:data-\[state\=checked\]\:border-foreground-muted {
+    :is(.future-dark, .future-light) & {
+      &[data-state="checked"] {
+        border-color: var(--foreground-muted);
+      }
+    }
+  }
+  .future\:data-\[state\=checked\]\:bg-foreground-accent {
+    :is(.future-dark, .future-light) & {
+      &[data-state="checked"] {
+        background-color: var(--foreground-accent);
+      }
+    }
+  }
+  .future\:data-\[state\=checked\]\:text-current {
+    :is(.future-dark, .future-light) & {
+      &[data-state="checked"] {
+        color: currentcolor;
+      }
+    }
+  }
   .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground {
     & .recharts-cartesian-axis-tick text {
       fill: var(--muted-foreground);
@@ -8234,6 +8443,24 @@ body.canvas, .canvas {
     opacity: 0;
   }
 }
+.future-dark, .dark, .dark-hc {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+  & *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  & *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  & *::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 9999px;
+  }
+  & *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-border-hover);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/tailwind.css

@@ -18,6 +18,9 @@
   /* 12px — base border-radius for buttons and UI elements */
 }
 
+/* Variant active when the component is inside a Future Dark or Light theme */
+@custom-variant future (:is(.future-dark, .future-light) &);
+
 /**
   * Individual theme definitions with fallback HEX values
   * Each theme uses semantic tokens from apollo-core with hardcoded fallbacks
@@ -1223,4 +1226,39 @@ body.canvas, .canvas {
 @theme inline {
   --animate-collapsible-down: collapsible-down 200ms ease-out;
   --animate-collapsible-up: collapsible-up 200ms ease-out;
+}
+
+/* ============================================================================
+ * Theme-aware scrollbars
+ *
+ * Dark themes: future-dark + dark-hc are applied to <html>;
+ * dark + dark-hc are applied to <body>. Both cases are covered by the
+ * class selectors below since * matches all descendants.
+ * ============================================================================ */
+
+.future-dark,
+.dark,
+.dark-hc {
+  /* Firefox — inherits down the tree */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+
+  /* WebKit — pseudo-elements don't inherit, must target descendants */
+  & *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  & *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  & *::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 9999px;
+  }
+
+  & *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-border-hover);
+  }
 }

package/package.json

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