@skbkontur/react-ui 5.6.1-9a162.0 → 5.6.1-e2bc4.0

package/components/SidePage/SidePage.styles.d.ts

@@ -1,5 +1,5 @@
-import type { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(): string;
     overlay(): string;
     body(t: Theme): string;
@@ -19,28 +19,21 @@ export declare const styles: {
     header(t: Theme): string;
     mobileHeader(t: Theme): string;
     headerFixed(t: Theme): string;
-    headerShrink(t: Theme): string;
     headerNativeStuck(t: Theme): string;
     title(t: Theme): string;
-    title5_1(t: Theme): string;
     mobileTitle(t: Theme): string;
     titleCut(): string;
     background(): string;
     backgroundGray(t: Theme): string;
     shadow(t: Theme): string;
     close(t: Theme): string;
-    close5_1(t: Theme): string;
     closeSticky(t: Theme): string;
     closeMobile(t: Theme): string;
     closeFocus(t: Theme): string;
-    closeFocus5_1(t: Theme): string;
     wrapperClose(t: Theme): string;
-    wrapperClose5_1(t: Theme): string;
     mobileWrapperClose(t: Theme): string;
-    mobileWrapperClose5_1(t: Theme): string;
     panel(t: Theme): string;
     wrapperCloseFixed(t: Theme): string;
-    wrapperCloseFixed5_1(t: Theme): string;
     footerWrapper(): string;
     footer(t: Theme): string;
     positionStatic(): string;
@@ -53,4 +46,4 @@ export declare const styles: {
     transitionActive(): string;
     transitionLeave(): string;
     transitionLeaveActive(): string;
-};
+}>;

package/components/SidePage/SidePage.styles.js

@@ -0,0 +1,155 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+import { resetButton } from '../../lib/styles/Mixins.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        root: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "], ["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
+        },
+        overlay: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "], ["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
+        },
+        body: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "], ["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "])), t.modalBodyTextColor);
+        },
+        mobileBody: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+        },
+        container: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+        },
+        mobileContainer: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
+        },
+        containerWithoutHeader: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.sidePagePaddingTop);
+        },
+        mobileContainerWithoutHeader: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: ", ";\n    "], ["\n      padding-top: ", ";\n    "])), t.mobileSidePagePaddingTop);
+        },
+        containerWithoutFooter: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        containerWithPanel: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-bottom: ", ";\n    "], ["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
+        },
+        focusLock: function () {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      height: 100%;\n    "], ["\n      height: 100%;\n    "])));
+        },
+        wrapper: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "], ["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])), t.sidePageBgDefault);
+        },
+        wrapperLeft: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      float: left;\n    "], ["\n      float: left;\n    "])));
+        },
+        wrapperMarginLeft: function () {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      margin-left: 20px;\n    "], ["\n      margin-left: 20px;\n    "])));
+        },
+        wrapperMarginRight: function () {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      margin-right: 20px;\n    "], ["\n      margin-right: 20px;\n    "])));
+        },
+        headerWrapper: function () {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        header: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
+        },
+        mobileHeader: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
+        },
+        headerFixed: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      background: ", ";\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "], ["\n      background: ", ";\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedHeaderShadow);
+        },
+        headerNativeStuck: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "], ["\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ", ", ", " 0px);\n    "])), t.sidePageHeaderPaddingBottom, t.sidePageBgDefault);
+        },
+        title: function (t) {
+            var paddingRight = parseInt(t.sidePageCloseButtonClickAreaLeft) +
+                parseInt(t.sidePageCloseIconSize) +
+                parseInt(t.sidePageCloseButtonClickAreaRight);
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+        },
+        mobileTitle: function (t) {
+            var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "], ["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.mobileSidePagePaddingLeft, paddingRight);
+        },
+        titleCut: function () {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "], ["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+        },
+        background: function () {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "], ["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+        },
+        backgroundGray: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      background: ", ";\n      opacity: ", ";\n    "], ["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+        },
+        shadow: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      box-shadow: ", ";\n    "], ["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
+        },
+        close: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "], ["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-right: ", ";\n      margin-right: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n      padding-left: ", ";\n      margin-left: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaTop, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaBottom, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonClickAreaLeft, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+        },
+        closeSticky: function (t) {
+            return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "], ["\n      padding-top: ", ";\n      margin-top: -", ";\n      padding-bottom: ", ";\n      margin-bottom: -", ";\n    "])), t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaTop, t.sidePageCloseButtonFixedClickAreaBottom, t.sidePageCloseButtonFixedClickAreaBottom);
+        },
+        closeMobile: function (t) {
+            return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "], ["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+        },
+        closeFocus: function (t) {
+            return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "], ["\n      box-shadow: inset 0 0 0 2px ", ";\n      border-radius: 4px;\n    "])), t.borderColorFocus);
+        },
+        wrapperClose: function (t) {
+            return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "], ["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: ", ";\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonWrapperOffsetTop);
+        },
+        mobileWrapperClose: function (t) {
+            return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "], ["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
+        },
+        panel: function (t) {
+            return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+        },
+        wrapperCloseFixed: function (t) {
+            return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      top: ", ";\n    "], ["\n      top: ", ";\n    "])), t.sidePageCloseButtonWrapperFixedOffsetTop);
+        },
+        footerWrapper: function () {
+            return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      flex: 0 0 auto;\n    "], ["\n      flex: 0 0 auto;\n    "])));
+        },
+        footer: function (t) {
+            return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "], ["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "])), t.sidePageFooterTextColor);
+        },
+        positionStatic: function () {
+            return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      position: static;\n    "], ["\n      position: static;\n    "])));
+        },
+        footerContent: function (t) {
+            return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      padding: ", " ", " ", "\n        ", ";\n    "], ["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+        },
+        mobileFooterContent: function (t) {
+            return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "], ["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "])), t.mobileSidePageFooterPadding);
+        },
+        footerFixed: function (t) {
+            return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "], ["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
+        },
+        panelFixed: function (t) {
+            return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "], ["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.sidePageFixedPanelShadow);
+        },
+        transitionLeft: function () {
+            return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      transform: translateX(100px);\n    "], ["\n      transform: translateX(100px);\n    "])));
+        },
+        transitionRight: function () {
+            return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      transform: translateX(-100px);\n    "], ["\n      transform: translateX(-100px);\n    "])));
+        },
+        transitionActive: function () {
+            return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "], ["\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    "])));
+        },
+        transitionLeave: function () {
+            return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      opacity: 1;\n    "], ["\n      opacity: 1;\n    "])));
+        },
+        transitionLeaveActive: function () {
+            return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "], ["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+        },
+    });
+});
+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;
+//# sourceMappingURL=SidePage.styles.js.map

