@skbkontur/side-menu 0.9.5 → 0.10.0

package/src/SideMenuDropdown/SideMenuDropdown.styles.js

@@ -1,9 +1,10 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 import { transitionDuration } from '../SideMenu/SideMenu';
 var styles = {
-    label: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 200px;\n      transition: width ", "ms ease-out;\n    "], ["\n      width: 200px;\n      transition: width ", "ms ease-out;\n    "])), transitionDuration);
+    label: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "], ["\n      width: calc(", " - 2 * ", ");\n      transition: width ", "ms ease-out;\n    "])), t.sideMenuWidth, t.sideMenuMarginX, transitionDuration);
     },
     minimizedLabel: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));

package/src/SideMenuFooter/SideMenuFooter.js

@@ -1,21 +1,24 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuFooter.styles';
-import { getItemId } from '../../utils/scripts';
+import { getItemId } from '../../lib/utils/scripts';
 import { SideMenuContext } from '../SideMenuContext';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuFooterInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var _c = useState(false), isFixed = _c[0], setIsFixed = _c[1];
     useEffect(function () {
         setIsFixed(!!context.hasScrollBar && !(context.scrollState === 'bottom'));
     }, [context.hasScrollBar, context.scrollState]);
     if (context.isShown) {
         return (React.createElement("footer", __assign({ className: cx((_b = {},
-                _b[jsStyles.root()] = true,
-                _b[jsStyles.rootFixed()] = isFixed,
+                _b[jsStyles.root(theme)] = true,
+                _b[jsStyles.rootFixed(theme)] = isFixed,
                 _b[jsStyles.rootTransitioned()] = context.isBeingTransitioned,
                 _b), className), ref: ref }, rest), React.Children.map(children, function (child, index) {
             if (React.isValidElement(child)) {

package/src/SideMenuFooter/SideMenuFooter.md

@@ -0,0 +1,8 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuFooterPaddingBottom: string;
+  sideMenuFooterPaddingTop: string;
+  sideMenuFooterDividerColor: string;
+}

package/src/SideMenuFooter/SideMenuFooter.styles.d.ts

@@ -1,5 +1,6 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
-    rootFixed(): string;
+    root(t: SideMenuTheme): string;
+    rootFixed(t: SideMenuTheme): string;
     rootTransitioned(): string;
 };

package/src/SideMenuFooter/SideMenuFooter.styles.js

@@ -1,12 +1,12 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { sideMenuMarginX } from '../SideMenu/SideMenu.styles';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: 24px;\n      padding-top: 8px;\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: 24px;\n      padding-top: 8px;\n      margin: 0 ", ";\n    "])), sideMenuMarginX);
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n    "], ["\n      flex-grow: 0;\n      position: sticky;\n      bottom: 0;\n      padding-bottom: ", ";\n      padding-top: ", ";\n      margin: 0 ", ";\n    "])), t.sideMenuFooterPaddingBottom, t.sideMenuFooterPaddingTop, t.sideMenuMarginX);
     },
-    rootFixed: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 1px 0 #e6e6e6;\n    "], ["\n      box-shadow: inset 0 1px 0 #e6e6e6;\n    "])));
+    rootFixed: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0 1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 1px 0 ", ";\n    "])), t.sideMenuFooterDividerColor);
     },
     rootTransitioned: function () {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));

package/src/SideMenuHeader/SideMenuHeader.js

@@ -1,22 +1,31 @@
 import { __assign, __rest } from "tslib";
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { mergeRefs } from '@skbkontur/react-ui/lib/utils';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuHeader.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { SideMenuLogotype } from '../internal/SideMenuLogotype';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { getDOMRect } from '@skbkontur/react-ui/lib/dom/getDOMRect';
 var SideMenuHeaderInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, productLogo = _a.productLogo, konturLogo = _a.konturLogo, iconUrl = _a.iconUrl, style = _a.style, withWidget = _a.withWidget, rest = __rest(_a, ["className", "productLogo", "konturLogo", "iconUrl", "style", "withWidget"]);
     var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var headerWrapperRef = useRef(null);
+    useEffect(function () {
+        var _a;
+        if (headerWrapperRef.current) {
+            (_a = context.setHeaderHeight) === null || _a === void 0 ? void 0 : _a.call(context, getDOMRect(headerWrapperRef.current).height);
+        }
+    }, []);
     return (React.createElement("header", __assign({ className: cx((_b = {},
-            _b[jsStyles.root()] = true,
-            _b[jsStyles.rootForTabletsOrMobiles()] = context.isMobile || context.isTablet,
-            _b[jsStyles.fixedRoot()] = context.isShown && !(context.scrollState === 'top'),
-            _b[jsStyles.minimizedRoot()] = context.isMinimized || context.isBeingTransitioned,
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootForTabletsOrMobiles(theme)] = context.isMobile || context.isTablet,
+            _b[jsStyles.fixedRoot(theme)] = context.isShown && !(context.scrollState === 'top'),
             _b[jsStyles.collapsedRootForTabletsOrMobiles()] = !context.isShown || context.isBeingTransitioned,
-            _b[jsStyles.rootWithSeparatedMenuShown()] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
+            _b[jsStyles.rootWithSeparatedMenuShown(theme)] = context.isShown && context.isMobile && context.isSeparatedMenuShown,
             _b), className), ref: mergeRefs([headerWrapperRef, ref]), style: style }, rest),
         React.createElement(SideMenuLogotype, __assign({ productLogo: productLogo, konturLogo: konturLogo, iconUrl: iconUrl, withWidget: withWidget }, rest))));
 });

