@redis-ui/components 43.0.2 → 44.0.1

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

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/Stepper.cjs

@@ -1,21 +1,30 @@
 "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 Step = require("./components/Step/Step.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
+const Stepper_utils = require("./Stepper.utils.cjs");
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntime.jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
-          children: step.icon
-        }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
-          children: step.label
+      jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+        children: [idx > 0 && jsxRuntime.jsxRuntimeExports.jsx(Step.default.Separator, {
+          state: Stepper_utils.getStepState(idx, currentStep)
+        }), jsxRuntime.jsxRuntimeExports.jsxs(Step.default.Compose, {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Step.default.Icon, {
+            children: step.icon
+          }), jsxRuntime.jsxRuntimeExports.jsx(Step.default.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.d.ts

@@ -4,6 +4,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
         Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import(".").StepperStepContextType;
     };
     Compose: (({ currentStep, getIsStepInteractive, onStepChange, onKeyDown, ...restProps }: import("./components/Compose/Compose.types").StepperComposeProps) => import("react/jsx-runtime").JSX.Element) & {
@@ -11,6 +12,7 @@ declare const Stepper: (({ steps, ...restProps }: StepperProps) => import("react
             Compose: ({ onClick, ...restProps }: import("./components/Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
             Icon: ({ children, ...restProps }: import("./components/Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
             Label: ({ children, ...restProps }: import("./components/Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+            Separator: ({ state, ...restProps }: import("./components/Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
             useStepContext: () => import(".").StepperStepContextType;
         };
     };

package/dist/Stepper/Stepper.js

@@ -1,19 +1,28 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
 import Step from "./components/Step/Step.js";
 import StepperCompose from "./components/Compose/Compose.js";
+import { getStepState } from "./Stepper.utils.js";
 const Stepper = Object.assign(({
   steps,
   ...restProps
 }) => {
+  const {
+    currentStep = -1
+  } = restProps;
   return jsxRuntimeExports.jsx(Stepper.Compose, {
     ...restProps,
     children: steps.map((step, idx) => (
       // eslint-disable-next-line react/no-array-index-key
-      jsxRuntimeExports.jsxs(Step.Compose, {
-        children: [jsxRuntimeExports.jsx(Step.Icon, {
-          children: step.icon
-        }), jsxRuntimeExports.jsx(Step.Label, {
-          children: step.label
+      jsxRuntimeExports.jsxs(Fragment, {
+        children: [idx > 0 && jsxRuntimeExports.jsx(Step.Separator, {
+          state: getStepState(idx, currentStep)
+        }), jsxRuntimeExports.jsxs(Step.Compose, {
+          children: [jsxRuntimeExports.jsx(Step.Icon, {
+            children: step.icon
+          }), jsxRuntimeExports.jsx(Step.Label, {
+            children: step.label
+          })]
         })]
       }, idx)
     ))

package/dist/Stepper/Stepper.utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+exports.getStepState = getStepState;

package/dist/Stepper/Stepper.utils.d.ts

@@ -0,0 +1,2 @@
+import { StepperStepStateType } from './components/Step/Step.types';
+export declare const getStepState: (idx: number, currentStep: number) => StepperStepStateType;

package/dist/Stepper/Stepper.utils.js

@@ -0,0 +1,12 @@
+const getStepState = (idx, currentStep) => {
+  if (idx < currentStep) {
+    return "completed";
+  }
+  if (idx === currentStep) {
+    return "focused";
+  }
+  return "idle";
+};
+export {
+  getStepState
+};

package/dist/Stepper/components/Compose/Compose.d.ts

@@ -4,6 +4,7 @@ declare const StepperCompose: (({ currentStep, getIsStepInteractive, onStepChang
         Compose: ({ onClick, ...restProps }: import("../Step/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
         Icon: ({ children, ...restProps }: import("../Step/components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, ...restProps }: import("../Step/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+        Separator: ({ state, ...restProps }: import("../Step/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
         useStepContext: () => import("../..").StepperStepContextType;
     };
 };

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

@@ -4,6 +4,7 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Icon = require("./components/Icon/Icon.cjs");
 const Label = require("./components/Label/Label.cjs");
+const Separator = require("./components/Separator/Separator.cjs");
 const Step_context = require("./Step.context.cjs");
 const Step = Object.assign(({
   children,
@@ -17,6 +18,7 @@ const Step = Object.assign(({
   Compose: Compose.default,
   Icon: Icon.default,
   Label: Label.default,
+  Separator: Separator.default,
   useStepContext: Step_context.useStepContext
 });
 exports.default = Step;

package/dist/Stepper/components/Step/Step.d.ts

@@ -3,6 +3,7 @@ declare const Step: (({ children, ...restProps }: StepperStepProps) => import("r
     Compose: ({ onClick, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element | null;
     Icon: ({ children, ...restProps }: import("./components/Icon/Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element | null;
+    Separator: ({ state, ...restProps }: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     useStepContext: () => import("./Step.types").StepperStepContextType;
 };
 export default Step;

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

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import Compose from "./components/Compose/Compose.js";
 import Icon from "./components/Icon/Icon.js";
 import Label from "./components/Label/Label.js";
+import Separator from "./components/Separator/Separator.js";
 import { useStepContext } from "./Step.context.js";
 const Step = Object.assign(({
   children,
@@ -15,6 +16,7 @@ const Step = Object.assign(({
   Compose,
   Icon,
   Label,
+  Separator,
   useStepContext
 });
 export {

package/dist/Stepper/components/Step/components/Compose/Compose.cjs

@@ -3,11 +3,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const Step_context = require("../../Step.context.cjs");
-const Step_types = require("../../Step.types.cjs");
 const useStepRegistration = require("../../../../hooks/useStepRegistration.cjs");
 const Stepper_context = require("../../../../Stepper.context.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const useStepperInteractive = require("../../../../hooks/useStepperInteractive.cjs");
+const Stepper_utils = require("../../../../Stepper.utils.cjs");
 const Compose = ({
   onClick,
   ...restProps
@@ -20,14 +20,7 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration.useStepRegistration();
-  let state = Step_types.StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = Step_types.StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = Step_types.StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? Stepper_utils.getStepState(stepIndex, currentStep) : "idle";
   const contextValue = React.useMemo(() => ({
     state,
     index: stepIndex

package/dist/Stepper/components/Step/components/Compose/Compose.js

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
 import { StepContextProvider } from "../../Step.context.js";
-import { StepperStepState } from "../../Step.types.js";
 import { useStepRegistration } from "../../../../hooks/useStepRegistration.js";
 import { useStepperContext } from "../../../../Stepper.context.js";
 import { StepCompose } from "./Compose.style.js";
 import { getInteractiveStepProps } from "../../../../hooks/useStepperInteractive.js";
+import { getStepState } from "../../../../Stepper.utils.js";
 const Compose = ({
   onClick,
   ...restProps
@@ -18,14 +18,7 @@ const Compose = ({
   const {
     stepIndex
   } = useStepRegistration();
-  let state = StepperStepState.IDLE;
-  if (stepIndex >= 0) {
-    if (stepIndex < currentStep) {
-      state = StepperStepState.COMPLETED;
-    } else if (stepIndex === currentStep) {
-      state = StepperStepState.FOCUSED;
-    }
-  }
+  const state = stepIndex >= 0 ? getStepState(stepIndex, currentStep) : "idle";
   const contextValue = useMemo(() => ({
     state,
     index: stepIndex

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;