package/components/SidePage/SidePage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["../../../components/SidePage/SidePage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { resetButton } from '../../lib/styles/Mixins.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      height: 100%;\n      position: fixed;\n      top: 0;\n    `;\n  },\n\n  overlay() {\n    return css`\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody() {\n    return css`\n      font-size: 16px;\n      line-height: 22px;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  mobileContainer(t: Theme) {\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${t.mobileSidePagePaddingRight};\n      padding-bottom: ${t.mobileSidePagePaddingBottom};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.sidePagePaddingTop};\n    `;\n  },\n\n  mobileContainerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileSidePagePaddingTop};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  focusLock() {\n    return css`\n      height: 100%;\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  wrapperLeft() {\n    return css`\n      float: left;\n    `;\n  },\n\n  wrapperMarginLeft() {\n    return css`\n      margin-left: 20px;\n    `;\n  },\n\n  wrapperMarginRight() {\n    return css`\n      margin-right: 20px;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.sidePageHeaderFontSize};\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      width: 100%;\n      position: relative;\n      color: ${t.sidePageHeaderTextColor};\n      font-weight: ${t.sidePageHeaderFontWeight};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileSidePageHeaderFontSize};\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n    `;\n  },\n\n  headerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedHeaderShadow};\n      }\n    `;\n  },\n\n  headerNativeStuck(t: Theme) {\n    return css`\n      position: sticky;\n      top: 0;\n      z-index: 16000;\n      background: linear-gradient(to top, transparent ${t.sidePageHeaderPaddingBottom}, ${t.sidePageBgDefault} 0px);\n    `;\n  },\n\n  title(t: Theme) {\n    const paddingRight =\n      parseInt(t.sidePageCloseButtonClickAreaLeft) +\n      parseInt(t.sidePageCloseIconSize) +\n      parseInt(t.sidePageCloseButtonClickAreaRight);\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  mobileTitle(t: Theme) {\n    const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${paddingRight}px;\n    `;\n  },\n\n  titleCut() {\n    return css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n  },\n\n  background() {\n    return css`\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    `;\n  },\n\n  backgroundGray(t: Theme) {\n    return css`\n      background: ${t.sidePageBackingBg};\n      opacity: ${t.sidePageBackingBgOpacity};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      box-shadow: ${t.sidePageContainerShadow};\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      ${resetButton()};\n      cursor: pointer;\n      color: ${t.sidePageCloseButtonColor};\n      padding-top: ${t.sidePageCloseButtonClickAreaTop};\n      margin-top: -${t.sidePageCloseButtonClickAreaTop};\n      padding-right: ${t.sidePageCloseButtonClickAreaRight};\n      margin-right: -${t.sidePageCloseButtonClickAreaRight};\n      padding-bottom: ${t.sidePageCloseButtonClickAreaBottom};\n      margin-bottom: -${t.sidePageCloseButtonClickAreaBottom};\n      padding-left: ${t.sidePageCloseButtonClickAreaLeft};\n      margin-left: -${t.sidePageCloseButtonClickAreaLeft};\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ${t.sidePageCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.sidePageCloseIconSize};\n        height: ${t.sidePageCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeSticky(t: Theme) {\n    return css`\n      padding-top: ${t.sidePageCloseButtonFixedClickAreaTop};\n      margin-top: -${t.sidePageCloseButtonFixedClickAreaTop};\n      padding-bottom: ${t.sidePageCloseButtonFixedClickAreaBottom};\n      margin-bottom: -${t.sidePageCloseButtonFixedClickAreaBottom};\n    `;\n  },\n\n  closeMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileSidePageCloseButtonClickArea};\n      margin: -${t.mobileSidePageCloseButtonClickArea};\n      font-size: 0;\n    `;\n  },\n\n  closeFocus(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n      border-radius: 4px;\n    `;\n  },\n\n  wrapperClose(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ${t.sidePageHeaderLineHeight};\n      padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n      position: absolute;\n      right: ${t.sidePageCloseButtonClickAreaRight};\n      top: ${t.sidePageCloseButtonWrapperOffsetTop};\n    `;\n  },\n\n  mobileWrapperClose(t: Theme) {\n    return css`\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      right: ${t.mobileSidePageCloseButtonPadding};\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      background: ${t.sidePageFooterPanelBg};\n      padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  wrapperCloseFixed(t: Theme) {\n    return css`\n      top: ${t.sidePageCloseButtonWrapperFixedOffsetTop};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      flex: 0 0 auto;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ${t.sidePageFooterTextColor};\n    `;\n  },\n\n  positionStatic() {\n    return css`\n      position: static;\n    `;\n  },\n\n  footerContent(t: Theme) {\n    return css`\n      padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n        ${t.sidePagePaddingLeft};\n    `;\n  },\n\n  mobileFooterContent(t: Theme) {\n    return css`\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ${t.mobileSidePageFooterPadding};\n    `;\n  },\n\n  footerFixed(t: Theme) {\n    return css`\n      background: ${t.sidePageBgDefault};\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.sidePageFixedFooterShadow};\n      }\n    `;\n  },\n\n  panelFixed(t: Theme) {\n    return css`\n      &:before {\n        box-shadow: ${t.sidePageFixedPanelShadow};\n      }\n    `;\n  },\n\n  transitionLeft() {\n    return css`\n      transform: translateX(100px);\n    `;\n  },\n\n  transitionRight() {\n    return css`\n      transform: translateX(-100px);\n    `;\n  },\n\n  transitionActive() {\n    return css`\n      transition:\n        transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n        opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1 !important;\n      transform: translate(0, 0) !important;\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n}));\n"]}

