@redis-ui/components 43.2.1 → 44.0.2

package/dist/Drawer/Drawer.js

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { Root, Portal } from "../node_modules/@radix-ui/react-dialog/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { DrawerContext } from "./Drawer.context.js";
+import { useReducedMotionLifecycleSync } from "./hooks/useReducedMotionLifecycleSync.js";
 import Overlay from "./components/Overlay/Overlay.js";
 import Content from "./components/Content/Content.js";
 import Header from "./components/Header/Header.js";
@@ -22,6 +23,15 @@ const Drawer = Object.assign(({
   ...props
 }) => {
   const theme = useTheme();
+  const {
+    prefersReducedMotion
+  } = useReducedMotionLifecycleSync({
+    open,
+    onDrawerWillOpen,
+    onDrawerDidOpen,
+    onDrawerWillClose,
+    onDrawerDidClose
+  });
   const handleOnAnimationStart = () => {
     if (open) {
       onDrawerWillOpen == null ? void 0 : onDrawerWillOpen();
@@ -50,8 +60,8 @@ const Drawer = Object.assign(({
       children: jsxRuntimeExports.jsxs(Portal, {
         container: containerElement,
         children: [persistent && jsxRuntimeExports.jsx(Overlay, {}), jsxRuntimeExports.jsx(Content, {
-          onAnimationStart: handleOnAnimationStart,
-          onAnimationEndCapture: handleOnAnimationEnd,
+          onAnimationStart: prefersReducedMotion ? void 0 : handleOnAnimationStart,
+          onAnimationEndCapture: prefersReducedMotion ? void 0 : handleOnAnimationEnd,
           ...props,
           children
         })]

package/dist/Drawer/components/Content/Content.style.cjs

@@ -20,7 +20,7 @@ const slideOut = _styled.keyframes`
 const DrawerContent = _styled__default.default(index.Content).withConfig({
   displayName: "Contentstyle__DrawerContent",
   componentId: "RedisUI__sc-19kw0pf-1"
-})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
+})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"], ({
   $zIndex
 }) => $zIndex, () => redisUiStyles.useTheme().components.drawer.bgColor, () => redisUiStyles.useTheme().components.drawer.shadow, ({
   $isRenderedInsideContainer

package/dist/Drawer/components/Content/Content.style.js

@@ -16,7 +16,7 @@ const slideOut = keyframes`
 const DrawerContent = _styled(Content).withConfig({
   displayName: "Contentstyle__DrawerContent",
   componentId: "RedisUI__sc-19kw0pf-1"
-})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}"], ({
+})(["pointer-events:all;display:flex;z-index:", ";flex-direction:column;background-color:", ";box-shadow:", ";position:", ";top:0;bottom:0;right:0;width:", ";&[data-state='open']{animation:", " 200ms ease-in-out;}&[data-state='closed']{animation:", " 200ms ease-in-out;}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"], ({
   $zIndex
 }) => $zIndex, () => useTheme().components.drawer.bgColor, () => useTheme().components.drawer.shadow, ({
   $isRenderedInsideContainer

package/dist/Drawer/components/Overlay/Overlay.style.cjs

@@ -15,7 +15,7 @@ const fadeOut = _styled.keyframes`
 const DrawerOverlay = _styled__default.default.div.withConfig({
   displayName: "Overlaystyle__DrawerOverlay",
   componentId: "RedisUI__sc-1afbvm0-0"
-})(["z-index:", ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:", ";&[data-state='open']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}&[data-state='closed']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}"], ({
+})(["z-index:", ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:", ";&[data-state='open']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}&[data-state='closed']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"], ({
   $zIndex
 }) => $zIndex - 1, () => redisUiStyles.useTheme().components.drawer.overlay.bgColor, fadeIn, fadeOut);
 exports.DrawerOverlay = DrawerOverlay;

package/dist/Drawer/components/Overlay/Overlay.style.js

@@ -11,7 +11,7 @@ const fadeOut = keyframes`
 const DrawerOverlay = _styled.div.withConfig({
   displayName: "Overlaystyle__DrawerOverlay",
   componentId: "RedisUI__sc-1afbvm0-0"
-})(["z-index:", ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:", ";&[data-state='open']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}&[data-state='closed']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}"], ({
+})(["z-index:", ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:", ";&[data-state='open']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}&[data-state='closed']{animation:", " 150ms cubic-bezier(0.22,1,0.36,1);}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"], ({
   $zIndex
 }) => $zIndex - 1, () => useTheme().components.drawer.overlay.bgColor, fadeIn, fadeOut);
 export {

package/dist/Drawer/hooks/useReducedMotionLifecycleSync.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const useReducedMotionLifecycleSync = ({
+  open,
+  onDrawerWillOpen,
+  onDrawerDidOpen,
+  onDrawerWillClose,
+  onDrawerDidClose
+}) => {
+  const prefersReducedMotion = redisUiStyles.usePrefersReducedMotion();
+  const isInitialRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    let rafId;
+    if (prefersReducedMotion) {
+      rafId = requestAnimationFrame(() => {
+        if (open) {
+          onDrawerWillOpen == null ? void 0 : onDrawerWillOpen();
+          onDrawerDidOpen == null ? void 0 : onDrawerDidOpen();
+        } else {
+          onDrawerWillClose == null ? void 0 : onDrawerWillClose();
+          onDrawerDidClose == null ? void 0 : onDrawerDidClose();
+        }
+      });
+    }
+    return () => {
+      if (rafId !== void 0) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [open, prefersReducedMotion, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose]);
+  return {
+    prefersReducedMotion
+  };
+};
+exports.useReducedMotionLifecycleSync = useReducedMotionLifecycleSync;

package/dist/Drawer/hooks/useReducedMotionLifecycleSync.d.ts

@@ -0,0 +1,15 @@
+interface UseReducedMotionLifecycleSyncOptions {
+    open: boolean;
+    onDrawerWillOpen?: () => void;
+    onDrawerDidOpen?: () => void;
+    onDrawerWillClose?: () => void;
+    onDrawerDidClose?: () => void;
+}
+/**
+ * When reduced motion is enabled, CSS animations are disabled and animation events won't fire.
+ * This hook ensures lifecycle callbacks are still invoked immediately when the open state changes.
+ */
+export declare const useReducedMotionLifecycleSync: ({ open, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose }: UseReducedMotionLifecycleSyncOptions) => {
+    prefersReducedMotion: boolean;
+};
+export {};

package/dist/Drawer/hooks/useReducedMotionLifecycleSync.js

@@ -0,0 +1,41 @@
+import { useRef, useEffect } from "react";
+import { usePrefersReducedMotion } from "@redislabsdev/redis-ui-styles";
+const useReducedMotionLifecycleSync = ({
+  open,
+  onDrawerWillOpen,
+  onDrawerDidOpen,
+  onDrawerWillClose,
+  onDrawerDidClose
+}) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const isInitialRender = useRef(true);
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    let rafId;
+    if (prefersReducedMotion) {
+      rafId = requestAnimationFrame(() => {
+        if (open) {
+          onDrawerWillOpen == null ? void 0 : onDrawerWillOpen();
+          onDrawerDidOpen == null ? void 0 : onDrawerDidOpen();
+        } else {
+          onDrawerWillClose == null ? void 0 : onDrawerWillClose();
+          onDrawerDidClose == null ? void 0 : onDrawerDidClose();
+        }
+      });
+    }
+    return () => {
+      if (rafId !== void 0) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [open, prefersReducedMotion, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose]);
+  return {
+    prefersReducedMotion
+  };
+};
+export {
+  useReducedMotionLifecycleSync
+};

package/dist/HighlightedIcon/HighlightedIcon.cjs

@@ -6,14 +6,14 @@ const HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
 const HighlightedIcon = ({
   icon: IconComponent,
   size = "M",
-  type = "primary",
+  variant = "primary",
   ...restProps
 }) => {
   const theme = redisUiStyles.useTheme();
   const iconSize = theme.core.icon.size[size];
   return jsxRuntime.jsxRuntimeExports.jsx(HighlightedIcon_style.HighlightedIconContainer, {
     "$size": size,
-    "$type": type,
+    "$variant": variant,
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(IconComponent, {
       customColor: "currentColor",

package/dist/HighlightedIcon/HighlightedIcon.d.ts

@@ -1,3 +1,3 @@
 import { HighlightedIconProps } from './HighlightedIcon.types';
-declare const HighlightedIcon: ({ icon: IconComponent, size, type, ...restProps }: HighlightedIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const HighlightedIcon: ({ icon: IconComponent, size, variant, ...restProps }: HighlightedIconProps) => import("react/jsx-runtime").JSX.Element;
 export default HighlightedIcon;

package/dist/HighlightedIcon/HighlightedIcon.js

@@ -4,14 +4,14 @@ import { HighlightedIconContainer } from "./HighlightedIcon.style.js";
 const HighlightedIcon = ({
   icon: IconComponent,
   size = "M",
-  type = "primary",
+  variant = "primary",
   ...restProps
 }) => {
   const theme = useTheme();
   const iconSize = theme.core.icon.size[size];
   return jsxRuntimeExports.jsx(HighlightedIconContainer, {
     "$size": size,
-    "$type": type,
+    "$variant": variant,
     ...restProps,
     children: jsxRuntimeExports.jsx(IconComponent, {
       customColor: "currentColor",

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

@@ -30,9 +30,9 @@ const SIZE_MAP = {
     borderRadius: "0.8rem"
   }
 };
-const getColors = (type) => {
+const getColors = (variant) => {
   const theme = redisUiStyles.useTheme();
-  return theme.components.highlightedIcon.variants[type];
+  return theme.components.highlightedIcon.variants[variant];
 };
 const HighlightedIconContainer = _styled__default.default.div.withConfig({
   displayName: "HighlightedIconstyle__HighlightedIconContainer",
@@ -40,10 +40,10 @@ const HighlightedIconContainer = _styled__default.default.div.withConfig({
 })(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
   $size
 }) => SIZE_MAP[$size].size, ({
-  $type
-}) => getColors($type).background, ({
-  $type
-}) => getColors($type).text, ({
+  $variant
+}) => getColors($variant).background, ({
+  $variant
+}) => getColors($variant).text, ({
   $size
 }) => SIZE_MAP[$size].borderRadius);
 exports.HighlightedIconContainer = HighlightedIconContainer;

package/dist/HighlightedIcon/HighlightedIcon.style.d.ts

@@ -1,5 +1,5 @@
-import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+import { HighlightedIconVariant, IconSizeType } from '@redislabsdev/redis-ui-styles';
 export declare const HighlightedIconContainer: import("styled-components").StyledComponent<"div", any, {
     $size: IconSizeType;
-    $type: HighlightedIconType;
+    $variant: HighlightedIconVariant;
 }, never>;

package/dist/HighlightedIcon/HighlightedIcon.style.js

@@ -26,9 +26,9 @@ const SIZE_MAP = {
     borderRadius: "0.8rem"
   }
 };
-const getColors = (type) => {
+const getColors = (variant) => {
   const theme = useTheme();
-  return theme.components.highlightedIcon.variants[type];
+  return theme.components.highlightedIcon.variants[variant];
 };
 const HighlightedIconContainer = _styled.div.withConfig({
   displayName: "HighlightedIconstyle__HighlightedIconContainer",
@@ -36,10 +36,10 @@ const HighlightedIconContainer = _styled.div.withConfig({
 })(["display:inline-flex;align-items:center;justify-content:center;width:", ";aspect-ratio:1;background-color:", ";color:", ";border-radius:", ";flex-shrink:0;"], ({
   $size
 }) => SIZE_MAP[$size].size, ({
-  $type
-}) => getColors($type).background, ({
-  $type
-}) => getColors($type).text, ({
+  $variant
+}) => getColors($variant).background, ({
+  $variant
+}) => getColors($variant).text, ({
   $size
 }) => SIZE_MAP[$size].borderRadius);
 export {

package/dist/HighlightedIcon/HighlightedIcon.types.d.ts

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { IconType as IconComponent } from '@redislabsdev/redis-ui-icons';
-import { HighlightedIconType, IconSizeType } from '@redislabsdev/redis-ui-styles';
+import { HighlightedIconVariant, IconSizeType } from '@redislabsdev/redis-ui-styles';
 export interface HighlightedIconProps extends HTMLAttributes<HTMLDivElement> {
     icon: IconComponent;
     size?: IconSizeType;
-    type?: HighlightedIconType;
+    variant?: HighlightedIconVariant;
 }

package/dist/Inputs/components/Compose/Compose.style.cjs

@@ -68,7 +68,7 @@ const CommonInputCompose = _styled__default.default.div.attrs(() => ({
 })).withConfig({
   displayName: "Composestyle__CommonInputCompose",
   componentId: "RedisUI__sc-1vsempl-0"
-})(["display:flex;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;", ";", ";&{", ";}&&&{", ";}"], () => {
+})(["display:flex;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;@media (prefers-reduced-motion:reduce){transition:none;}", ";", ";&{", ";}&&&{", ";}"], () => {
   const style = redisUiStyles.useTheme().components.input;
   return _styled.css`
       height: ${style.height};

package/dist/Inputs/components/Compose/Compose.style.js

@@ -64,7 +64,7 @@ const CommonInputCompose = _styled.div.attrs(() => ({
 })).withConfig({
   displayName: "Composestyle__CommonInputCompose",
   componentId: "RedisUI__sc-1vsempl-0"
-})(["display:flex;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;", ";", ";&{", ";}&&&{", ";}"], () => {
+})(["display:flex;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;@media (prefers-reduced-motion:reduce){transition:none;}", ";", ";&{", ";}&&&{", ";}"], () => {
   const style = useTheme().components.input;
   return css`
       height: ${style.height};

package/dist/Loader/Loader.cjs

@@ -5,7 +5,7 @@ const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const index = require("../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
 const Loader_style = require("./Loader.style.cjs");
 const Loader = ({
-  size,
+  size = "XL",
   inline = false,
   dataTestId,
   loaderText,
@@ -24,7 +24,7 @@ const Loader = ({
       children: [jsxRuntime.jsxRuntimeExports.jsx(Loader_style.LoaderSVG, {
         "$variant": variant,
         title,
-        customSize: size ?? theme.size,
+        customSize: theme.sizes[size],
         "data-testid": dataTestId,
         "aria-hidden": true
       }), loaderText ? jsxRuntime.jsxRuntimeExports.jsx(Loader_style.MessageText, {

package/dist/Loader/Loader.js

@@ -3,7 +3,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { VisuallyHidden } from "../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
 import { Container, InnerFlexContainer, LoaderSVG, MessageText } from "./Loader.style.js";
 const Loader = ({
-  size,
+  size = "XL",
   inline = false,
   dataTestId,
   loaderText,
@@ -22,7 +22,7 @@ const Loader = ({
       children: [jsxRuntimeExports.jsx(LoaderSVG, {
         "$variant": variant,
         title,
-        customSize: size ?? theme.size,
+        customSize: theme.sizes[size],
         "data-testid": dataTestId,
         "aria-hidden": true
       }), loaderText ? jsxRuntimeExports.jsx(MessageText, {

package/dist/Loader/Loader.types.d.ts

@@ -1,6 +1,7 @@
+import type { LoaderSize } from '@redislabsdev/redis-ui-styles';
 export type LoaderVariants = 'regular' | 'pending' | 'inverse';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: string;
+    size?: LoaderSize;
     inline?: boolean;
     loaderText?: string;
     /**

package/dist/Loader/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Loader } from './Loader';
 export * from './Loader.types';
+export type { LoaderSize } from '@redislabsdev/redis-ui-styles';

package/dist/Menu/components/Trigger/components/Arrow/Arrow.style.cjs

@@ -7,5 +7,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ArrowDownIconWrapper = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
   displayName: "Arrowstyle__ArrowDownIconWrapper",
   componentId: "RedisUI__sc-mwk54p-0"
-})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;"]);
+})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;@media (prefers-reduced-motion:reduce){transition:none;}"]);
 exports.ArrowDownIconWrapper = ArrowDownIconWrapper;

package/dist/Menu/components/Trigger/components/Arrow/Arrow.style.js

@@ -3,7 +3,7 @@ import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
 const ArrowDownIconWrapper = _styled(ChevronDownIcon).withConfig({
   displayName: "Arrowstyle__ArrowDownIconWrapper",
   componentId: "RedisUI__sc-mwk54p-0"
-})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;"]);
+})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;@media (prefers-reduced-motion:reduce){transition:none;}"]);
 export {
   ArrowDownIconWrapper
 };

package/dist/Popover/components/Content/components/WindowBar/WindowBar.types.d.ts

@@ -1,9 +1,10 @@
 import { IconType } from '@redislabsdev/redis-ui-icons';
+import { WindowBarVariant } from '@redislabsdev/redis-ui-styles';
 import { WindowBarComposeProps } from './components/Compose/Compose.types';
-import { BadgeProps, BadgeVariants } from '../../../../../Badge';
+import { BadgeProps } from '../../../../../Badge';
 export interface WindowBarProps extends WindowBarComposeProps, Pick<BadgeProps, 'icon'> {
     title?: string;
-    variant?: BadgeVariants;
+    variant?: WindowBarVariant;
     hideCloseButton?: boolean;
     withIcon?: boolean;
     icon?: IconType;

package/dist/Popover/components/Content/components/WindowBar/components/Compose/Compose.style.d.ts

@@ -1,5 +1,4 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
+import { Theme, WindowBarVariant } from '@redislabsdev/redis-ui-styles';
 import { WindowBarComposeProps } from './Compose.types';
-import { BadgeVariants } from '../../../../../../../Badge';
-export declare const getVariantStyle: (theme: Theme, variant: BadgeVariants) => import("@redislabsdev/redis-ui-styles").WindowBarVariantStyle;
+export declare const getVariantStyle: (theme: Theme, variant: WindowBarVariant) => import("@redislabsdev/redis-ui-styles").WindowBarVariantStyle;
 export declare const Container: import("styled-components").StyledComponent<"div", any, WindowBarComposeProps, never>;

package/dist/Popover/components/Content/components/WindowBar/components/Compose/Compose.types.d.ts

@@ -1,4 +1,4 @@
-import { BadgeVariants } from '../../../../../../../Badge';
+import { WindowBarVariant } from '@redislabsdev/redis-ui-styles';
 export interface WindowBarComposeProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: BadgeVariants;
+    variant?: WindowBarVariant;
 }

package/dist/ProgressBar/ProgressBar.style.cjs

@@ -17,7 +17,7 @@ const Root = _styled__default.default(index.Root).withConfig({
 const Indicator = _styled__default.default(index.Indicator).withConfig({
   displayName: "ProgressBarstyle__Indicator",
   componentId: "RedisUI__sc-cdzix5-1"
-})(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
+})(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);@media (prefers-reduced-motion:reduce){transition:none;}"], ({
   variant
 }) => redisUiStyles.useTheme().components.progressBar.indicator.variant[variant].color, ({
   value

package/dist/ProgressBar/ProgressBar.style.js

@@ -13,7 +13,7 @@ const Root = _styled(Root$1).withConfig({
 const Indicator = _styled(Indicator$1).withConfig({
   displayName: "ProgressBarstyle__Indicator",
   componentId: "RedisUI__sc-cdzix5-1"
-})(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
+})(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);@media (prefers-reduced-motion:reduce){transition:none;}"], ({
   variant
 }) => useTheme().components.progressBar.indicator.variant[variant].color, ({
   value

package/dist/SearchBar/components/FiltersSection/FiltersSection.style.cjs

@@ -12,6 +12,6 @@ const FiltersContainer = _styled__default.default.div.withConfig({
 const CollapsedFiltersContainer = _styled__default.default(index.Content).withConfig({
   displayName: "FiltersSectionstyle__CollapsedFiltersContainer",
   componentId: "RedisUI__sc-vf7bf2-1"
-})(["overflow:hidden;&[data-state='open']{animation:slideDown 200ms ease-out;}&[data-state='closed']{animation:slideUp 200ms ease-out;}@keyframes slideDown{from{height:0;}to{height:var(--radix-collapsible-content-height);}}@keyframes slideUp{from{height:var(--radix-collapsible-content-height);}to{height:0;}}"]);
+})(["overflow:hidden;&[data-state='open']{animation:slideDown 200ms ease-out;}&[data-state='closed']{animation:slideUp 200ms ease-out;}@keyframes slideDown{from{height:0;}to{height:var(--radix-collapsible-content-height);}}@keyframes slideUp{from{height:var(--radix-collapsible-content-height);}to{height:0;}}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"]);
 exports.CollapsedFiltersContainer = CollapsedFiltersContainer;
 exports.FiltersContainer = FiltersContainer;

package/dist/SearchBar/components/FiltersSection/FiltersSection.style.js

@@ -8,7 +8,7 @@ const FiltersContainer = _styled.div.withConfig({
 const CollapsedFiltersContainer = _styled(Content).withConfig({
   displayName: "FiltersSectionstyle__CollapsedFiltersContainer",
   componentId: "RedisUI__sc-vf7bf2-1"
-})(["overflow:hidden;&[data-state='open']{animation:slideDown 200ms ease-out;}&[data-state='closed']{animation:slideUp 200ms ease-out;}@keyframes slideDown{from{height:0;}to{height:var(--radix-collapsible-content-height);}}@keyframes slideUp{from{height:var(--radix-collapsible-content-height);}to{height:0;}}"]);
+})(["overflow:hidden;&[data-state='open']{animation:slideDown 200ms ease-out;}&[data-state='closed']{animation:slideUp 200ms ease-out;}@keyframes slideDown{from{height:0;}to{height:var(--radix-collapsible-content-height);}}@keyframes slideUp{from{height:var(--radix-collapsible-content-height);}to{height:0;}}@media (prefers-reduced-motion:reduce){&[data-state='open'],&[data-state='closed']{animation:none;}}"]);
 export {
   CollapsedFiltersContainer,
   FiltersContainer

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.cjs

@@ -26,6 +26,8 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
           pressed: isOpen,
+          onPressedChange: () => {
+          },
           "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
             icon: redisUiIcons.ColumnsIcon

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.js

@@ -24,6 +24,8 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntimeExports.jsxs(ToggleButton, {
           pressed: isOpen,
+          onPressedChange: () => {
+          },
           "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntimeExports.jsx(Button.Icon, {
             icon: ColumnsIcon

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.cjs

@@ -25,6 +25,6 @@ const SectionCollapseButton = _styled__default.default(IconButton.default).withC
 const SectionCollapseIcon = _styled__default.default(redisUiIcons.ChevronDownIcon).withConfig({
   displayName: "CollapseButtonstyle__SectionCollapseIcon",
   componentId: "RedisUI__sc-e7t43f-1"
-})(["transition:transform 0.1s;button[data-state='open'] &{transform:rotate(180deg);}"]);
+})(["transition:transform 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}button[data-state='open'] &{transform:rotate(180deg);}"]);
 exports.SectionCollapseButton = SectionCollapseButton;
 exports.SectionCollapseIcon = SectionCollapseIcon;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.js

@@ -21,7 +21,7 @@ const SectionCollapseButton = _styled(IconButton).withConfig({
 const SectionCollapseIcon = _styled(ChevronDownIcon).withConfig({
   displayName: "CollapseButtonstyle__SectionCollapseIcon",
   componentId: "RedisUI__sc-e7t43f-1"
-})(["transition:transform 0.1s;button[data-state='open'] &{transform:rotate(180deg);}"]);
+})(["transition:transform 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}button[data-state='open'] &{transform:rotate(180deg);}"]);
 export {
   SectionCollapseButton,
   SectionCollapseIcon

package/dist/Select/components/Trigger/components/Arrow/Arrow.style.cjs

@@ -7,5 +7,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ArrowIconContainer = _styled__default.default(SelfContained.SelfContained).withConfig({
   displayName: "Arrowstyle__ArrowIconContainer",
   componentId: "RedisUI__sc-x3vprr-0"
-})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;flex:none;"]);
+})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;@media (prefers-reduced-motion:reduce){transition:none;}flex:none;"]);
 exports.ArrowIconContainer = ArrowIconContainer;

package/dist/Select/components/Trigger/components/Arrow/Arrow.style.js

@@ -3,7 +3,7 @@ import { SelfContained } from "../../../../../Helpers/SelfContained.js";
 const ArrowIconContainer = _styled(SelfContained).withConfig({
   displayName: "Arrowstyle__ArrowIconContainer",
   componentId: "RedisUI__sc-x3vprr-0"
-})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;flex:none;"]);
+})(["[data-state='open'] &{rotate:180deg;}[data-state='closed'] &{rotate:0deg;}transition:rotate 0.5s;@media (prefers-reduced-motion:reduce){transition:none;}flex:none;"]);
 export {
   ArrowIconContainer
 };

package/dist/Select/components/Trigger/components/Compose/Compose.style.cjs

@@ -82,7 +82,7 @@ const getStateStyle = (theme) => {
 const TriggerContainer = _styled__default.default(index.Trigger).withConfig({
   displayName: "Composestyle__TriggerContainer",
   componentId: "RedisUI__sc-txq0dy-0"
-})(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
+})(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;@media (prefers-reduced-motion:reduce){transition:none;}width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
   const style = redisUiStyles.useTheme().components.select;
   return _styled.css`
       ${css_utils.styleFromTokens({

package/dist/Select/components/Trigger/components/Compose/Compose.style.js

@@ -78,7 +78,7 @@ const getStateStyle = (theme) => {
 const TriggerContainer = _styled(Trigger).withConfig({
   displayName: "Composestyle__TriggerContainer",
   componentId: "RedisUI__sc-txq0dy-0"
-})(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
+})(["display:flex;flex-wrap:nowrap;overflow:hidden;align-items:center;box-sizing:border-box;transition:border-color 0.2s ease-in;@media (prefers-reduced-motion:reduce){transition:none;}width:100%;justify-content:start;text-align:start;", ";", ";"], () => {
   const style = useTheme().components.select;
   return css`
       ${styleFromTokens({

package/dist/SideBar/SideBar.cjs

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const index = require("../node_modules/@radix-ui/react-id/dist/index.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const SideBar_context = require("./SideBar.context.cjs");
 const Provider = require("../Tooltip/Provider/Provider.cjs");
 const SideBarLogo = require("./components/SideBarLogo/SideBarLogo.cjs");
@@ -21,9 +22,10 @@ const SideBar = Object.assign(({
   ...rest
 }) => {
   const [transitionEnd, setTransitionEnd] = React.useState(true);
+  const prefersReducedMotion = redisUiStyles.usePrefersReducedMotion();
   const sidebarId = index.useId();
   const handleTransitionChange = (end) => {
-    setTransitionEnd(end);
+    setTransitionEnd(prefersReducedMotion ? true : end);
   };
   return jsxRuntime.jsxRuntimeExports.jsx(SideBarThemeProvider.SideBarThemeProvider, {
     children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_context.SideBarContextProvider, {

package/dist/SideBar/SideBar.js

@@ -1,6 +1,7 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { useState } from "react";
 import { useId } from "../node_modules/@radix-ui/react-id/dist/index.js";
+import { usePrefersReducedMotion } from "@redislabsdev/redis-ui-styles";
 import { SideBarContextProvider } from "./SideBar.context.js";
 import TooltipProvider from "../Tooltip/Provider/Provider.js";
 import SideBarLogo from "./components/SideBarLogo/SideBarLogo.js";
@@ -19,9 +20,10 @@ const SideBar = Object.assign(({
   ...rest
 }) => {
   const [transitionEnd, setTransitionEnd] = useState(true);
+  const prefersReducedMotion = usePrefersReducedMotion();
   const sidebarId = useId();
   const handleTransitionChange = (end) => {
-    setTransitionEnd(end);
+    setTransitionEnd(prefersReducedMotion ? true : end);
   };
   return jsxRuntimeExports.jsx(SideBarThemeProvider, {
     children: jsxRuntimeExports.jsx(SideBarContextProvider, {

package/dist/SideBar/SideBar.style.cjs

@@ -22,7 +22,7 @@ const useRootStateStyle = (getStyle) => {
 const SideBarContainer = _styled__default.default(FlexGroup.FlexGroup).withConfig({
   displayName: "SideBarstyle__SideBarContainer",
   componentId: "RedisUI__sc-suwica-0"
-})(["position:relative;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => _styled.css`
+})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => useRootStateStyle((theme) => _styled.css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
         width: ${theme.width};

package/dist/SideBar/SideBar.style.js

@@ -18,7 +18,7 @@ const useRootStateStyle = (getStyle) => {
 const SideBarContainer = _styled(FlexGroup).withConfig({
   displayName: "SideBarstyle__SideBarContainer",
   componentId: "RedisUI__sc-suwica-0"
-})(["position:relative;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => css`
+})(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => useRootStateStyle((theme) => css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
         width: ${theme.width};