@uipath/apollo-wind 2.48.1 → 2.49.0

package/dist/components/ui/combobox.cjs

@@ -50,10 +50,13 @@ const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRe
                     role: "combobox",
                     "aria-expanded": open,
                     "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                    className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
-                        selectedItem ? selectedItem.label : placeholder,
+                        selectedItem ? selectedItem.label : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-foreground-muted",
+                            children: placeholder
+                        }),
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
                             className: "opacity-50"
                         })

package/dist/components/ui/combobox.js

@@ -22,10 +22,13 @@ const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ items, value, onVa
                     role: "combobox",
                     "aria-expanded": open,
                     "aria-label": selectedItem ? selectedItem.label : placeholder,
-                    className: cn('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
+                    className: cn('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
-                        selectedItem ? selectedItem.label : placeholder,
+                        selectedItem ? selectedItem.label : /*#__PURE__*/ jsx("span", {
+                            className: "text-foreground-muted",
+                            children: placeholder
+                        }),
                         /*#__PURE__*/ jsx(ChevronDown, {
                             className: "opacity-50"
                         })

package/dist/components/ui/date-picker.cjs

@@ -46,11 +46,12 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                     ref: ref,
                     variant: "outline",
                     "aria-label": value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !value && 'text-muted-foreground', className),
+                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
                         value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-foreground-muted",
                             children: placeholder
                         })
                     ]
@@ -79,7 +80,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                     ref: ref,
                     variant: "outline",
                     "aria-label": value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder,
-                    className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !value && 'text-muted-foreground', className),
+                    className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
@@ -90,6 +91,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                                 (0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')
                             ]
                         }) : (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-foreground-muted",
                             children: placeholder
                         })
                     ]

package/dist/components/ui/date-picker.js

@@ -17,11 +17,12 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ value, onValu
                     ref: ref,
                     variant: "outline",
                     "aria-label": value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
-                    className: cn('w-full justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !value && 'text-muted-foreground', className),
+                    className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ jsx(CalendarIcon, {}),
                         value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
+                            className: "text-foreground-muted",
                             children: placeholder
                         })
                     ]
@@ -50,7 +51,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ value, o
                     ref: ref,
                     variant: "outline",
                     "aria-label": value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder,
-                    className: cn('w-[300px] justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !value && 'text-muted-foreground', className),
+                    className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ jsx(CalendarIcon, {}),
@@ -61,6 +62,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ value, o
                                 format(value.to, 'LLL dd, y')
                             ]
                         }) : format(value.from, 'LLL dd, y') : /*#__PURE__*/ jsx("span", {
+                            className: "text-foreground-muted",
                             children: placeholder
                         })
                     ]

package/dist/components/ui/datetime-picker.cjs

@@ -62,7 +62,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
         onValueChange?.(newDate);
     };
     const formatDisplayValue = ()=>{
-        if (!selectedDate) return placeholder;
+        if (!selectedDate) return null;
         const datePart = (0, external_date_fns_namespaceObject.format)(selectedDate, 'PPP');
         const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
@@ -77,13 +77,16 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
                     ref: ref,
                     variant: "outline",
-                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !selectedDate && 'text-muted-foreground', className),
+                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {
                             className: "mr-2 h-4 w-4"
                         }),
-                        formatDisplayValue()
+                        selectedDate ? formatDisplayValue() : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "text-foreground-muted",
+                            children: placeholder
+                        })
                     ]
                 })
             }),

package/dist/components/ui/datetime-picker.js