package/components/SidePage/SidePageBody.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { SidePageContextType } from './SidePageContext';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { SidePageContextType } from './SidePageContext.js';
 export interface SidePageBodyProps extends CommonProps {
     children?: React.ReactNode;
 }
@@ -21,6 +21,9 @@ export declare class SidePageBody extends React.Component<SidePageBodyProps> {
     private isMobileLayout;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
+    private cx;
+    private styles;
     componentDidUpdate(): void;
     render(): React.JSX.Element;
 }

package/components/SidePage/SidePageBody.js

@@ -0,0 +1,79 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './SidePage.styles.js';
+import { SidePageContext } from './SidePageContext.js';
+export var SidePageBodyDataTids = {
+    root: 'SidePageBody__root',
+};
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+var SidePageBody = /** @class */ (function (_super) {
+    __extends(SidePageBody, _super);
+    function SidePageBody() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.context = _this.context;
+        return _this;
+    }
+    SidePageBody.prototype.componentDidUpdate = function () {
+        this.context.updateLayout();
+    };
+    SidePageBody.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            var _a;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
+                React.createElement("div", { "data-tid": SidePageBodyDataTids.root, className: _this.cx(_this.styles.body(theme), (_a = {}, _a[_this.styles.mobileBody()] = _this.isMobileLayout, _a)) }, _this.props.children)));
+        }));
+    };
+    SidePageBody.__KONTUR_REACT_UI__ = 'SidePageBody';
+    SidePageBody.displayName = 'SidePageBody';
+    SidePageBody.contextType = SidePageContext;
+    SidePageBody = __decorate([
+        withRenderEnvironment,
+        responsiveLayout,
+        rootNode
+    ], SidePageBody);
+    return SidePageBody;
+}(React.Component));
+export { SidePageBody };
+//# sourceMappingURL=SidePageBody.js.map