package/src/SideMenuHeader/SideMenuHeader.md

@@ -0,0 +1,16 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuHeaderPaddingTop: string;
+  sideMenuHeaderPaddingBottom: string;
+  sideMenuHeaderDividerColor: string;
+  sideMenuHeaderPaddingTopForTouchScreens: string;
+  //#region Logotype
+  sideMenuLogotypePaddingLeft: string;
+  sideMenuLogotypePaddingTop: string;
+  sideMenuLogotypePaddingBottom: string;
+  sideMenuLogotypePaddingYForTouchScreens: string;
+  sideMenuLogotypeHiddenIconPaddingLeft: string;
+  //#endregion
+}

package/src/SideMenuHeader/SideMenuHeader.styles.d.ts

@@ -1,8 +1,8 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
-    minimizedRoot(): string;
-    rootForTabletsOrMobiles(): string;
+    root(t: SideMenuTheme): string;
+    rootForTabletsOrMobiles(t: SideMenuTheme): string;
     collapsedRootForTabletsOrMobiles(): string;
-    rootWithSeparatedMenuShown(): string;
-    fixedRoot(): string;
+    rootWithSeparatedMenuShown(t: SideMenuTheme): string;
+    fixedRoot(t: SideMenuTheme): string;
 };

package/src/SideMenuHeader/SideMenuHeader.styles.js

@@ -1,25 +1,22 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { sideMenuMarginX } from '../SideMenu/SideMenu.styles';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: 24px 0 8px;\n      margin: 0 ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: 24px 0 8px;\n      margin: 0 ", ";\n    "])), sideMenuMarginX, sideMenuMarginX);
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n    "], ["\n      position: sticky;\n      width: calc(100% - 2 * ", ");\n      top: 0;\n      z-index: 1;\n      padding: ", " 0 ", ";\n      margin: 0 ", ";\n    "])), t.sideMenuMarginX, t.sideMenuHeaderPaddingTop, t.sideMenuHeaderPaddingBottom, t.sideMenuMarginX);
     },
-    minimizedRoot: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 54px;\n    "], ["\n      width: 54px;\n    "])));
-    },
-    rootForTabletsOrMobiles: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 16px;\n    "], ["\n      padding-top: 16px;\n    "])));
+    rootForTabletsOrMobiles: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sideMenuHeaderPaddingTopForTouchScreens);
     },
     collapsedRootForTabletsOrMobiles: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: transparent;\n    "], ["\n      background: transparent;\n    "])));
     },
-    rootWithSeparatedMenuShown: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: #fff;\n    "], ["\n      background: #fff;\n    "])));
+    rootWithSeparatedMenuShown: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), t.sideMenuSeparatedSubMenuBgColor);
     },
-    fixedRoot: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "], ["\n      padding-bottom: 8px;\n      box-shadow: inset 0 -1px 0 #e6e6e6;\n    "])));
+    fixedRoot: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-shadow: inset 0 -1px 0 ", ";\n    "], ["\n      box-shadow: inset 0 -1px 0 ", ";\n    "])), t.sideMenuHeaderDividerColor);
     },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/src/SideMenuItem/SideMenuItem.md

