From 68e0cce76d5da1056dc4cab7a79712926a0399ab Mon Sep 17 00:00:00 2001
From: Daria Alekhina <alehina321@gmail.com>
Date: Tue, 14 May 2024 17:11:38 +0300
Subject: [PATCH 1/4] feat(BoxDrawing): add new component

---
 .../BoxDrawing/BoxDrawing.classes.ts          |  16 +++
 .../BoxDrawing/BoxDrawing.stories.tsx         |  47 +++++++
 .../src/components/BoxDrawing/BoxDrawing.tsx  |  74 +++++++++++
 .../components/BoxDrawing/BoxDrawing.types.ts |  28 ++++
 .../BoxDrawingItem/BoxDrawingItem.classes.ts  |  23 ++++
 .../BoxDrawingItem/BoxDrawingItem.tsx         | 124 ++++++++++++++++++
 .../BoxDrawingItem/BoxDrawingItem.types.ts    |  32 +++++
 .../BoxDrawing/BoxDrawingItem/index.ts        |   3 +
 .../react/src/components/BoxDrawing/index.ts  |   3 +
 9 files changed, 350 insertions(+)
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawing.tsx
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
 create mode 100644 packages/react/src/components/BoxDrawing/BoxDrawingItem/index.ts
 create mode 100644 packages/react/src/components/BoxDrawing/index.ts

diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts b/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
new file mode 100644
index 000000000..b9aad184d
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type BoxDrawingClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+
+  /** Styles applied to the container element. */
+  container: string;
+};
+export type BoxDrawingClassKey = keyof BoxDrawingClasses;
+
+export function getBoxDrawingUtilityClass(slot: string): string {
+  return generateUtilityClass('ESBoxDrawing', slot);
+}
+
+export const boxDrawingClasses: BoxDrawingClasses = generateUtilityClasses('ESBoxDrawing', ['root', 'container']);
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
new file mode 100644
index 000000000..ccb8425fb
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BoxDrawing } from './BoxDrawing';
+import { BoxDrawingItem } from './BoxDrawingItem';
+
+type Args = ComponentProps<typeof BoxDrawing> & { header?: string };
+
+const meta: Meta<Args> = {
+  tags: ['autodocs'],
+  component: BoxDrawing,
+  parameters: {
+    references: ['BoxDrawing']
+  },
+  argTypes: {
+    header: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  args: {
+    header: 'Header'
+  }
+};
+
+export default meta;
+type Story = StoryObj<Args>;
+
+export const Demo: Story = {
+  render: (args) => {
+    return (
+      <BoxDrawing collapsed={args.collapsed} header={args.header || 'Header'}>
+        <BoxDrawingItem>
+          <div style={{ padding: '16px' }}>BoxDrawing 1</div>
+        </BoxDrawingItem>
+        <BoxDrawingItem>
+          <div style={{ padding: '16px' }}>BoxDrawing 2</div>
+        </BoxDrawingItem>
+        <BoxDrawingItem>
+          <div style={{ padding: '16px' }}>BoxDrawing 3</div>
+        </BoxDrawingItem>
+      </BoxDrawing>
+    );
+  }
+};
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
new file mode 100644
index 000000000..d5639766f
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
@@ -0,0 +1,74 @@
+import { BoxDrawingProps } from './BoxDrawing.types';
+
+import clsx from 'clsx';
+import { getBoxDrawingUtilityClass } from './BoxDrawing.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material';
+
+type BoxDrawingOwnerState = {
+  classes?: BoxDrawingProps['classes'];
+};
+
+const useUtilityClasses = (ownerState: BoxDrawingOwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+
+  return composeClasses(slots, getBoxDrawingUtilityClass, classes);
+};
+
+const BoxDrawingRoot = styled('div', {
+  name: 'ESBoxDrawing',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    return [styles.root];
+  }
+})(() => ({
+  display: 'flex',
+  flexDirection: 'column'
+}));
+
+const BoxDrawingContainer = styled('div', {
+  name: 'ESBoxDrawing',
+  slot: 'Container',
+  overridesResolver: (props, styles) => {
+    return [styles.container];
+  }
+})(() => ({
+  paddingLeft: '8px',
+  display: 'flex',
+  flexDirection: 'column'
+}));
+
+export const BoxDrawing = (inProps: BoxDrawingProps) => {
+  const {
+    children,
+    className,
+    classes: inClasses,
+    header,
+    collapsed,
+    ...props
+  } = useThemeProps({
+    props: inProps,
+    name: 'ESBoxDrawing'
+  });
+
+  const ownerState = {
+    classes: inClasses
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <BoxDrawingRoot className={clsx(classes.root, className)} {...props}>
+      {header}
+      {!collapsed && <BoxDrawingContainer className={classes.container}>{children}</BoxDrawingContainer>}
+    </BoxDrawingRoot>
+  );
+};
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts b/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
new file mode 100644
index 000000000..84dea483b
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ReactNode } from 'react';
+
+import { BoxDrawingClasses } from './BoxDrawing.classes';
+
+import { SxProps, Theme } from '@mui/material';
+
+export interface BoxDrawingProps {
+  children?: ReactNode;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<BoxDrawingClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Class applied to the root element. */
+  className?: string;
+
+  /**
+   * Header of box always visible.
+   */
+  header?: ReactNode;
+
+  /** If true, the children will be collapsed. */
+  collapsed?: boolean;
+
+  /** Callback fired when the collapsed attribute has been updated. */
+  onChangeCollapsed?: () => void;
+}
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
new file mode 100644
index 000000000..abb3e9798
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
@@ -0,0 +1,23 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type BoxDrawingItemClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+
+  /** Styles applied to the root element if clickable={true}. */
+  clickable: string;
+
+  /** Styles applied to the point element. */
+  point: string;
+};
+export type BoxDrawingItemClassKey = keyof BoxDrawingItemClasses;
+
+export function getBoxDrawingItemUtilityClass(slot: string): string {
+  return generateUtilityClass('ESBoxDrawingItem', slot);
+}
+
+export const boxDrawingItemClasses: BoxDrawingItemClasses = generateUtilityClasses('ESBoxDrawingItem', [
+  'root',
+  'clickable',
+  'point'
+]);
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
new file mode 100644
index 000000000..c1a3b3a61
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
@@ -0,0 +1,124 @@
+import { BoxDrawingItemProps, BoxDrawingItemTypeMap } from './BoxDrawingItem.types';
+
+import clsx from 'clsx';
+import { boxDrawingItemClasses, getBoxDrawingItemUtilityClass } from './BoxDrawingItem.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { useThemeProps } from '@mui/material/styles';
+import { styled } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+type BoxDrawingItemOwnerState = {
+  classes?: BoxDrawingItemProps['classes'];
+  clickable?: BoxDrawingItemProps['clickable'];
+};
+
+const useUtilityClasses = (ownerState: BoxDrawingItemOwnerState) => {
+  const { classes, clickable } = ownerState;
+
+  const slots = {
+    root: ['root', clickable && 'clickable'],
+    point: ['point']
+  };
+
+  return composeClasses(slots, getBoxDrawingItemUtilityClass, classes);
+};
+
+const BoxDrawingItemRoot = styled('div', {
+  name: 'ESBoxDrawingItem',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState: { clickable }
+    } = props;
+
+    return [styles.root, clickable && styles.clickable];
+  }
+})(({ theme }) => ({
+  position: 'relative',
+
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
+    borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
+    width: '7px',
+    height: 'calc(50% + 0.5px)',
+
+    backgroundColor: 'transparent',
+    left: 0,
+    top: 0
+  },
+
+  '&::after': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
+    width: '7px',
+    height: 'calc(50% - 0.5px)',
+
+    backgroundColor: 'transparent',
+    left: 0,
+    top: 'calc(50% + 0.5px)'
+  },
+
+  '&:last-of-type': {
+    '&::before': { borderRadius: '0px 0px 0px 4px' },
+    '&::after': { display: 'none' }
+  },
+
+  [`&.${boxDrawingItemClasses.clickable}`]: {
+    cursor: 'pointer'
+  }
+}));
+
+const BoxDrawingItemPoint = styled('div', {
+  name: 'ESBoxDrawingItem',
+  slot: 'Point',
+  overridesResolver: (props, styles) => {
+    return [styles.point];
+  }
+})(({ theme }) => ({
+  position: 'absolute',
+  top: 'calc(50% - 1.5px)',
+  left: '7.5px',
+  width: '3px',
+  height: '3px',
+  borderRadius: '50%',
+
+  background: theme.vars.palette.monoA.A400
+}));
+
+export const BoxDrawingItem: OverridableComponent<BoxDrawingItemTypeMap> = (inProps: BoxDrawingItemProps) => {
+  const {
+    children,
+    className,
+    classes: inClasses,
+    clickable: inClickable,
+    onClick,
+
+    ...props
+  } = useThemeProps({
+    props: inProps,
+    name: 'ESBoxDrawingItem'
+  });
+
+  const clickable = inClickable !== false && onClick ? true : inClickable;
+
+  const ownerState = {
+    classes: inClasses,
+    clickable
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <BoxDrawingItemRoot className={clsx(classes.root, className)} onClick={onClick} {...props}>
+      <BoxDrawingItemPoint className={classes.point} />
+      {children}
+    </BoxDrawingItemRoot>
+  );
+};
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
new file mode 100644
index 000000000..10b2bf099
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ReactNode } from 'react';
+
+import { BoxDrawingItemClasses } from './BoxDrawingItem.classes';
+
+import { SxProps, Theme } from '@mui/material';
+import { OverrideProps } from '@mui/material/OverridableComponent';
+
+export interface BoxDrawingItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    children?: ReactNode;
+    /** Override or extend the styles applied to the component. */
+    classes?: Partial<BoxDrawingItemClasses>;
+    /** The system prop that allows defining system overrides as well as additional CSS styles. */
+    sx?: SxProps<Theme>;
+    /** Class applied to the root element. */
+    className?: string;
+
+    /**
+     * If `true`, component will appear clickable, even if the onClick prop is not defined.
+     * If `false`, component will not appear clickable, even if onClick prop is defined.
+     * */
+    clickable?: boolean;
+  };
+  defaultComponent: D;
+}
+
+export type BoxDrawingItemProps<
+  D extends React.ElementType = BoxDrawingItemTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<BoxDrawingItemTypeMap<P, D>, D>;
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/index.ts b/packages/react/src/components/BoxDrawing/BoxDrawingItem/index.ts
new file mode 100644
index 000000000..a4cb5a3b2
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/index.ts
@@ -0,0 +1,3 @@
+export { BoxDrawingItem } from './BoxDrawingItem';
+export { BoxDrawingItemClasses, boxDrawingItemClasses, BoxDrawingItemClassKey } from './BoxDrawingItem.classes';
+export { BoxDrawingItemProps } from './BoxDrawingItem.types';
diff --git a/packages/react/src/components/BoxDrawing/index.ts b/packages/react/src/components/BoxDrawing/index.ts
new file mode 100644
index 000000000..53ba954d3
--- /dev/null
+++ b/packages/react/src/components/BoxDrawing/index.ts
@@ -0,0 +1,3 @@
+export { BoxDrawing } from './BoxDrawing';
+export { BoxDrawingClasses, boxDrawingClasses, BoxDrawingClassKey } from './BoxDrawing.classes';
+export { BoxDrawingProps } from './BoxDrawing.types';

