@redis-ui/components 47.6.1 → 47.6.3

package/dist/Banner/bannerContext.cjs

@@ -1,17 +1,18 @@
 require("../_virtual/_rolldown/runtime.cjs");
-const require_lodash$1 = require("../node_modules/lodash/lodash.cjs");
 let react = require("react");
 //#region src/Banner/bannerContext.ts
-var import_lodash = require_lodash$1.default;
 var BannerContext = (0, react.createContext)({
 	variant: "informative",
 	size: "M",
 	onClose: void 0
 });
-var skipUndefined = (target, src) => (0, import_lodash.isUndefined)(src) ? target : src;
 var useBannerParams = (customParams = {}) => {
-	const context = (0, react.useContext)(BannerContext);
-	return customParams ? (0, import_lodash.assignWith)({}, context, customParams, skipUndefined) : context;
+	return {
+		...(0, react.useContext)(BannerContext),
+		...customParams.variant !== void 0 && { variant: customParams.variant },
+		...customParams.size !== void 0 && { size: customParams.size },
+		...customParams.onClose !== void 0 && { onClose: customParams.onClose }
+	};
 };
 //#endregion
 exports.BannerContext = BannerContext;

package/dist/Banner/bannerContext.js

@@ -1,16 +1,17 @@
-import { require_lodash } from "../node_modules/lodash/lodash.js";
 import { createContext, useContext } from "react";
 //#region src/Banner/bannerContext.ts
-var import_lodash = require_lodash();
 var BannerContext = createContext({
 	variant: "informative",
 	size: "M",
 	onClose: void 0
 });
