@redis-ui/components 43.2.1 → 44.0.1

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};

package/dist/SideBar/components/Button/Button.style.cjs

@@ -9,7 +9,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarButton = _styled__default.default(Button.default).withConfig({
   displayName: "Buttonstyle__SideBarButton",
   componentId: "RedisUI__sc-ngkny4-0"
-})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => SideBar_utils.useStateStyle((theme) => _styled.css`
+})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;@media (prefers-reduced-motion:reduce){transition:none;}"], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           height: ${theme.button.height};
           width: ${theme.button.width};
         `));
@@ -25,11 +25,11 @@ const appear = _styled.keyframes`
 const FadeInAnimationText = _styled__default.default.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationText",
   componentId: "RedisUI__sc-ngkny4-1"
-})(["animation:", " 0.3s forwards;"], appear);
+})(["animation:", " 0.3s forwards;@media (prefers-reduced-motion:reduce){animation:none;}"], appear);
 const FadeInAnimationSvg = _styled__default.default.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationSvg",
   componentId: "RedisUI__sc-ngkny4-2"
-})(["display:flex;animation:", " 0.5s forwards;"], appear);
+})(["display:flex;animation:", " 0.5s forwards;@media (prefers-reduced-motion:reduce){animation:none;}"], appear);
 const TooltipContent = _styled__default.default(Tooltip.default.Content.Text).withConfig({
   displayName: "Buttonstyle__TooltipContent",
   componentId: "RedisUI__sc-ngkny4-3"

package/dist/SideBar/components/Button/Button.style.js

@@ -5,7 +5,7 @@ import Tooltip from "../../../Tooltip/Tooltip.js";
 const SideBarButton = _styled(Button).withConfig({
   displayName: "Buttonstyle__SideBarButton",
   componentId: "RedisUI__sc-ngkny4-0"
-})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => useStateStyle((theme) => css`
+})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;@media (prefers-reduced-motion:reduce){transition:none;}"], () => useStateStyle((theme) => css`
           height: ${theme.button.height};
           width: ${theme.button.width};
         `));
@@ -21,11 +21,11 @@ const appear = keyframes`
 const FadeInAnimationText = _styled.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationText",
   componentId: "RedisUI__sc-ngkny4-1"
-})(["animation:", " 0.3s forwards;"], appear);
+})(["animation:", " 0.3s forwards;@media (prefers-reduced-motion:reduce){animation:none;}"], appear);
 const FadeInAnimationSvg = _styled.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationSvg",
   componentId: "RedisUI__sc-ngkny4-2"