From 19e820877a4cd158fe473dd10279d3607eaad0db Mon Sep 17 00:00:00 2001
From: Daria Alekhina <alehina321@gmail.com>
Date: Tue, 14 May 2024 17:39:22 +0300
Subject: [PATCH 2/4] feat(BoxDrawing): fix stories

---
 .../BoxDrawing/BoxDrawing.stories.tsx         | 21 ++++++++++++++++---
 .../src/components/BoxDrawing/BoxDrawing.tsx  |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
index ccb8425fb..b18fdc61b 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
@@ -1,10 +1,15 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
+import { ListItemText } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
+
 import { BoxDrawing } from './BoxDrawing';
 import { BoxDrawingItem } from './BoxDrawingItem';
 
+import { IconChevronLeftW400, IconChevronRightW400 } from '../../icons';
+
 type Args = ComponentProps<typeof BoxDrawing> & { header?: string };
 
 const meta: Meta<Args> = {
@@ -29,9 +34,19 @@ export default meta;
 type Story = StoryObj<Args>;
 
 export const Demo: Story = {
-  render: (args) => {
+  render: function Render() {
+    const [isCollapsed, setCollapsed] = useState(false);
+
     return (
-      <BoxDrawing collapsed={args.collapsed} header={args.header || 'Header'}>
+      <BoxDrawing
+        collapsed={isCollapsed}
+        header={
+          <ListItemButton onClick={() => setCollapsed(!isCollapsed)}>
+            <ListItemText primary="Header" />
+            {isCollapsed ? <IconChevronLeftW400 /> : <IconChevronRightW400 />}
+          </ListItemButton>
+        }
+      >
         <BoxDrawingItem>
           <div style={{ padding: '16px' }}>BoxDrawing 1</div>
         </BoxDrawingItem>
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
index d5639766f..7c957dd56 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
@@ -41,7 +41,7 @@ const BoxDrawingContainer = styled('div', {
     return [styles.container];
   }
 })(() => ({
-  paddingLeft: '8px',
+  paddingLeft: '24px',
   display: 'flex',
   flexDirection: 'column'
 }));

From d75f214ea7b1e309413d7d26a924662e6bcc3ed7 Mon Sep 17 00:00:00 2001
From: Daria Alekhina <alehina321@gmail.com>
Date: Tue, 14 May 2024 18:28:28 +0300
Subject: [PATCH 3/4] feat(BoxDrawing): add to sidebar stories

---
 .../BoxDrawing/BoxDrawing.stories.tsx         | 12 ++++++--
 .../components/Sidebar/Sidebar.stories.tsx    | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
index b18fdc61b..8697db896 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
@@ -48,13 +48,19 @@ export const Demo: Story = {
         }
       >
         <BoxDrawingItem>
-          <div style={{ padding: '16px' }}>BoxDrawing 1</div>
+          <ListItemButton>
+            <ListItemText primary="BoxDrawing 1" />
+          </ListItemButton>
         </BoxDrawingItem>
         <BoxDrawingItem>
-          <div style={{ padding: '16px' }}>BoxDrawing 2</div>
+          <ListItemButton>
+            <ListItemText primary="BoxDrawing 2" />
+          </ListItemButton>
         </BoxDrawingItem>
         <BoxDrawingItem>
-          <div style={{ padding: '16px' }}>BoxDrawing 3</div>
+          <ListItemButton>
+            <ListItemText primary="BoxDrawing 3" />
+          </ListItemButton>
         </BoxDrawingItem>
       </BoxDrawing>
     );
diff --git a/packages/react/src/components/Sidebar/Sidebar.stories.tsx b/packages/react/src/components/Sidebar/Sidebar.stories.tsx
index 74686b259..ac9a0ac59 100644
--- a/packages/react/src/components/Sidebar/Sidebar.stories.tsx
+++ b/packages/react/src/components/Sidebar/Sidebar.stories.tsx
@@ -2,6 +2,7 @@ import { ComponentProps, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
+import { ListItemButton } from '@mui/material';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -16,6 +17,8 @@ import { SidebarSpacer } from './SidebarSpacer';
 import { SidebarToggle } from './SidebarToggle';
 
 import { IconAccountLc, IconAt, IconBellFill, IconMagnify } from '../../icons';
+import { BoxDrawing } from '../BoxDrawing';
+import { BoxDrawingItem } from '../BoxDrawing/BoxDrawingItem';
 
 type Args = ComponentProps<typeof Sidebar> & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean };
 
@@ -167,6 +170,32 @@ export const Demo: Story = {
                 text={locale === 'en' ? 'Inbox' : 'Входящие'}
                 onClick={() => console.info(`Inbox`)}
               />
+
+              <BoxDrawing
+                header={
+                  <SidebarItem
+                    icon={<IconAt />}
+                    text={locale === 'en' ? 'Inbox' : 'Входящие'}
+                    onClick={() => console.info(`Inbox`)}
+                  />
+                }
+              >
+                <BoxDrawingItem>
+                  <ListItemButton>
+                    <ListItemText primary="BoxDrawing 1" />
+                  </ListItemButton>
+                </BoxDrawingItem>
+                <BoxDrawingItem>
+                  <ListItemButton>
+                    <ListItemText primary="BoxDrawing 2" />
+                  </ListItemButton>
+                </BoxDrawingItem>
+                <BoxDrawingItem>
+                  <ListItemButton>
+                    <ListItemText primary="BoxDrawing 3" />
+                  </ListItemButton>
+                </BoxDrawingItem>
+              </BoxDrawing>
             </SidebarMenu>
           </SidebarScrollable>
           <SidebarSpacer />

From 15b641f4e4e1d28228218151d88c3ffba027674b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B0=D1=80=D1=8C=D1=8F=20=D0=90=D0=BB=D0=B5=D1=85?=
 =?UTF-8?q?=D0=B8=D0=BD=D0=B0?= <d.alyohina@elonsoft.ru>
Date: Wed, 15 May 2024 20:52:56 +0300
Subject: [PATCH 4/4] feat(BoxDrawing): change component

---
 .../BoxDrawing/BoxDrawing.classes.ts          |  5 +-
 .../BoxDrawing/BoxDrawing.stories.tsx         | 68 --------------
 .../src/components/BoxDrawing/BoxDrawing.tsx  | 40 +++-----
 .../components/BoxDrawing/BoxDrawing.types.ts | 14 +--
 .../BoxDrawingItem/BoxDrawingItem.classes.ts  | 12 +--
 .../BoxDrawingItem/BoxDrawingItem.tsx         | 91 +++++--------------
 .../BoxDrawingItem/BoxDrawingItem.types.ts    | 32 ++-----
 .../components/Sidebar/Sidebar.stories.tsx    | 29 +-----
 .../Sidebar/SidebarItem/SidebarItem.tsx       |  1 +
 9 files changed, 54 insertions(+), 238 deletions(-)
 delete mode 100644 packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx

diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts b/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
index b9aad184d..04ff4ec9f 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.classes.ts
@@ -3,9 +3,6 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
 export type BoxDrawingClasses = {
   /** Styles applied to the root element. */
   root: string;
-
-  /** Styles applied to the container element. */
-  container: string;
 };
 export type BoxDrawingClassKey = keyof BoxDrawingClasses;
 
@@ -13,4 +10,4 @@ export function getBoxDrawingUtilityClass(slot: string): string {
   return generateUtilityClass('ESBoxDrawing', slot);
 }
 
-export const boxDrawingClasses: BoxDrawingClasses = generateUtilityClasses('ESBoxDrawing', ['root', 'container']);
+export const boxDrawingClasses: BoxDrawingClasses = generateUtilityClasses('ESBoxDrawing', ['root']);
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
deleted file mode 100644
index 8697db896..000000000
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ComponentProps, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-
-import { ListItemText } from '@mui/material';
-import ListItemButton from '@mui/material/ListItemButton';
-
-import { BoxDrawing } from './BoxDrawing';
-import { BoxDrawingItem } from './BoxDrawingItem';
-
-import { IconChevronLeftW400, IconChevronRightW400 } from '../../icons';
-
-type Args = ComponentProps<typeof BoxDrawing> & { header?: string };
-
-const meta: Meta<Args> = {
-  tags: ['autodocs'],
-  component: BoxDrawing,
-  parameters: {
-    references: ['BoxDrawing']
-  },
-  argTypes: {
-    header: {
-      control: {
-        type: 'text'
-      }
-    }
-  },
-  args: {
-    header: 'Header'
-  }
-};
-
-export default meta;
-type Story = StoryObj<Args>;
-
-export const Demo: Story = {
-  render: function Render() {
-    const [isCollapsed, setCollapsed] = useState(false);
-
-    return (
-      <BoxDrawing
-        collapsed={isCollapsed}
-        header={
-          <ListItemButton onClick={() => setCollapsed(!isCollapsed)}>
-            <ListItemText primary="Header" />
-            {isCollapsed ? <IconChevronLeftW400 /> : <IconChevronRightW400 />}
-          </ListItemButton>
-        }
-      >
-        <BoxDrawingItem>
-          <ListItemButton>
-            <ListItemText primary="BoxDrawing 1" />
-          </ListItemButton>
-        </BoxDrawingItem>
-        <BoxDrawingItem>
-          <ListItemButton>
-            <ListItemText primary="BoxDrawing 2" />
-          </ListItemButton>
-        </BoxDrawingItem>
-        <BoxDrawingItem>
-          <ListItemButton>
-            <ListItemText primary="BoxDrawing 3" />
-          </ListItemButton>
-        </BoxDrawingItem>
-      </BoxDrawing>
-    );
-  }
-};
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.tsx b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
index 7c957dd56..05b0283c9 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.tsx
@@ -10,6 +10,7 @@ import { styled } from '@mui/material';
 
 type BoxDrawingOwnerState = {
   classes?: BoxDrawingProps['classes'];
+  bottomOffset?: BoxDrawingProps['bottomOffset'];
 };
 
 const useUtilityClasses = (ownerState: BoxDrawingOwnerState) => {
@@ -29,30 +30,23 @@ const BoxDrawingRoot = styled('div', {
   overridesResolver: (props, styles) => {
     return [styles.root];
   }
-})(() => ({
-  display: 'flex',
-  flexDirection: 'column'
-}));
-
-const BoxDrawingContainer = styled('div', {
-  name: 'ESBoxDrawing',
-  slot: 'Container',
-  overridesResolver: (props, styles) => {
-    return [styles.container];
-  }
-})(() => ({
-  paddingLeft: '24px',
-  display: 'flex',
-  flexDirection: 'column'
+})<{ ownerState: BoxDrawingOwnerState }>(({ ownerState: { bottomOffset }, theme }) => ({
+  position: 'absolute',
+  borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
+  borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
+  borderRadius: '0px 0px 0px 4px',
+  width: '7px',
+  height: `calc(100% - ${bottomOffset ?? '0'}px)`,
+  backgroundColor: 'transparent',
+  left: '20px',
+  top: 0
 }));
 
 export const BoxDrawing = (inProps: BoxDrawingProps) => {
   const {
-    children,
     className,
     classes: inClasses,
-    header,
-    collapsed,
+    bottomOffset,
     ...props
   } = useThemeProps({
     props: inProps,
@@ -60,15 +54,11 @@ export const BoxDrawing = (inProps: BoxDrawingProps) => {
   });
 
   const ownerState = {
-    classes: inClasses
+    classes: inClasses,
+    bottomOffset
   };
 
   const classes = useUtilityClasses(ownerState);
 
-  return (
-    <BoxDrawingRoot className={clsx(classes.root, className)} {...props}>
-      {header}
-      {!collapsed && <BoxDrawingContainer className={classes.container}>{children}</BoxDrawingContainer>}
-    </BoxDrawingRoot>
-  );
+  return <BoxDrawingRoot className={clsx(classes.root, className)} ownerState={ownerState} {...props} />;
 };
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts b/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
index 84dea483b..99ee72e4a 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
+++ b/packages/react/src/components/BoxDrawing/BoxDrawing.types.ts
@@ -1,13 +1,10 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
-import { ReactNode } from 'react';
-
 import { BoxDrawingClasses } from './BoxDrawing.classes';
 
 import { SxProps, Theme } from '@mui/material';
 
 export interface BoxDrawingProps {
-  children?: ReactNode;
   /** Override or extend the styles applied to the component. */
   classes?: Partial<BoxDrawingClasses>;
   /** The system prop that allows defining system overrides as well as additional CSS styles. */
@@ -15,14 +12,5 @@ export interface BoxDrawingProps {
   /** Class applied to the root element. */
   className?: string;
 
-  /**
-   * Header of box always visible.
-   */
-  header?: ReactNode;
-
-  /** If true, the children will be collapsed. */
-  collapsed?: boolean;
-
-  /** Callback fired when the collapsed attribute has been updated. */
-  onChangeCollapsed?: () => void;
+  bottomOffset?: string;
 }
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
index abb3e9798..0b89c1a79 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.classes.ts
@@ -3,12 +3,6 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
 export type BoxDrawingItemClasses = {
   /** Styles applied to the root element. */
   root: string;
-
-  /** Styles applied to the root element if clickable={true}. */
-  clickable: string;
-
-  /** Styles applied to the point element. */
-  point: string;
 };
 export type BoxDrawingItemClassKey = keyof BoxDrawingItemClasses;
 
@@ -16,8 +10,4 @@ export function getBoxDrawingItemUtilityClass(slot: string): string {
   return generateUtilityClass('ESBoxDrawingItem', slot);
 }
 
-export const boxDrawingItemClasses: BoxDrawingItemClasses = generateUtilityClasses('ESBoxDrawingItem', [
-  'root',
-  'clickable',
-  'point'
-]);
+export const boxDrawingItemClasses: BoxDrawingItemClasses = generateUtilityClasses('ESBoxDrawingItem', ['root']);
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
index c1a3b3a61..e06a9e8f8 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.tsx
@@ -1,25 +1,23 @@
-import { BoxDrawingItemProps, BoxDrawingItemTypeMap } from './BoxDrawingItem.types';
+import { BoxDrawingItemProps } from './BoxDrawingItem.types';
 
 import clsx from 'clsx';
-import { boxDrawingItemClasses, getBoxDrawingItemUtilityClass } from './BoxDrawingItem.classes';
+import { getBoxDrawingItemUtilityClass } from './BoxDrawingItem.classes';
 
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 
 import { useThemeProps } from '@mui/material/styles';
 import { styled } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 
 type BoxDrawingItemOwnerState = {
   classes?: BoxDrawingItemProps['classes'];
-  clickable?: BoxDrawingItemProps['clickable'];
+  isLast?: BoxDrawingItemProps['isLast'];
 };
 
 const useUtilityClasses = (ownerState: BoxDrawingItemOwnerState) => {
-  const { classes, clickable } = ownerState;
+  const { classes } = ownerState;
 
   const slots = {
-    root: ['root', clickable && 'clickable'],
-    point: ['point']
+    root: ['root']
   };
 
   return composeClasses(slots, getBoxDrawingItemUtilityClass, classes);
@@ -35,90 +33,51 @@ const BoxDrawingItemRoot = styled('div', {
 
     return [styles.root, clickable && styles.clickable];
   }
-})(({ theme }) => ({
-  position: 'relative',
-
-  '&::before': {
-    content: '""',
-    display: 'block',
-    position: 'absolute',
-    borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
-    borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
-    width: '7px',
-    height: 'calc(50% + 0.5px)',
+})<{ ownerState: BoxDrawingItemOwnerState }>(({ ownerState: { isLast }, theme }) => ({
+  position: 'absolute',
 
-    backgroundColor: 'transparent',
-    left: 0,
-    top: 0
-  },
+  top: 'calc(50% - 1.5px)',
+  left: '27.5px',
+  width: '3px',
+  height: '3px',
+  borderRadius: '50%',
+  background: theme.vars.palette.monoA.A400,
 
   '&::after': {
     content: '""',
     display: 'block',
     position: 'absolute',
-    borderLeft: `1px dashed ${theme.vars.palette.monoA.A400}`,
+    borderBottom: `1px dashed ${theme.vars.palette.monoA.A400}`,
     width: '7px',
-    height: 'calc(50% - 0.5px)',
-
     backgroundColor: 'transparent',
-    left: 0,
-    top: 'calc(50% + 0.5px)'
+    left: '-7.5px',
+    top: 'calc(50% - 0.5px)'
   },
 
-  '&:last-of-type': {
-    '&::before': { borderRadius: '0px 0px 0px 4px' },
-    '&::after': { display: 'none' }
-  },
-
-  [`&.${boxDrawingItemClasses.clickable}`]: {
-    cursor: 'pointer'
-  }
+  ...(isLast && {
+    '&::after': {
+      display: 'none'
+    }
+  })
 }));
 
-const BoxDrawingItemPoint = styled('div', {
-  name: 'ESBoxDrawingItem',
-  slot: 'Point',
-  overridesResolver: (props, styles) => {
-    return [styles.point];
-  }
-})(({ theme }) => ({
-  position: 'absolute',
-  top: 'calc(50% - 1.5px)',
-  left: '7.5px',
-  width: '3px',
-  height: '3px',
-  borderRadius: '50%',
-
-  background: theme.vars.palette.monoA.A400
-}));
-
-export const BoxDrawingItem: OverridableComponent<BoxDrawingItemTypeMap> = (inProps: BoxDrawingItemProps) => {
+export const BoxDrawingItem = (inProps: BoxDrawingItemProps) => {
   const {
-    children,
     className,
     classes: inClasses,
-    clickable: inClickable,
-    onClick,
-
+    isLast,
     ...props
   } = useThemeProps({
     props: inProps,
     name: 'ESBoxDrawingItem'
   });
 
-  const clickable = inClickable !== false && onClick ? true : inClickable;
-
   const ownerState = {
     classes: inClasses,
-    clickable
+    isLast
   };
 
   const classes = useUtilityClasses(ownerState);
 
-  return (
-    <BoxDrawingItemRoot className={clsx(classes.root, className)} onClick={onClick} {...props}>
-      <BoxDrawingItemPoint className={classes.point} />
-      {children}
-    </BoxDrawingItemRoot>
-  );
+  return <BoxDrawingItemRoot className={clsx(classes.root, className)} ownerState={ownerState} {...props} />;
 };
diff --git a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
index 10b2bf099..6f1c422b9 100644
--- a/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
+++ b/packages/react/src/components/BoxDrawing/BoxDrawingItem/BoxDrawingItem.types.ts
@@ -1,32 +1,16 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
-import { ReactNode } from 'react';
-
 import { BoxDrawingItemClasses } from './BoxDrawingItem.classes';
 
 import { SxProps, Theme } from '@mui/material';
-import { OverrideProps } from '@mui/material/OverridableComponent';
 
-export interface BoxDrawingItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P & {
-    children?: ReactNode;
-    /** Override or extend the styles applied to the component. */
-    classes?: Partial<BoxDrawingItemClasses>;
-    /** The system prop that allows defining system overrides as well as additional CSS styles. */
-    sx?: SxProps<Theme>;
-    /** Class applied to the root element. */
-    className?: string;
+export interface BoxDrawingItemProps {
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<BoxDrawingItemClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /** Class applied to the root element. */
+  className?: string;
 
-    /**
-     * If `true`, component will appear clickable, even if the onClick prop is not defined.
-     * If `false`, component will not appear clickable, even if onClick prop is defined.
-     * */
-    clickable?: boolean;
-  };
-  defaultComponent: D;
+  isLast?: boolean;
 }
-
-export type BoxDrawingItemProps<
-  D extends React.ElementType = BoxDrawingItemTypeMap['defaultComponent'],
-  P = {}
-> = OverrideProps<BoxDrawingItemTypeMap<P, D>, D>;
diff --git a/packages/react/src/components/Sidebar/Sidebar.stories.tsx b/packages/react/src/components/Sidebar/Sidebar.stories.tsx
index ac9a0ac59..6b62858ac 100644
--- a/packages/react/src/components/Sidebar/Sidebar.stories.tsx
+++ b/packages/react/src/components/Sidebar/Sidebar.stories.tsx
@@ -2,7 +2,6 @@ import { ComponentProps, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ListItemButton } from '@mui/material';
 import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -141,10 +140,12 @@ export const Demo: Story = {
                 ))}
               </SidebarItem>
               <SidebarItem icon={<IconAt />} id="1" text={locale === 'en' ? 'Files' : 'Файлы'}>
+                <BoxDrawing bottomOffset="20" />
                 {[...Array(8)].map((_, i) => (
                   <SidebarItem
                     key={i}
                     inset
+                    icon={<BoxDrawingItem isLast={i === 7} />}
                     text={(locale === 'en' ? 'File' : 'Файл') + ' №' + i}
                     onClick={() => console.info(`File ${i}`)}
                   />
@@ -170,32 +171,6 @@ export const Demo: Story = {
                 text={locale === 'en' ? 'Inbox' : 'Входящие'}
                 onClick={() => console.info(`Inbox`)}
               />
-
-              <BoxDrawing
-                header={
-                  <SidebarItem
-                    icon={<IconAt />}
-                    text={locale === 'en' ? 'Inbox' : 'Входящие'}
-                    onClick={() => console.info(`Inbox`)}
-                  />
-                }
-              >
-                <BoxDrawingItem>
-                  <ListItemButton>
-                    <ListItemText primary="BoxDrawing 1" />
-                  </ListItemButton>
-                </BoxDrawingItem>
-                <BoxDrawingItem>
-                  <ListItemButton>
-                    <ListItemText primary="BoxDrawing 2" />
-                  </ListItemButton>
-                </BoxDrawingItem>
-                <BoxDrawingItem>
-                  <ListItemButton>
-                    <ListItemText primary="BoxDrawing 3" />
-                  </ListItemButton>
-                </BoxDrawingItem>
-              </BoxDrawing>
             </SidebarMenu>
           </SidebarScrollable>
           <SidebarSpacer />
diff --git a/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx b/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx
index 868cbdc5c..7d60c5876 100644
--- a/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx
+++ b/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx
@@ -224,6 +224,7 @@ const SidebarItemNestedMenu = styled('div', {
   flexDirection: 'column',
   gap: '2px',
   marginTop: '2px',
+  position: 'relative',
 
   [`& .${sidebarItemClasses.root}`]: {
     margin: '0'