@uipath/apollo-wind 2.11.0 → 2.13.0

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

@@ -36,7 +36,7 @@ const ButtonGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ c
         ref: ref,
         role: "group",
         "aria-label": "Button group",
-        className: (0, index_cjs_namespaceObject.cn)('inline-flex', 'horizontal' === orientation ? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r' : 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b', className),
+        className: (0, index_cjs_namespaceObject.cn)('inline-flex', 'horizontal' === orientation ? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r future:[&>button:first-child]:rounded-l-lg future:[&>button:last-child]:rounded-r-lg' : 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b future:[&>button:first-child]:rounded-t-lg future:[&>button:last-child]:rounded-b-lg', className),
         ...props
     }));
 ButtonGroup.displayName = 'ButtonGroup';

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

@@ -6,7 +6,7 @@ const ButtonGroup = /*#__PURE__*/ forwardRef(({ className, orientation = 'horizo
         ref: ref,
         role: "group",
         "aria-label": "Button group",
-        className: cn('inline-flex', 'horizontal' === orientation ? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r' : 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b', className),
+        className: cn('inline-flex', 'horizontal' === orientation ? '[&>button]:rounded-none [&>button]:border-r-0 [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:last-child]:border-r future:[&>button:first-child]:rounded-l-lg future:[&>button:last-child]:rounded-r-lg' : 'flex-col [&>button]:rounded-none [&>button]:border-b-0 [&>button:first-child]:rounded-t-md [&>button:last-child]:rounded-b-md [&>button:last-child]:border-b future:[&>button:first-child]:rounded-t-lg future:[&>button:last-child]:rounded-b-lg', className),
         ...props
     }));
 ButtonGroup.displayName = 'ButtonGroup';

package/dist/components/ui/button.cjs

@@ -37,10 +37,10 @@ const buttonVariants = (0, external_class_variance_authority_namespaceObject.cva
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline'
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 future:text-muted-foreground future:hover:text-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground future:text-muted-foreground future:hover:text-foreground',
+            link: 'text-primary underline-offset-4 hover:underline future:text-muted-foreground future:hover:text-foreground'
         },
         size: {
             lg: 'h-11 px-8',

package/dist/components/ui/button.js

@@ -8,10 +8,10 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',
             destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline'
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground future:border-border-subtle future:text-muted-foreground future:hover:text-foreground',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 future:text-muted-foreground future:hover:text-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground future:text-muted-foreground future:hover:text-foreground',
+            link: 'text-primary underline-offset-4 hover:underline future:text-muted-foreground future:hover:text-foreground'
         },
         size: {
             lg: 'h-11 px-8',

package/dist/components/ui/index.cjs

@@ -30,7 +30,7 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "@/components/ui/checkbox" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -276,7 +276,7 @@ var __webpack_exports__ = {};
         "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",
@@ -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__("@/components/ui/toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

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

@@ -34,16 +34,24 @@ const external_toggle_cjs_namespaceObject = require("./toggle.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const ToggleGroupContext = /*#__PURE__*/ external_react_namespaceObject.createContext({
     size: 'default',
-    variant: 'default'
+    variant: 'default',
+    spacing: 0
 });
-const ToggleGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant, size, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toggle_group_namespaceObject.Root, {
+const ToggleGroup = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, variant, size, spacing = 0, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toggle_group_namespaceObject.Root, {
         ref: ref,
-        className: (0, index_cjs_namespaceObject.cn)('flex items-center justify-center gap-1', className),
+        "data-variant": variant ?? 'default',
+        "data-size": size ?? 'default',
+        "data-spacing": spacing,
+        style: {
+            '--gap': spacing
+        },
+        className: (0, index_cjs_namespaceObject.cn)('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', className),
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToggleGroupContext.Provider, {
             value: {
                 variant,
-                size
+                size,
+                spacing
             },
             children: children
         })
@@ -53,10 +61,13 @@ const ToggleGroupItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
     const context = external_react_namespaceObject.useContext(ToggleGroupContext);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toggle_group_namespaceObject.Item, {
         ref: ref,
+        "data-variant": context.variant ?? variant ?? 'default',
+        "data-size": context.size ?? size ?? 'default',
+        "data-spacing": context.spacing ?? 0,
         className: (0, index_cjs_namespaceObject.cn)((0, external_toggle_cjs_namespaceObject.toggleVariants)({
             variant: context.variant || variant,
             size: context.size || size
-        }), className),
+        }), 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10', 'data-[variant=default]:border data-[variant=default]:border-border-subtle data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=default]:border-l-0 data-[spacing=0]:data-[variant=default]:first:border-l data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l', className),
         ...props,
         children: children
     });

