@redis-ui/components 47.6.0 → 47.6.2

package/dist/Select/components/Trigger/components/Compose/Compose.style.js

@@ -2,7 +2,7 @@ import { styleFromTokens, tokenMaps } from "../../../../../Helpers/css.utils.js"
 import { Trigger } from "../../../../../node_modules/@radix-ui/react-select/dist/index.js";
 import { ValueContainer } from "../Value/Value.style.js";
 import _styled, { css } from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme } from "@redis-ui/styles";
 //#region src/Select/components/Trigger/components/Compose/Compose.style.ts
 var getStateStyle = (theme) => {
 	const statesStyle = theme.components.select.states;

package/dist/Select/components/Trigger/components/ResetButton/ResetButton.cjs

@@ -1,9 +1,9 @@
 require("../../../../../_virtual/_rolldown/runtime.cjs");
 const require_Context = require("../../../Context/Context.cjs");
 const require_ResetButton_style = require("./ResetButton.style.cjs");
-let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
+let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _redislabsdev_redis_ui_icons = require("@redislabsdev/redis-ui-icons");
+let _redislabsdev_redis_ui_icons = require("@redis-ui/icons");
 //#region src/Select/components/Trigger/components/ResetButton/ResetButton.tsx
 var ResetButton = ({ children, title, ...restProps }) => {
 	const { resetSelection, canUnselect } = require_Context.useSelectContext();

package/dist/Select/components/Trigger/components/ResetButton/ResetButton.js

@@ -1,8 +1,8 @@
 import { useSelectContext } from "../../../Context/Context.js";
 import { ResetButton as ResetButton$1 } from "./ResetButton.style.js";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme } from "@redis-ui/styles";
 import { jsx } from "react/jsx-runtime";
-import { ToastCancelIcon } from "@redislabsdev/redis-ui-icons";
+import { ToastCancelIcon } from "@redis-ui/icons";
 //#region src/Select/components/Trigger/components/ResetButton/ResetButton.tsx
 var ResetButton = ({ children, title, ...restProps }) => {
 	const { resetSelection, canUnselect } = useSelectContext();

package/dist/Select/components/Trigger/components/Value/Value.style.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
 let styled_components = require("styled-components");
 styled_components = require_runtime.__toESM(styled_components, 1);
-let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
+let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 //#region src/Select/components/Trigger/components/Value/Value.style.ts
 var ValueContainer = styled_components.default.span.withConfig({
 	displayName: "Valuestyle__ValueContainer",

package/dist/Select/components/Trigger/components/Value/Value.style.js

@@ -1,5 +1,5 @@
 import _styled from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme } from "@redis-ui/styles";
 //#region src/Select/components/Trigger/components/Value/Value.style.ts
 var ValueContainer = _styled.span.withConfig({
 	displayName: "Valuestyle__ValueContainer",

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,8 +13,7 @@ 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("@redislabsdev/redis-ui-styles");
+let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 //#region src/SideBar/SideBar.tsx
@@ -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,8 +12,7 @@ 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 "@redislabsdev/redis-ui-styles";
+import { usePrefersReducedMotion } from "@redis-ui/styles";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/SideBar/SideBar.tsx
@@ -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,20 +1,21 @@
 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("@redislabsdev/redis-ui-styles");
+let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 //#region src/SideBar/SideBar.style.ts
 /**
 * 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,18 +1,19 @@
 import { FlexGroup } from "../Layouts/FlexGroup/FlexGroup.js";
+import { SIDEBAR_CONSTANTS } from "./SideBar.constants.js";
 import _styled, { css } from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme } from "@redis-ui/styles";
 //#region src/SideBar/SideBar.style.ts
 /**
 * 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

@@ -1,21 +1,21 @@
 require("../_virtual/_rolldown/runtime.cjs");
 const require_SideBar_style = require("./SideBar.style.cjs");
 let styled_components = require("styled-components");
-let _redislabsdev_redis_ui_styles = require("@redislabsdev/redis-ui-styles");
+let _redislabsdev_redis_ui_styles = require("@redis-ui/styles");
 //#region src/SideBar/SideBar.utils.ts
 /**
 * generates styles for all sideBar states
 * @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

@@ -1,8 +1,8 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
+import { Theme } from '@redis-ui/styles';
 import { FlattenInterpolation } from 'styled-components';
 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

@@ -1,20 +1,20 @@
 import { SideBarContainer } from "./SideBar.style.js";
 import { css } from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme } from "@redis-ui/styles";
 //#region src/SideBar/SideBar.utils.ts
 /**
 * generates styles for all sideBar states
 * @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.cjs

@@ -3,7 +3,7 @@ const require_Tooltip = require("../../../Tooltip/Tooltip.cjs");
 const require_SideBar_context = require("../../SideBar.context.cjs");
 const require_Button_style = require("./Button.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _redislabsdev_redis_ui_icons = require("@redislabsdev/redis-ui-icons");
+let _redislabsdev_redis_ui_icons = require("@redis-ui/icons");
 //#region src/SideBar/components/Button/Button.tsx
 var Button = ({ tooltipProps: { text: tooltipText, placement = "right", ...tooltipProps }, buttonExpandedContent, buttonCollapsedIcon: ButtonCollapsedIcon = _redislabsdev_redis_ui_icons.PlusIcon, ...rest }) => {
 	const { isExpanded, transitionEnd } = require_SideBar_context.useSideBarContext();

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

@@ -2,7 +2,7 @@ import Tooltip from "../../../Tooltip/Tooltip.js";
 import { useSideBarContext } from "../../SideBar.context.js";
 import { FadeInAnimationSvg, FadeInAnimationText, SideBarButton, TooltipContent } from "./Button.style.js";
 import { jsx } from "react/jsx-runtime";
-import { PlusIcon } from "@redislabsdev/redis-ui-icons";
+import { PlusIcon } from "@redis-ui/icons";
 //#region src/SideBar/components/Button/Button.tsx
 var Button = ({ tooltipProps: { text: tooltipText, placement = "right", ...tooltipProps }, buttonExpandedContent, buttonCollapsedIcon: ButtonCollapsedIcon = PlusIcon, ...rest }) => {
 	const { isExpanded, transitionEnd } = useSideBarContext();

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% {

package/dist/SideBar/components/Button/Button.types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconType } from '@redislabsdev/redis-ui-icons';
+import { IconType } from '@redis-ui/icons';
 import { ButtonProps } from '../../../Button';
 import type { SideBarTooltipProps } from '../../SideBar.types';
 export interface SideBarButtonProps extends ButtonProps {

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

@@ -1,4 +1,5 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.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 @@ var SideBarDivider = styled_components.default.div.withConfig({
 	componentId: "RedisUI__sc-191o8ht-0"
 })(["background-clip:content-box;transition:all 1s;flex:none;@media (prefers-reduced-motion:reduce){transition:none;}", ";"], ({ fullWidthWhenExpanded, fullWidth, noMargin }) => require_SideBar_utils.useStateStyle((theme, state) => styled_components.css`
         background: ${() => theme.divider.color};
-        height: ${theme.divider.thickness};
-        margin-inline: ${fullWidth || fullWidthWhenExpanded && state === "expanded" ? "0" : theme.divider.sidePadding};
-        margin-block: ${noMargin ? 0 : theme.divider.blockMargin};
+        height: ${require_SideBar_constants.SIDEBAR_CONSTANTS.divider.thickness};
+        margin-inline: ${fullWidth || fullWidthWhenExpanded && state === "expanded" ? "0" : require_SideBar_constants.SIDEBAR_CONSTANTS.divider.sidePadding[state]};
+        margin-block: ${noMargin ? 0 : require_SideBar_constants.SIDEBAR_CONSTANTS.divider.blockMargin};
       `));
 //#endregion
 exports.SideBarDivider = SideBarDivider;

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

@@ -1,3 +1,4 @@
+import { SIDEBAR_CONSTANTS } from "../../SideBar.constants.js";
 import { useStateStyle } from "../../SideBar.utils.js";
 import _styled, { css } from "styled-components";
 //#region src/SideBar/components/Divider/Divider.style.ts
@@ -6,9 +7,9 @@ var SideBarDivider = _styled.div.withConfig({
 	componentId: "RedisUI__sc-191o8ht-0"
 })(["background-clip:content-box;transition:all 1s;flex:none;@media (prefers-reduced-motion:reduce){transition:none;}", ";"], ({ fullWidthWhenExpanded, fullWidth, noMargin }) => useStateStyle((theme, state) => css`
         background: ${() => theme.divider.color};
-        height: ${theme.divider.thickness};
-        margin-inline: ${fullWidth || fullWidthWhenExpanded && state === "expanded" ? "0" : theme.divider.sidePadding};
-        margin-block: ${noMargin ? 0 : theme.divider.blockMargin};
+        height: ${SIDEBAR_CONSTANTS.divider.thickness};
+        margin-inline: ${fullWidth || fullWidthWhenExpanded && state === "expanded" ? "0" : SIDEBAR_CONSTANTS.divider.sidePadding[state]};
+        margin-block: ${noMargin ? 0 : SIDEBAR_CONSTANTS.divider.blockMargin};
       `));
 //#endregion
 export { SideBarDivider };

package/dist/SideBar/components/Footer/components/MetaData/MetaData.style.cjs

@@ -1,4 +1,5 @@
 const require_runtime = require("../../../../../_virtual/_rolldown/runtime.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);
@@ -6,10 +7,10 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var FooterMetadata = styled_components.default.div.withConfig({
 	displayName: "MetaDatastyle__FooterMetadata",
 	componentId: "RedisUI__sc-1372jkw-0"
-})(["display:flex;position:relative;flex-direction:column;justify-content:flex-end;overflow:hidden;", ""], () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
-          padding: ${theme.footer.meta.padding};
-          visibility: ${theme.footer.meta.visibility};
-          white-space: ${theme.footer.meta.whiteSpace};
+})(["display:flex;position:relative;flex-direction:column;justify-content:flex-end;overflow:hidden;", ""], () => require_SideBar_utils.useStateStyle((theme, state) => styled_components.css`
+          padding: ${require_SideBar_constants.SIDEBAR_CONSTANTS.footer.meta.padding};
+          visibility: ${theme.footer.meta.visibility[state]};
+          white-space: ${theme.footer.meta.whiteSpace[state]};
         `));
 //#endregion
 exports.FooterMetadata = FooterMetadata;

package/dist/SideBar/components/Footer/components/MetaData/MetaData.style.js

@@ -1,13 +1,14 @@
+import { SIDEBAR_CONSTANTS } from "../../../../SideBar.constants.js";
 import { useStateStyle } from "../../../../SideBar.utils.js";
 import _styled, { css } from "styled-components";
 //#region src/SideBar/components/Footer/components/MetaData/MetaData.style.ts
 var FooterMetadata = _styled.div.withConfig({
 	displayName: "MetaDatastyle__FooterMetadata",
 	componentId: "RedisUI__sc-1372jkw-0"
-})(["display:flex;position:relative;flex-direction:column;justify-content:flex-end;overflow:hidden;", ""], () => useStateStyle((theme) => css`
-          padding: ${theme.footer.meta.padding};
-          visibility: ${theme.footer.meta.visibility};
-          white-space: ${theme.footer.meta.whiteSpace};
+})(["display:flex;position:relative;flex-direction:column;justify-content:flex-end;overflow:hidden;", ""], () => useStateStyle((theme, state) => css`
+          padding: ${SIDEBAR_CONSTANTS.footer.meta.padding};
+          visibility: ${theme.footer.meta.visibility[state]};
+          white-space: ${theme.footer.meta.whiteSpace[state]};
         `));
 //#endregion
 export { FooterMetadata };

package/dist/SideBar/components/Group/components/Title/Title.style.cjs

@@ -1,5 +1,6 @@
 const require_runtime = require("../../../../../_virtual/_rolldown/runtime.cjs");
 const require_Typography = require("../../../../../Typography/Typography.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);
@@ -7,9 +8,7 @@ styled_components = require_runtime.__toESM(styled_components, 1);
 var Container = styled_components.default.div.withConfig({
 	displayName: "Titlestyle__Container",
 	componentId: "RedisUI__sc-1qd2bt1-0"
-})(["display:block;overflow:hidden;", ""], () => require_SideBar_utils.useStateStyle((theme) => styled_components.css`
-        padding: ${theme.groupTitle.padding};
-      `));
+})(["display:block;overflow:hidden;padding:", ";"], require_SideBar_constants.SIDEBAR_CONSTANTS.groupTitle.padding);
 var Label = (0, styled_components.default)(require_Typography.default.Body).withConfig({
 	displayName: "Titlestyle__Label",
 	componentId: "RedisUI__sc-1qd2bt1-1"

package/dist/SideBar/components/Group/components/Title/Title.style.js

@@ -1,13 +1,12 @@
 import Typography from "../../../../../Typography/Typography.js";
+import { SIDEBAR_CONSTANTS } from "../../../../SideBar.constants.js";
 import { useStateStyle } from "../../../../SideBar.utils.js";
 import _styled, { css } from "styled-components";
 //#region src/SideBar/components/Group/components/Title/Title.style.ts
 var Container = _styled.div.withConfig({
 	displayName: "Titlestyle__Container",
 	componentId: "RedisUI__sc-1qd2bt1-0"
-})(["display:block;overflow:hidden;", ""], () => useStateStyle((theme) => css`
-        padding: ${theme.groupTitle.padding};
-      `));
+})(["display:block;overflow:hidden;padding:", ";"], SIDEBAR_CONSTANTS.groupTitle.padding);
 var Label = _styled(Typography.Body).withConfig({
 	displayName: "Titlestyle__Label",
 	componentId: "RedisUI__sc-1qd2bt1-1"