@@ -0,0 +1,63 @@
+#### Переменные кастомизации (см. [ThemeContext](https://tech.skbkontur.ru/react-ui/#/Customization/ThemeContext))
+
+```typescript
+{
+  sideMenuItemBorderRadius: string;
+  sideMenuItemHoverBg: string;
+  sideMenuItemActiveBg: string;
+  sideMenuSubItemWithSeparatedSubMenuHoverBg: string;
+  sideMenuSubItemWithSeparatedSubMenuActiveBg: string;
+  sideMenuFocusedItemBoxShadowInset: string;
+  sideMenuFocusedItemBoxShadowOffsetX: string;
+  sideMenuFocusedItemBoxShadowOffsetY: string;
+  sideMenuFocusedItemBoxShadowBlurRadius: string;
+  sideMenuFocusedItemBoxShadowSpreadRadius: string;
+  sideMenuFocusedItemBoxShadowColor: string;
+  ideMenuFocusedItemBoxShadow: string;
+  // #region ItemContent
+  sideMenuItemContentPaddingY: string;
+  sideMenuItemContentLargePaddingY: string;
+  sideMenuSubItemContentPaddingY: string;
+  sideMenuSubItemContentLargePaddingY: string;
+  sideMenuItemContentLargeMultilinePaddingY: string;
+  sideMenuItemContentPaddingYForTouchScreens: string;
+  sideMenuSubItemContentPaddingYForTouchScreens: string;
+  //#endregion
+  // #region Icon
+  sideMenuIconSize: string;
+  sideMenuIconSubItemSize: string;
+  sideMenuIconPaddingY: string;
+  sideMenuIconPaddingX: string;
+  sideMenuIconMinHeight: string;
+  sideMenuIconLineHeight: string;
+  sideMenuIconLargeMinHeight: string;
+  sideMenuIconLargeLineHeight: string;
+  sideMenuIconSubItemPaddingLeft: string;
+  sideMenuIconSubItemPaddingRight: string;
+  sideMenuIconSubItemMinHeight: string;
+  sideMenuIconSubItemLineHeight: string;
+  sideMenuIconSubItemColor: string;
+  sideMenuIconLargeSubItemMinHeight: string;
+  sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft: string;
+  //#endregion
+  // #region Caption
+  sideMenuCaptionLineHeight: string;
+  sideMenuCaptionFontSize: string;
+  sideMenuCaptionFontSizeForTouchScreens: string;
+  sideMenuCaptionLineHeightForTouchScreens: string;
+  sideMenuCaptionSubItemMarginLeft: string;
+  sideMenuCaptionSubItemFontSizeForTouchScreens: string;
+  sideMenuCaptionSubItemLineHeightForTouchScreens: string;
+  sideMenuCaptionLargeFontSize: string;
+  sideMenuCaptionLargeLineHeights: string;
+  //#endregion
+  // #region Marker
+  sideMenuMarkerPaddingX: string;
+  sideMenuMarkerBg: string;
+  sideMenuMarkerColor: string;
+  sideMenuMarkerMarginRight: string;
+  sideMenuMarkerFontWeight: string;
+  sideMenuMarkerMultilineMarginTop: string;
+  //#endregion
+}
+```

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.js

