@skbkontur/side-menu 0.4.1 → 0.4.2

package/src/SideMenu.styles.js

@@ -3,7 +3,7 @@ import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 var subItemTextSeparatedMenuFirstLevelXMargin = '8px';
 var styles = {
     root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      padding: 0 16px 24px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "], ["\n      width: 232px;\n      height: 100%;\n      background: #f6f6f6;\n      position: relative;\n      box-sizing: border-box;\n      transition: width 1s;\n    "])));
     },
     rootSafari: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "], ["\n      &::-webkit-scrollbar {\n        display: block;\n        width: 10px;\n      }\n      &::-webkit-scrollbar-track {\n        background: #f1f1f1;\n      }\n      &::-webkit-scrollbar-thumb {\n        background: #888;\n      }\n    "])));
@@ -17,162 +17,168 @@ var styles = {
     rootWithInnerSubMenu: function () {
         return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
+    rootInnerContainer: function () {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "], ["\n      height: calc(100% - 24px);\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      overflow-x: hidden;\n      overflow-y: auto;\n      padding: 0 16px 24px;\n    "])));
+    },
     rootWrapper: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "], ["\n      height: 100%;\n      display: inline-flex;\n      position: relative;\n    "])));
     },
     rootWrapperIE: function () {
         var ieRootWrapperCorrection = 15;
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "], ["\n      position: relative;\n      top: -", "px;\n      height: calc(100% + ", "px);\n    "])), ieRootWrapperCorrection, ieRootWrapperCorrection);
     },
     resizableRightBorder: function () {
-        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
     },
     body: function () {
-        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "], ["\n      flex-grow: 1;\n      padding-bottom: 16px;\n      margin-top: 0;\n    "])));
     },
     footer: function () {
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      flex-grow: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      flex-grow: 0;\n    "], ["\n      flex-grow: 0;\n    "])));
     },
     headerWrapper: function () {
-        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "], ["\n      position: sticky;\n      width: 186px;\n      top: 0;\n      background: #f6f6f6;\n      z-index: 1;\n      padding: 24px 8px 16px;\n    "])));
     },
     headerMinimisedWrapper: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "], ["\n      width: 54px;\n      padding-left: 0 !important;\n      padding-right: 0;\n    "])));
     },
     headerFixedWrapper: function () {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      border-bottom: 1px solid #e6e6e6;\n    "], ["\n      border-bottom: 1px solid #e6e6e6;\n    "])));
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      border-bottom: 1px solid #e6e6e6;\n    "], ["\n      border-bottom: 1px solid #e6e6e6;\n    "])));
     },
     item: function () {
-        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "], ["\n      border: none;\n      margin: 0;\n      padding: 0;\n      overflow: visible;\n      color: inherit;\n      font: inherit;\n      line-height: normal;\n      text-align: inherit;\n      outline: none;\n      width: 100%;\n      background: #f6f6f6;\n      border-radius: 8px;\n      box-sizing: border-box;\n      cursor: pointer;\n      &:hover {\n        background: rgba(255, 255, 255, 0.48);\n      }\n      &:focus {\n        outline: none;\n      }\n    "])));
     },
     subItem: function () {
-        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "], ["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "])));
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "], ["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "])));
     },
     focusedItem: function () {
-        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "], ["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "])));
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "], ["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "])));
     },
     activeItem: function () {
-        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      background: #fff !important;\n    "], ["\n      background: #fff !important;\n    "])));
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      background: #fff !important;\n    "], ["\n      background: #fff !important;\n    "])));
     },
     activeSubItem: function () {
-        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      background: #f2f2f2 !important;\n    "], ["\n      background: #f2f2f2 !important;\n    "])));
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: #f2f2f2 !important;\n    "], ["\n      background: #f2f2f2 !important;\n    "])));
     },
     itemWrapper: function () {
-        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     itemMultilineWrapper: function () {
-        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
     itemLargeWrapper: function () {
-        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
+        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
     },
     subItemLargeWrapper: function () {
-        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
+        return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
     },
     itemLargeMultilineWrapper: function () {
-        return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
     },
     subItemWrapper: function () {
-        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
     },
     itemText: function () {
-        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
+        return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
     },
     itemTextTransitioned: function () {
-        return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
+        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
     },
     itemTextMultiline: function () {
-        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
     subItemText: function () {
-        return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
     },
     subItemTextSeparatedMenuFirstLevel: function () {
-        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      margin: 0 ", ";\n    "], ["\n      margin: 0 ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
+        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      margin: 0 ", ";\n    "], ["\n      margin: 0 ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
     },
     nestedSubItemTextSeparatedMenu: function () {
-        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      margin: 0 20px;\n    "], ["\n      margin: 0 20px;\n    "])));
+        return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      margin-left: 25px;\n    "], ["\n      margin-left: 25px;\n    "])));
     },
     itemTextWithoutItemIcon: function () {
-        return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
+        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      margin-left: 40px;\n    "], ["\n      margin-left: 40px;\n    "])));
     },
     subItemTextWithoutColumnIcons: function () {
-        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
     itemTextLarge: function () {
-        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
     },
     dividerInDropdown: function () {
-        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));
+        return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "], ["\n      background: #ebebeb;\n      height: 1px;\n      border: none;\n      margin: 4px 12px 4px 32px;\n    "])));
     },
     dividerInSideMenu: function () {
-        return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "], ["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "])));
+        return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "], ["\n      background: #d6d6d6;\n      margin-left: 8px;\n      margin-right: 8px;\n    "])));
     },
     icon: function () {
-        return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "])));
+        return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n    "])));
     },
     iconMultiline: function () {
-        return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
+        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      min-height: 0;\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
     },
     iconLarge: function () {
-        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
+        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
     },
     iconMultilineLarge: function () {
-        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      min-height: 0;\n    "], ["\n      min-height: 0;\n    "])));
+        return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      min-height: 0;\n    "], ["\n      min-height: 0;\n    "])));
     },
     iconSubItemLarge: function () {
-        return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
+        return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
     },
     iconSubItem: function () {
-        return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
+        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
     },
     iconSubItemSeparatedMenu: function () {
-        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
+        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
     },
     avatarIcon: function () {
-        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      margin: 0 4px;\n      padding: 0;\n    "], ["\n      margin: 0 4px;\n      padding: 0;\n    "])));
+        return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      margin: 0 4px;\n      padding: 0;\n    "], ["\n      margin: 0 4px;\n      padding: 0;\n    "])));
     },
     headerIcon: function () {
-        return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
+        return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      padding: 0 4px;\n    "], ["\n      padding: 0 4px;\n    "])));
     },
     marker: function () {
-        return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
+        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
     },
     textAndMarkerWrapper: function () {
-        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
+        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n    "])));
     },
     markerMultiline: function () {
-        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
+        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      align-self: flex-start;\n    "], ["\n      align-self: flex-start;\n    "])));
     },
     subItemHeader: function () {
-        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "])));
+        return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "], ["\n      font-size: 12px;\n      color: rgba(0, 0, 0, 0.48);\n      padding: 10px 8px 2px 40px;\n      margin: 0;\n    "])));
     },
     subItemHeaderInSeparatedSubMenu: function () {
-        return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
+        return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), subItemTextSeparatedMenuFirstLevelXMargin);
     },
     separatedMenu: function () {
-        return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding-top: 24px;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding-top: 24px;\n      border-right: 1px solid #e5e5e5;\n    "])));
+        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "], ["\n      position: absolute;\n      top: 0;\n      z-index: 8000;\n      background: #fff;\n      left: 100%;\n      overflow: auto;\n      justify-content: flex-start;\n      padding: 24px 16px;\n      border-right: 1px solid #e5e5e5;\n    "])));
     },
     dropdownWrapper: function () {
-        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
+        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      overflow-x: hidden;\n    "], ["\n      overflow-x: hidden;\n    "])));
     },
     dropdownLabel: function () {
-        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
+        return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n      width: 200px;\n      transition: width 1s;\n    "], ["\n      width: 200px;\n      transition: width 1s;\n    "])));
     },
     dropdownLabelMinimized: function () {
-        return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
+        return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
     },
-    subItemMenu: function () {
-        return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
+    nestedMenu: function () {
+        return css(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
     },
     rightBorder: function () {
-        return css(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "])));
+        return css(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "])));
+    },
+    link: function () {
+        return css(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n      color: inherit;\n      text-decoration: none;\n      display: inline-block;\n    "], ["\n      color: inherit;\n      text-decoration: none;\n      display: inline-block;\n    "])));
     },
 };
 export var customStyles = {
     rightBorderHovered: function (color) {
-        return css(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "], ["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "])), color);
+        return css(templateObject_58 || (templateObject_58 = __makeTemplateObject(["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "], ["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "])), color);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58;

package/src/SideMenuAvatar/SideMenuAvatar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { UserAvatarProps } from '@skbkontur/react-ui-addons/components/UserAvatar';
+import { SideMenuDropdownProps } from '../SideMenuDropdown/SideMenuDropdown';
+export interface SideMenuAvatarProps extends UserAvatarProps, Omit<SideMenuDropdownProps, 'icon' | '_avatar' | 'caption'>, Partial<Pick<SideMenuDropdownProps, 'icon' | 'onOpen' | 'onClose'>> {
+}
+/**
+ * Аватар пользователя
+ *
+ * @visibleName SideMenu.Avatar
+ */
+export declare const SideMenuAvatar: React.ForwardRefExoticComponent<SideMenuAvatarProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/{SideMenuAvatar.js → SideMenuAvatar/SideMenuAvatar.js}

@@ -1,18 +1,17 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { UserAvatar } from '@skbkontur/react-ui-addons/components/UserAvatar';
-import { SideMenuDropdown } from './SideMenuDropdown';
-/**
- * Аватар пользователя
- *
- * @visibleName SideMenu.Avatar
- */
-var SideMenuAvatar = forwardRef(function (_a, ref) {
+import { SideMenuDropdown } from '../SideMenuDropdown/SideMenuDropdown';
+var SideMenuAvatarInner = forwardRef(function (_a, ref) {
     var userName = _a.userName, avatarUrl = _a.avatarUrl, children = _a.children, icon = _a.icon, rest = __rest(_a, ["userName", "avatarUrl", "children", "icon"]);
     return (
     // @ts-expect-error: icon is not provided as _avatar replaces it
     React.createElement(SideMenuDropdown, __assign({ _avatar: React.createElement(UserAvatar, { userName: userName, avatarUrl: avatarUrl }), caption: userName, menuWidth: 200, positions: ['top left'], ref: ref }, rest), children));
 });
-SideMenuAvatar.displayName = 'SideMenuAvatar';
-var SideMenuAvatarWithStaticFields = Object.assign(SideMenuAvatar, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });
-export { SideMenuAvatarWithStaticFields as SideMenuAvatar };
+SideMenuAvatarInner.displayName = 'SideMenuAvatar';
+/**
+ * Аватар пользователя
+ *
+ * @visibleName SideMenu.Avatar
+ */
+export var SideMenuAvatar = Object.assign(SideMenuAvatarInner, { __KONTUR_REACT_UI__: 'SideMenuAvatar' });

package/src/SideMenuBody/SideMenuBody.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+export interface SideMenuBodyProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/**
+ * Основной контейнер для меню
+ *
+ * @visibleName SideMenu.Body
+ */
+export declare const SideMenuBody: React.ForwardRefExoticComponent<SideMenuBodyProps & React.RefAttributes<HTMLDivElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/{SideMenuBody.js → SideMenuBody/SideMenuBody.js}

@@ -1,19 +1,18 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuBodyChildren } from './SideMenuBodyChildren';
+import { jsStyles } from '../SideMenu.styles';
+import { InnerBody } from '../internal/InnerBody';
+var SideMenuBodyInner = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
+        React.createElement(InnerBody, null, children)));
+});
+SideMenuBodyInner.displayName = 'SideMenuBody';
 /**
  * Основной контейнер для меню
  *
  * @visibleName SideMenu.Body
  */
-var SideMenuBody = forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign({ className: cx((_b = {}, _b[jsStyles.body()] = true, _b), className), ref: ref }, rest),
-        React.createElement(SideMenuBodyChildren, null, children)));
-});
-SideMenuBody.displayName = 'SideMenuBody';
-var SideMenuBodyWithStaticFields = Object.assign(SideMenuBody, { __KONTUR_REACT_UI__: 'SideMenuBody' });
-export { SideMenuBodyWithStaticFields as SideMenuBody };
+export var SideMenuBody = Object.assign(SideMenuBodyInner, { __KONTUR_REACT_UI__: 'SideMenuBody' });

