@redis-ui/components 43.2.1 → 44.0.2

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.2",
   "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"

package/skills/redis-ui-components/references/Loader.md

@@ -12,7 +12,7 @@ import { Loader } from '@redislabsdev/redis-ui-components';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| size | `string` | theme default | Custom loader size |
+| size | `LoaderSize` | `'XL'` | Predefined loader size |
 | inline | `boolean` | `false` | Renders the loader inline with surrounding content |
 | loaderText | `string` | - | Text shown next to the loader |
 | dataTestId | `string` | - | Deprecated test id for the SVG element |
@@ -23,6 +23,10 @@ import { Loader } from '@redislabsdev/redis-ui-components';
 
 `'regular' | 'pending' | 'inverse'`
 
+### `LoaderSize`
+
+`'XS' | 'S' | 'M' | 'L' | 'XL'`
+
 ## Examples
 
 ### Playground
@@ -30,20 +34,22 @@ import { Loader } from '@redislabsdev/redis-ui-components';
 ```tsx
 import { Loader } from '@redislabsdev/redis-ui-components';
 
-<Loader size="5rem" inline={false} loaderText="" variant="regular" />
+<Loader size="XL" inline={false} loaderText="" variant="regular" />
 ```
 
-### CustomSize
+### Sizes
 
-> Loaders can have a custom size by providing a value to the `size` prop. If you do not provide a value to the `size` prop, the size of the loader will be set to `5rem`.
+> Loaders support predefined t-shirt sizes. If you do not provide a value to the `size` prop, the size of the loader will default to `XL`.
 
 ```tsx
 import { Loader } from '@redislabsdev/redis-ui-components';
 
 <>
-  <Loader size="3rem" />
-  <Loader />
-  <Loader size="7rem" />
+  <Loader size="XS" />
+  <Loader size="S" />
+  <Loader size="M" />
+  <Loader size="L" />
+  <Loader size="XL" />
 </>
 ```
 
@@ -94,7 +100,7 @@ const inverseBackground = theme.semantic.color.icon.neutral500;
 
 ## Notes
 
-- `size` falls back to the theme default when omitted.
+- `size` falls back to `M` when omitted.
 - `loaderText` replaces the hidden accessibility label.
 - `inline` changes the layout but not the loading semantics.
 - `dataTestId` is deprecated; use `data-testid` instead.

package/skills/redis-ui-components/references/Popover.md

@@ -506,7 +506,7 @@ function AsyncContentComponent() {
   }, []);
 
   return loading ? (
-    <Loader size="15" />
+    <Loader size="S" />
   ) : (
     <div>
       <p>Async content:</p>

package/skills/redis-ui-components/references/Tooltip.md

@@ -550,7 +550,7 @@ function AsyncContentComponent() {
   }, []);
 
   return loading ? (
-    <Loader size="15" />
+    <Loader size="S" />
   ) : (
     <div>
       <p>Async content:</p>