@quen-ui/components 0.0.14 → 1.0.1

package/dist/InputNumber/styles.cjs.js

@@ -3,77 +3,31 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const RcInputNumber = require("rc-input-number");
 const polished = require("polished");
-const InputNumberWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: max-content;
-
-  .quen-ui--input-number__required {
-    color: ${({ theme }) => theme.colors.red[9]};
-  }
-
-  .quen-ui--input-number__error-message {
-    color: ${({ theme }) => theme.colors.red[9]};
-  }
-`;
-const InputNumberContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
-})`
-  height: ${({ size, theme }) => theme.control.height[size]};
-  border-radius: ${({ theme }) => theme.control.radius};
-  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
-  border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[5]}`};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
-  gap: 0.5rem;
-  
-  svg {
-    color: ${({ theme }) => theme.colors.gray[9]};
-  }
-
+const InputBase = require("../InputBase/InputBase.cjs.js");
+const InputBaseStyled = styled(InputBase)`
   .rc-input-number-handler {
-    height: ${({ size, theme }) => polished.math(`${theme.control.height[size]} / 2`)};
+    height: ${({ size, theme }) => polished.math(`${theme.control.height[size || "m"]} / 2`)};
   }
 
   input {
     background: transparent;
-    font-size: ${({ theme, size }) => theme.fonts.text.size[size]};
-    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size]};
-  }
-
-  &:hover {
-    ${({ theme, focus }) => !focus && styled.css`
-        border-bottom: ${theme.control.borderWidth} solid
-          ${theme.colors[theme.primaryColor][9]};
-      `}
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size || "m"]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size || "m"]};
   }
 
-  ${({ focus }) => focus && styled.css`
-      border-bottom: ${({ theme }) => `${polished.math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
-    `};
-
-  ${({ error, theme }) => error && styled.css`
-      border-bottom: ${polished.math(`${theme.control.borderWidth} * 2`)} solid
-        ${theme.colors.red[9]};
-    `};
 
   ${({ disabled, theme }) => disabled && styled.css`
-      background: ${theme.colors.gray[2]};
-      border-bottom: ${theme.control.borderWidth} solid
-        ${theme.colors.gray[4]}!important;
       input {
-        background: ${theme.colors.gray[2]};
+        background: ${theme.components.Input.disabledBackground};
         pointer-events: none;
-        color: ${theme.colors.gray[4]};
+        color: ${theme.components.Input.disabledColor};
       }
     `};
 `;
 const InputNumberStyled = styled(RcInputNumber).withConfig({
   shouldForwardProp: (prop) => !["widthRight"].includes(prop)
 })`
-  color: ${({ theme }) => theme.colors.gray[9]};
+  color: ${({ theme }) => theme.components.Input.color};
   &,
   .rc-input-number {
     display: flex;
@@ -81,16 +35,18 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
     align-items: center;
     justify-content: space-between;
     height: 100%;
+    width: 100%;
   }
 
   .rc-input-number-wrapper.rc-input-number-group:has(
       .rc-input-number-group-addon
     ) {
     display: flex;
+    width: 100%;
 
     .rc-input-number-handler-wrap {
       position: relative;
-      right: ${({ widthRight }) => `-${widthRight - 1}px`};
+      right: ${({ widthRight }) => widthRight && `-${widthRight - 1}px`};
     }
 
     .rc-input-number-group-addon {
@@ -100,19 +56,24 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
       align-items: center;
     }
   }
+  
+  .rc-input-number-input-wrap {
+    width: 100%;
+  }
 
   .rc-input-number-input {
     box-sizing: border-box;
     outline: none;
     border: none;
-    color: ${({ theme }) => theme.colors.gray[9]};
+    color: ${({ theme }) => theme.components.Input.color};
+    width: 100%;
   }
 
   .rc-input-number-handler-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.components.Input.borderColor}`};
     height: 100%;
     justify-content: center;
   }
@@ -128,9 +89,8 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
   }
 
   .rc-input-number-handler-up {
-    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.components.Input.borderColor}`};
   }
 `;
-exports.InputNumberContainer = InputNumberContainer;
+exports.InputBaseStyled = InputBaseStyled;
 exports.InputNumberStyled = InputNumberStyled;
-exports.InputNumberWrapper = InputNumberWrapper;

package/dist/InputNumber/styles.d.ts