package/src/SideMenuDivider/SideMenuDivider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
+/**
+ * Разделитель в главном меню
+ *
+ * @visibleName SideMenu.Divider
+ */
+export declare const SideMenuDivider: React.ForwardRefExoticComponent<CommonProps & React.RefAttributes<HTMLHRElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/{SideMenuDivider.js → SideMenuDivider/SideMenuDivider.js}

@@ -1,17 +1,16 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
+import { jsStyles } from '../SideMenu.styles';
+var SideMenuDividerInner = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.dividerInDropdown()] = true, _b), className), ref: ref }, rest));
+});
+SideMenuDividerInner.displayName = 'SideMenuDivider';
 /**
  * Разделитель в главном меню
  *
  * @visibleName SideMenu.Divider
  */
-var SideMenuDivider = forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, rest = __rest(_a, ["className"]);
-    return React.createElement("hr", __assign({ className: cx((_b = {}, _b[jsStyles.dividerInDropdown()] = true, _b), className), ref: ref }, rest));
-});
-SideMenuDivider.displayName = 'SideMenuDivider';
-var SideMenuDividerWithStaticFields = Object.assign(SideMenuDivider, { __KONTUR_REACT_UI__: 'SideMenuDivider' });
-export { SideMenuDividerWithStaticFields as SideMenuDivider };
+export var SideMenuDivider = Object.assign(SideMenuDividerInner, { __KONTUR_REACT_UI__: 'SideMenuDivider' });

