@uipath/apollo-wind 2.12.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

@@ -24,19 +24,19 @@ var __webpack_modules__ = {
     "./button-group" (module) {
         module.exports = require("./button-group.cjs");
     },
-    "./button" (module) {
+    "@/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");
     },
-    "./checkbox" (module) {
+    "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (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) {
@@ -72,13 +72,13 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./input" (module) {
+    "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
     "./pagination" (module) {
         module.exports = require("./pagination.cjs");
     },
-    "./popover" (module) {
+    "@/components/ui/popover" (module) {
         module.exports = require("./popover.cjs");
     },
     "./progress" (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) {
@@ -255,7 +255,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_breadcrumb__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _button__rspack_import_7 = __webpack_require__("./button");
+    var _button__rspack_import_7 = __webpack_require__("@/components/ui/button");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _button__rspack_import_7)if ([
         "TreeView",
@@ -269,28 +269,28 @@ 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",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_card__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_11 = __webpack_require__("./checkbox");
+    var _checkbox__rspack_import_11 = __webpack_require__("@/components/ui/checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_11)if ([
         "TreeView",
         "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",
@@ -311,7 +311,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)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",
@@ -374,21 +374,21 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
         "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",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("./label");
+    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -416,7 +416,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _popover__rspack_import_30 = __webpack_require__("./popover");
+    var _popover__rspack_import_30 = __webpack_require__("@/components/ui/popover");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _popover__rspack_import_30)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",

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;
   }
@@ -5023,6 +5026,11 @@
       }
     }
   }
+  .focus\:z-10 {
+    &:focus {
+      z-index: 10;
+    }
+  }
   .focus\:border-primary\/50 {
     &:focus {
       border-color: var(--primary);
@@ -5112,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);
@@ -5435,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);
@@ -5500,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;
@@ -5573,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);
@@ -5936,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 {
@@ -5995,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);
@@ -6269,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);
@@ -6293,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);

package/package.json

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