@@ -1,11 +1,7 @@
-import { TQuenSize } from '../types/size';
-export declare const InputNumberWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputNumberContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    size: TQuenSize;
-    focus: boolean;
-    error?: string | boolean;
-    disabled?: boolean;
-}>> & string;
+import { IInputBaseProps } from '../InputBase';
+export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
+    children?: import('react').ReactNode | undefined;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const InputNumberStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('rc-input-number').InputNumberProps<import('rc-input-number').ValueType> & {
     children?: React.ReactNode;
 } & {

package/dist/InputNumber/styles.es.js

@@ -1,77 +1,31 @@
 import styled, { css } from "styled-components";
 import RcInputNumber from "rc-input-number";
 import { math } from "polished";
-const InputNumberWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: max-content;
-
-  .quen-ui--input-number__required {
-    color: ${({ theme }) => theme.colors.red[9]};
-  }
-
-  .quen-ui--input-number__error-message {
-    color: ${({ theme }) => theme.colors.red[9]};
-  }
-`;
-const InputNumberContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["size", "focus", "error", "disabled"].includes(prop)
-})`
-  height: ${({ size, theme }) => theme.control.height[size]};
-  border-radius: ${({ theme }) => theme.control.radius};
-  border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
-  border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[5]}`};
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
-  gap: 0.5rem;
-  
-  svg {
-    color: ${({ theme }) => theme.colors.gray[9]};
-  }
-
+import InputBase from "../InputBase/InputBase.es.js";
+const InputBaseStyled = styled(InputBase)`
   .rc-input-number-handler {
-    height: ${({ size, theme }) => math(`${theme.control.height[size]} / 2`)};
+    height: ${({ size, theme }) => math(`${theme.control.height[size || "m"]} / 2`)};
   }
 
   input {
     background: transparent;
-    font-size: ${({ theme, size }) => theme.fonts.text.size[size]};
-    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size]};
-  }
-
-  &:hover {
-    ${({ theme, focus }) => !focus && css`
-        border-bottom: ${theme.control.borderWidth} solid
-          ${theme.colors[theme.primaryColor][9]};
-      `}
+    font-size: ${({ theme, size }) => theme.fonts.text.size[size || "m"]};
+    line-height: ${({ theme, size }) => theme.fonts.text.lineHeight[size || "m"]};
   }
 
-  ${({ focus }) => focus && css`
-      border-bottom: ${({ theme }) => `${math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
-    `};
-
-  ${({ error, theme }) => error && css`
-      border-bottom: ${math(`${theme.control.borderWidth} * 2`)} solid
-        ${theme.colors.red[9]};
-    `};
 
   ${({ disabled, theme }) => disabled && css`
-      background: ${theme.colors.gray[2]};
-      border-bottom: ${theme.control.borderWidth} solid
-        ${theme.colors.gray[4]}!important;
       input {
-        background: ${theme.colors.gray[2]};
+        background: ${theme.components.Input.disabledBackground};
         pointer-events: none;
-        color: ${theme.colors.gray[4]};
+        color: ${theme.components.Input.disabledColor};
       }
     `};
 `;
 const InputNumberStyled = styled(RcInputNumber).withConfig({
   shouldForwardProp: (prop) => !["widthRight"].includes(prop)
 })`
-  color: ${({ theme }) => theme.colors.gray[9]};
+  color: ${({ theme }) => theme.components.Input.color};
   &,
   .rc-input-number {
     display: flex;
@@ -79,16 +33,18 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
     align-items: center;
     justify-content: space-between;
     height: 100%;
+    width: 100%;
   }
 
   .rc-input-number-wrapper.rc-input-number-group:has(
       .rc-input-number-group-addon
     ) {
     display: flex;
+    width: 100%;
 
     .rc-input-number-handler-wrap {
       position: relative;
-      right: ${({ widthRight }) => `-${widthRight - 1}px`};
+      right: ${({ widthRight }) => widthRight && `-${widthRight - 1}px`};
     }
 
     .rc-input-number-group-addon {
@@ -98,19 +54,24 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
       align-items: center;
     }
   }
+  
+  .rc-input-number-input-wrap {
+    width: 100%;
+  }
 
   .rc-input-number-input {
     box-sizing: border-box;
     outline: none;
     border: none;
-    color: ${({ theme }) => theme.colors.gray[9]};
+    color: ${({ theme }) => theme.components.Input.color};
+    width: 100%;
   }
 
   .rc-input-number-handler-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    border-left: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.components.Input.borderColor}`};
     height: 100%;
     justify-content: center;
   }