-})(["display:flex;animation:", " 0.5s forwards;"], appear);
+})(["display:flex;animation:", " 0.5s forwards;@media (prefers-reduced-motion:reduce){animation:none;}"], appear);
 const TooltipContent = _styled(Tooltip.Content.Text).withConfig({
   displayName: "Buttonstyle__TooltipContent",
   componentId: "RedisUI__sc-ngkny4-3"

package/dist/SideBar/components/Divider/Divider.style.cjs

@@ -7,7 +7,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarDivider = _styled__default.default.div.withConfig({
   displayName: "Dividerstyle__SideBarDivider",
   componentId: "RedisUI__sc-191o8ht-0"
-})(["background-clip:content-box;transition:all 1s;flex:none;", ";"], ({
+})(["background-clip:content-box;transition:all 1s;flex:none;@media (prefers-reduced-motion:reduce){transition:none;}", ";"], ({
   fullWidthWhenExpanded,
   fullWidth,
   noMargin

package/dist/SideBar/components/Divider/Divider.style.js

@@ -3,7 +3,7 @@ import { useStateStyle } from "../../SideBar.utils.js";
 const SideBarDivider = _styled.div.withConfig({
   displayName: "Dividerstyle__SideBarDivider",
   componentId: "RedisUI__sc-191o8ht-0"
-})(["background-clip:content-box;transition:all 1s;flex:none;", ";"], ({
+})(["background-clip:content-box;transition:all 1s;flex:none;@media (prefers-reduced-motion:reduce){transition:none;}", ";"], ({
   fullWidthWhenExpanded,
   fullWidth,
   noMargin

package/dist/SideBar/components/Header/Header.style.cjs

@@ -28,6 +28,10 @@ const SideBarToggleButton = _styled__default.default.button.withConfig({
           transition: all 0.3s ease;
           right: ${isExpanded ? theme.collapseButton.rightExpanded : theme.collapseButton.rightCollapsed};
 
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+
           ::before {
             // half-width background + shadow
             filter: drop-shadow(${theme.collapseButton.filterShadow});

package/dist/SideBar/components/Header/Header.style.js

@@ -24,6 +24,10 @@ const SideBarToggleButton = _styled.button.withConfig({
           transition: all 0.3s ease;
           right: ${isExpanded ? theme.collapseButton.rightExpanded : theme.collapseButton.rightCollapsed};
 
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+
           ::before {
             // half-width background + shadow
             filter: drop-shadow(${theme.collapseButton.filterShadow});

package/dist/SideBar/components/Item/Item.style.cjs

@@ -11,7 +11,7 @@ const maps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor];
 const SideBarItem = _styled__default.default.li.withConfig({
   displayName: "Itemstyle__SideBarItem",
   componentId: "RedisUI__sc-rtt1mk-0"
-})(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => redisUiStyles.useTheme().core.focus.size, () => redisUiStyles.useTheme().core.focus.color, () => redisUiStyles.useTheme().core.focus.size, () => {
+})(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;@media (prefers-reduced-motion:reduce){transition:none;}&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => redisUiStyles.useTheme().core.focus.size, () => redisUiStyles.useTheme().core.focus.color, () => redisUiStyles.useTheme().core.focus.size, () => {
   return SideBar_utils.useStateStyle(({
     item: theme
   }) => {

package/dist/SideBar/components/Item/Item.style.js

@@ -7,7 +7,7 @@ const maps = [tokenMaps.bgColor, tokenMaps.textColor];
 const SideBarItem = _styled.li.withConfig({
   displayName: "Itemstyle__SideBarItem",
   componentId: "RedisUI__sc-rtt1mk-0"
-})(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => useTheme().core.focus.size, () => useTheme().core.focus.color, () => useTheme().core.focus.size, () => {
+})(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;@media (prefers-reduced-motion:reduce){transition:none;}&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => useTheme().core.focus.size, () => useTheme().core.focus.color, () => useTheme().core.focus.size, () => {
   return useStateStyle(({
     item: theme
   }) => {

package/dist/SideBar/components/Item/components/Text/Text.style.cjs

@@ -8,7 +8,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarItemText = _styled__default.default(Typography.default.Body).withConfig({
   displayName: "Textstyle__SideBarItemText",
   componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s,opacity 0.4s;opacity:", ";"], () => {
+})(["transition:width 0.6s,opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], () => {
   const {
     isExpanded,
     transitionEnd

package/dist/SideBar/components/Item/components/Text/Text.style.js

@@ -4,7 +4,7 @@ import Typography from "../../../../../Typography/Typography.js";
 const SideBarItemText = _styled(Typography.Body).withConfig({
   displayName: "Textstyle__SideBarItemText",
   componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s,opacity 0.4s;opacity:", ";"], () => {
+})(["transition:width 0.6s,opacity 0.4s;@media (prefers-reduced-motion:reduce){transition:none;}opacity:", ";"], () => {
   const {
     isExpanded,
     transitionEnd

package/dist/SideBar/components/SideBarLogo/SideBarLogo.style.cjs

@@ -7,7 +7,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarLogo = _styled__default.default.span.withConfig({
   displayName: "SideBarLogostyle__SideBarLogo",
   componentId: "RedisUI__sc-1u1jhxg-0"
-})(["display:flex;z-index:1;transition:padding-left 0.2s;", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
+})(["display:flex;z-index:1;transition:padding-left 0.2s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           padding-left: ${theme.logo.offset};
         `));
 exports.SideBarLogo = SideBarLogo;

package/dist/SideBar/components/SideBarLogo/SideBarLogo.style.js

@@ -3,7 +3,7 @@ import { useStateStyle } from "../../SideBar.utils.js";
 const SideBarLogo = _styled.span.withConfig({
   displayName: "SideBarLogostyle__SideBarLogo",
   componentId: "RedisUI__sc-1u1jhxg-0"
-})(["display:flex;z-index:1;transition:padding-left 0.2s;", ""], () => useStateStyle((theme) => css`
+})(["display:flex;z-index:1;transition:padding-left 0.2s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], () => useStateStyle((theme) => css`
           padding-left: ${theme.logo.offset};
         `));
 export {

package/dist/Stepper/components/Step/components/Icon/Icon.style.cjs

@@ -9,7 +9,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Container = _styled__default.default.div.withConfig({
   displayName: "Iconstyle__Container",
   componentId: "RedisUI__sc-1ojkwgp-0"
-})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;width:", ";height:", ";", ""], () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => {
+})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;@media (prefers-reduced-motion:reduce){transition:none;}width:", ";height:", ";", ""], () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => redisUiStyles.useTheme().components.stepper.step.indicator.size, () => {
   const {
     states
   } = redisUiStyles.useTheme().components.stepper.step;

package/dist/Stepper/components/Step/components/Icon/Icon.style.js

@@ -5,7 +5,7 @@ import { StepperStepState } from "../../Step.types.js";
 const Container = _styled.div.withConfig({
   displayName: "Iconstyle__Container",
   componentId: "RedisUI__sc-1ojkwgp-0"
-})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;width:", ";height:", ";", ""], () => useTheme().components.stepper.step.indicator.size, () => useTheme().components.stepper.step.indicator.size, () => {
+})(["display:flex;align-items:center;justify-content:center;flex:none;line-height:0;transition:all 0.3s ease;@media (prefers-reduced-motion:reduce){transition:none;}width:", ";height:", ";", ""], () => useTheme().components.stepper.step.indicator.size, () => useTheme().components.stepper.step.indicator.size, () => {
   const {
     states
   } = useTheme().components.stepper.step;

package/dist/Switch/components/Switcher/Switcher.style.cjs

@@ -110,6 +110,9 @@ const SwitcherCompose = _styled__default.default(index.Root).attrs(() => {
       border-radius: ${style.borderRadius};
       padding: 0;
       transition: all 0.3s ease, outline-offset 0ms, outline 0ms;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       cursor: pointer;
       overflow: hidden;
       ${redisUiStyles.getFocusStyle()};

package/dist/Switch/components/Switcher/Switcher.style.js

@@ -106,6 +106,9 @@ const SwitcherCompose = _styled(Root).attrs(() => {
       border-radius: ${style.borderRadius};
       padding: 0;
       transition: all 0.3s ease, outline-offset 0ms, outline 0ms;
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
       cursor: pointer;
       overflow: hidden;
       ${getFocusStyle()};

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.cjs

@@ -7,7 +7,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ThemeModeSwitch = _styled__default.default.button.withConfig({
   displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
   componentId: "RedisUI__sc-6b0pvc-0"
-})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}@media (prefers-reduced-motion:reduce){transition:none;}", " ", ""], ({
   $durationMs
 }) => $durationMs, () => {
   const theme = redisUiStyles.useTheme().components.themeModeSwitch;

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.js

@@ -3,7 +3,7 @@ import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
 const ThemeModeSwitch = _styled.button.withConfig({
   displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
   componentId: "RedisUI__sc-6b0pvc-0"
-})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}@media (prefers-reduced-motion:reduce){transition:none;}", " ", ""], ({
   $durationMs
 }) => $durationMs, () => {
   const theme = useTheme().components.themeModeSwitch;

package/dist/Toast/Toaster.cjs

@@ -2,11 +2,37 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const ReducedMotionTransition = require("./components/ReducedMotionTransition/ReducedMotionTransition.cjs");
 const Toaster_style = require("./Toaster.style.cjs");
-const Toaster = React.forwardRef((props, ref) => jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
-  ref,
-  ...props
-}));
+const getReducedMotionStyle = (style, autoClose) => {
+  if (typeof autoClose !== "number") {
+    return style;
+  }
+  return {
+    ...style,
+    "--redis-ui-toast-progress-duration": `${autoClose}ms`
+  };
+};
+const Toaster = React.forwardRef((props, ref) => {
+  const {
+    autoClose,
+    style,
+    ...restProps
+  } = props;
+  const prefersReducedMotion = redisUiStyles.usePrefersReducedMotion();
+  const reducedMotionProps = prefersReducedMotion ? {
+    transition: ReducedMotionTransition.default,
+    style: getReducedMotionStyle(style, autoClose)
+  } : void 0;
+  return jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
+    ref,
+    autoClose,
+    style: prefersReducedMotion ? void 0 : style,
+    ...restProps,
+    ...reducedMotionProps
+  });
+});
 Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 exports.default = Toaster$1;

package/dist/Toast/Toaster.js

@@ -1,10 +1,36 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { forwardRef } from "react";
+import { usePrefersReducedMotion } from "@redislabsdev/redis-ui-styles";
+import ReducedMotionTransition from "./components/ReducedMotionTransition/ReducedMotionTransition.js";
 import { ToasterContainer } from "./Toaster.style.js";
-const Toaster = forwardRef((props, ref) => jsxRuntimeExports.jsx(ToasterContainer, {
-  ref,
-  ...props
-}));
+const getReducedMotionStyle = (style, autoClose) => {
+  if (typeof autoClose !== "number") {
+    return style;
+  }
+  return {
+    ...style,
+    "--redis-ui-toast-progress-duration": `${autoClose}ms`
+  };
+};
+const Toaster = forwardRef((props, ref) => {
+  const {
+    autoClose,
+    style,
+    ...restProps
+  } = props;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const reducedMotionProps = prefersReducedMotion ? {
+    transition: ReducedMotionTransition,
+    style: getReducedMotionStyle(style, autoClose)
+  } : void 0;
+  return jsxRuntimeExports.jsx(ToasterContainer, {
+    ref,
+    autoClose,
+    style: prefersReducedMotion ? void 0 : style,
+    ...restProps,
+    ...reducedMotionProps
+  });
+});
 Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 export {

package/dist/Toast/Toaster.style.cjs

@@ -9,5 +9,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ToasterContainer = _styled__default.default(reactToastify_esm.ToastContainer).withConfig({
   displayName: "Toasterstyle__ToasterContainer",
   componentId: "RedisUI__sc-zfvdgq-0"
-})(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => redisUiStyles.useTheme().components.toast.toaster.gap);
+})(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;@media (prefers-reduced-motion:reduce){& .Toastify__progress-bar--animated{animation-duration:var(--redis-ui-toast-progress-duration,0.01ms) !important;}}& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => redisUiStyles.useTheme().components.toast.toaster.gap);
 exports.ToasterContainer = ToasterContainer;

package/dist/Toast/Toaster.style.js

@@ -5,7 +5,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const ToasterContainer = _styled(Q).withConfig({
   displayName: "Toasterstyle__ToasterContainer",
   componentId: "RedisUI__sc-zfvdgq-0"
-})(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => useTheme().components.toast.toaster.gap);
+})(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;@media (prefers-reduced-motion:reduce){& .Toastify__progress-bar--animated{animation-duration:var(--redis-ui-toast-progress-duration,0.01ms) !important;}}& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => useTheme().components.toast.toaster.gap);
 export {
   ToasterContainer
 };

package/dist/Toast/components/ReducedMotionTransition/ReducedMotionTransition.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const ReducedMotionTransition = ({
+  children,
+  done,
+  isIn,
+  playToast
+}) => {
+  React.useLayoutEffect(() => {
+    if (isIn) {
+      playToast();
+      return;
+    }
+    done();
+  }, [done, isIn, playToast]);
+  return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children
+  });
+};
+exports.default = ReducedMotionTransition;

package/dist/Toast/components/ReducedMotionTransition/ReducedMotionTransition.d.ts

@@ -0,0 +1,3 @@
+import type { ToastTransitionProps } from 'react-toastify';
+declare const ReducedMotionTransition: ({ children, done, isIn, playToast }: ToastTransitionProps) => import("react/jsx-runtime").JSX.Element;
+export default ReducedMotionTransition;

package/dist/Toast/components/ReducedMotionTransition/ReducedMotionTransition.js

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useLayoutEffect } from "react";
+const ReducedMotionTransition = ({
+  children,
+  done,
+  isIn,
+  playToast
+}) => {
+  useLayoutEffect(() => {
+    if (isIn) {
+      playToast();
+      return;
+    }
+    done();
+  }, [done, isIn, playToast]);
+  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children
+  });
+};
+export {
+  ReducedMotionTransition as default
+};

package/dist/Toast/core/mapping.helpers.cjs

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactToastify_esm = require("../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
+const getProgressDurationStyle = (autoClose) => {
+  if (typeof autoClose !== "number") {
+    return void 0;
+  }
+  return {
+    "--redis-ui-toast-progress-duration": `${autoClose}ms`
+  };
+};
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -22,6 +30,7 @@ const cleanupOptions = (options) => ({
   // use dummy theme (later custom themes can be used)
   role: "group",
   // mark main container as group
+  progressStyle: getProgressDurationStyle(options == null ? void 0 : options.autoClose),
   ...(options == null ? void 0 : options.role) ? {
     liveRole: options == null ? void 0 : options.role
   } : {}

package/dist/Toast/core/mapping.helpers.js

@@ -1,4 +1,12 @@
 import { toast as B } from "../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.js";
+const getProgressDurationStyle = (autoClose) => {
+  if (typeof autoClose !== "number") {
+    return void 0;
+  }
+  return {
+    "--redis-ui-toast-progress-duration": `${autoClose}ms`
+  };
+};
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -20,6 +28,7 @@ const cleanupOptions = (options) => ({
   // use dummy theme (later custom themes can be used)
   role: "group",
   // mark main container as group
+  progressStyle: getProgressDurationStyle(options == null ? void 0 : options.autoClose),
   ...(options == null ? void 0 : options.role) ? {
     liveRole: options == null ? void 0 : options.role
   } : {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redis-ui/components",
   "license": "UNLICENSED",
-  "version": "43.2.1",
+  "version": "44.0.1",
   "type": "module",
   "sideEffects": false,
   "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -28,8 +28,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@redis-ui/icons": "^6.8.5",
-    "@redis-ui/styles": "^14.15.0",
+    "@redis-ui/icons": "^6.9.2",
+    "@redis-ui/styles": "^15.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^5.0.0"