@@ -34,7 +34,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
         onValueChange?.(newDate);
     };
     const formatDisplayValue = ()=>{
-        if (!selectedDate) return placeholder;
+        if (!selectedDate) return null;
         const datePart = format(selectedDate, 'PPP');
         const timePart = format(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
@@ -49,13 +49,16 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                 children: /*#__PURE__*/ jsxs(Button, {
                     ref: ref,
                     variant: "outline",
-                    className: cn('w-full justify-start text-left font-normal', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-muted-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', !selectedDate && 'text-muted-foreground', className),
+                    className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                     disabled: disabled,
                     children: [
                         /*#__PURE__*/ jsx(CalendarIcon, {
                             className: "mr-2 h-4 w-4"
                         }),
-                        formatDisplayValue()
+                        selectedDate ? formatDisplayValue() : /*#__PURE__*/ jsx("span", {
+                            className: "text-foreground-muted",
+                            children: placeholder
+                        })
                     ]
                 })
             }),

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");
     },
     "./chart" (module) {
@@ -69,7 +69,7 @@ var __webpack_modules__ = {
     "@/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) {
@@ -171,7 +171,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) {
@@ -300,7 +300,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",
@@ -391,7 +391,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_22[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_23 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_23 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_23)if ([
         "TreeView",
@@ -622,7 +622,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_55[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_56 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_56 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_56)if ([
         "TreeView",

package/dist/components/ui/multi-select.cjs

@@ -75,13 +75,13 @@ const MultiSelect = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ i
                         "aria-describedby": ariaDescribedBy,
                         "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
-                        className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
+                        className: (0, index_cjs_namespaceObject.cn)('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: "flex flex-wrap gap-1 flex-1",
                                 children: 0 === selected.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                    className: "text-muted-foreground future:text-foreground-muted",
+                                    className: "text-foreground-muted",
                                     children: placeholder
                                 }) : selected.map((value)=>{
                                     const option = options.find((opt)=>opt.value === value);

package/dist/components/ui/multi-select.js

@@ -47,13 +47,13 @@ const MultiSelect = /*#__PURE__*/ forwardRef(({ id, options, selected, onChange,
                         "aria-describedby": ariaDescribedBy,
                         "aria-errormessage": ariaErrorMessage,
                         "aria-label": id ? void 0 : selected.length > 0 ? `${selected.length} ${1 === selected.length ? 'item' : 'items'} selected` : placeholder,
-                        className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-muted-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
+                        className: cn('w-full justify-between future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', selected.length > 0 ? 'h-auto min-h-10' : 'h-10'),
                         disabled: disabled,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 className: "flex flex-wrap gap-1 flex-1",
                                 children: 0 === selected.length ? /*#__PURE__*/ jsx("span", {
-                                    className: "text-muted-foreground future:text-foreground-muted",
+                                    className: "text-foreground-muted",
                                     children: placeholder
                                 }) : selected.map((value)=>{
                                     const option = options.find((opt)=>opt.value === value);

package/dist/components/ui/select.cjs

@@ -62,7 +62,7 @@ SelectValue.displayName = react_select_namespaceObject.Value.displayName;
 const SelectTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Trigger, {
         ref: ref,
         "data-slot": "select-trigger",
-        className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal future:text-muted-foreground', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal', className),
         ...props,
         children: [
             children,

package/dist/components/ui/select.js

@@ -25,7 +25,7 @@ SelectValue.displayName = Value.displayName;
 const SelectTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsxs(Trigger, {
         ref: ref,
         "data-slot": "select-trigger",
-        className: cn('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal future:text-muted-foreground', className),
+        className: cn('flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-base transition-colors data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&>span]:line-clamp-1 future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:hover:bg-surface-hover future:px-4 future:gap-4 future:font-normal', className),
         ...props,
         children: [
             children,

package/dist/styles.css

@@ -7083,6 +7083,15 @@
       color: var(--warning);
     }
   }
+  .hover\:\[\&\>svg\]\:text-accent-foreground {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          color: var(--accent-foreground);
+        }
+      }
+    }
+  }
   .\[\&\>svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
     &>svg:not([class*="size-"]) {
       width: calc(var(--spacing) * 4);
@@ -9927,6 +9936,31 @@ html[dir='rtl'], [data-sonner-toaster][dir='rtl'] {
     opacity: 1;
   }
 }
+@keyframes apollo-slide-in-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(1.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes apollo-slide-in-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-1.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .animate-slide-in-from-right, .animate-slide-in-from-left {
+    animation: apollo-fade-in 150ms ease-out;
+  }
+}
 :root {
   --radius: 0.75rem;
 }

package/dist/tailwind.utilities.css

@@ -61,3 +61,41 @@
 @utility animate-fade-in {
   animation: apollo-fade-in 250ms ease-out;
 }
+
+/* ============================================================================
+ * Directional slide-in — drill-in / drill-out transitions
+ *
+ * `animate-slide-in-from-right` and `animate-slide-in-from-left` fade an
+ * element in while it travels 20px to its resting position. Intended for
+ * hierarchical panels where forward navigation enters from the right and
+ * going back enters from the left (canvas Toolbox, nested pickers).
+ *
+ * Two keyframes rather than one parameterized by a custom property: the
+ * offset is the only difference, and inlining it keeps `var()` out of the
+ * keyframe bodies (see the lightningcss note on `animate-glow`).
+ * ============================================================================ */
+
+@keyframes apollo-slide-in-from-right {
+  from { opacity: 0; transform: translateX(1.25rem); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes apollo-slide-in-from-left {
+  from { opacity: 0; transform: translateX(-1.25rem); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@utility animate-slide-in-from-right {
+  animation: apollo-slide-in-from-right 150ms ease-out;
+}
+
+@utility animate-slide-in-from-left {
+  animation: apollo-slide-in-from-left 150ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-slide-in-from-right,
+  .animate-slide-in-from-left {
+    animation: apollo-fade-in 150ms ease-out;
+  }
+}

package/package.json

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