@@ -1,13 +1,19 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './SideMenuSubItemHeader.styles';
 import { SideMenuContext } from '../SideMenuContext';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 var SideMenuSubItemHeaderInner = forwardRef(function (_a, ref) {
     var _b;
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     var context = useContext(SideMenuContext);
-    return (React.createElement("p", __assign({ className: cx((_b = {}, _b[jsStyles.root()] = true, _b[jsStyles.rootInSeparatedSubMenu()] = context.isSeparatedMenu, _b), className), ref: ref }, rest), children));
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return (React.createElement("p", __assign({ className: cx((_b = {},
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootInSeparatedSubMenu()] = context.isSeparatedMenu,
+            _b), className), ref: ref }, rest), children));
 });
 SideMenuSubItemHeaderInner.displayName = 'SideMenuSubItemHeader';
 /**

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.md

@@ -0,0 +1,7 @@
+```typescript
+{
+  sideMenuSubItemHeaderFontSize: string;
+  sideMenuSubItemHeaderColor: string;
+  sideMenuSubItemHeaderPadding: string;
+}
+```

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.d.ts

@@ -1,4 +1,5 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
     rootInSeparatedSubMenu(): string;
 };

package/src/SideMenuSubItemHeader/SideMenuSubItemHeader.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __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    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-size: ", ";\n      color: ", ";\n      padding: ", ";\n      margin: 0;\n    "], ["\n      font-size: ", ";\n      color: ", ";\n      padding: ", ";\n      margin: 0;\n    "])), t.sideMenuSubItemHeaderFontSize, t.sideMenuSubItemHeaderColor, t.sideMenuSubItemHeaderPadding);
     },
     rootInSeparatedSubMenu: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-left: 8px;\n    "], ["\n      padding-left: 8px;\n    "])));

package/src/internal/Backdrop.styles.js

@@ -3,7 +3,7 @@ import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { burgerTransitionDuration } from '../SideMenu/SideMenu';
 var styles = {
     rootForTabletsOrMobiles: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-in;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-in;\n    "])), burgerTransitionDuration);
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      transition: opacity ", "ms ease-out;\n    "])), burgerTransitionDuration);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/Burger.js

@@ -3,8 +3,11 @@ import { jsStyles } from './Burger.styles';
 import { SideMenuContext } from '../SideMenuContext';
 import { UiMenuBarsThreeHIcon24Regular } from '@skbkontur/icons';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 export var Burger = function () {
     var context = useContext(SideMenuContext);
-    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    return (React.createElement("button", { className: jsStyles.rootForTabletsOrMobiles(theme), onClick: context.toggleIsShown, "data-tid": SideMenuDataTids.burger },
         React.createElement(UiMenuBarsThreeHIcon24Regular, null)));
 };

package/src/internal/Burger.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    rootForTabletsOrMobiles(): string;
+    rootForTabletsOrMobiles(t: SideMenuTheme): string;
 };

package/src/internal/Burger.styles.js

@@ -1,9 +1,10 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    rootForTabletsOrMobiles: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: 8px;\n      cursor: pointer;\n    "], ["\n      ", ";\n      margin-right: 8px;\n      cursor: pointer;\n    "])), resetButton());
+    rootForTabletsOrMobiles: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "], ["\n      ", ";\n      margin-right: ", ";\n      cursor: pointer;\n    "])), resetButton(), t.sideMenuBurgerMarginRight);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ClickableElement.js

@@ -8,6 +8,8 @@ import { useOpenedState } from '../../hooks/useOpenedState';
 import { useActiveState } from '../../hooks/useActiveState';
 import { jsStyles } from './ClickableElement.styles';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Элемент списка (пункт меню либо ссылка)
  *
@@ -17,6 +19,7 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var _b;
     var onClick = _a.onClick, icon = _a.icon, _avatar = _a._avatar, marker = _a.marker, caption = _a.caption, subCaption = _a.subCaption, id = _a.id, _isSubMenu = _a._isSubMenu, children = _a.children, _isNestedSubMenu = _a._isNestedSubMenu, _generatedId = _a._generatedId, Tag = _a.element, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, className = _a.className, _isDropdown = _a._isDropdown, _isBackButton = _a._isBackButton, rest = __rest(_a, ["onClick", "icon", "_avatar", "marker", "caption", "subCaption", "id", "_isSubMenu", "children", "_isNestedSubMenu", "_generatedId", "element", "onKeyDown", "onFocus", "onBlur", "className", "_isDropdown", "_isBackButton"]);
     var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var isActive = useActiveState(id, rest.href, _generatedId, context.activeMenuItem);
     var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
     var isOpened = useOpenedState(id || rest.href, _generatedId, context.openedParents, isActive, children, context.isSeparatedMenuShown, context.isMobile && context.isSeparatedMenu);
@@ -94,13 +97,13 @@ var ClickableElement = forwardRef(function (_a, ref) {
     var shouldHighlightTopLevelItemWhenMenuIsMinimized = isOpened && !_isSubMenu && context.isNarrowDesktop && context.isMinimized;
     return (React.createElement("div", null,
         React.cloneElement(React.createElement(Tag, null), __assign({ className: cx((_b = {},
-                _b[jsStyles.root()] = true,
-                _b[jsStyles.rootSubItem()] = context.isSeparatedMenu && _isSubMenu,
-                _b[jsStyles.focusedRoot()] = isFocusedByTab,
-                _b[jsStyles.activeRoot()] = isActive ||
+                _b[jsStyles.root(theme)] = true,
+                _b[jsStyles.rootSubItemInSeparatedSubMenu(theme)] = context.isSeparatedMenu && _isSubMenu,
+                _b[jsStyles.focusedRoot(theme)] = isFocusedByTab,
+                _b[jsStyles.activeRoot(theme)] = isActive ||
                     shouldHighlightTopLevelItemWhenSubItemSelectedInSeparatedMenu ||
                     shouldHighlightTopLevelItemWhenMenuIsMinimized,
-                _b[jsStyles.activeRootSubItemInSeparatedSubMenu()] = isActive && context.isSeparatedMenu && _isSubMenu,
+                _b[jsStyles.activeRootSubItemInSeparatedSubMenu(theme)] = isActive && context.isSeparatedMenu && _isSubMenu,
                 _b), className), onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, children: (React.createElement(ItemContent, { _isSubMenu: _isSubMenu, icon: icon, _isNestedSubMenu: _isNestedSubMenu, caption: caption, subCaption: subCaption, marker: marker, _avatar: _avatar, _isBackButton: _isBackButton })), ref: ref }, rest)),
         React.createElement(SubMenu, { generatedId: _generatedId, id: id, href: rest.href, caption: caption, isSubMenu: _isSubMenu, isSeparatedMenu: context.isSeparatedMenu, isOpened: isOpened, isMinimized: context.isMinimized }, children)));
 });

package/src/internal/ClickableElement.styles.d.ts

@@ -1,7 +1,8 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
-    rootSubItem(): string;
-    focusedRoot(): string;
-    activeRoot(): string;
-    activeRootSubItemInSeparatedSubMenu(): string;
+    root(t: SideMenuTheme): string;
+    rootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
+    focusedRoot(t: SideMenuTheme): string;
+    activeRoot(t: SideMenuTheme): string;
+    activeRootSubItemInSeparatedSubMenu(t: SideMenuTheme): string;
 };

package/src/internal/ClickableElement.styles.js

@@ -1,20 +1,22 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { resetButton } from '@skbkontur/react-ui/lib/styles/Mixins';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __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: transparent;\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: transparent;\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    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      ", ";\n      width: 100%;\n      border-radius: ", ";\n      cursor: pointer;\n      &:hover {\n        background: ", ";\n      }\n    "])), resetButton(), t.sideMenuItemBorderRadius, t.sideMenuItemHoverBg);
     },
-    rootSubItem: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "], ["\n      background: #fff;\n      &:hover {\n        background: #f6f6f6;\n      }\n    "])));
+    rootSubItemInSeparatedSubMenu: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      &:hover {\n        background: ", ";\n      }\n    "], ["\n      &:hover {\n        background: ", ";\n      }\n    "])), t.sideMenuSubItemWithSeparatedSubMenuHoverBg);
     },
-    focusedRoot: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "], ["\n      box-shadow: inset 0 0 0 2px #1c7edf;\n    "])));
+    focusedRoot: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sideMenuFocusedItemBoxShadow);
     },
-    activeRoot: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: #fff !important;\n    "], ["\n      background: #fff !important;\n    "])));
+    activeRoot: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuItemActiveBg);
     },
-    activeRootSubItemInSeparatedSubMenu: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: #f2f2f2 !important;\n    "], ["\n      background: #f2f2f2 !important;\n    "])));
+    activeRootSubItemInSeparatedSubMenu: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.sideMenuSubItemWithSeparatedSubMenuActiveBg);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/InnerBody.js

@@ -2,7 +2,9 @@ import { __assign } from "tslib";
 import React, { isValidElement, useContext, useEffect, useRef, useState } from 'react';
 import { jsStyles } from './InnerBody.styles';
 import { SideMenuContext } from '../SideMenuContext';
-import { getAllParents, getChildrenIdArray, getElementsChildren, getItemId, isClickableElement, } from '../../utils/scripts';
+import { getAllParents, getChildrenIdArray, getElementsChildren, getItemId, isClickableElement, } from '../../lib/utils/scripts';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Внутренняя часть SideMenuBody
  *
@@ -13,6 +15,7 @@ var InnerBody = function (_a) {
     var context = useContext(SideMenuContext);
     var _b = useState([]), parents = _b[0], setParents = _b[1];
     var flattedArrayOfAllElements = useRef([]);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var getFlattedArrayOfAllElements = function () {
         var levelIndex = 0;
         React.Children.map(children, function (child) {
@@ -52,7 +55,7 @@ var InnerBody = function (_a) {
             // @ts-expect-error: accessing private property
             if ((child === null || child === void 0 ? void 0 : child.type.__KONTUR_REACT_UI__) === 'SideMenuDivider') {
                 return React.cloneElement(child, {
-                    className: jsStyles.divider(),
+                    className: jsStyles.divider(theme),
                 });
             }
             if (

package/src/internal/InnerBody.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    divider(): string;
+    divider(t: SideMenuTheme): string;
 };

package/src/internal/InnerBody.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    divider: function () {
-        return css(templateObject_1 || (templateObject_1 = __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    "])));
+    divider: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n    "], ["\n      background: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n    "])), t.sideMenuDividerBgColor, t.sideMenuDividerMarginX, t.sideMenuDividerMarginX);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/InnerSubMenu.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { isClickableSubElement } from '../../utils/scripts';
+import { isClickableSubElement } from '../../lib/utils/scripts';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 /**
  * Подменю, раскрывающееся внутри основного меню

package/src/internal/ItemContent/Avatar.js

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './Avatar.styles';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 export var Avatar = function (_a) {
     var _b;
     var _avatar = _a._avatar;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     return React.cloneElement(_avatar, {
         className: cx((_b = {},
-            _b[jsStyles.avatarIcon()] = true,
+            _b[jsStyles.avatarIcon(theme)] = true,
             _b)),
     });
 };

package/src/internal/ItemContent/Avatar.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    avatarIcon(): string;
+    avatarIcon(t: SideMenuTheme): string;
 };

package/src/internal/ItemContent/Avatar.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
-    avatarIcon: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin: 0 4px;\n      padding: 0;\n    "], ["\n      margin: 0 4px;\n      padding: 0;\n    "])));
+    avatarIcon: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), t.sideMenuAvatarMargin);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ItemContent/Caption.js

@@ -1,11 +1,14 @@
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Caption.styles';
 import React, { forwardRef, useContext } from 'react';
 import { SideMenuContext } from '../../SideMenuContext';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
 export var Caption = forwardRef(function (_a, ref) {
     var _b, _c;
     var _isSubMenu = _a._isSubMenu, _isNestedSubMenu = _a._isNestedSubMenu, hasShortcutImage = _a.hasShortcutImage, caption = _a.caption, subCaption = _a.subCaption, isMultiline = _a.isMultiline, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var isBeingTransitioned = context.isBeingTransitioned, isSeparatedMenu = context.isSeparatedMenu, size = context.size, isTouchScreen = context.isTouchScreen, hasSubIcons = context.hasSubIcons;
     return (React.createElement("div", { className: cx((_b = {},
             _b[jsStyles.root()] = true,
@@ -13,16 +16,16 @@ export var Caption = forwardRef(function (_a, ref) {
             _b[jsStyles.rootMultiline()] = isMultiline && !_isSubMenu,
             _b)), ref: ref },
         React.createElement("p", { className: cx((_c = {},
-                _c[jsStyles.caption()] = true,
-                _c[jsStyles.captionSubItem()] = _isSubMenu,
+                _c[jsStyles.caption(theme)] = true,
+                _c[jsStyles.captionSubItem(theme)] = _isSubMenu,
                 _c[jsStyles.captionSubItemSeparatedMenuTopLevel()] = isSeparatedMenu && !_isNestedSubMenu && _isSubMenu,
                 _c[jsStyles.captionNestedItemSeparatedMenu()] = isSeparatedMenu && _isNestedSubMenu && !hasShortcutImage,
                 _c[jsStyles.captionWithoutItemIcon()] = !hasShortcutImage && !isSeparatedMenu,
                 _c[jsStyles.captionSubItemWithoutColumnIcons()] = _isSubMenu && isSeparatedMenu && !hasSubIcons,
-                _c[jsStyles.captionLarge()] = size === 'large',
-                _c[jsStyles.captionForTouchScreens()] = isTouchScreen,
-                _c[jsStyles.captionSubItemForTouchScreens()] = isTouchScreen && _isSubMenu,
-                _c[jsStyles.captionInBackButton()] = _isBackButton,
+                _c[jsStyles.captionLarge(theme)] = size === 'large',
+                _c[jsStyles.captionForTouchScreens(theme)] = isTouchScreen,
+                _c[jsStyles.captionSubItemForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
+                _c[jsStyles.captionInBackButton(theme)] = _isBackButton,
                 _c)), ref: ref }, caption),
         subCaption));
 });