package/components/SidePage/SidePageBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePageBody.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAMvD,MAAM,CAAC,IAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE,oBAAoB;CAClB,CAAC;AACX;;;;GAIG;AAIH;IAAkC,gCAAkC;IAApE;;QAKS,aAAO,GAAwB,KAAI,CAAC,OAAO,CAAC;;IAgCrD,CAAC;IAxBQ,yCAAkB,GAAzB;QACE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC;IAEM,6BAAM,GAAb;QAAA,iBAmBC;QAlBC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;;YACL,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,oBAAoB,CAAC,IAAI,EACnC,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAI,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,EAAE,IAAG,KAAI,CAAC,cAAc,MAAG,IAE/F,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAnCa,gCAAmB,GAAG,cAAc,AAAjB,CAAkB;IACrC,wBAAW,GAAG,cAAc,AAAjB,CAAkB;IAE7B,wBAAW,GAAG,eAAe,AAAlB,CAAmB;IAJjC,YAAY;QAHxB,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,YAAY,CAqCxB;IAAD,mBAAC;CAAA,AArCD,CAAkC,KAAK,CAAC,SAAS,GAqChD;SArCY,YAAY","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './SidePage.styles.js';\nimport type { SidePageContextType } from './SidePageContext.js';\nimport { SidePageContext } from './SidePageContext.js';\n\nexport interface SidePageBodyProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n  root: 'SidePageBody__root',\n} as const;\n/**\n * Тело для сайдпейджа\n *\n * @visibleName SidePage.Body\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\n  public static displayName = 'SidePageBody';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={SidePageBodyDataTids.root}\n                className={this.cx(this.styles.body(theme), { [this.styles.mobileBody()]: this.isMobileLayout })}\n              >\n                {this.props.children}\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageCloseButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CommonProps } from '../../internal/CommonWrapper';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
 export interface SidePageCloseButtonProps extends CommonProps {
     isHeaderFixed: boolean;
     isMobile?: boolean;

package/components/SidePage/SidePageCloseButton.js

@@ -0,0 +1,42 @@
+import React, { useContext, useState } from 'react';
+import { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
+import { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';
+import { useKeyListener } from '../../lib/events/keyListener.js';
+import { getStyles } from './SidePage.styles.js';
+import { SidePageLocaleHelper } from './locale/index.js';
+import { SidePageHeaderDataTids } from './SidePageHeader.js';
+import { SidePageContext } from './SidePageContext.js';
+export var SidePageCloseButton = function (_a) {
+    var _b;
+    var isHeaderFixed = _a.isHeaderFixed, isMobile = _a.isMobile;
+    var _c = useState(false), isFocusedByTab = _c[0], setIsFocusedByTab = _c[1];
+    var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
+    var globalObject = useGlobal();
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var keyListener = useKeyListener();
+    var sidePageContext = useContext(SidePageContext);
+    var handleFocus = function () {
+        var _a;
+        (_a = globalObject.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
+            if (keyListener.isTabPressed) {
+                setIsFocusedByTab(true);
+            }
+        });
+    };
+    var handleBlur = function () {
+        setIsFocusedByTab(false);
+    };
+    var icon = React.createElement(XIcon20Regular, { align: "none" });
+    return (React.createElement("button", { "aria-label": locale === null || locale === void 0 ? void 0 : locale.closeButtonAriaLabel, className: cx(styles.close(theme), (_b = {},
+            _b[styles.closeFocus(theme)] = isFocusedByTab,
+            _b[styles.closeSticky(theme)] = isHeaderFixed,
+            _b[styles.closeMobile(theme)] = isMobile,
+            _b)), onFocus: handleFocus, onBlur: handleBlur, onClick: sidePageContext.requestClose, "data-tid": SidePageHeaderDataTids.close }, icon));
+};
+SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';
+SidePageCloseButton.displayName = 'SidePageCloseButton';
+//# sourceMappingURL=SidePageCloseButton.js.map

package/components/SidePage/SidePageCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePageCloseButton.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAqD;;QAAnD,aAAa,mBAAA,EAAE,QAAQ,cAAA;IACrD,IAAA,KAAsC,QAAQ,CAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAC;IAE5D,IAAM,MAAM,GAAG,mBAAmB,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC;IACrE,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,eAAe,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,IAAM,WAAW,GAAG;;QAClB,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,IAAM,IAAI,GAAG,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,CAAC;IAC7C,OAAO,CACL,8CACc,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,EACxC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YAC/B,GAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAG,cAAc;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,aAAa;YAC1C,GAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,IAAG,QAAQ;gBACrC,EACF,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,eAAe,CAAC,YAAY,cAC3B,sBAAsB,CAAC,KAAK,IAErC,IAAI,CACE,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;AAChE,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC","sourcesContent":["import React, { useContext, useState } from 'react';\n\nimport { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\n\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageLocaleHelper } from './locale/index.js';\nimport { SidePageHeaderDataTids } from './SidePageHeader.js';\nimport { SidePageContext } from './SidePageContext.js';\n\nexport interface SidePageCloseButtonProps extends CommonProps {\n  isHeaderFixed: boolean;\n  isMobile?: boolean;\n}\n\nexport const SidePageCloseButton = ({ isHeaderFixed, isMobile }: SidePageCloseButtonProps): React.JSX.Element => {\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const globalObject = useGlobal();\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const keyListener = useKeyListener();\n  const sidePageContext = useContext(SidePageContext);\n\n  const handleFocus = () => {\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setIsFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setIsFocusedByTab(false);\n  };\n\n  const icon = <XIcon20Regular align=\"none\" />;\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={cx(styles.close(theme), {\n        [styles.closeFocus(theme)]: isFocusedByTab,\n        [styles.closeSticky(theme)]: isHeaderFixed,\n        [styles.closeMobile(theme)]: isMobile,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      {icon}\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"]}

package/components/SidePage/SidePageContainer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { TGetRootNode } from '../../lib/rootNode';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
 export type SidePageContainerProps = CommonProps;
 export declare const SidePageContainerDataTids: {
     readonly root: "SidePageContainer__root";
@@ -13,6 +13,9 @@ export declare const SidePageContainerDataTids: {
 export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private isMobileLayout;
     getRootNode: TGetRootNode;

package/components/SidePage/SidePageContainer.js

@@ -0,0 +1,88 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './SidePage.styles.js';
+import { SidePageContext } from './SidePageContext.js';
+export var SidePageContainerDataTids = {
+    root: 'SidePageContainer__root',
+};
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+var SidePageContainer = /** @class */ (function (_super) {
+    __extends(SidePageContainer, _super);
+    function SidePageContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SidePageContainer.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    SidePageContainer.prototype.renderMain = function () {
+        var _this = this;
+        return (React.createElement(SidePageContext.Consumer, null, function (_a) {
+            var _b;
+            var hasHeader = _a.hasHeader, hasFooter = _a.hasFooter, hasPanel = _a.hasPanel;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props),
+                React.createElement("div", { "data-tid": SidePageContainerDataTids.root, className: _this.cx((_b = {},
+                        _b[_this.styles.container(_this.theme)] = true,
+                        _b[_this.styles.containerWithoutHeader(_this.theme)] = !hasHeader,
+                        _b[_this.styles.containerWithoutFooter(_this.theme)] = !hasFooter,
+                        _b[_this.styles.containerWithPanel(_this.theme)] = hasPanel,
+                        _b[_this.styles.mobileContainer(_this.theme)] = _this.isMobileLayout,
+                        _b[_this.styles.mobileContainerWithoutHeader(_this.theme)] = _this.isMobileLayout && !hasHeader,
+                        _b)) }, _this.props.children)));
+        }));
+    };
+    SidePageContainer.__KONTUR_REACT_UI__ = 'SidePageContainer';
+    SidePageContainer.displayName = 'SidePageContainer';
+    SidePageContainer = __decorate([
+        withRenderEnvironment,
+        responsiveLayout,
+        rootNode
+    ], SidePageContainer);
+    return SidePageContainer;
+}(React.Component));
+export { SidePageContainer };
+//# sourceMappingURL=SidePageContainer.js.map

