@redis-ui/components 42.0.0 → 42.7.0

package/dist/SideBar/SideBar.style.js

@@ -1,5 +1,6 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { FlexGroup } from "../Layouts/FlexGroup/FlexGroup.js";
 const useRootStateStyle = (getStyle) => {
   const {
     expanded,
@@ -14,10 +15,10 @@ const useRootStateStyle = (getStyle) => {
     }
   `;
 };
-const SideBarContainer = _styled.nav.withConfig({
+const SideBarContainer = _styled(FlexGroup).withConfig({
   displayName: "SideBarstyle__SideBarContainer",
   componentId: "RedisUI__sc-suwica-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => css`
+})(["position:relative;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
         width: ${theme.width};

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

@@ -1,9 +1,6 @@
-import React from 'react';
 import { TooltipContentProps } from '../Tooltip/components/Content/Content.types';
-interface SideBarCompositionBaseProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
-}
-export interface SideBarProps extends SideBarCompositionBaseProps {
+import { FlexGroupProps } from '../Layouts';
+export interface SideBarProps extends Omit<FlexGroupProps, 'direction'> {
     isExpanded: boolean;
 }
 export interface SideBarContextProps {
@@ -15,4 +12,3 @@ export interface SideBarContextProps {
 export type SideBarTooltipProps = Omit<TooltipContentProps, 'backgroundColor' | 'children' | 'content' | 'textColor'> & {
     text?: string;
 };
-export {};

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"]["collapsed"], state: keyof Theme["components"]["sideBar"]) => FlattenInterpolation<ThemeProps<Theme>>) => FlattenInterpolation<ThemeProps<any>>;

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

@@ -19,30 +19,27 @@ const Button = ({
     isExpanded,
     transitionEnd
   } = SideBar_context.useSideBarContext();
-  const getCollapsedButtonContent = () => jsxRuntime.jsxRuntimeExports.jsx(Button_style.FadeInAnimationSvg, {
-    children: jsxRuntime.jsxRuntimeExports.jsx(ButtonCollapsedIcon, {
-      size: "M",
-      customColor: "currentColor"
-    })
-  });
-  const getExpandedButtonContent = () => jsxRuntime.jsxRuntimeExports.jsx(Button_style.FadeInAnimationText, {
-    children: buttonExpandedContent
-  });
-  return isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.SideBarButton, {
+  const button = jsxRuntime.jsxRuntimeExports.jsx(Button_style.SideBarButton, {
     size: "large",
+    "aria-label": isExpanded ? void 0 : tooltipText,
     ...rest,
-    children: transitionEnd ? getExpandedButtonContent() : getCollapsedButtonContent()
-  }) : jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
+    children: isExpanded && transitionEnd ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.FadeInAnimationText, {
+      children: buttonExpandedContent
+    }) : jsxRuntime.jsxRuntimeExports.jsx(Button_style.FadeInAnimationSvg, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(ButtonCollapsedIcon, {
+        size: "M",
+        customColor: "currentColor",
+        "aria-hidden": true
+      })
+    })
+  });
+  return isExpanded ? button : jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
     ...tooltipProps,
     placement,
     content: jsxRuntime.jsxRuntimeExports.jsx(Button_style.TooltipContent, {
       children: tooltipText
     }),
-    children: jsxRuntime.jsxRuntimeExports.jsx(Button_style.SideBarButton, {
-      size: "large",
-      ...rest,
-      children: getCollapsedButtonContent()
-    })
+    children: button
   });
 };
 exports.default = Button;

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

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { PlusIcon } from "@redislabsdev/redis-ui-icons";
 import { useSideBarContext } from "../../SideBar.context.js";
 import Tooltip from "../../../Tooltip/Tooltip.js";