package/src/{SideMenuDropdown.d.ts → SideMenuDropdown/SideMenuDropdown.d.ts}

@@ -9,7 +9,11 @@ export interface SideMenuDropdownProps extends CommonProps, Omit<DropdownMenuPro
     _avatar?: React.ReactElement;
     id?: string;
 }
-declare const SideMenuDropdownWithStaticFields: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
+/**
+ * Элемент списка с выпадающим меню
+ *
+ * @visibleName SideMenu.Dropdown
+ */
+export declare const SideMenuDropdown: React.ForwardRefExoticComponent<SideMenuDropdownProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };
-export { SideMenuDropdownWithStaticFields as SideMenuDropdown };

package/src/{SideMenuDropdown.js → SideMenuDropdown/SideMenuDropdown.js}

@@ -3,15 +3,10 @@ import React, { forwardRef, useContext } from 'react';
 import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { DEFAULT_THEME, DropdownMenu, ThemeFactory } from '@skbkontur/react-ui';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuItem } from './SideMenuItem';
-import { SideMenuContext } from './SideMenuContext';
-/**
- * Элемент списка с выпадающим меню
- *
- * @visibleName SideMenu.Dropdown
- */
-var SideMenuDropdown = forwardRef(function (_a, ref) {
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuItem } from '../SideMenuItem/SideMenuItem';
+import { SideMenuContext } from '../SideMenuContext';
+var SideMenuDropdownInner = forwardRef(function (_a, ref) {
     var _b, _c;
     var icon = _a.icon, id = _a.id, _avatar = _a._avatar, children = _a.children, _d = _a.caption, caption = _d === void 0 ? 'СКБ Контур' : _d, className = _a.className, _e = _a.disableAnimations, disableAnimations = _e === void 0 ? false : _e, menuWidth = _a.menuWidth, rest = __rest(_a, ["icon", "id", "_avatar", "children", "caption", "className", "disableAnimations", "menuWidth"]);
     var context = useContext(SideMenuContext);
@@ -29,6 +24,10 @@ var SideMenuDropdown = forwardRef(function (_a, ref) {
         React.createElement("div", __assign({ className: cx((_c = {}, _c[jsStyles.dropdownWrapper()] = true, _c), className), ref: ref }, rest),
             React.createElement(DropdownMenu, __assign({ caption: label, positions: ['top left'], disableAnimations: true, menuWidth: menuWidth }, rest), children))));
 });
-SideMenuDropdown.displayName = 'SideMenuDropdown';
-var SideMenuDropdownWithStaticFields = Object.assign(SideMenuDropdown, { __KONTUR_REACT_UI__: 'SideMenuDropdown' });
-export { SideMenuDropdownWithStaticFields as SideMenuDropdown };
+SideMenuDropdownInner.displayName = 'SideMenuDropdown';
+/**
+ * Элемент списка с выпадающим меню
+ *
+ * @visibleName SideMenu.Dropdown
+ */
+export var SideMenuDropdown = Object.assign(SideMenuDropdownInner, { __KONTUR_REACT_UI__: 'SideMenuDropdown' });

package/src/{SideMenuFooter.d.ts → SideMenuFooter/SideMenuFooter.d.ts}

@@ -3,7 +3,11 @@ import { CommonProps } from '@skbkontur/react-ui/internal/CommonWrapper';
 export interface SideMenuFooterProps extends CommonProps {
     children?: React.ReactNode;
 }
-declare const SideMenuFooterWithStaticFields: React.FC<SideMenuFooterProps> & {
+/**
+ * Нижняя часть меню
+ *
+ * @visibleName SideMenu.Footer
+ */
+export declare const SideMenuFooter: React.FC<SideMenuFooterProps> & {
     __KONTUR_REACT_UI__: string;
 };
-export { SideMenuFooterWithStaticFields as SideMenuFooter };

package/src/{SideMenuFooter.js → SideMenuFooter/SideMenuFooter.js}

@@ -1,14 +1,9 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { jsStyles } from './SideMenu.styles';
-import { getItemId } from '../utils/scripts';
-/**
- * Нижняя часть меню
- *
- * @visibleName SideMenu.Footer
- */
-var SideMenuFooter = forwardRef(function (_a, ref) {
+import { jsStyles } from '../SideMenu.styles';
+import { getItemId } from '../../utils/scripts';
+var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     return (React.createElement("footer", __assign({ className: cx((_b = {}, _b[jsStyles.footer()] = true, _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
@@ -20,6 +15,10 @@ var SideMenuFooter = forwardRef(function (_a, ref) {
         return child;
     })));
 });
-SideMenuFooter.displayName = 'SideMenuFooter';
-var SideMenuFooterWithStaticFields = Object.assign(SideMenuFooter, { __KONTUR_REACT_UI__: 'SideMenuFooter' });
-export { SideMenuFooterWithStaticFields as SideMenuFooter };
+SideMenuFooterInner.displayName = 'SideMenuFooter';
+/**
+ * Нижняя часть меню
+ *
+ * @visibleName SideMenu.Footer
+ */
+export var SideMenuFooter = Object.assign(SideMenuFooterInner, { __KONTUR_REACT_UI__: 'SideMenuFooter' });

package/src/{SideMenuHeader.d.ts → SideMenuHeader/SideMenuHeader.d.ts}

@@ -3,7 +3,11 @@ import { LogotypeProps } from '@skbkontur/react-ui-addons/components/Logotype';
 export interface SideMenuHeaderProps extends Partial<LogotypeProps> {
     iconUrl?: string;
 }
-declare const SideMenuHeaderWithStaticFields: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
+/**
+ * Контейнер для логотипа
+ *
+ * @visibleName SideMenu.Header
+ */
+export declare const SideMenuHeader: React.ForwardRefExoticComponent<SideMenuHeaderProps & React.RefAttributes<HTMLDivElement>> & {
     __KONTUR_REACT_UI__: string;
 };
-export { SideMenuHeaderWithStaticFields as SideMenuHeader };

package/src/{SideMenuHeader.js → SideMenuHeader/SideMenuHeader.js}

@@ -2,15 +2,10 @@ import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
-import { jsStyles } from './SideMenu.styles';
-import { SideMenuContext } from './SideMenuContext';
-import { SideMenuLogotype } from './SideMenuLogotype';
-/**
- * Контейнер для логотипа
- *
- * @visibleName SideMenu.Header
- */
-var SideMenuHeader = forwardRef(function (_a, ref) {
+import { jsStyles } from '../SideMenu.styles';
+import { SideMenuContext } from '../SideMenuContext';
+import { SideMenuLogotype } from '../internal/SideMenuLogotype';
+var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, withWidget = _a.withWidget, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "withWidget"]);
     var context = useContext(SideMenuContext);
@@ -37,6 +32,10 @@ var SideMenuHeader = forwardRef(function (_a, ref) {
             _b), className), ref: mergeRefs([headerWrapperRef, ref]) }, rest),
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });
-SideMenuHeader.displayName = 'SideMenuHeader';
-var SideMenuHeaderWithStaticFields = Object.assign(SideMenuHeader, { __KONTUR_REACT_UI__: 'SideMenuHeader' });
-export { SideMenuHeaderWithStaticFields as SideMenuHeader };
+SideMenuHeaderInner.displayName = 'SideMenuHeader';
+/**
+ * Контейнер для логотипа
+ *
+ * @visibleName SideMenu.Header
+ */
+export var SideMenuHeader = Object.assign(SideMenuHeaderInner, { __KONTUR_REACT_UI__: 'SideMenuHeader' });

package/src/SideMenuItem/SideMenuItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CommonClickableElementProps } from '../internal/ClickableElement';
+export interface SideMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonClickableElementProps {
+}
+/**
+ * Элемент списка
+ *
+ * Может принимать все атрибуты обычной HTML-кнопки
+ *
+ * @visibleName SideMenu.Item
+ */
+export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>> & {
+    __KONTUR_REACT_UI__: string;
+};

package/src/SideMenuItem/SideMenuItem.js

@@ -0,0 +1,15 @@
+import { __assign } from "tslib";
+import React, { forwardRef } from 'react';
+import { ClickableElement } from '../internal/ClickableElement';
+var SideMenuItemInner = forwardRef(function (props, ref) {
+    return React.createElement(ClickableElement, __assign({}, props, { ref: ref, element: 'button' }));
+});
+SideMenuItemInner.displayName = 'SideMenuItem';
+/**
+ * Элемент списка
+ *
+ * Может принимать все атрибуты обычной HTML-кнопки
+ *
+ * @visibleName SideMenu.Item
+ */
+export var SideMenuItem = Object.assign(SideMenuItemInner, { __KONTUR_REACT_UI__: 'SideMenuItem' });

package/src/SideMenuLink/SideMenuLink.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CommonClickableElementProps } from '../internal/ClickableElement';
+export interface SideMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, CommonClickableElementProps {
+}
+/**
+ * Ссылка для `SideMenu`
+ *
+ * Визуально повторяет `SideMenu.Item`
+ *
+ * Может принимать все атрибуты обычной HTML-ссылки
+ *
+ * @visibleName SideMenu.Link
+ */
+export declare const SideMenuLink: React.ForwardRefExoticComponent<SideMenuLinkProps & React.RefAttributes<HTMLAnchorElement>> & {
+    __KONTUR_REACT_UI__: string;
+};