package/components/SidePage/SidePageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePageContainer.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAIvD,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE,yBAAyB;CACvB,CAAC;AAEX;;;;GAIG;AAIH;IAAuC,qCAAuC;IAA9E;;IAgDA,CAAC;IApCQ,kCAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEM,sCAAU,GAAjB;QAAA,iBAsBC;QArBC,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,QACtB,UAAC,EAAkC;;gBAAhC,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;YAAO,OAAA,CACvC,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,KAAK;gBAC1D,yCACY,yBAAyB,CAAC,IAAI,EACxC,SAAS,EAAE,KAAI,CAAC,EAAE;wBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBACzC,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,CAAC,SAAS;wBAC5D,GAAC,KAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,CAAC,SAAS;wBAC5D,GAAC,KAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;wBACtD,GAAC,KAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,cAAc;wBAC9D,GAAC,KAAI,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,cAAc,IAAI,CAAC,SAAS;4BACzF,IAED,KAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACQ,CACjB;QAhBwC,CAgBxC,CACwB,CAC5B,CAAC;IACJ,CAAC;IA9Ca,qCAAmB,GAAG,mBAAmB,AAAtB,CAAuB;IAC1C,6BAAW,GAAG,mBAAmB,AAAtB,CAAuB;IAFrC,iBAAiB;QAH7B,qBAAqB;QACrB,gBAAgB;QAChB,QAAQ;OACI,iBAAiB,CAgD7B;IAAD,wBAAC;CAAA,AAhDD,CAAuC,KAAK,CAAC,SAAS,GAgDrD;SAhDY,iBAAiB","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n  public static displayName = 'SidePageContainer';\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain(): React.JSX.Element {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={this.cx({\n                [this.styles.container(this.theme)]: true,\n                [this.styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [this.styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [this.styles.containerWithPanel(this.theme)]: hasPanel,\n                [this.styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [this.styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageContext.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { SidePageFooter } from './SidePageFooter';
-import type { SidePageHeader } from './SidePageHeader';
+import type { SidePageFooter } from './SidePageFooter.js';
+import type { SidePageHeader } from './SidePageHeader.js';
 export interface SidePageContextType {
     requestClose: () => void;
     getWidth: () => number | string;

package/components/SidePage/SidePageContext.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export var SidePageContext = React.createContext({
+    requestClose: function () { return undefined; },
+    getWidth: function () { return 'auto'; },
+    updateLayout: function () { return undefined; },
+    headerRef: function () { return undefined; },
+    footerRef: function () { return undefined; },
+});
+SidePageContext.displayName = 'SidePageContext';
+//# sourceMappingURL=SidePageContext.js.map

package/components/SidePage/SidePageContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePageContext.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB;IACtE,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,QAAQ,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACtB,YAAY,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC7B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;IAC1B,SAAS,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS;CAC3B,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SidePageFooter } from './SidePageFooter.js';\nimport type { SidePageHeader } from './SidePageHeader.js';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => void;\n  headerRef: (ref: SidePageHeader | null) => void;\n  footerRef: (ref: SidePageFooter | null) => void;\n  hasHeader?: boolean;\n  hasFooter?: boolean;\n  hasPanel?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const SidePageContext = React.createContext<SidePageContextType>({\n  requestClose: () => undefined,\n  getWidth: () => 'auto',\n  updateLayout: () => undefined,\n  headerRef: () => undefined,\n  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}

package/components/SidePage/SidePageFooter.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { GappedProps } from '../Gapped';
-import type { SidePageContextType } from './SidePageContext';
+import React, { type JSX } from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { GappedProps } from '../Gapped/index.js';
+import type { SidePageContextType } from './SidePageContext.js';
 export interface SidePageFooterProps extends Omit<CommonProps, 'children'> {
     /** @ignore */
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
@@ -31,6 +31,10 @@ export declare class SidePageFooter extends React.Component<React.PropsWithChild
     context: SidePageContextType;
     private isMobileLayout;
     state: SidePageFooterState;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private content;
     private layoutSub;