@redis-ui/components 43.0.2 → 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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const HighlightedIcon_style = require("./HighlightedIcon.style.cjs");
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  variant = "primary",
+  ...restProps
+}) => {
+  const theme = redisUiStyles.useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntime.jsxRuntimeExports.jsx(HighlightedIcon_style.HighlightedIconContainer, {
+    "$size": size,
+    "$variant": variant,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+exports.default = HighlightedIcon$1;

package/dist/HighlightedIcon/HighlightedIcon.d.ts

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

package/dist/HighlightedIcon/HighlightedIcon.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { HighlightedIconContainer } from "./HighlightedIcon.style.js";
+const HighlightedIcon = ({
+  icon: IconComponent,
+  size = "M",
+  variant = "primary",
+  ...restProps
+}) => {
+  const theme = useTheme();
+  const iconSize = theme.core.icon.size[size];
+  return jsxRuntimeExports.jsx(HighlightedIconContainer, {
+    "$size": size,
+    "$variant": variant,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(IconComponent, {
+      customColor: "currentColor",
+      customSize: iconSize,
+      "aria-hidden": true
+    })
+  });
+};
+const HighlightedIcon$1 = HighlightedIcon;
+export {
+  HighlightedIcon$1 as default
+};

package/dist/HighlightedIcon/HighlightedIcon.style.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (variant) => {
+  const theme = redisUiStyles.useTheme();
+  return theme.components.highlightedIcon.variants[variant];
+};
+const HighlightedIconContainer = _styled__default.default.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["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, ({
+  $variant
+}) => getColors($variant).background, ({
+  $variant
+}) => getColors($variant).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+exports.HighlightedIconContainer = HighlightedIconContainer;

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

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

package/dist/HighlightedIcon/HighlightedIcon.style.js

@@ -0,0 +1,47 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SIZE_MAP = {
+  XS: {
+    size: "1.6rem",
+    borderRadius: "0.3rem"
+  },
+  S: {
+    size: "2rem",
+    borderRadius: "0.3rem"
+  },
+  M: {
+    size: "2.4rem",
+    borderRadius: "0.5rem"
+  },
+  L: {
+    size: "3.2rem",
+    borderRadius: "0.5rem"
+  },
+  XL: {
+    size: "4rem",
+    borderRadius: "0.8rem"
+  },
+  XXL: {
+    size: "4.4rem",
+    borderRadius: "0.8rem"
+  }
+};
+const getColors = (variant) => {
+  const theme = useTheme();
+  return theme.components.highlightedIcon.variants[variant];
+};
+const HighlightedIconContainer = _styled.div.withConfig({
+  displayName: "HighlightedIconstyle__HighlightedIconContainer",
+  componentId: "RedisUI__sc-o2gs2e-0"
+})(["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, ({
+  $variant
+}) => getColors($variant).background, ({
+  $variant
+}) => getColors($variant).text, ({
+  $size
+}) => SIZE_MAP[$size].borderRadius);
+export {
+  HighlightedIconContainer
+};

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

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

package/dist/HighlightedIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HighlightedIcon } from './HighlightedIcon';
+export * from './HighlightedIcon.types';
+export * as HighlightedIconStyles from './HighlightedIcon.style';

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