@uipath/apollo-wind 2.52.0 → 2.52.1

package/dist/components/ui/index.cjs

@@ -36,7 +36,7 @@ var __webpack_modules__ = {
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
     "./collapsible" (module) {
@@ -60,13 +60,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "@/components/ui/editable-cell" (module) {
@@ -81,16 +81,16 @@ var __webpack_modules__ = {
     "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/info-tooltip" (module) {
+    "./info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
-    "./input-group" (module) {
+    "@/components/ui/input-group" (module) {
         module.exports = require("./input-group.cjs");
     },
-    "@/components/ui/input" (module) {
+    "./input" (module) {
         module.exports = require("./input.cjs");
     },
     "./label" (module) {
@@ -177,7 +177,7 @@ var __webpack_modules__ = {
     "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
-    "./tooltip" (module) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -317,7 +317,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "TreeView",
@@ -373,7 +373,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_19[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_20 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_20 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_20)if ([
         "TreeView",
@@ -387,7 +387,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_21[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_22 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_22 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_22)if ([
         "TreeView",
@@ -422,28 +422,28 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_form_field__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_27 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_27 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_27)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_27[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _info_tooltip__rspack_import_28 = __webpack_require__("@/components/ui/info-tooltip");
+    var _info_tooltip__rspack_import_28 = __webpack_require__("./info-tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _info_tooltip__rspack_import_28)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_info_tooltip__rspack_import_28[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input__rspack_import_29 = __webpack_require__("@/components/ui/input");
+    var _input__rspack_import_29 = __webpack_require__("./input");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input__rspack_import_29)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _input_group__rspack_import_30 = __webpack_require__("./input-group");
+    var _input_group__rspack_import_30 = __webpack_require__("@/components/ui/input-group");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _input_group__rspack_import_30)if ([
         "TreeView",
@@ -646,7 +646,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_58[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_59 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_59 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_59)if ([
         "TreeView",

package/dist/components/ui/resizable.cjs

@@ -40,12 +40,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_run
 const ResizablePanel = external_react_resizable_panels_namespaceObject.Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Separator, {
         "data-slot": "resizable-handle",
-        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: (0, index_cjs_namespaceObject.cn)('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/components/ui/resizable.d.ts

@@ -1,5 +1,5 @@
-import { Group, Panel, Separator } from 'react-resizable-panels';
 import type { PanelImperativeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof Group>) => import("react/jsx-runtime").JSX.Element;
 declare const ResizablePanel: typeof Panel;
 declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof Separator> & {

package/dist/components/ui/resizable.js

@@ -10,12 +10,12 @@ const ResizablePanelGroup = ({ className, ...props })=>/*#__PURE__*/ jsx(Group,
 const ResizablePanel = Panel;
 const ResizableHandle = ({ withHandle, className, ...props })=>/*#__PURE__*/ jsx(Separator, {
         "data-slot": "resizable-handle",
-        className: cn('group relative flex w-px items-center justify-center bg-border transition-colors data-[separator=hover]:bg-primary data-[separator=active]:bg-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
+        className: cn('group relative flex w-px items-center justify-center bg-[var(--resizable-handle-divider-bg,var(--ap-wind-border))] transition-colors data-[separator=hover]:bg-primary! data-[separator=active]:bg-primary! after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90', className),
         ...props,
         children: withHandle && /*#__PURE__*/ jsx("div", {
-            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary group-data-[separator=active]:bg-primary",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border transition-colors group-data-[separator=hover]:bg-primary! group-data-[separator=active]:bg-primary! [.light:not(.react-flow)_&]:bg-border-subtle [.dark:not(.react-flow)_&]:bg-foreground-subtle [.light:not(.react-flow)_&]:border-border-subtle [.light-hc_&]:border-border-subtle [.dark:not(.react-flow)_&]:border-border-subtle [.dark-hc_&]:border-border-subtle",
             children: /*#__PURE__*/ jsx(GripVertical, {
-                className: "h-2.5 w-2.5"
+                className: "h-2.5 w-2.5 [.light:not(.react-flow)_&]:text-foreground-emp [.light-hc_&]:text-foreground-inverse [.dark:not(.react-flow)_&]:text-foreground-inverse [.dark-hc_&]:text-foreground-inverse"
             })
         })
     });

package/dist/styles.css

@@ -2482,6 +2482,12 @@
   .bg-\[\#ff0000\] {
     background-color: #ff0000;
   }
+  .bg-\[var\(--resizable-handle-divider-bg\,var\(--ap-wind-border\)\)\] {
+    background-color: var(--resizable-handle-divider-bg,var(--ap-wind-border));
+  }
+  .bg-\[var\(\.\.\.\)\] {
+    background-color: var(...);
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -4600,14 +4606,14 @@
       opacity: 100%;
     }
   }
-  .group-data-\[separator\=active\]\:bg-primary {
+  .group-data-\[separator\=active\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="active"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .group-data-\[separator\=hover\]\:bg-primary {
+  .group-data-\[separator\=hover\]\:bg-primary\! {
     &:is(:where(.group)[data-separator="hover"] *) {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .group-data-\[state\=open\]\/section\:rotate-90 {
@@ -5786,14 +5792,14 @@
       color: var(--foreground);
     }
   }
-  .data-\[separator\=active\]\:bg-primary {
+  .data-\[separator\=active\]\:bg-primary\! {
     &[data-separator="active"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
-  .data-\[separator\=hover\]\:bg-primary {
+  .data-\[separator\=hover\]\:bg-primary\! {
     &[data-separator="hover"] {
-      background-color: var(--primary);
+      background-color: var(--primary) !important;
     }
   }
   .data-\[side\=bottom\]\:translate-y-1 {
@@ -7149,6 +7155,56 @@
       rotate: 180deg;
     }
   }
+  .\[\.dark-hc_\&\]\:border-border-subtle {
+    .dark-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark-hc_\&\]\:text-foreground-inverse {
+    .dark-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .dark:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:bg-foreground-subtle {
+    .dark:not(.react-flow) & {
+      background-color: var(--foreground-subtle);
+    }
+  }
+  .\[\.dark\:not\(\.react-flow\)_\&\]\:text-foreground-inverse {
+    .dark:not(.react-flow) & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light-hc_\&\]\:border-border-subtle {
+    .light-hc & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light-hc_\&\]\:text-foreground-inverse {
+    .light-hc & {
+      color: var(--foreground-inverse);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:border-border-subtle {
+    .light:not(.react-flow) & {
+      border-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:bg-border-subtle {
+    .light:not(.react-flow) & {
+      background-color: var(--border-subtle);
+    }
+  }
+  .\[\.light\:not\(\.react-flow\)_\&\]\:text-foreground-emp {
+    .light:not(.react-flow) & {
+      color: var(--foreground-emp);
+    }
+  }
   .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
     [data-slot=card-content] & {
       background-color: transparent;
@@ -10066,6 +10122,9 @@ body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
   --surface-hover: var(--color-background-gray);
   color-scheme: dark;
 }
+body.light, .light:not(.react-flow), body.light-hc, .light-hc, body.dark, .dark:not(.react-flow), body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
 body.future-dark, .future-dark, body.future-light, .future-light {
   --brand-darker: var(--color-primary-darker);
   --ring: var(--color-focus-indicator);

package/dist/tailwind.css

@@ -171,6 +171,20 @@ body.dark-hc, .dark-hc {
   color-scheme: dark;
 }
 
+/* ResizableHandle's divider needs a resting background that matches its own
+   border-subtle-toned box in classic themes (see resizable.tsx). Exposed as a
+   variable, with an unset default falling back to --ap-wind-border, so a
+   consumer's own bg-* override (e.g. bg-transparent) still wins: cn()/
+   tailwind-merge can't dedupe a plain bg-* class against one scoped to an
+   arbitrary theme variant, so the variant class must stay a single, unvaried
+   bg-[var(...)] utility for consumer overrides to keep working. */
+body.light, .light:not(.react-flow),
+body.light-hc, .light-hc,
+body.dark, .dark:not(.react-flow),
+body.dark-hc, .dark-hc {
+  --resizable-handle-divider-bg: var(--border-subtle);
+}
+
 /* ── Future family — mapping divergences (color-scheme comes from core) ──── */
 body.future-dark, .future-dark,
 body.future-light, .future-light {

package/package.json

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