@redis-ui/components 43.2.1 → 44.0.1

package/dist/Badge/Badge.types.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 exports.badgeVariants = badgeVariants;

package/dist/Badge/Badge.types.d.ts

@@ -1,6 +1,6 @@
 import { IconType } from '@redislabsdev/redis-ui-icons';
 import { Theme } from '@redislabsdev/redis-ui-styles';
-export declare const badgeVariants: readonly ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+export declare const badgeVariants: readonly ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 export type BadgeVariants = (typeof badgeVariants)[number];
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;

package/dist/Badge/Badge.types.js

@@ -1,4 +1,4 @@
-const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];
+const badgeVariants = ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "upsell", "disabled"];
 export {
   badgeVariants
 };

package/dist/Badge/BadgeIcon.cjs

@@ -11,6 +11,7 @@ const BADGE_ICON_RECORD = {
   notice: redisUiIcons.ToastNotificationIcon,
   danger: redisUiIcons.ToastDangerIcon,
   attention: redisUiIcons.ToastPendingIcon,
+  upsell: redisUiIcons.CrownIcon,
   disabled: redisUiIcons.ToastCheckIcon
 };
 const BadgeIcon = ({

package/dist/Badge/BadgeIcon.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
-import { ToastCheckIcon, ToastInfoIcon, ToastNotificationIcon, ToastDangerIcon, ToastPendingIcon } from "@redislabsdev/redis-ui-icons";
+import { ToastCheckIcon, ToastInfoIcon, ToastNotificationIcon, ToastDangerIcon, ToastPendingIcon, CrownIcon } from "@redislabsdev/redis-ui-icons";
 const BADGE_ICON_RECORD = {
   white: ToastCheckIcon,
   light: ToastCheckIcon,
@@ -9,6 +9,7 @@ const BADGE_ICON_RECORD = {
   notice: ToastNotificationIcon,
   danger: ToastDangerIcon,
   attention: ToastPendingIcon,
+  upsell: CrownIcon,
   disabled: ToastCheckIcon
 };
 const BadgeIcon = ({

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.cjs

@@ -59,7 +59,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled__default.default(index.Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderRadius, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderWidth, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.js

@@ -55,7 +55,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled(Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;@media (prefers-reduced-motion:reduce){transition:none;}border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => useTheme().components.boxSelectionGroup.item.borderRadius, () => useTheme().components.boxSelectionGroup.item.borderWidth, () => useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/Button/Button.style.cjs

@@ -18,6 +18,10 @@ const baseButtonStyle = _styled.css`
   transition: all 130ms ease-in-out, outline-offset 0ms, outline 0ms;
   cursor: pointer;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   ${redisUiStyles.getFocusStyle()};
 
   &:disabled {

package/dist/Button/Button.style.js

@@ -14,6 +14,10 @@ const baseButtonStyle = css`
   transition: all 130ms ease-in-out, outline-offset 0ms, outline 0ms;
   cursor: pointer;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   ${getFocusStyle()};
 
   &:disabled {

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

@@ -9,7 +9,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Button = _styled__default.default.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-m6kucg-0"
-})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => redisUiStyles.useTheme().components.buttonGroup.button.minWidth, () => redisUiStyles.useTheme().components.buttonGroup.button.borderRadius, () => redisUiStyles.useTheme().components.buttonGroup.button.padding, () => redisUiStyles.useTheme().components.buttonGroup.button.gap, () => redisUiStyles.useTheme().components.buttonGroup.button.border, ({
+})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => redisUiStyles.useTheme().components.buttonGroup.button.minWidth, () => redisUiStyles.useTheme().components.buttonGroup.button.borderRadius, () => redisUiStyles.useTheme().components.buttonGroup.button.padding, () => redisUiStyles.useTheme().components.buttonGroup.button.gap, () => redisUiStyles.useTheme().components.buttonGroup.button.border, ({
   isSelected
 }) => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor]), redisUiStyles.getFocusStyle("-2px"));
 exports.Button = Button;

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

@@ -5,7 +5,7 @@ import { tokenMaps } from "../../../Helpers/css.utils.js";
 const Button = _styled.button.withConfig({
   displayName: "Buttonstyle__Button",
   componentId: "RedisUI__sc-m6kucg-0"
-})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({
+})(["cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:", ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:", ";padding:", ";justify-content:center;align-items:center;gap:", ";&:not(:last-child){border-inline-end:", ";}&:disabled{cursor:not-allowed;}", " ", ";"], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({
   isSelected
 }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [tokenMaps.bgColor, tokenMaps.textColor]), getFocusStyle("-2px"));
 export {

package/dist/Drawer/Drawer.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const index = require("../node_modules/@radix-ui/react-dialog/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Drawer_context = require("./Drawer.context.cjs");
+const useReducedMotionLifecycleSync = require("./hooks/useReducedMotionLifecycleSync.cjs");
 const Overlay = require("./components/Overlay/Overlay.cjs");
 const Content = require("./components/Content/Content.cjs");
 const Header = require("./components/Header/Header.cjs");
@@ -24,6 +25,15 @@ const Drawer = Object.assign(({
   ...props
 }) => {
   const theme = redisUiStyles.useTheme();
+  const {
+    prefersReducedMotion
+  } = useReducedMotionLifecycleSync.useReducedMotionLifecycleSync({
+    open,
+    onDrawerWillOpen,
+    onDrawerDidOpen,
+    onDrawerWillClose,
+    onDrawerDidClose
+  });
   const handleOnAnimationStart = () => {
     if (open) {
       onDrawerWillOpen == null ? void 0 : onDrawerWillOpen();
@@ -52,8 +62,8 @@ const Drawer = Object.assign(({
       children: jsxRuntime.jsxRuntimeExports.jsxs(index.Portal, {
         container: containerElement,
         children: [persistent && jsxRuntime.jsxRuntimeExports.jsx(Overlay.default, {}), jsxRuntime.jsxRuntimeExports.jsx(Content.default, {
-          onAnimationStart: handleOnAnimationStart,
-          onAnimationEndCapture: handleOnAnimationEnd,
+          onAnimationStart: prefersReducedMotion ? void 0 : handleOnAnimationStart,
+          onAnimationEndCapture: prefersReducedMotion ? void 0 : handleOnAnimationEnd,
           ...props,
           children
         })]

package/dist/Drawer/Drawer.js

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

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

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

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

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

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

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

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

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

package/dist/Drawer/hooks/useReducedMotionLifecycleSync.cjs

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

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

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

package/dist/Drawer/hooks/useReducedMotionLifecycleSync.js

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

package/dist/HighlightedIcon/HighlightedIcon.cjs

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

package/dist/HighlightedIcon/HighlightedIcon.d.ts

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

package/dist/HighlightedIcon/HighlightedIcon.js

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

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

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

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

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

package/dist/HighlightedIcon/HighlightedIcon.style.js

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

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

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

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

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

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

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

package/dist/Loader/Loader.cjs

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

package/dist/Loader/Loader.js

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

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

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

package/dist/Loader/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

package/dist/ProgressBar/ProgressBar.style.cjs

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

package/dist/ProgressBar/ProgressBar.style.js

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

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

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

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

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