-var skipUndefined = (target, src) => (0, import_lodash.isUndefined)(src) ? target : src;
 var useBannerParams = (customParams = {}) => {
-	const context = useContext(BannerContext);
-	return customParams ? (0, import_lodash.assignWith)({}, context, customParams, skipUndefined) : context;
+	return {
+		...useContext(BannerContext),
+		...customParams.variant !== void 0 && { variant: customParams.variant },
+		...customParams.size !== void 0 && { size: customParams.size },
+		...customParams.onClose !== void 0 && { onClose: customParams.onClose }
+	};
 };
 //#endregion
 export { BannerContext, useBannerParams };

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import { ButtonGroupProps } from './ButtonGroup.types';
 declare const ButtonGroup: ((props: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element) & {
-    Button: (props: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Button: ({ isSelected, ...props }: import("./components/Button/Button.types").ButtonProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon }: import("./components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default ButtonGroup;

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

@@ -2,8 +2,10 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Button_style = require("./Button.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ButtonGroup/components/Button/Button.tsx
-var Button = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
+var Button = ({ isSelected, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button_style.Button, {
 	type: "button",
+	isSelected,
+	"aria-pressed": isSelected,
 	...props
 });
 //#endregion

package/dist/ButtonGroup/components/Button/Button.d.ts

@@ -1,2 +1,2 @@
 import { ButtonProps } from './Button.types';
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ isSelected, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 import { Button as Button$1 } from "./Button.style.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ButtonGroup/components/Button/Button.tsx
-var Button = (props) => /* @__PURE__ */ jsx(Button$1, {
+var Button = ({ isSelected, ...props }) => /* @__PURE__ */ jsx(Button$1, {
 	type: "button",
+	isSelected,
+	"aria-pressed": isSelected,
 	...props
 });
 //#endregion

package/dist/Helpers/index.d.ts

@@ -1,6 +1,7 @@
 export * from './react.utils';
 export * from './generateId';
 export * from './debounce';
+export * from './throttle';
 export * from './contexts/SharedId.context';
 export * from './contexts/PrimitiveContextState';
 export * from './contexts/NullableContext';

package/dist/Helpers/index.js

@@ -1,6 +1,7 @@
 export * from './react.utils';
 export * from './generateId';
 export * from './debounce';
+export * from './throttle';
 export * from './contexts/SharedId.context';
 export * from './contexts/PrimitiveContextState';
 export * from './contexts/NullableContext';

package/dist/Helpers/throttle.cjs

@@ -0,0 +1,40 @@
+//#region src/Helpers/throttle.ts
+/**
+* Creates a throttled function that only invokes the provided function at most once per every delay milliseconds.
+* The trailing invocation uses the most recent arguments and preserves the call-time `this` context.
+*/
+var throttle = (func, delay) => {
+	let timeoutId = null;
+	let previous = 0;
+	let result;
+	let lastArgs = null;
+	let lastContext = null;
+	const throttled = function(...args) {
+		const now = Date.now();
+		const remaining = delay - (now - previous);
+		lastArgs = args;
+		lastContext = this;
+		if (remaining <= 0 || remaining > delay) {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+			previous = now;
+			lastArgs = null;
+			lastContext = null;
+			result = func.apply(this, args);
+		} else if (!timeoutId) timeoutId = setTimeout(() => {
+			previous = Date.now();
+			timeoutId = null;
+			if (lastArgs) {
+				result = func.apply(lastContext, lastArgs);
+				lastArgs = null;
+				lastContext = null;
+			}
+		}, remaining);
+		return result;
+	};
+	return throttled;
+};
+//#endregion
+exports.throttle = throttle;

package/dist/Helpers/throttle.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a throttled function that only invokes the provided function at most once per every delay milliseconds.
+ * The trailing invocation uses the most recent arguments and preserves the call-time `this` context.
+ */
+export declare const throttle: <T extends (...args: any[]) => any>(func: T, delay: number) => ((...args: Parameters<T>) => ReturnType<T> | undefined);

package/dist/Helpers/throttle.js

@@ -0,0 +1,40 @@
+//#region src/Helpers/throttle.ts
+/**
+* Creates a throttled function that only invokes the provided function at most once per every delay milliseconds.
+* The trailing invocation uses the most recent arguments and preserves the call-time `this` context.
+*/
+var throttle = (func, delay) => {
+	let timeoutId = null;
+	let previous = 0;
+	let result;
+	let lastArgs = null;
+	let lastContext = null;
+	const throttled = function(...args) {
+		const now = Date.now();
+		const remaining = delay - (now - previous);
+		lastArgs = args;
+		lastContext = this;
+		if (remaining <= 0 || remaining > delay) {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+			previous = now;
+			lastArgs = null;
+			lastContext = null;
+			result = func.apply(this, args);
+		} else if (!timeoutId) timeoutId = setTimeout(() => {
+			previous = Date.now();
+			timeoutId = null;
+			if (lastArgs) {
+				result = func.apply(lastContext, lastArgs);
+				lastArgs = null;
+				lastContext = null;
+			}
+		}, remaining);
+		return result;
+	};
+	return throttled;
+};
+//#endregion
+export { throttle };

package/dist/Overflow/components/OverflowContainer/OverflowContainer.cjs

@@ -1,15 +1,14 @@
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_lodash$1 = require("../../../node_modules/lodash/lodash.cjs");
+const require_throttle = require("../../../Helpers/throttle.cjs");
 const require_useResize = require("../../useResize.cjs");
 const require_OverflowContainer_style = require("./OverflowContainer.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 //#region src/Overflow/components/OverflowContainer/OverflowContainer.tsx
-var import_lodash = require_lodash$1.default;
 var OverflowContainer = ({ size, onSizeChange, onStartSizeChange, onGapChange, ...restProps }) => {
 	const onSizeChangeRef = (0, react.useRef)(onSizeChange);
 	onSizeChangeRef.current = onSizeChange;
-	const setContainerSizeDeferred = (0, react.useMemo)(() => (0, import_lodash.throttle)((newSize) => onSizeChangeRef.current?.(newSize), 200), []);
+	const setContainerSizeDeferred = (0, react.useMemo)(() => require_throttle.throttle((newSize) => onSizeChangeRef.current?.(newSize), 200), []);
 	const ref = (0, react.useRef)(null);
 	require_useResize.useResizeWidth((newSize = 0) => {
 		if (ref.current && newSize && onGapChange) {

package/dist/Overflow/components/OverflowContainer/OverflowContainer.js

@@ -1,14 +1,13 @@
-import { require_lodash } from "../../../node_modules/lodash/lodash.js";
+import { throttle } from "../../../Helpers/throttle.js";
 import { useResizeWidth } from "../../useResize.js";
 import { OverflowContainer as OverflowContainer$1 } from "./OverflowContainer.style.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 //#region src/Overflow/components/OverflowContainer/OverflowContainer.tsx
-var import_lodash = require_lodash();
 var OverflowContainer = ({ size, onSizeChange, onStartSizeChange, onGapChange, ...restProps }) => {
 	const onSizeChangeRef = useRef(onSizeChange);
 	onSizeChangeRef.current = onSizeChange;
-	const setContainerSizeDeferred = useMemo(() => (0, import_lodash.throttle)((newSize) => onSizeChangeRef.current?.(newSize), 200), []);
+	const setContainerSizeDeferred = useMemo(() => throttle((newSize) => onSizeChangeRef.current?.(newSize), 200), []);
 	const ref = useRef(null);
 	useResizeWidth((newSize = 0) => {
 		if (ref.current && newSize && onGapChange) {

package/dist/SideBar/SideBar.cjs

@@ -3,9 +3,9 @@ const require_index = require("../node_modules/@radix-ui/react-id/dist/index.cjs
 const require_Provider = require("../Tooltip/Provider/Provider.cjs");
 const require_FlexSplit = require("../Layouts/FlexSplit/FlexSplit.cjs");
 const require_SideBar_context = require("./SideBar.context.cjs");
-const require_SideBar_style = require("./SideBar.style.cjs");
 const require_SideBarLogo = require("./components/SideBarLogo/SideBarLogo.cjs");
 const require_ItemsContainer = require("./components/ItemsContainer/ItemsContainer.cjs");
+const require_SideBar_style = require("./SideBar.style.cjs");
 const require_Divider = require("./components/Divider/Divider.cjs");
 const require_Item = require("./components/Item/Item.cjs");
 const require_Button = require("./components/Button/Button.cjs");
@@ -13,7 +13,6 @@ const require_Header = require("./components/Header/Header.cjs");
 const require_ScrollContainer = require("./components/ScrollContainer/ScrollContainer.cjs");
 const require_Footer = require("./components/Footer/Footer.cjs");
 const require_Group = require("./components/Group/Group.cjs");
-const require_SideBarThemeProvider = require("./SideBarThemeProvider.cjs");
 let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
@@ -25,7 +24,7 @@ var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 	const handleTransitionChange = (end) => {
 		setTransitionEnd(prefersReducedMotion ? true : end);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideBarThemeProvider.SideBarThemeProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideBar_context.SideBarContextProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SideBar_context.SideBarContextProvider, {
 		value: {
 			transitionEnd,
 			handleTransitionChange,
@@ -44,7 +43,7 @@ var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 			$expandedWidth: expandedWidth,
 			...rest
 		}) })
-	}) });
+	});
 }, {
 	SideBarLogo: require_SideBarLogo.default,
 	ItemsContainer: require_ItemsContainer.default,

package/dist/SideBar/SideBar.constants.cjs

@@ -0,0 +1,55 @@
+//#region src/SideBar/SideBar.constants.ts
+/**
+* SideBar component constants - structural values that don't change across themes
+*/
+var SIDEBAR_CONSTANTS = {
+	shadow: "none",
+	width: {
+		collapsed: "5.8rem",
+		expanded: "20rem"
+	},
+	divider: {
+		thickness: "1px",
+		blockMargin: "2rem",
+		sidePadding: {
+			collapsed: "0",
+			expanded: "1rem"
+		}
+	},
+	button: {
+		height: "3.6rem",
+		width: {
+			collapsed: "3.6rem",
+			expanded: "14.5rem"
+		}
+	},
+	collapseButton: {
+		size: "2.2rem",
+		borderRadius: "100%"
+	},
+	header: {
+		height: "7rem",
+		margin: "0 0 3rem 0"
+	},
+	footer: { meta: { padding: "0 1.8rem 2rem 1.8rem" } },
+	item: {
+		margin: "0.2rem 0.5rem 0.2rem 1rem",
+		height: "3.2rem",
+		padding: "0 0.8rem",
+		gap: "0.8rem",
+		borderRadius: "0.4rem",
+		itemWithButtonOffset: "1.8rem",
+		button: { borderSize: "1px" },
+		activeIndicator: {
+			left: "-1rem",
+			top: "0.5rem",
+			bottom: "0.5rem",
+			width: "3px",
+			borderRadius: "0 2px 2px 0"
+		}
+	},
+	logo: { offset: "1.6rem" },
+	groupTitle: { padding: "1.4rem 1.6rem 0.4rem" }
+};
+//#endregion
+exports.SIDEBAR_CONSTANTS = SIDEBAR_CONSTANTS;

package/dist/SideBar/SideBar.constants.d.ts

@@ -0,0 +1,62 @@
+/**
+ * SideBar component constants - structural values that don't change across themes
+ */
+export declare const SIDEBAR_CONSTANTS: {
+    readonly shadow: "none";
+    readonly width: {
+        readonly collapsed: "5.8rem";
+        readonly expanded: "20rem";
+    };
+    readonly divider: {
+        readonly thickness: "1px";
+        readonly blockMargin: "2rem";
+        readonly sidePadding: {
+            readonly collapsed: "0";
+            readonly expanded: "1rem";
+        };
+    };
+    readonly button: {
+        readonly height: "3.6rem";
+        readonly width: {
+            readonly collapsed: "3.6rem";
+            readonly expanded: "14.5rem";
+        };
+    };
+    readonly collapseButton: {
+        readonly size: "2.2rem";
+        readonly borderRadius: "100%";
+    };
+    readonly header: {
+        readonly height: "7rem";
+        readonly margin: "0 0 3rem 0";
+    };
+    readonly footer: {
+        readonly meta: {
+            readonly padding: "0 1.8rem 2rem 1.8rem";
+        };
+    };
+    readonly item: {
+        readonly margin: "0.2rem 0.5rem 0.2rem 1rem";
+        readonly height: "3.2rem";
+        readonly padding: "0 0.8rem";
+        readonly gap: "0.8rem";
+        readonly borderRadius: "0.4rem";
+        readonly itemWithButtonOffset: "1.8rem";
+        readonly button: {
+            readonly borderSize: "1px";
+        };
+        readonly activeIndicator: {
+            readonly left: "-1rem";
+            readonly top: "0.5rem";
+            readonly bottom: "0.5rem";
+            readonly width: "3px";
+            readonly borderRadius: "0 2px 2px 0";
+        };
+    };
+    readonly logo: {
+        readonly offset: "1.6rem";
+    };
+    readonly groupTitle: {
+        readonly padding: "1.4rem 1.6rem 0.4rem";
+    };
+};

package/dist/SideBar/SideBar.constants.js

@@ -0,0 +1,55 @@
+//#region src/SideBar/SideBar.constants.ts
+/**
+* SideBar component constants - structural values that don't change across themes
+*/
+var SIDEBAR_CONSTANTS = {
+	shadow: "none",
+	width: {
+		collapsed: "5.8rem",
+		expanded: "20rem"
+	},
+	divider: {
+		thickness: "1px",
+		blockMargin: "2rem",
+		sidePadding: {
+			collapsed: "0",
+			expanded: "1rem"
+		}
+	},
+	button: {
+		height: "3.6rem",
+		width: {
+			collapsed: "3.6rem",
+			expanded: "14.5rem"
+		}
+	},
+	collapseButton: {
+		size: "2.2rem",
+		borderRadius: "100%"
+	},
+	header: {
+		height: "7rem",
+		margin: "0 0 3rem 0"
+	},
+	footer: { meta: { padding: "0 1.8rem 2rem 1.8rem" } },
+	item: {
+		margin: "0.2rem 0.5rem 0.2rem 1rem",
+		height: "3.2rem",
+		padding: "0 0.8rem",
+		gap: "0.8rem",
+		borderRadius: "0.4rem",
+		itemWithButtonOffset: "1.8rem",
+		button: { borderSize: "1px" },
+		activeIndicator: {
+			left: "-1rem",
+			top: "0.5rem",
+			bottom: "0.5rem",
+			width: "3px",
+			borderRadius: "0 2px 2px 0"
+		}
+	},
+	logo: { offset: "1.6rem" },
+	groupTitle: { padding: "1.4rem 1.6rem 0.4rem" }
+};
+//#endregion
+export { SIDEBAR_CONSTANTS };

package/dist/SideBar/SideBar.js

@@ -2,9 +2,9 @@ import { useId } from "../node_modules/@radix-ui/react-id/dist/index.js";
 import Provider from "../Tooltip/Provider/Provider.js";
 import { FlexSplit } from "../Layouts/FlexSplit/FlexSplit.js";
 import { SideBarContextProvider } from "./SideBar.context.js";
-import { SideBarContainer } from "./SideBar.style.js";
 import SideBarLogo from "./components/SideBarLogo/SideBarLogo.js";
 import SideBarItemsContainer from "./components/ItemsContainer/ItemsContainer.js";
+import { SideBarContainer } from "./SideBar.style.js";
 import Divider from "./components/Divider/Divider.js";
 import Item from "./components/Item/Item.js";
 import Button from "./components/Button/Button.js";
@@ -12,7 +12,6 @@ import Header from "./components/Header/Header.js";
 import ScrollContainer from "./components/ScrollContainer/ScrollContainer.js";
 import Footer from "./components/Footer/Footer.js";
 import Group from "./components/Group/Group.js";
-import { SideBarThemeProvider } from "./SideBarThemeProvider.js";
 import { usePrefersReducedMotion } from "@redis-ui/styles";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
@@ -24,7 +23,7 @@ var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 	const handleTransitionChange = (end) => {
 		setTransitionEnd(prefersReducedMotion ? true : end);
 	};
-	return /* @__PURE__ */ jsx(SideBarThemeProvider, { children: /* @__PURE__ */ jsx(SideBarContextProvider, {
+	return /* @__PURE__ */ jsx(SideBarContextProvider, {
 		value: {
 			transitionEnd,
 			handleTransitionChange,
@@ -43,7 +42,7 @@ var SideBar = Object.assign(({ isExpanded, expandedWidth, ...rest }) => {
 			$expandedWidth: expandedWidth,
 			...rest
 		}) })
-	}) });
+	});
 }, {
 	SideBarLogo,
 	ItemsContainer: SideBarItemsContainer,

package/dist/SideBar/SideBar.style.cjs

@@ -1,5 +1,6 @@
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 const require_FlexGroup = require("../Layouts/FlexGroup/FlexGroup.cjs");
+const require_SideBar_constants = require("./SideBar.constants.cjs");
 let styled_components = require("styled-components");
 styled_components = require_runtime.__toESM(styled_components, 1);
 let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
@@ -8,13 +9,13 @@ let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 * same as {@link useStateStyle}, but for styling root <nav> element
 */
 var useRootStateStyle = (getStyle) => {
-	const { expanded, collapsed } = (0, _redislabsdev_redis_ui_styles.useTheme)().components.sideBar;
+	const theme = (0, _redislabsdev_redis_ui_styles.useTheme)().components.sideBar;
 	return styled_components.css`
     &[data-state='collapsed'] {
-      ${getStyle(collapsed, "collapsed")}
+      ${getStyle(theme, "collapsed")}
     }
     &[data-state='expanded'] {
-      ${getStyle(expanded, "expanded")}
+      ${getStyle(theme, "expanded")}
     }
   `;
 };
@@ -22,9 +23,9 @@ var SideBarContainer = (0, styled_components.default)(require_FlexGroup.FlexGrou
 	displayName: "SideBarstyle__SideBarContainer",
 	componentId: "RedisUI__sc-suwica-0"
 })(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], ({ $expandedWidth }) => useRootStateStyle((theme, state) => styled_components.css`
-        box-shadow: ${theme.shadow};
+        box-shadow: ${require_SideBar_constants.SIDEBAR_CONSTANTS.shadow};
         background-color: ${theme.bgColor};
-        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? theme.width};
+        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? require_SideBar_constants.SIDEBAR_CONSTANTS.width[state]};
         border-right: ${theme.borderRight};
       `));
 //#endregion

package/dist/SideBar/SideBar.style.js

@@ -1,4 +1,5 @@
 import { FlexGroup } from "../Layouts/FlexGroup/FlexGroup.js";
+import { SIDEBAR_CONSTANTS } from "./SideBar.constants.js";
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redis-ui/styles";
 //#region src/SideBar/SideBar.style.ts
@@ -6,13 +7,13 @@ import { useTheme } from "@redis-ui/styles";
 * same as {@link useStateStyle}, but for styling root <nav> element
 */
 var useRootStateStyle = (getStyle) => {
-	const { expanded, collapsed } = useTheme().components.sideBar;
+	const theme = useTheme().components.sideBar;
 	return css`
     &[data-state='collapsed'] {
-      ${getStyle(collapsed, "collapsed")}
+      ${getStyle(theme, "collapsed")}
     }
     &[data-state='expanded'] {
-      ${getStyle(expanded, "expanded")}
+      ${getStyle(theme, "expanded")}
     }
   `;
 };
@@ -20,9 +21,9 @@ var SideBarContainer = _styled(FlexGroup).withConfig({
 	displayName: "SideBarstyle__SideBarContainer",
 	componentId: "RedisUI__sc-suwica-0"
 })(["position:relative;height:100%;transition:width 0.6s;@media (prefers-reduced-motion:reduce){transition:none;}", ""], ({ $expandedWidth }) => useRootStateStyle((theme, state) => css`
-        box-shadow: ${theme.shadow};
+        box-shadow: ${SIDEBAR_CONSTANTS.shadow};
         background-color: ${theme.bgColor};
-        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? theme.width};
+        width: ${(state === "expanded" ? $expandedWidth : void 0) ?? SIDEBAR_CONSTANTS.width[state]};
         border-right: ${theme.borderRight};
       `));
 //#endregion

package/dist/SideBar/SideBar.utils.cjs

@@ -8,14 +8,14 @@ let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 * @param getStyle - custom state builder, state theme is passed as parameter
 */
 var useStateStyle = (getStyle) => {
-	const { expanded, collapsed } = (0, _redislabsdev_redis_ui_styles.useTheme)().components.sideBar;
+	const theme = (0, _redislabsdev_redis_ui_styles.useTheme)().components.sideBar;
 	return (0, styled_components.css)([
 		"",
 		":is([data-state='collapsed'],[data-state='expanded'][data-transition='active']) &&{",
 		"}",
 		"[data-state='expanded'][data-transition='inactive'] &&{",
 		"}"
-	], require_SideBar_style.SideBarContainer, getStyle(collapsed, "collapsed"), require_SideBar_style.SideBarContainer, getStyle(expanded, "expanded"));
+	], require_SideBar_style.SideBarContainer, getStyle(theme, "collapsed"), require_SideBar_style.SideBarContainer, getStyle(theme, "expanded"));
 };
 //#endregion
 exports.useStateStyle = useStateStyle;

package/dist/SideBar/SideBar.utils.d.ts

@@ -5,4 +5,4 @@ import { ThemeProps } from 'styled-components/macro';
  * generates styles for all sideBar states
  * @param getStyle - custom state builder, state theme is passed as parameter
  */
-export declare const useStateStyle: (getStyle: (theme: Theme["components"]["sideBar"]["collapsed"], state: keyof Theme["components"]["sideBar"]) => FlattenInterpolation<ThemeProps<Theme>>) => FlattenInterpolation<ThemeProps<any>>;
+export declare const useStateStyle: (getStyle: (theme: Theme["components"]["sideBar"], state: "collapsed" | "expanded") => FlattenInterpolation<ThemeProps<Theme>>) => FlattenInterpolation<ThemeProps<any>>;

package/dist/SideBar/SideBar.utils.js

@@ -7,14 +7,14 @@ import { useTheme } from "@redis-ui/styles";
 * @param getStyle - custom state builder, state theme is passed as parameter
 */
 var useStateStyle = (getStyle) => {
-	const { expanded, collapsed } = useTheme().components.sideBar;
+	const theme = useTheme().components.sideBar;
 	return css([
 		"",
 		":is([data-state='collapsed'],[data-state='expanded'][data-transition='active']) &&{",
 		"}",
 		"[data-state='expanded'][data-transition='inactive'] &&{",
 		"}"
-	], SideBarContainer, getStyle(collapsed, "collapsed"), SideBarContainer, getStyle(expanded, "expanded"));
+	], SideBarContainer, getStyle(theme, "collapsed"), SideBarContainer, getStyle(theme, "expanded"));
 };
 //#endregion
 export { useStateStyle };

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

@@ -1,6 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Button = require("../../../Button/Button.cjs");
 const require_Tooltip = require("../../../Tooltip/Tooltip.cjs");
+const require_SideBar_constants = require("../../SideBar.constants.cjs");
 const require_SideBar_utils = require("../../SideBar.utils.cjs");
 let styled_components = require("styled-components");
 styled_components = require_runtime.__toESM(styled_components, 1);
@@ -8,9 +9,9 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var SideBarButton = (0, styled_components.default)(require_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;@media (prefers-reduced-motion:reduce){transition:none;}"], () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
-          height: ${theme.button.height};
-          width: ${theme.button.width};
+})(["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;}"], () => require_SideBar_utils.useStateStyle((theme, state) => styled_components.css`
+          height: ${require_SideBar_constants.SIDEBAR_CONSTANTS.button.height};
+          width: ${require_SideBar_constants.SIDEBAR_CONSTANTS.button.width[state]};
         `));
 var appear = styled_components.keyframes`
   0% {

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

@@ -1,14 +1,15 @@
 import Button from "../../../Button/Button.js";
 import Tooltip from "../../../Tooltip/Tooltip.js";
+import { SIDEBAR_CONSTANTS } from "../../SideBar.constants.js";
 import { useStateStyle } from "../../SideBar.utils.js";
 import _styled, { css, keyframes } from "styled-components";
 //#region src/SideBar/components/Button/Button.style.ts
 var 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;@media (prefers-reduced-motion:reduce){transition:none;}"], () => useStateStyle((theme) => css`
-          height: ${theme.button.height};
-          width: ${theme.button.width};
+})(["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, state) => css`
+          height: ${SIDEBAR_CONSTANTS.button.height};
+          width: ${SIDEBAR_CONSTANTS.button.width[state]};
         `));
 var appear = keyframes`
   0% {