package/dist/components/ui/toggle-group.d.ts

@@ -4,7 +4,9 @@ import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "lg" | "sm" | "xs" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    spacing?: number;
+}) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "lg" | "sm" | "xs" | null | undefined;

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

@@ -5,16 +5,24 @@ import { toggleVariants } from "./toggle.js";
 import { cn } from "../../lib/index.js";
 const ToggleGroupContext = /*#__PURE__*/ createContext({
     size: 'default',
-    variant: 'default'
+    variant: 'default',
+    spacing: 0
 });
-const ToggleGroup = /*#__PURE__*/ forwardRef(({ className, variant, size, children, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
+const ToggleGroup = /*#__PURE__*/ forwardRef(({ className, variant, size, spacing = 0, children, ...props }, ref)=>/*#__PURE__*/ jsx(Root, {
         ref: ref,
-        className: cn('flex items-center justify-center gap-1', className),
+        "data-variant": variant ?? 'default',
+        "data-size": size ?? 'default',
+        "data-spacing": spacing,
+        style: {
+            '--gap': spacing
+        },
+        className: cn('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs', className),
         ...props,
         children: /*#__PURE__*/ jsx(ToggleGroupContext.Provider, {
             value: {
                 variant,
-                size
+                size,
+                spacing
             },
             children: children
         })
@@ -24,10 +32,13 @@ const ToggleGroupItem = /*#__PURE__*/ forwardRef(({ className, children, variant
     const context = useContext(ToggleGroupContext);
     return /*#__PURE__*/ jsx(Item, {
         ref: ref,
+        "data-variant": context.variant ?? variant ?? 'default',
+        "data-size": context.size ?? size ?? 'default',
+        "data-spacing": context.spacing ?? 0,
         className: cn(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size
-        }), className),
+        }), 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10', 'data-[variant=default]:border data-[variant=default]:border-border-subtle data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=default]:border-l-0 data-[spacing=0]:data-[variant=default]:first:border-l data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l', className),
         ...props,
         children: children
     });

package/dist/components/ui/toggle.cjs

@@ -33,7 +33,7 @@ const react_toggle_namespaceObject = require("@radix-ui/react-toggle");
 const external_class_variance_authority_namespaceObject = require("class-variance-authority");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
-const toggleVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2 cursor-pointer', {
+const toggleVariants = (0, external_class_variance_authority_namespaceObject.cva)('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer future:text-muted-foreground future:hover:text-foreground future:data-[state=on]:text-foreground', {
     variants: {
         variant: {
             default: 'bg-transparent',

package/dist/components/ui/toggle.js

@@ -4,7 +4,7 @@ import { Root } from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { cn } from "../../lib/index.js";
-const toggleVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2 cursor-pointer', {
+const toggleVariants = cva('inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer future:text-muted-foreground future:hover:text-foreground future:data-[state=on]:text-foreground', {
     variants: {
         variant: {
             default: 'bg-transparent',

package/dist/styles.css

@@ -1763,6 +1763,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .gap-\[--spacing\(var\(--gap\)\)\] {
+    gap: calc(var(--spacing) * var(--gap));
+  }
   .gap-\[15px\] {
     gap: 15px;
   }
@@ -2098,6 +2101,12 @@
   .border-border-deep {
     border-color: var(--border-deep);
   }
+  .border-border-disabled {
+    border-color: var(--border-disabled);
+  }
+  .border-border-grid {
+    border-color: var(--border-grid);
+  }
   .border-border-hover {
     border-color: var(--border-hover);
   }
@@ -2401,6 +2410,15 @@
   .bg-brand {
     background-color: var(--brand);
   }
+  .bg-brand-darker {
+    background-color: var(--brand-darker);
+  }
+  .bg-brand-hover {
+    background-color: var(--brand-hover);
+  }
+  .bg-brand-lighter {
+    background-color: var(--brand-lighter);
+  }
   .bg-brand-subtle {
     background-color: var(--brand-subtle);
   }
@@ -2995,6 +3013,9 @@
   .bg-surface {
     background-color: var(--surface);
   }
+  .bg-surface-disabled {
+    background-color: var(--surface-disabled);
+  }
   .bg-surface-hover {
     background-color: var(--surface-hover);
   }
@@ -3034,6 +3055,9 @@
       background-color: color-mix(in oklab, var(--surface-raised) 50%, transparent);
     }
   }
+  .bg-surface-selected {
+    background-color: var(--surface-selected);
+  }
   .bg-teal-50 {
     background-color: var(--color-teal-50);
   }
@@ -3771,12 +3795,18 @@
       color: color-mix(in oklab, var(--foreground-accent) 80%, transparent);
     }
   }
+  .text-foreground-emp {
+    color: var(--foreground-emp);
+  }
   .text-foreground-hover {
     color: var(--foreground-hover);
   }
   .text-foreground-inverse {
     color: var(--foreground-inverse);
   }
+  .text-foreground-link {
+    color: var(--foreground-link);
+  }
   .text-foreground-muted {
     color: var(--foreground-muted);
   }
@@ -3825,6 +3855,9 @@
   .text-info {
     color: var(--info);
   }
+  .text-logo {
+    color: var(--logo);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -4993,6 +5026,11 @@
       }
     }
   }
+  .focus\:z-10 {
+    &:focus {
+      z-index: 10;
+    }
+  }
   .focus\:border-primary\/50 {
     &:focus {
       border-color: var(--primary);
@@ -5082,6 +5120,11 @@
       }
     }
   }
+  .focus-visible\:z-10 {
+    &:focus-visible {
+      z-index: 10;
+    }
+  }
   .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);
@@ -5405,6 +5448,33 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[spacing\=0\]\:rounded-none {
+    &[data-spacing="0"] {
+      border-radius: 0;
+    }
+  }
+  .data-\[spacing\=0\]\:shadow-none {
+    &[data-spacing="0"] {
+      --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);
+    }
+  }
+  .data-\[spacing\=0\]\:first\:rounded-l-md {
+    &[data-spacing="0"] {
+      &:first-child {
+        border-top-left-radius: var(--radius-md);
+        border-bottom-left-radius: var(--radius-md);
+      }
+    }
+  }
+  .data-\[spacing\=0\]\:last\:rounded-r-md {
+    &[data-spacing="0"] {
+      &:last-child {
+        border-top-right-radius: var(--radius-md);
+        border-bottom-right-radius: var(--radius-md);
+      }
+    }
+  }
   .data-\[state\=active\]\:border-b-primary {
     &[data-state="active"] {
       border-bottom-color: var(--primary);
@@ -5470,21 +5540,11 @@
       background-color: var(--accent);
     }
   }
-  .data-\[state\=on\]\:bg-primary {
-    &[data-state="on"] {
-      background-color: var(--primary);
-    }
-  }
   .data-\[state\=on\]\:text-accent-foreground {
     &[data-state="on"] {
       color: var(--accent-foreground);
     }
   }
-  .data-\[state\=on\]\:text-primary-foreground {
-    &[data-state="on"] {
-      color: var(--primary-foreground);
-    }
-  }
   .data-\[state\=open\]\:animate-collapsible-down {
     &[data-state="open"] {
       animation: collapsible-down 200ms ease-out;
@@ -5543,6 +5603,61 @@
       background-color: var(--ap-wind-border);
     }
   }
+  .data-\[variant\=default\]\:border {
+    &[data-variant="default"] {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .data-\[variant\=default\]\:border-border-subtle {
+    &[data-variant="default"] {
+      border-color: var(--border-subtle);
+    }
+  }
+  .data-\[spacing\=0\]\:data-\[variant\=default\]\:border-l-0 {
+    &[data-spacing="0"] {
+      &[data-variant="default"] {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 0px;
+      }
+    }
+  }
+  .data-\[spacing\=0\]\:data-\[variant\=default\]\:first\:border-l {
+    &[data-spacing="0"] {
+      &[data-variant="default"] {
+        &:first-child {
+          border-left-style: var(--tw-border-style);
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
+  .data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-l-0 {
+    &[data-spacing="0"] {
+      &[data-variant="outline"] {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 0px;
+      }
+    }
+  }
+  .data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:border-l {
+    &[data-spacing="0"] {
+      &[data-variant="outline"] {
+        &:first-child {
+          border-left-style: var(--tw-border-style);
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
+  .data-\[spacing\=default\]\:data-\[variant\=outline\]\:shadow-xs {
+    &[data-spacing="default"] {
+      &[data-variant="outline"] {
+        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(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);
+      }
+    }
+  }
   .sm\:mt-0 {
     @media (width >= 40rem) {
       margin-top: calc(var(--spacing) * 0);
@@ -5906,6 +6021,15 @@
       }
     }
   }
+  .future\:hover\:text-foreground {
+    :is(.future-dark, .future-light) & {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--foreground);
+        }
+      }
+    }
+  }
   .future\:focus-visible\:ring-0 {
     :is(.future-dark, .future-light) & {
       &:focus-visible {
@@ -5965,6 +6089,13 @@
       }
     }
   }
+  .future\:data-\[state\=on\]\:text-foreground {
+    :is(.future-dark, .future-light) & {
+      &[data-state="on"] {
+        color: var(--foreground);
+      }
+    }
+  }
   .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground {
     & .recharts-cartesian-axis-tick text {
       fill: var(--muted-foreground);
@@ -6239,6 +6370,22 @@
       border-bottom-left-radius: var(--radius-md);
     }
   }
+  .future\:\[\&\>button\:first-child\]\:rounded-t-lg {
+    :is(.future-dark, .future-light) & {
+      &>button:first-child {
+        border-top-left-radius: var(--radius-lg);
+        border-top-right-radius: var(--radius-lg);
+      }
+    }
+  }
+  .future\:\[\&\>button\:first-child\]\:rounded-l-lg {
+    :is(.future-dark, .future-light) & {
+      &>button:first-child {
+        border-top-left-radius: var(--radius-lg);
+        border-bottom-left-radius: var(--radius-lg);
+      }
+    }
+  }
   .\[\&\>button\:last-child\]\:rounded-r-md {
     &>button:last-child {
       border-top-right-radius: var(--radius-md);
@@ -6263,6 +6410,22 @@
       border-bottom-width: 1px;
     }
   }
+  .future\:\[\&\>button\:last-child\]\:rounded-r-lg {
+    :is(.future-dark, .future-light) & {
+      &>button:last-child {
+        border-top-right-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
+      }
+    }
+  }
+  .future\:\[\&\>button\:last-child\]\:rounded-b-lg {
+    :is(.future-dark, .future-light) & {
+      &>button:last-child {
+        border-bottom-right-radius: var(--radius-lg);
+        border-bottom-left-radius: var(--radius-lg);
+      }
+    }
+  }
   .\[\&\>div\]\:bg-brand {
     &>div {
       background-color: var(--brand);
@@ -8175,8 +8338,14 @@ body.future-dark, .future-dark {
   --surface-hover: var(--color-zinc-700);
   --surface-muted: var(--color-zinc-500);
   --surface-inverse: var(--color-zinc-50);
+  --surface-disabled: var(--color-zinc-900);
+  --surface-selected: var(--color-zinc-700);
   --brand: var(--color-cyan-500);
   --brand-subtle: var(--color-cyan-950);
+  --brand-hover: var(--color-cyan-400);
+  --brand-lighter: var(--color-cyan-300);
+  --brand-darker: var(--color-cyan-600);
+  --logo: var(--color-white);
   --foreground: var(--color-zinc-50);
   --foreground-secondary: var(--color-zinc-100);
   --foreground-hover: var(--color-zinc-300);
@@ -8186,12 +8355,16 @@ body.future-dark, .future-dark {
   --foreground-on-accent: var(--color-zinc-950);
   --foreground-accent: var(--color-cyan-500);
   --foreground-accent-muted: var(--color-cyan-400);
+  --foreground-emp: var(--color-white);
+  --foreground-link: var(--color-cyan-400);
   --ap-wind-border: var(--color-zinc-700);
   --border-subtle: var(--color-zinc-800);
   --border-muted: var(--color-zinc-900);
   --border-deep: var(--color-zinc-950);
   --border-inverse: var(--color-zinc-200);
   --border-hover: var(--color-zinc-600);
+  --border-disabled: var(--color-zinc-800);
+  --border-grid: var(--color-zinc-800);
   --ring: var(--color-zinc-600);
   --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
   --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
@@ -8206,13 +8379,13 @@ body.future-dark, .future-dark {
   --code-number: var(--color-amber-400);
   --code-literal: var(--color-violet-400);
   --error: #ff8484;
-  --error-background: #000000;
+  --error-background: var(--status-destructive);
   --success: #74c94b;
-  --success-background: #000000;
+  --success-background: var(--status-success);
   --warning: #ffbb27;
-  --warning-background: #000000;
+  --warning-background: var(--status-warning);
   --info: #42a1ff;
-  --info-background: #000000;
+  --info-background: var(--status-info);
   --status-destructive: var(--color-red-950);
   --status-destructive-fg: var(--color-red-400);
   --status-success: var(--color-emerald-950);
@@ -8259,8 +8432,14 @@ body.future-light, .future-light {
   --surface-hover: var(--color-zinc-300);
   --surface-muted: var(--color-zinc-400);
   --surface-inverse: var(--color-zinc-950);
+  --surface-disabled: var(--color-zinc-200);
+  --surface-selected: var(--color-zinc-300);
   --brand: var(--color-cyan-500);
   --brand-subtle: var(--color-cyan-50);
+  --brand-hover: var(--color-cyan-600);
+  --brand-lighter: var(--color-cyan-100);
+  --brand-darker: var(--color-cyan-700);
+  --logo: var(--color-black);
   --foreground: var(--color-zinc-950);
   --foreground-secondary: var(--color-zinc-900);
   --foreground-hover: var(--color-zinc-600);
@@ -8270,12 +8449,16 @@ body.future-light, .future-light {
   --foreground-on-accent: var(--color-zinc-950);
   --foreground-accent: var(--color-cyan-500);
   --foreground-accent-muted: var(--color-cyan-600);
+  --foreground-emp: var(--color-black);
+  --foreground-link: var(--color-cyan-600);
   --ap-wind-border: var(--color-zinc-300);
   --border-subtle: var(--color-zinc-200);
   --border-muted: var(--color-zinc-100);
   --border-deep: var(--color-zinc-50);
   --border-inverse: var(--color-zinc-700);
   --border-hover: var(--color-zinc-400);
+  --border-disabled: var(--color-zinc-200);
+  --border-grid: var(--color-zinc-200);
   --ring: var(--color-zinc-400);
   --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
   --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);

package/dist/tailwind.css

@@ -377,12 +377,24 @@ body.future-dark, .future-dark {
   /* badges, indicators */
   --surface-inverse: var(--color-zinc-50);
   /* buttons on dark bg */
+  --surface-disabled: var(--color-zinc-900);
+  /* disabled inputs, buttons, containers */
+  --surface-selected: var(--color-zinc-700);
+  /* selected items, active rows */
 
   /* ── Brand ──────────────────────────────────────────────────────────── */
   --brand: var(--color-cyan-500);
   /* logo, submit, run */
   --brand-subtle: var(--color-cyan-950);
   /* status badge, active nav */
+  --brand-hover: var(--color-cyan-400);
+  /* hovered brand elements */
+  --brand-lighter: var(--color-cyan-300);
+  /* subtle tinted states, badges */
+  --brand-darker: var(--color-cyan-600);
+  /* pressed / deep accent states */
+  --logo: var(--color-white);
+  /* UiPath logo color */
 
   /* ── Foreground (text / icons) ────────────────────────────────────────── */
   --foreground: var(--color-zinc-50);
@@ -403,6 +415,10 @@ body.future-dark, .future-dark {
   /* accent text */
   --foreground-accent-muted: var(--color-cyan-400);
   /* muted accent text */
+  --foreground-emp: var(--color-white);
+  /* emphasized text — highest priority headings */
+  --foreground-link: var(--color-cyan-400);
+  /* hyperlinks, inline navigational text */
 
   /* ── Borders ──────────────────────────────────────────────────────────── */
   --ap-wind-border: var(--color-zinc-700);
@@ -417,6 +433,10 @@ body.future-dark, .future-dark {
   /* borders on inverse bg */
   --border-hover: var(--color-zinc-600);
   /* border hover state */
+  --border-disabled: var(--color-zinc-800);
+  /* disabled control borders */
+  --border-grid: var(--color-zinc-800);
+  /* table / data grid internal lines */
 
   /* ── Ring ──────────────────────────────────────────────────────────────── */
   --ring: var(--color-zinc-600);
@@ -452,13 +472,13 @@ body.future-dark, .future-dark {
 
   /* ── Status ──────────────────────────────────────────────────────────── */
   --error: #ff8484;
-  --error-background:  #000000;
+  --error-background:  var(--status-destructive);
   --success: #74c94b;
-  --success-background: #000000;
+  --success-background: var(--status-success);
   --warning: #ffbb27;
-  --warning-background: #000000;
+  --warning-background: var(--status-warning);
   --info: #42a1ff;
-  --info-background: #000000;
+  --info-background: var(--status-info);
   --status-destructive: var(--color-red-950);
   --status-destructive-fg: var(--color-red-400);
   --status-success: var(--color-emerald-950);
@@ -524,12 +544,24 @@ body.future-light, .future-light {
   /* badges, indicators */
   --surface-inverse: var(--color-zinc-950);
   /* buttons on light bg */
+  --surface-disabled: var(--color-zinc-200);
+  /* disabled inputs, buttons, containers */
+  --surface-selected: var(--color-zinc-300);
+  /* selected items, active rows */
 
   /* ── Brand ──────────────────────────────────────────────────────────── */
   --brand: var(--color-cyan-500);
   /* logo, submit, run */
   --brand-subtle: var(--color-cyan-50);
   /* status badge, active nav */
+  --brand-hover: var(--color-cyan-600);
+  /* hovered brand elements */
+  --brand-lighter: var(--color-cyan-100);
+  /* subtle tinted states, badges */
+  --brand-darker: var(--color-cyan-700);
+  /* pressed / deep accent states */
+  --logo: var(--color-black);
+  /* UiPath logo color */
 
   /* ── Foreground (text / icons) ────────────────────────────────────────── */
   --foreground: var(--color-zinc-950);
@@ -550,6 +582,10 @@ body.future-light, .future-light {
   /* accent text */
   --foreground-accent-muted: var(--color-cyan-600);
   /* muted accent text */
+  --foreground-emp: var(--color-black);
+  /* emphasized text — highest priority headings */
+  --foreground-link: var(--color-cyan-600);
+  /* hyperlinks, inline navigational text */
 
   /* ── Borders ──────────────────────────────────────────────────────────── */
   --ap-wind-border: var(--color-zinc-300);
@@ -564,6 +600,10 @@ body.future-light, .future-light {
   /* borders on inverse bg */
   --border-hover: var(--color-zinc-400);
   /* border hover state */
+  --border-disabled: var(--color-zinc-200);
+  /* disabled control borders */
+  --border-grid: var(--color-zinc-200);
+  /* table / data grid internal lines */
 
   /* ── Ring ──────────────────────────────────────────────────────────────── */
   --ring: var(--color-zinc-400);

package/package.json

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