@@ -126,11 +87,10 @@ const InputNumberStyled = styled(RcInputNumber).withConfig({
   }
 
   .rc-input-number-handler-up {
-    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.gray[3]}`};
+    border-bottom: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.components.Input.borderColor}`};
   }
 `;
 export {
-  InputNumberContainer,
-  InputNumberStyled,
-  InputNumberWrapper
+  InputBaseStyled,
+  InputNumberStyled
 };

package/dist/InputNumber/types.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 import { InputNumberProps } from 'rc-input-number';
 import { TQuenSize } from '../types/size';
+import { IInputBaseProps } from '../InputBase';
 export type TInputNumberFormatter = InputNumberProps["formatter"];
 export type TInputNumberParser = InputNumberProps["parser"];
-export interface IInputNumberProps {
+export interface IInputNumberProps extends IInputBaseProps {
     /** Initial uncontrolled value */
     defaultValue?: number;
     /** Controlled input value */
@@ -12,8 +13,6 @@ export interface IInputNumberProps {
     decimalSeparator?: string;
     /** Placeholder text */
     placeholder?: string;
-    /** Disable input interaction */
-    disabled?: boolean;
     /** Maximum allowed value */
     max?: number;
     /** Minimum allowed value */
@@ -26,22 +25,8 @@ export interface IInputNumberProps {
     allowNegative?: boolean;
     /** Value change handler */
     onChange?: (value: number | string | null) => void;
-    /** Input label text */
-    label?: string;
-    /** Mark as required field */
-    required?: boolean;
-    /** Error message or error state flag */
-    error?: string | boolean;
-    /** Left adornment (icon/prefix) */
-    leftContent?: React.ReactNode;
-    /** 	Right adornment (icon/suffix) */
-    rightContent?: React.ReactNode;
-    /** DOM ID for label association */
-    id?: string;
     /** Form input name */
     name?: string;
-    /** Container class name */
-    className?: string;
     /** Blur event handler */
     onBlur?: React.FocusEventHandler;
     /** Focus event handler */
@@ -57,5 +42,4 @@ export interface IInputNumberProps {
     /** Input parser (displayValue: string) => number */
     parser?: TInputNumberParser;
     onClear?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-    [key: string]: any;
 }

package/dist/Layout/Header.cjs.js

@@ -6,42 +6,46 @@ const Flex = require("../Flex/Flex.cjs.js");
 const Button = require("../Button/Button.cjs.js");
 const iconLines = require("../assets/icon-lines.svg.cjs.js");
 const iconClose = require("../assets/icon-close.svg.cjs.js");
+const Menu = require("../Menu/Menu.cjs.js");
 const Header = ({
   children,
   className,
   style,
   height,
   menuItems,
-  renderMenuItem,
   logo,
-  classNameMenuItem
+  classNameMenuItem,
+  activeMenuKeys
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
-  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(
-    styles.LayoutMenuItem,
-    {
-      className: classNameMenuItem,
-      onClick: item.onClick,
-      active: item.active,
-      disabled: item.disabled,
-      children: [
-        item.icon,
-        item.label
-      ]
-    },
-    item.key
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(styles.HeaderStyled, { className, style, height, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", align: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", align: "center", className: "quen-ui__layout-header__logo-wrapper", children: [
       mobile && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconClose, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconLines, {}) }),
       logo
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__layout-header__content", wrap: "wrap", children: [
-      menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: "xs", children: menuItems.map(
-        (item) => renderMenuItem ? /* @__PURE__ */ jsxRuntime.jsx(styles.LayoutMenuItem, { className: classNameMenuItem, children: renderMenuItem(item) }, item.key) : defaultRenderMenuItem(item)
-      ) }),
-      children
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Flex,
+      {
+        align: "center",
+        justify: "space-between",
+        className: "quen-ui__layout-header__content",
+        wrap: "wrap",
+        children: [
+          menuItems && menuItems.length && /* @__PURE__ */ jsxRuntime.jsx(
+            Menu,
+            {
+              className: "quen-ui__layout-header__content__menu-items",
+              items: menuItems,
+              direction: "horizontal",
+              size: "s",
+              classNameMenuItem,
+              activeKeys: activeMenuKeys
+            }
+          ),
+          children
+        ]
+      }
+    )
   ] });
 };
 module.exports = Header;

package/dist/Layout/Header.d.ts

@@ -1,4 +1,4 @@
 import { default as React, PropsWithChildren } from 'react';
 import { ILayoutHeaderProps } from './types';
-declare const Header: ({ children, className, style, height, menuItems, renderMenuItem, logo, classNameMenuItem }: PropsWithChildren<ILayoutHeaderProps>) => React.ReactNode;
+declare const Header: ({ children, className, style, height, menuItems, logo, classNameMenuItem, activeMenuKeys }: PropsWithChildren<ILayoutHeaderProps>) => React.ReactNode;
 export default Header;

package/dist/Layout/Header.es.js

@@ -1,46 +1,50 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { HeaderStyled, LayoutMenuItem } from "./styles.es.js";
+import { HeaderStyled } from "./styles.es.js";
 import { useLayout } from "./Layout.es.js";
 import Flex from "../Flex/Flex.es.js";
 import Button from "../Button/Button.es.js";
 import SvgIconLines from "../assets/icon-lines.svg.es.js";
 import SvgIconClose from "../assets/icon-close.svg.es.js";
+import Menu from "../Menu/Menu.es.js";
 const Header = ({
   children,
   className,
   style,
   height,
   menuItems,
-  renderMenuItem,
   logo,
-  classNameMenuItem
+  classNameMenuItem,
+  activeMenuKeys
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = useLayout();
-  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxs(
-    LayoutMenuItem,
-    {
-      className: classNameMenuItem,
-      onClick: item.onClick,
-      active: item.active,
-      disabled: item.disabled,
-      children: [
-        item.icon,
-        item.label
-      ]
-    },
-    item.key
-  );
   return /* @__PURE__ */ jsxs(HeaderStyled, { className, style, height, children: [
-    /* @__PURE__ */ jsxs(Flex, { gap: "s", align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "s", align: "center", className: "quen-ui__layout-header__logo-wrapper", children: [
       mobile && /* @__PURE__ */ jsx(Button, { onClick: toggleSidebar, children: sidebarOpen ? /* @__PURE__ */ jsx(SvgIconClose, {}) : /* @__PURE__ */ jsx(SvgIconLines, {}) }),
       logo
     ] }),
-    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "space-between", className: "quen-ui__layout-header__content", wrap: "wrap", children: [
-      menuItems && /* @__PURE__ */ jsx(Flex, { gap: "xs", children: menuItems.map(
-        (item) => renderMenuItem ? /* @__PURE__ */ jsx(LayoutMenuItem, { className: classNameMenuItem, children: renderMenuItem(item) }, item.key) : defaultRenderMenuItem(item)
-      ) }),
-      children
-    ] })
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        align: "center",
+        justify: "space-between",
+        className: "quen-ui__layout-header__content",
+        wrap: "wrap",
+        children: [
+          menuItems && menuItems.length && /* @__PURE__ */ jsx(
+            Menu,
+            {
+              className: "quen-ui__layout-header__content__menu-items",
+              items: menuItems,
+              direction: "horizontal",
+              size: "s",
+              classNameMenuItem,
+              activeKeys: activeMenuKeys
+            }
+          ),
+          children
+        ]
+      }
+    )
   ] });
 };
 export {

package/dist/Layout/Sidebar.cjs.js

@@ -1,45 +1,37 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const styles = require("./styles.cjs.js");
-const Flex = require("../Flex/Flex.cjs.js");
-const Text = require("../typography/Text/Text.cjs.js");
 const Layout = require("./Layout.cjs.js");
 const Drawer = require("../Drawer/Drawer.cjs.js");
 const Sidebar = ({
   children,
   collapsed,
   menuItems,
-  renderMenuItem,
   collapsible,
   collapsedWidth,
   className,
-  titleDrawer
+  titleDrawer,
+  classNameMenuItem,
+  activeMenuKeys
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = Layout.useLayout();
-  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(
-    styles.SidebarMenuItem,
-    {
-      onClick: item.onClick,
-      active: item.active,
-      collapsed,
-      disabled: item.disabled,
-      children: [
-        item.icon,
-        !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", className: "menu-label", children: item.label })
-      ]
-    },
-    item.key
-  );
   if (mobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
       children,
-      menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", children: menuItems.map(
-        (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
-      ) })
+      menuItems && menuItems.length && /* @__PURE__ */ jsxRuntime.jsx(
+        styles.SidebarMenuStyled,
+        {
+          direction: "vertical",
+          items: menuItems,
+          size: "s",
+          classNameMenuItem,
+          activeKeys: activeMenuKeys
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles.SliderStyled,
+    styles.SidebarStyled,
     {
       collapsed,
       collapsible,
@@ -47,9 +39,16 @@ const Sidebar = ({
       collapsedWidth,
       children: [
         children,
-        menuItems && /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", children: menuItems.map(
-          (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
-        ) })
+        menuItems && menuItems.length && /* @__PURE__ */ jsxRuntime.jsx(
+          styles.SidebarMenuStyled,
+          {
+            direction: "vertical",
+            items: menuItems,
+            size: "s",
+            classNameMenuItem,
+            activeKeys: activeMenuKeys
+          }
+        )
       ]
     }
   );

package/dist/Layout/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import { default as React, PropsWithChildren } from 'react';
 import { ILayoutSidebarProps } from './types';
-declare const Sidebar: ({ children, collapsed, menuItems, renderMenuItem, collapsible, collapsedWidth, className, titleDrawer }: PropsWithChildren<ILayoutSidebarProps>) => React.ReactElement;
+declare const Sidebar: ({ children, collapsed, menuItems, collapsible, collapsedWidth, className, titleDrawer, classNameMenuItem, activeMenuKeys }: PropsWithChildren<ILayoutSidebarProps>) => React.ReactElement;
 export default Sidebar;

package/dist/Layout/Sidebar.es.js

@@ -1,44 +1,36 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { SliderStyled, SidebarMenuItem } from "./styles.es.js";
-import Flex from "../Flex/Flex.es.js";
-import Text from "../typography/Text/Text.es.js";
+import { SidebarMenuStyled, SidebarStyled } from "./styles.es.js";
 import { useLayout } from "./Layout.es.js";
 import Drawer from "../Drawer/Drawer.es.js";
 const Sidebar = ({
   children,
   collapsed,
   menuItems,
-  renderMenuItem,
   collapsible,
   collapsedWidth,
   className,
-  titleDrawer
+  titleDrawer,
+  classNameMenuItem,
+  activeMenuKeys
 }) => {
   const { mobile, toggleSidebar, sidebarOpen } = useLayout();
-  const defaultRenderMenuItem = (item) => /* @__PURE__ */ jsxs(
-    SidebarMenuItem,
-    {
-      onClick: item.onClick,
-      active: item.active,
-      collapsed,
-      disabled: item.disabled,
-      children: [
-        item.icon,
-        !collapsed && /* @__PURE__ */ jsx(Text, { size: "xs", className: "menu-label", children: item.label })
-      ]
-    },
-    item.key
-  );
   if (mobile) {
     return /* @__PURE__ */ jsxs(Drawer, { open: sidebarOpen, onClose: toggleSidebar, title: titleDrawer, children: [
       children,
-      menuItems && /* @__PURE__ */ jsx(Flex, { direction: "column", children: menuItems.map(
-        (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
-      ) })
+      menuItems && menuItems.length && /* @__PURE__ */ jsx(
+        SidebarMenuStyled,
+        {
+          direction: "vertical",
+          items: menuItems,
+          size: "s",
+          classNameMenuItem,
+          activeKeys: activeMenuKeys
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs(
-    SliderStyled,
+    SidebarStyled,
     {
       collapsed,
       collapsible,
@@ -46,9 +38,16 @@ const Sidebar = ({
       collapsedWidth,
       children: [
         children,
-        menuItems && /* @__PURE__ */ jsx(Flex, { direction: "column", children: menuItems.map(
-          (item) => renderMenuItem ? renderMenuItem(item) : defaultRenderMenuItem(item)
-        ) })
+        menuItems && menuItems.length && /* @__PURE__ */ jsx(
+          SidebarMenuStyled,
+          {
+            direction: "vertical",
+            items: menuItems,
+            size: "s",
+            classNameMenuItem,
+            activeKeys: activeMenuKeys
+          }
+        )
       ]
     }
   );