@redis-ui/components 41.11.0 → 42.7.0

package/dist/SideBar/components/Item/Item.js

@@ -5,7 +5,7 @@ import Tooltip from "../../../Tooltip/Tooltip.js";
 import Icon from "./components/Icon/Icon.js";
 import Text from "./components/Text/Text.js";
 import Button from "./components/Button/Button.js";
-import { Item as Item$1, TooltipContent } from "./Item.style.js";
+import { SideBarItem, TooltipContent } from "./Item.style.js";
 const Item = Object.assign(({
   tooltipProps,
   isActive = false,
@@ -17,7 +17,8 @@ const Item = Object.assign(({
     isExpanded
   } = useSideBarContext();
   const activeLinkAttributes = isActive ? {
-    "data-state": "active"
+    "data-state": "active",
+    "aria-current": "page"
   } : {};
   const handleKeyDown = restProps.onClick && !onKeyDown ? (e) => {
     var _a;
@@ -28,7 +29,7 @@ const Item = Object.assign(({
     }
   } : onKeyDown;
   const tabIndex = restProps.onClick && !isActive ? 0 : void 0;
-  const item = jsxRuntimeExports.jsx(Item$1, {
+  const item = jsxRuntimeExports.jsx(SideBarItem, {
     "data-role": "navlink",
     ...restProps,
     ...activeLinkAttributes,

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

@@ -7,18 +7,9 @@ const SideBar_utils = require("../../SideBar.utils.cjs");
 const Tooltip = require("../../../Tooltip/Tooltip.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const appear = _styled.keyframes`
-  0% {
-    opacity:0;
-  }
-
-  100% {
-    opacity:  1;
-  }
-`;
 const maps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor];
-const Item = _styled__default.default.li.withConfig({
-  displayName: "Itemstyle__Item",
+const SideBarItem = _styled__default.default.li.withConfig({
+  displayName: "Itemstyle__SideBarItem",
   componentId: "RedisUI__sc-rtt1mk-0"
 })(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => redisUiStyles.useTheme().core.focus.size, () => redisUiStyles.useTheme().core.focus.color, () => redisUiStyles.useTheme().core.focus.size, () => {
   return SideBar_utils.useStateStyle(({
@@ -57,6 +48,5 @@ const TooltipContent = _styled__default.default(Tooltip.default.Content.Text).wi
 })(["", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           color: ${theme.item.tooltip.textColor};
         `));
-exports.Item = Item;
+exports.SideBarItem = SideBarItem;
 exports.TooltipContent = TooltipContent;
-exports.appear = appear;

package/dist/SideBar/components/Item/Item.style.d.ts

@@ -1,3 +1,2 @@
-export declare const appear: import("styled-components").Keyframes;
-export declare const Item: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const SideBarItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const TooltipContent: import("styled-components").StyledComponent<(props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,20 +1,11 @@
-import _styled, { keyframes, css } from "styled-components";
+import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { styleFromTokens, tokenMaps } from "../../../Helpers/css.utils.js";
 import { useStateStyle } from "../../SideBar.utils.js";
 import Tooltip from "../../../Tooltip/Tooltip.js";
-const appear = keyframes`
-  0% {
-    opacity:0;
-  }
-
-  100% {
-    opacity:  1;
-  }
-`;
 const maps = [tokenMaps.bgColor, tokenMaps.textColor];
-const Item = _styled.li.withConfig({
-  displayName: "Itemstyle__Item",
+const SideBarItem = _styled.li.withConfig({
+  displayName: "Itemstyle__SideBarItem",
   componentId: "RedisUI__sc-rtt1mk-0"
 })(["position:relative;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;text-decoration:none;transition:background 0.3s;&:focus-visible{outline:", " solid ", ";outline-offset:-", ";}", ";& > svg{transition:inherit;}"], () => useTheme().core.focus.size, () => useTheme().core.focus.color, () => useTheme().core.focus.size, () => {
   return useStateStyle(({
@@ -54,7 +45,6 @@ const TooltipContent = _styled(Tooltip.Content.Text).withConfig({
           color: ${theme.item.tooltip.textColor};
         `));
 export {
-  Item,
-  TooltipContent,
-  appear
+  SideBarItem,
+  TooltipContent
 };

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

@@ -13,7 +13,7 @@ const Button = React__default.default.forwardRef(({
   const {
     isExpanded
   } = SideBar_context.useSideBarContext();
-  return isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.ItemButton, {
+  return isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.SideBarItemButton, {
     size,
     ref,
     ...props

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

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import React__default from "react";
 import { useSideBarContext } from "../../../../SideBar.context.js";
-import { ItemButton } from "./Button.style.js";
+import { SideBarItemButton } from "./Button.style.js";
 const Button = React__default.forwardRef(({
   size = "M",
   ...props
@@ -9,7 +9,7 @@ const Button = React__default.forwardRef(({
   const {
     isExpanded
   } = useSideBarContext();
-  return isExpanded ? jsxRuntimeExports.jsx(ItemButton, {
+  return isExpanded ? jsxRuntimeExports.jsx(SideBarItemButton, {
     size,
     ref,
     ...props

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

@@ -5,8 +5,8 @@ const ActionIconButton = require("../../../../../Button/ActionIconButton/ActionI
 const SideBar_utils = require("../../../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ItemButton = _styled__default.default(ActionIconButton.default).withConfig({
-  displayName: "Buttonstyle__ItemButton",
+const SideBarItemButton = _styled__default.default(ActionIconButton.default).withConfig({
+  displayName: "Buttonstyle__SideBarItemButton",
   componentId: "RedisUI__sc-13x3wha-0"
 })(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           background-color: ${theme.item.button.bgColor};
@@ -15,4 +15,4 @@ const ItemButton = _styled__default.default(ActionIconButton.default).withConfig
           color: ${theme.item.button.textColor};
           border-style: solid;
         `));
-exports.ItemButton = ItemButton;
+exports.SideBarItemButton = SideBarItemButton;

package/dist/SideBar/components/Item/components/Button/Button.style.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const ItemButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const SideBarItemButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

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

@@ -1,8 +1,8 @@
 import _styled, { css } from "styled-components";
 import ActionIconButton from "../../../../../Button/ActionIconButton/ActionIconButton.js";
 import { useStateStyle } from "../../../../SideBar.utils.js";
-const ItemButton = _styled(ActionIconButton).withConfig({
-  displayName: "Buttonstyle__ItemButton",
+const SideBarItemButton = _styled(ActionIconButton).withConfig({
+  displayName: "Buttonstyle__SideBarItemButton",
   componentId: "RedisUI__sc-13x3wha-0"
 })(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => useStateStyle((theme) => css`
           background-color: ${theme.item.button.bgColor};
@@ -12,5 +12,5 @@ const ItemButton = _styled(ActionIconButton).withConfig({
           border-style: solid;
         `));
 export {
-  ItemButton
+  SideBarItemButton
 };

package/dist/SideBar/components/Item/components/Icon/Icon.cjs

@@ -5,7 +5,8 @@ const Icon_style = require("./Icon.style.cjs");
 const Icon = ({
   icon: ItemIcon,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Icon_style.ItemIcon, {
+}) => jsxRuntime.jsxRuntimeExports.jsx(Icon_style.SideBarItemIcon, {
+  "aria-hidden": true,
   ...restProps,
   children: jsxRuntime.jsxRuntimeExports.jsx(ItemIcon, {
     size: "L",

package/dist/SideBar/components/Item/components/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
-import { ItemIconProps } from './Icon.types';
-declare const Icon: ({ icon: ItemIcon, ...restProps }: ItemIconProps) => import("react/jsx-runtime").JSX.Element;
+import { SideBarItemIconProps } from './Icon.types';
+declare const Icon: ({ icon: ItemIcon, ...restProps }: SideBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
 export default Icon;

package/dist/SideBar/components/Item/components/Icon/Icon.js

@@ -1,11 +1,12 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { ItemIcon } from "./Icon.style.js";
+import { SideBarItemIcon } from "./Icon.style.js";
 const Icon = ({
-  icon: ItemIcon$1,
+  icon: ItemIcon,
   ...restProps
-}) => jsxRuntimeExports.jsx(ItemIcon, {
+}) => jsxRuntimeExports.jsx(SideBarItemIcon, {
+  "aria-hidden": true,
   ...restProps,
-  children: jsxRuntimeExports.jsx(ItemIcon$1, {
+  children: jsxRuntimeExports.jsx(ItemIcon, {
     size: "L",
     customColor: "currentColor"
   })

package/dist/SideBar/components/Item/components/Icon/Icon.style.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ItemIcon = _styled__default.default.div.withConfig({
-  displayName: "Iconstyle__ItemIcon",
+const SideBarItemIcon = _styled__default.default.div.withConfig({
+  displayName: "Iconstyle__SideBarItemIcon",
   componentId: "RedisUI__sc-rzp0r5-0"
 })(["display:flex;align-items:center;flex:none;"]);
-exports.ItemIcon = ItemIcon;
+exports.SideBarItemIcon = SideBarItemIcon;

package/dist/SideBar/components/Item/components/Icon/Icon.style.d.ts

@@ -1 +1 @@
-export declare const ItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideBarItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/SideBar/components/Item/components/Icon/Icon.style.js

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
-const ItemIcon = _styled.div.withConfig({
-  displayName: "Iconstyle__ItemIcon",
+const SideBarItemIcon = _styled.div.withConfig({
+  displayName: "Iconstyle__SideBarItemIcon",
   componentId: "RedisUI__sc-rzp0r5-0"
 })(["display:flex;align-items:center;flex:none;"]);
 export {
-  ItemIcon
+  SideBarItemIcon
 };

package/dist/SideBar/components/Item/components/Icon/Icon.types.d.ts

@@ -1,4 +1,4 @@
 import { IconType } from '@redislabsdev/redis-ui-icons';
-export interface ItemIconProps {
+export interface SideBarItemIconProps {
     icon: IconType;
 }

package/dist/SideBar/components/Item/components/Text/Text.cjs

@@ -1,16 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const SideBar_context = require("../../../../SideBar.context.cjs");
 const Text_style = require("./Text.style.cjs");
-const Text = (props) => {
-  const {
-    isExpanded,
-    transitionEnd
-  } = SideBar_context.useSideBarContext();
-  return isExpanded && transitionEnd ? jsxRuntime.jsxRuntimeExports.jsx(Text_style.Text, {
-    component: "span",
-    ...props
-  }) : null;
-};
+const Text = (props) => jsxRuntime.jsxRuntimeExports.jsx(Text_style.SideBarItemText, {
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  component: "span",
+  ...props
+});
 exports.default = Text;

package/dist/SideBar/components/Item/components/Text/Text.d.ts

@@ -1,3 +1,3 @@
-import { TextProps } from './Text.types';
-declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element | null;
+import { SideBarItemTextProps } from './Text.types';
+declare const Text: (props: SideBarItemTextProps) => import("react/jsx-runtime").JSX.Element;
 export default Text;

package/dist/SideBar/components/Item/components/Text/Text.js

@@ -1,16 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { useSideBarContext } from "../../../../SideBar.context.js";
-import { Text as Text$1 } from "./Text.style.js";
-const Text = (props) => {
-  const {
-    isExpanded,
-    transitionEnd
-  } = useSideBarContext();
-  return isExpanded && transitionEnd ? jsxRuntimeExports.jsx(Text$1, {
-    component: "span",
-    ...props
-  }) : null;
-};
+import { SideBarItemText } from "./Text.style.js";
+const Text = (props) => jsxRuntimeExports.jsx(SideBarItemText, {
+  ellipsis: true,
+  tooltipOnEllipsis: true,
+  component: "span",
+  ...props
+});
 export {
   Text as default
 };

package/dist/SideBar/components/Item/components/Text/Text.style.cjs

@@ -1,12 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const Item_style = require("../../Item.style.cjs");
+const SideBar_context = require("../../../../SideBar.context.cjs");
 const Typography = require("../../../../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Text = _styled__default.default(Typography.default.Body).withConfig({
-  displayName: "Textstyle__Text",
+const SideBarItemText = _styled__default.default(Typography.default.Body).withConfig({
+  displayName: "Textstyle__SideBarItemText",
   componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s;overflow:hidden;white-space:nowrap;animation:", " 0.4s forwards;"], Item_style.appear);
-exports.Text = Text;
+})(["transition:width 0.6s,opacity 0.4s;opacity:", ";"], () => {
+  const {
+    isExpanded,
+    transitionEnd
+  } = SideBar_context.useSideBarContext();
+  return isExpanded && transitionEnd ? "1" : "0";
+});
+exports.SideBarItemText = SideBarItemText;

package/dist/SideBar/components/Item/components/Text/Text.style.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const Text: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const SideBarItemText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/SideBar/components/Item/components/Text/Text.style.js

@@ -1,10 +1,16 @@
 import _styled from "styled-components";
-import { appear } from "../../Item.style.js";
+import { useSideBarContext } from "../../../../SideBar.context.js";
 import Typography from "../../../../../Typography/Typography.js";
-const Text = _styled(Typography.Body).withConfig({
-  displayName: "Textstyle__Text",
+const SideBarItemText = _styled(Typography.Body).withConfig({
+  displayName: "Textstyle__SideBarItemText",
   componentId: "RedisUI__sc-17tjfvd-0"
-})(["transition:width 0.6s;overflow:hidden;white-space:nowrap;animation:", " 0.4s forwards;"], appear);
+})(["transition:width 0.6s,opacity 0.4s;opacity:", ";"], () => {
+  const {
+    isExpanded,
+    transitionEnd
+  } = useSideBarContext();
+  return isExpanded && transitionEnd ? "1" : "0";
+});
 export {
-  Text
+  SideBarItemText
 };

package/dist/SideBar/components/Item/components/Text/Text.types.d.ts

@@ -1,2 +1,2 @@
 import { TypographyBodyProps } from '../../../../../Typography';
-export type TextProps = TypographyBodyProps;
+export type SideBarItemTextProps = TypographyBodyProps;

package/dist/SideBar/components/ItemsContainer/ItemsContainer.cjs

@@ -2,7 +2,12 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const ItemsContainer_style = require("./ItemsContainer.style.cjs");
-const SideBarItemsContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(ItemsContainer_style.ItemsWrapper, {
+const SideBarItemsContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(ItemsContainer_style.SideBarItemsContainer, {
+  component: "ul",
+  direction: "column",
+  gap: "0",
+  flex: "none",
+  selfAlign: "stretch",
   ...props
 });
 exports.default = SideBarItemsContainer;

package/dist/SideBar/components/ItemsContainer/ItemsContainer.d.ts

@@ -1,3 +1,3 @@
-import { ItemsContainerProps } from './ItemsContainer.types';
-declare const SideBarItemsContainer: (props: ItemsContainerProps) => import("react/jsx-runtime").JSX.Element;
+import { SideBarItemsContainerProps } from './ItemsContainer.types';
+declare const SideBarItemsContainer: (props: SideBarItemsContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default SideBarItemsContainer;

package/dist/SideBar/components/ItemsContainer/ItemsContainer.js

@@ -1,6 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { ItemsWrapper } from "./ItemsContainer.style.js";
-const SideBarItemsContainer = (props) => jsxRuntimeExports.jsx(ItemsWrapper, {
+import { SideBarItemsContainer as SideBarItemsContainer$1 } from "./ItemsContainer.style.js";
+const SideBarItemsContainer = (props) => jsxRuntimeExports.jsx(SideBarItemsContainer$1, {
+  component: "ul",
+  direction: "column",
+  gap: "0",
+  flex: "none",
+  selfAlign: "stretch",
   ...props
 });
 export {

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
+const FlexGroup = require("../../../Layouts/FlexGroup/FlexGroup.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ItemsWrapper = _styled__default.default.ul.withConfig({
-  displayName: "ItemsContainerstyle__ItemsWrapper",
+const SideBarItemsContainer = _styled__default.default(FlexGroup.FlexGroup).withConfig({
+  displayName: "ItemsContainerstyle__SideBarItemsContainer",
   componentId: "RedisUI__sc-1lxfl5b-0"
-})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;padding:0;margin:0;"]);
-exports.ItemsWrapper = ItemsWrapper;
+})(["text-transform:capitalize;padding:0;margin:0;"]);
+exports.SideBarItemsContainer = SideBarItemsContainer;

package/dist/SideBar/components/ItemsContainer/ItemsContainer.style.d.ts

@@ -1 +1 @@
-export declare const ItemsWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const SideBarItemsContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("../../../Layouts").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,8 +1,9 @@
 import _styled from "styled-components";
-const ItemsWrapper = _styled.ul.withConfig({
-  displayName: "ItemsContainerstyle__ItemsWrapper",
+import { FlexGroup } from "../../../Layouts/FlexGroup/FlexGroup.js";
+const SideBarItemsContainer = _styled(FlexGroup).withConfig({
+  displayName: "ItemsContainerstyle__SideBarItemsContainer",
   componentId: "RedisUI__sc-1lxfl5b-0"
-})(["display:flex;flex-direction:column;flex:none;text-transform:capitalize;padding:0;margin:0;"]);
+})(["text-transform:capitalize;padding:0;margin:0;"]);
 export {
-  ItemsWrapper
+  SideBarItemsContainer
 };

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

@@ -1,4 +1,2 @@
-import React from 'react';
-export interface ItemsContainerProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
-    children: React.ReactNode;
-}
+import { FlexGroupProps } from '../../../Layouts';
+export type SideBarItemsContainerProps = Omit<FlexGroupProps, 'direction'>;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.cjs

@@ -3,6 +3,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const ScrollContainer_style = require("./ScrollContainer.style.cjs");
 const ScrollContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(ScrollContainer_style.ScrollContainer, {
+  direction: "column",
+  gap: "0",
+  flex: "1",
+  selfAlign: "stretch",
   ...props
 });
 exports.default = ScrollContainer;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.d.ts

@@ -1,3 +1,3 @@
-import { ScrollContainerProps } from './ScrollContainer.types';
-declare const ScrollContainer: (props: ScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
+import { SideBarScrollContainerProps } from './ScrollContainer.types';
+declare const ScrollContainer: (props: SideBarScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollContainer;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.js

@@ -1,6 +1,10 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { ScrollContainer as ScrollContainer$1 } from "./ScrollContainer.style.js";
 const ScrollContainer = (props) => jsxRuntimeExports.jsx(ScrollContainer$1, {
+  direction: "column",
+  gap: "0",
+  flex: "1",
+  selfAlign: "stretch",
   ...props
 });
 export {

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
+const FlexGroup = require("../../../Layouts/FlexGroup/FlexGroup.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ScrollContainer = _styled__default.default.div.withConfig({
+const ScrollContainer = _styled__default.default(FlexGroup.FlexGroup).withConfig({
   displayName: "ScrollContainerstyle__ScrollContainer",
   componentId: "RedisUI__sc-15iez38-0"
-})(["display:flex;flex-direction:column;overflow-y:auto;flex:1;"]);
+})(["overflow-y:auto;"]);
 exports.ScrollContainer = ScrollContainer;

package/dist/SideBar/components/ScrollContainer/ScrollContainer.style.d.ts

@@ -1 +1 @@
-export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("../../../Layouts").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,8 +1,9 @@
 import _styled from "styled-components";
-const ScrollContainer = _styled.div.withConfig({
+import { FlexGroup } from "../../../Layouts/FlexGroup/FlexGroup.js";
+const ScrollContainer = _styled(FlexGroup).withConfig({
   displayName: "ScrollContainerstyle__ScrollContainer",
   componentId: "RedisUI__sc-15iez38-0"
-})(["display:flex;flex-direction:column;overflow-y:auto;flex:1;"]);
+})(["overflow-y:auto;"]);
 export {
   ScrollContainer
 };

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

@@ -1,2 +1,2 @@
-import { ComposeElementProps } from '../../../Helpers/common.types';
-export type ScrollContainerProps = ComposeElementProps;
+import { FlexGroupProps } from '../../../Layouts';
+export type SideBarScrollContainerProps = Omit<FlexGroupProps, 'direction'>;

package/dist/SideBar/components/SideBarLogo/SideBarLogo.cjs

@@ -5,7 +5,8 @@ const SideBarLogo_style = require("./SideBarLogo.style.cjs");
 const SideBarLogo = ({
   logoIcon: LogoIcon,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(SideBarLogo_style.Icon, {
+}) => jsxRuntime.jsxRuntimeExports.jsx(SideBarLogo_style.SideBarLogo, {
+  "aria-hidden": true,
   ...restProps,
   children: jsxRuntime.jsxRuntimeExports.jsx(LogoIcon, {
     size: "XL"

package/dist/SideBar/components/SideBarLogo/SideBarLogo.js

@@ -1,9 +1,10 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { Icon } from "./SideBarLogo.style.js";
+import { SideBarLogo as SideBarLogo$1 } from "./SideBarLogo.style.js";
 const SideBarLogo = ({
   logoIcon: LogoIcon,
   ...restProps
-}) => jsxRuntimeExports.jsx(Icon, {
+}) => jsxRuntimeExports.jsx(SideBarLogo$1, {
+  "aria-hidden": true,
   ...restProps,
   children: jsxRuntimeExports.jsx(LogoIcon, {
     size: "XL"

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

@@ -4,10 +4,10 @@ const _styled = require("styled-components");
 const SideBar_utils = require("../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Icon = _styled__default.default.span.withConfig({
-  displayName: "SideBarLogostyle__Icon",
+const SideBarLogo = _styled__default.default.span.withConfig({
+  displayName: "SideBarLogostyle__SideBarLogo",
   componentId: "RedisUI__sc-1u1jhxg-0"
 })(["display:flex;z-index:1;transition:padding-left 0.2s;", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           padding-left: ${theme.logo.offset};
         `));
-exports.Icon = Icon;
+exports.SideBarLogo = SideBarLogo;

package/dist/SideBar/components/SideBarLogo/SideBarLogo.style.d.ts

@@ -1 +1 @@
-export declare const Icon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SideBarLogo: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,11 +1,11 @@
 import _styled, { css } from "styled-components";
 import { useStateStyle } from "../../SideBar.utils.js";
-const Icon = _styled.span.withConfig({
-  displayName: "SideBarLogostyle__Icon",
+const SideBarLogo = _styled.span.withConfig({
+  displayName: "SideBarLogostyle__SideBarLogo",
   componentId: "RedisUI__sc-1u1jhxg-0"
 })(["display:flex;z-index:1;transition:padding-left 0.2s;", ""], () => useStateStyle((theme) => css`
           padding-left: ${theme.logo.offset};
         `));
 export {
-  Icon
+  SideBarLogo
 };

package/dist/Skeleton/Skeleton.d.ts

@@ -4,7 +4,7 @@ import { SkeletonProps } from './Skeleton.types';
  * @deprecated This component will be removed in future versions
  */
 declare const Skeleton: (({ circle, ...restSkeletonProps }: SkeletonProps) => import("react/jsx-runtime").JSX.Element) & {
-    Card: (props: import("..").CardProps) => import("react/jsx-runtime").JSX.Element;
+    Card: (props: import("./components/Card/Card.types").SkeletonCardProps) => import("react/jsx-runtime").JSX.Element;
     Grid: ({ columns, children, direction, gap }: import("./components/Grid/Grid.types").GridProps) => import("react/jsx-runtime").JSX.Element;
     Circle: ({ width, count, darkShade }: import("./Skeleton.types").SkeletonShapeProps) => import("react/jsx-runtime").JSX.Element;
     Square: ({ width, count, height, borderRadius, darkShade }: import("./Skeleton.types").SkeletonSquareProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Skeleton/components/Card/Card.style.d.ts

@@ -1,4 +1,4 @@
 export declare const SkeletonCard: import("styled-components").StyledComponent<"div", any, {
-    width?: string | number | undefined;
-    height?: string | number | undefined;
+    width?: string | number;
+    height?: string | number;
 }, never>;

package/dist/Skeleton/components/Grid/Grid.style.d.ts

@@ -1,4 +1,4 @@
 export declare const GridContainer: import("styled-components").StyledComponent<"div", any, {
-    direction: 'row' | 'column';
+    direction: "row" | "column";
     gap: string;
 }, never>;

package/dist/Skeleton/components/Grid/Grid.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface GridProps {
     children: React.ReactNode;
     columns: number;

package/dist/Skeleton/hooks/useShapeProps.d.ts

@@ -1,5 +1,5 @@
 import { SkeletonShapeProps } from '../Skeleton.types';
-export declare const useShapeProps: ({ darkShade }: Pick<SkeletonShapeProps, 'darkShade'>) => {
+export declare const useShapeProps: ({ darkShade }: Pick<SkeletonShapeProps, "darkShade">) => {
     duration: number;
     baseColor: string;
     highlightColor: string;