-import { SideBarButton, TooltipContent, FadeInAnimationSvg, FadeInAnimationText } from "./Button.style.js";
+import { SideBarButton, FadeInAnimationText, FadeInAnimationSvg, TooltipContent } from "./Button.style.js";
 const Button = ({
   tooltipProps: {
     text: tooltipText,
@@ -17,30 +17,27 @@ const Button = ({
     isExpanded,
     transitionEnd
   } = useSideBarContext();
-  const getCollapsedButtonContent = () => jsxRuntimeExports.jsx(FadeInAnimationSvg, {
-    children: jsxRuntimeExports.jsx(ButtonCollapsedIcon, {
-      size: "M",
-      customColor: "currentColor"
-    })
-  });
-  const getExpandedButtonContent = () => jsxRuntimeExports.jsx(FadeInAnimationText, {
-    children: buttonExpandedContent
-  });
-  return isExpanded ? jsxRuntimeExports.jsx(SideBarButton, {
+  const button = jsxRuntimeExports.jsx(SideBarButton, {
     size: "large",
+    "aria-label": isExpanded ? void 0 : tooltipText,
     ...rest,
-    children: transitionEnd ? getExpandedButtonContent() : getCollapsedButtonContent()
-  }) : jsxRuntimeExports.jsx(Tooltip, {
+    children: isExpanded && transitionEnd ? jsxRuntimeExports.jsx(FadeInAnimationText, {
+      children: buttonExpandedContent
+    }) : jsxRuntimeExports.jsx(FadeInAnimationSvg, {
+      children: jsxRuntimeExports.jsx(ButtonCollapsedIcon, {
+        size: "M",
+        customColor: "currentColor",
+        "aria-hidden": true
+      })
+    })
+  });
+  return isExpanded ? button : jsxRuntimeExports.jsx(Tooltip, {
     ...tooltipProps,
     placement,
     content: jsxRuntimeExports.jsx(TooltipContent, {
       children: tooltipText
     }),
-    children: jsxRuntimeExports.jsx(SideBarButton, {
-      size: "large",
-      ...rest,
-      children: getCollapsedButtonContent()
-    })
+    children: button
   });
 };
 export {

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const Button = require("../../../Button/Button.cjs");
-const Item_style = require("../Item/Item.style.cjs");
 const SideBar_utils = require("../../SideBar.utils.cjs");
 const Tooltip = require("../../../Tooltip/Tooltip.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -10,18 +9,27 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarButton = _styled__default.default(Button.default).withConfig({
   displayName: "Buttonstyle__SideBarButton",
   componentId: "RedisUI__sc-ngkny4-0"
-})(["margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => SideBar_utils.useStateStyle((theme) => _styled.css`
+})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           height: ${theme.button.height};
           width: ${theme.button.width};
         `));
+const appear = _styled.keyframes`
+  0% {
+    opacity:0;
+  }
+
+  100% {
+    opacity:  1;
+  }
+`;
 const FadeInAnimationText = _styled__default.default.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationText",
   componentId: "RedisUI__sc-ngkny4-1"
-})(["animation:", " 0.3s forwards;"], Item_style.appear);
+})(["animation:", " 0.3s forwards;"], appear);
 const FadeInAnimationSvg = _styled__default.default.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationSvg",
   componentId: "RedisUI__sc-ngkny4-2"
-})(["display:flex;animation:", " 0.5s forwards;"], Item_style.appear);
+})(["display:flex;animation:", " 0.5s forwards;"], appear);
 const TooltipContent = _styled__default.default(Tooltip.default.Content.Text).withConfig({
   displayName: "Buttonstyle__TooltipContent",
   componentId: "RedisUI__sc-ngkny4-3"
@@ -32,3 +40,4 @@ exports.FadeInAnimationSvg = FadeInAnimationSvg;
 exports.FadeInAnimationText = FadeInAnimationText;
 exports.SideBarButton = SideBarButton;
 exports.TooltipContent = TooltipContent;
+exports.appear = appear;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 export declare const SideBarButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
     Icon: ({ icon, customSize, title }: import("../../../Button/components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;
+export declare const appear: import("styled-components").Keyframes;
 export declare const FadeInAnimationText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const FadeInAnimationSvg: import("styled-components").StyledComponent<"span", 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/Button/Button.style.js

@@ -1,15 +1,23 @@
-import _styled, { css } from "styled-components";
+import _styled, { keyframes, css } from "styled-components";
 import Button from "../../../Button/Button.js";
-import { appear } from "../Item/Item.style.js";
 import { useStateStyle } from "../../SideBar.utils.js";
 import Tooltip from "../../../Tooltip/Tooltip.js";
 const SideBarButton = _styled(Button).withConfig({
   displayName: "Buttonstyle__SideBarButton",
   componentId: "RedisUI__sc-ngkny4-0"
-})(["margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => useStateStyle((theme) => css`
+})(["flex-shrink:0;margin:0 auto;display:flex;position:relative;", " padding:0;transition:width 0.7s;min-width:unset;"], () => useStateStyle((theme) => css`
           height: ${theme.button.height};
           width: ${theme.button.width};
         `));
+const appear = keyframes`
+  0% {
+    opacity:0;
+  }
+
+  100% {
+    opacity:  1;
+  }
+`;
 const FadeInAnimationText = _styled.span.withConfig({
   displayName: "Buttonstyle__FadeInAnimationText",
   componentId: "RedisUI__sc-ngkny4-1"
@@ -28,5 +36,6 @@ export {
   FadeInAnimationSvg,
   FadeInAnimationText,
   SideBarButton,
-  TooltipContent
+  TooltipContent,
+  appear
 };

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

@@ -2,7 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Divider_style = require("./Divider.style.cjs");
-const Divider = (props) => jsxRuntime.jsxRuntimeExports.jsx(Divider_style.Divider, {
+const Divider = (props) => jsxRuntime.jsxRuntimeExports.jsx(Divider_style.SideBarDivider, {
+  role: "separator",
+  "aria-hidden": true,
   ...props
 });
 exports.default = Divider;

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

@@ -1,6 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { Divider as Divider$1 } from "./Divider.style.js";
-const Divider = (props) => jsxRuntimeExports.jsx(Divider$1, {
+import { SideBarDivider } from "./Divider.style.js";
+const Divider = (props) => jsxRuntimeExports.jsx(SideBarDivider, {
+  role: "separator",
+  "aria-hidden": true,
   ...props
 });
 export {

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

@@ -4,8 +4,8 @@ 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 Divider = _styled__default.default.div.withConfig({
-  displayName: "Dividerstyle__Divider",
+const SideBarDivider = _styled__default.default.div.withConfig({
+  displayName: "Dividerstyle__SideBarDivider",
   componentId: "RedisUI__sc-191o8ht-0"
 })(["background-clip:content-box;transition:all 1s;flex:none;", ";"], ({
   fullWidthWhenExpanded,
@@ -17,4 +17,4 @@ const Divider = _styled__default.default.div.withConfig({
         margin-inline: ${fullWidth || fullWidthWhenExpanded && state === "expanded" ? "0" : theme.divider.sidePadding};
         margin-block: ${noMargin ? 0 : theme.divider.blockMargin};
       `));
-exports.Divider = Divider;
+exports.SideBarDivider = SideBarDivider;

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

@@ -1,5 +1,5 @@
-export declare const Divider: import("styled-components").StyledComponent<"div", any, {
-    fullWidthWhenExpanded?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    noMargin?: boolean | undefined;
+export declare const SideBarDivider: import("styled-components").StyledComponent<"div", any, {
+    fullWidthWhenExpanded?: boolean;
+    fullWidth?: boolean;
+    noMargin?: boolean;
 }, never>;

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

@@ -1,7 +1,7 @@
 import _styled, { css } from "styled-components";
 import { useStateStyle } from "../../SideBar.utils.js";
-const Divider = _styled.div.withConfig({
-  displayName: "Dividerstyle__Divider",
+const SideBarDivider = _styled.div.withConfig({
+  displayName: "Dividerstyle__SideBarDivider",
   componentId: "RedisUI__sc-191o8ht-0"
 })(["background-clip:content-box;transition:all 1s;flex:none;", ";"], ({
   fullWidthWhenExpanded,
@@ -14,5 +14,5 @@ const Divider = _styled.div.withConfig({
         margin-block: ${noMargin ? 0 : theme.divider.blockMargin};
       `));
 export {
-  Divider
+  SideBarDivider
 };

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

@@ -1,5 +1,5 @@
-import { FooterProps } from './Footer.types';
-declare const Footer: ((props: FooterProps) => import("react/jsx-runtime").JSX.Element) & {
+import { SideBarFooterProps } from './Footer.types';
+declare const Footer: ((props: SideBarFooterProps) => import("react/jsx-runtime").JSX.Element) & {
     MetaData: ({ children, ...rest }: import("./components/MetaData/MetaData.types").MetaDataProps) => import("react/jsx-runtime").JSX.Element;
     Link: ({ children, ...rest }: import("./components/Link/Link.types").LinkProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import("./components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,2 @@
-import React from 'react';
-export interface FooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    children: React.ReactNode;
-}
+import { ComposeElementProps } from '../../../Helpers';
+export type SideBarFooterProps = ComposeElementProps;

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

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

package/dist/SideBar/components/Header/Header.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
-const React = require("react");
 const SideBar_context = require("../../SideBar.context.cjs");
 const Header_style = require("./Header.style.cjs");
 const ScreenReaderAnnounce = require("../../../ScreenReaderAnnounce/ScreenReaderAnnounce.cjs");
@@ -16,21 +15,21 @@ const Header = ({
     handleTransitionChange,
     sidebarId
   } = SideBar_context.useSideBarContext();
-  const isToggledRef = React.useRef(false);
+  const toggleButtonName = isExpanded ? "Collapse sidebar" : "Expand sidebar";
   return jsxRuntime.jsxRuntimeExports.jsxs(Header_style.SideBarHeader, {
     isExpanded,
     ...rest,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Header_style.ChildrenContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Header_style.SideBarHeaderContent, {
       children
-    }), jsxRuntime.jsxRuntimeExports.jsx(Header_style.Arrow, {
+    }), jsxRuntime.jsxRuntimeExports.jsx(Header_style.SideBarToggleButton, {
       type: "button",
       isExpanded,
       onClick: () => {
-        isToggledRef.current = true;
         handleTransitionChange(false);
         onToggle();
       },
-      "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+      "aria-label": toggleButtonName,
+      title: toggleButtonName,
       "aria-controls": sidebarId,
       "aria-expanded": isExpanded,
       children: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ChevronDownIcon, {
@@ -39,8 +38,7 @@ const Header = ({
         "aria-hidden": true
       })
     }), jsxRuntime.jsxRuntimeExports.jsx(ScreenReaderAnnounce.ScreenReaderAnnounce, {
-      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
-      allowAnnounce: isToggledRef.current
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed"
     })]
   });
 };

package/dist/SideBar/components/Header/Header.js

@@ -1,8 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { ChevronDownIcon } from "@redislabsdev/redis-ui-icons";
-import { useRef } from "react";
 import { useSideBarContext } from "../../SideBar.context.js";
-import { SideBarHeader, ChildrenContainer, Arrow } from "./Header.style.js";
+import { SideBarHeader, SideBarHeaderContent, SideBarToggleButton } from "./Header.style.js";
 import { ScreenReaderAnnounce } from "../../../ScreenReaderAnnounce/ScreenReaderAnnounce.js";
 const Header = ({
   children,
@@ -14,21 +13,21 @@ const Header = ({
     handleTransitionChange,
     sidebarId
   } = useSideBarContext();
-  const isToggledRef = useRef(false);
+  const toggleButtonName = isExpanded ? "Collapse sidebar" : "Expand sidebar";
   return jsxRuntimeExports.jsxs(SideBarHeader, {
     isExpanded,
     ...rest,
-    children: [jsxRuntimeExports.jsx(ChildrenContainer, {
+    children: [jsxRuntimeExports.jsx(SideBarHeaderContent, {
       children
-    }), jsxRuntimeExports.jsx(Arrow, {
+    }), jsxRuntimeExports.jsx(SideBarToggleButton, {
       type: "button",
       isExpanded,
       onClick: () => {
-        isToggledRef.current = true;
         handleTransitionChange(false);
         onToggle();
       },
-      "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+      "aria-label": toggleButtonName,
+      title: toggleButtonName,
       "aria-controls": sidebarId,
       "aria-expanded": isExpanded,
       children: jsxRuntimeExports.jsx(ChevronDownIcon, {
@@ -37,8 +36,7 @@ const Header = ({
         "aria-hidden": true
       })
     }), jsxRuntimeExports.jsx(ScreenReaderAnnounce, {
-      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed",
-      allowAnnounce: isToggledRef.current
+      text: isExpanded ? "Sidebar expanded" : "Sidebar collapsed"
     })]
   });
 };

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

@@ -13,12 +13,12 @@ const SideBarHeader = _styled__default.default.div.withConfig({
         box-shadow: 0px ${theme.divider.thickness} 0px 0px ${theme.header.dividerColor};
         margin: ${theme.header.margin};
       `));
-const ChildrenContainer = _styled__default.default.div.withConfig({
-  displayName: "Headerstyle__ChildrenContainer",
+const SideBarHeaderContent = _styled__default.default.div.withConfig({
+  displayName: "Headerstyle__SideBarHeaderContent",
   componentId: "RedisUI__sc-6wicp7-1"
 })(["width:100%;height:100%;overflow:hidden;display:flex;align-items:center;"]);
-const Arrow = _styled__default.default.button.withConfig({
-  displayName: "Headerstyle__Arrow",
+const SideBarToggleButton = _styled__default.default.button.withConfig({
+  displayName: "Headerstyle__SideBarToggleButton",
   componentId: "RedisUI__sc-6wicp7-2"
 })(["all:unset;position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;border-radius:100%;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " ", ";& > svg{transition:0.3s;transform:", ";@media (prefers-reduced-motion:reduce){transition:none;}}"], ({
   isExpanded
@@ -40,6 +40,6 @@ const Arrow = _styled__default.default.button.withConfig({
         `), redisUiStyles.getFocusStyle("0px"), ({
   isExpanded
 }) => isExpanded ? "rotate(90deg)" : "rotate(-90deg)");
-exports.Arrow = Arrow;
-exports.ChildrenContainer = ChildrenContainer;
 exports.SideBarHeader = SideBarHeader;
+exports.SideBarHeaderContent = SideBarHeaderContent;
+exports.SideBarToggleButton = SideBarToggleButton;

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

@@ -1,7 +1,7 @@
 export declare const SideBarHeader: import("styled-components").StyledComponent<"div", any, {
-    isExpanded?: boolean | undefined;
+    isExpanded?: boolean;
 }, never>;
-export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Arrow: import("styled-components").StyledComponent<"button", any, {
-    isExpanded?: boolean | undefined;
+export declare const SideBarHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideBarToggleButton: import("styled-components").StyledComponent<"button", any, {
+    isExpanded?: boolean;
 }, never>;

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

@@ -9,12 +9,12 @@ const SideBarHeader = _styled.div.withConfig({
         box-shadow: 0px ${theme.divider.thickness} 0px 0px ${theme.header.dividerColor};
         margin: ${theme.header.margin};
       `));
-const ChildrenContainer = _styled.div.withConfig({
-  displayName: "Headerstyle__ChildrenContainer",
+const SideBarHeaderContent = _styled.div.withConfig({
+  displayName: "Headerstyle__SideBarHeaderContent",
   componentId: "RedisUI__sc-6wicp7-1"
 })(["width:100%;height:100%;overflow:hidden;display:flex;align-items:center;"]);
-const Arrow = _styled.button.withConfig({
-  displayName: "Headerstyle__Arrow",
+const SideBarToggleButton = _styled.button.withConfig({
+  displayName: "Headerstyle__SideBarToggleButton",
   componentId: "RedisUI__sc-6wicp7-2"
 })(["all:unset;position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;border-radius:100%;::before{content:'';height:100%;width:100%;position:absolute;padding-left:50%;background-clip:content-box;}", " ", ";& > svg{transition:0.3s;transform:", ";@media (prefers-reduced-motion:reduce){transition:none;}}"], ({
   isExpanded
@@ -37,7 +37,7 @@ const Arrow = _styled.button.withConfig({
   isExpanded
 }) => isExpanded ? "rotate(90deg)" : "rotate(-90deg)");
 export {
-  Arrow,
-  ChildrenContainer,
-  SideBarHeader
+  SideBarHeader,
+  SideBarHeaderContent,
+  SideBarToggleButton
 };

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

@@ -19,7 +19,8 @@ const Item = Object.assign(({
     isExpanded
   } = SideBar_context.useSideBarContext();
   const activeLinkAttributes = isActive ? {
-    "data-state": "active"
+    "data-state": "active",
+    "aria-current": "page"
   } : {};
   const handleKeyDown = restProps.onClick && !onKeyDown ? (e) => {
     var _a;
@@ -30,7 +31,7 @@ const Item = Object.assign(({
     }
   } : onKeyDown;
   const tabIndex = restProps.onClick && !isActive ? 0 : void 0;
-  const item = jsxRuntime.jsxRuntimeExports.jsx(Item_style.Item, {
+  const item = jsxRuntime.jsxRuntimeExports.jsx(Item_style.SideBarItem, {
     "data-role": "navlink",
     ...restProps,
     ...activeLinkAttributes,

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { SideBarItemProps } from './Item.types';
 declare const Item: (({ tooltipProps, isActive, onKeyDown, ...restProps }: SideBarItemProps) => import("react/jsx-runtime").JSX.Element) & {
-    Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Icon/Icon.types").ItemIconProps) => import("react/jsx-runtime").JSX.Element;
-    Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Icon/Icon.types").SideBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("./components/Text/Text.types").SideBarItemTextProps) => import("react/jsx-runtime").JSX.Element;
     Button: import("react").ForwardRefExoticComponent<import("../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export default Item;

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