@skbkontur/react-ui 6.0.7 → 6.1.0

package/internal/Menu/Menu.styles.js

@@ -15,34 +15,37 @@ export var getStyles = memoizeGetStyles(function (_a) {
         mobileRoot: function (t) {
             return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "], ["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "])), t.mobileMenuPaddingX);
         },
+        mobileRoot6_1: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+        },
         alignRight: function () {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex: 1 1 100%;\n    "], ["\n      flex: 1 1 100%;\n    "])));
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      flex: 1 1 100%;\n    "], ["\n      flex: 1 1 100%;\n    "])));
         },
         scrollContainer: function (t) {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.menuScrollContainerContentWrapperPaddingY);
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.menuScrollContainerContentWrapperPaddingY);
         },
         scrollContainerMobile: function (t) {
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.mobileMenuScrollContainerContentWrapperPaddingY);
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.mobileMenuScrollContainerContentWrapperPaddingY);
         },
         shadow: function (t) {
-            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      border: ", ";\n      box-shadow: ", ";\n    "], ["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      border: ", ";\n      box-shadow: ", ";\n    "], ["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
         },
         wrapper: function () {
-            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "], ["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "], ["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
         },
         headerWrapper: function () {
-            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      top: -5px;\n    "], ["\n      top: -5px;\n    "])));
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      top: -5px;\n    "], ["\n      top: -5px;\n    "])));
         },
         footerWrapper: function () {
-            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      bottom: -5px;\n    "], ["\n      bottom: -5px;\n    "])));
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      bottom: -5px;\n    "], ["\n      bottom: -5px;\n    "])));
         },
         contentWrapper: function () {
-            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: 6px 18px 7px 8px;\n    "], ["\n      padding: 6px 18px 7px 8px;\n    "])));
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      padding: 6px 18px 7px 8px;\n    "], ["\n      padding: 6px 18px 7px 8px;\n    "])));
         },
         menuSeparatorWrapper: function (t) {
-            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.menuSeparatorBorderWidth);
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.menuSeparatorBorderWidth);
         },
     });
 });
-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;
+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;
 //# sourceMappingURL=Menu.styles.js.map

package/internal/Menu/Menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../internal/Menu/Menu.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,0MAAA,sBACM,EAAe,0BACZ,EAAkB,uBACrB,EAAe,0CAElB,EAAc,GAAI,EAAc,SAC5C,KALe,CAAC,CAAC,aAAa,EACZ,CAAC,CAAC,gBAAgB,EACrB,CAAC,CAAC,aAAa,EAElB,CAAC,CAAC,YAAY,EAAI,CAAC,CAAC,YAAY,EAC3C;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,kGAAA,kBACE,EAAa,WACxB,KADW,CAAC,CAAC,WAAW,EACvB;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,8IAAA,gEAGK,EAAoB,SAClC,KADc,CAAC,CAAC,kBAAkB,EACjC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mGAAA,mBACG,EAA2C,WACvD,KADY,CAAC,CAAC,yCAAyC,EACtD;QACJ,CAAC;QAED,qBAAqB,YAAC,CAAQ;YAC5B,OAAO,GAAG,mGAAA,mBACG,EAAiD,WAC7D,KADY,CAAC,CAAC,+CAA+C,EAC5D;QACJ,CAAC;QAED,MAAM,YAAC,CAAQ;YACb,OAAO,GAAG,yHAAA,kBACE,EAAY,uBACR,EAAY,SAC3B,KAFW,CAAC,CAAC,UAAU,EACR,CAAC,CAAC,UAAU,EAC1B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,+NAAA,4JAOT,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,6FAAA,0BAET,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,kGAAA,6BAET,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,+GAAA,0CAET,KAAC;QACJ,CAAC;QAED,oBAAoB,YAAC,CAAQ;YAC3B,OAAO,GAAG,kGAAA,kBACE,EAA0B,SACrC,KADW,CAAC,CAAC,wBAAwB,EACpC;QACJ,CAAC;KACF,CAAC;AApF8D,CAoF9D,CAAC,CAAC","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';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      outline: none;\n      padding: ${t.menuPaddingY} ${t.menuPaddingX};\n    `;\n  },\n\n  hasMargin(t: Theme) {\n    return css`\n      margin: ${t.menuOffsetY} 0;\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../internal/Menu/Menu.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,0MAAA,sBACM,EAAe,0BACZ,EAAkB,uBACrB,EAAe,0CAElB,EAAc,GAAI,EAAc,SAC5C,KALe,CAAC,CAAC,aAAa,EACZ,CAAC,CAAC,gBAAgB,EACrB,CAAC,CAAC,aAAa,EAElB,CAAC,CAAC,YAAY,EAAI,CAAC,CAAC,YAAY,EAC3C;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,kGAAA,kBACE,EAAa,WACxB,KADW,CAAC,CAAC,WAAW,EACvB;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,8IAAA,gEAGK,EAAoB,SAClC,KADc,CAAC,CAAC,kBAAkB,EACjC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,8FAAA,2BAET,KAAC;QACJ,CAAC;QAED,UAAU;YACR,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mGAAA,mBACG,EAA2C,WACvD,KADY,CAAC,CAAC,yCAAyC,EACtD;QACJ,CAAC;QAED,qBAAqB,YAAC,CAAQ;YAC5B,OAAO,GAAG,mGAAA,mBACG,EAAiD,WAC7D,KADY,CAAC,CAAC,+CAA+C,EAC5D;QACJ,CAAC;QAED,MAAM,YAAC,CAAQ;YACb,OAAO,GAAG,yHAAA,kBACE,EAAY,uBACR,EAAY,SAC3B,KAFW,CAAC,CAAC,UAAU,EACR,CAAC,CAAC,UAAU,EAC1B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,+NAAA,4JAOT,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,+FAAA,0BAET,KAAC;QACJ,CAAC;QAED,aAAa;YACX,OAAO,GAAG,kGAAA,6BAET,KAAC;QACJ,CAAC;QAED,cAAc;YACZ,OAAO,GAAG,+GAAA,0CAET,KAAC;QACJ,CAAC;QAED,oBAAoB,YAAC,CAAQ;YAC3B,OAAO,GAAG,kGAAA,kBACE,EAA0B,SACrC,KADW,CAAC,CAAC,wBAAwB,EACpC;QACJ,CAAC;KACF,CAAC;AA1F8D,CA0F9D,CAAC,CAAC","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';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      outline: none;\n      padding: ${t.menuPaddingY} ${t.menuPaddingX};\n    `;\n  },\n\n  hasMargin(t: Theme) {\n    return css`\n      margin: ${t.menuOffsetY} 0;\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  mobileRoot6_1() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n}));\n"]}

package/internal/MenuMessage/MenuMessage.js

@@ -25,6 +25,7 @@ import { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js'
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
 import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
 import { getStyles } from './MenuMessage.styles.js';
 export var MenuMessageDataTids = {
     root: 'MenuMessage__root',
@@ -36,6 +37,7 @@ export var MenuMessage = forwardRefAndName('MenuMessage', function (_a, ref) {
     var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var theme = useContext(ThemeContext);
+    var themeGTE6_1 = isThemeGTE(theme, '6.1');
     var getMenuMessageSizeClassName = function () {
         switch (size) {
             case 'large':
@@ -47,9 +49,23 @@ export var MenuMessage = forwardRefAndName('MenuMessage', function (_a, ref) {
                 return cx(styles.rootSmall(theme));
         }
     };
+    var getMenuMessageSizeMobileClassName = function () {
+        if (!themeGTE6_1) {
+            return cx(styles.rootMobile(theme));
+        }
+        switch (size) {
+            case 'large':
+                return cx(styles.rootMobileLarge(theme));
+            case 'medium':
+                return cx(styles.rootMobileMedium(theme));
+            case 'small':
+            default:
+                return cx(styles.rootMobileSmall(theme));
+        }
+    };
     return (React.createElement(Tag, __assign({ ref: ref, "data-tid": MenuMessageDataTids.root, className: cx(getMenuMessageSizeClassName(), (_b = {},
             _b[styles.root(theme)] = true,
-            _b[styles.rootMobile(theme)] = isMobile,
+            _b[getMenuMessageSizeMobileClassName()] = isMobile,
             _b), className) }, rest), children));
 });
 //# sourceMappingURL=MenuMessage.js.map

package/internal/MenuMessage/MenuMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuMessage.js","sourceRoot":"","sources":["../../../internal/MenuMessage/MenuMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQpD,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,mBAAmB;CACjB,CAAC;AAEX,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAC1C,aAAa,EACb,UAAC,EAA+D,EAAE,GAAG;;IAAlE,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,UAAa,EAAT,GAAG,mBAAG,GAAG,KAAA,EAAK,IAAI,cAA7D,uCAA+D,CAAF;IACpD,IAAA,QAAQ,GAAK,mBAAmB,EAAE,SAA1B,CAA2B;IAEnC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAM,2BAA2B,GAAG;QAClC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;YACrC,KAAK,QAAQ;gBACX,OAAO,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,aACF,GAAG,EAAE,GAAG,cACE,mBAAmB,CAAC,IAAI,EAClC,SAAS,EAAE,EAAE,CACX,2BAA2B,EAAE;YAE3B,GAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;YAC1B,GAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAG,QAAQ;iBAEtC,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { getStyles } from './MenuMessage.styles.js';\n\nexport interface MenuMessageProps extends CommonProps {\n  children: React.ReactNode;\n  as?: React.ElementType;\n  size?: SizeProp;\n}\n\nexport const MenuMessageDataTids = {\n  root: 'MenuMessage__root',\n} as const;\n\nexport const MenuMessage = forwardRefAndName<HTMLOrSVGElement, MenuMessageProps>(\n  'MenuMessage',\n  ({ children, className, size = 'small', as: Tag = 'p', ...rest }, ref) => {\n    const { isMobile } = useResponsiveLayout();\n\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n    const theme = useContext(ThemeContext);\n\n    const getMenuMessageSizeClassName = () => {\n      switch (size) {\n        case 'large':\n          return cx(styles.rootLarge(theme));\n        case 'medium':\n          return cx(styles.rootMedium(theme));\n        case 'small':\n        default:\n          return cx(styles.rootSmall(theme));\n      }\n    };\n\n    return (\n      <Tag\n        ref={ref}\n        data-tid={MenuMessageDataTids.root}\n        className={cx(\n          getMenuMessageSizeClassName(),\n          {\n            [styles.root(theme)]: true,\n            [styles.rootMobile(theme)]: isMobile,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    );\n  },\n);\n"]}
+{"version":3,"file":"MenuMessage.js","sourceRoot":"","sources":["../../../internal/MenuMessage/MenuMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAQpD,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE,mBAAmB;CACjB,CAAC;AAEX,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAC1C,aAAa,EACb,UAAC,EAA+D,EAAE,GAAG;;IAAlE,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,UAAa,EAAT,GAAG,mBAAG,GAAG,KAAA,EAAK,IAAI,cAA7D,uCAA+D,CAAF;IACpD,IAAA,QAAQ,GAAK,mBAAmB,EAAE,SAA1B,CAA2B;IAEnC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7C,IAAM,2BAA2B,GAAG;QAClC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;YACrC,KAAK,QAAQ;gBACX,OAAO,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;YACtC,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,iCAAiC,GAAG;QACxC,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;QACtC,CAAC;QACD,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3C,KAAK,QAAQ;gBACX,OAAO,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;YAC5C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,aACF,GAAG,EAAE,GAAG,cACE,mBAAmB,CAAC,IAAI,EAClC,SAAS,EAAE,EAAE,CACX,2BAA2B,EAAE;YAE3B,GAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;YAC1B,GAAC,iCAAiC,EAAE,IAAG,QAAQ;iBAEjD,SAAS,CACV,IACG,IAAI,GAEP,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { getStyles } from './MenuMessage.styles.js';\n\nexport interface MenuMessageProps extends CommonProps {\n  children: React.ReactNode;\n  as?: React.ElementType;\n  size?: SizeProp;\n}\n\nexport const MenuMessageDataTids = {\n  root: 'MenuMessage__root',\n} as const;\n\nexport const MenuMessage = forwardRefAndName<HTMLOrSVGElement, MenuMessageProps>(\n  'MenuMessage',\n  ({ children, className, size = 'small', as: Tag = 'p', ...rest }, ref) => {\n    const { isMobile } = useResponsiveLayout();\n\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n    const theme = useContext(ThemeContext);\n    const themeGTE6_1 = isThemeGTE(theme, '6.1');\n    const getMenuMessageSizeClassName = () => {\n      switch (size) {\n        case 'large':\n          return cx(styles.rootLarge(theme));\n        case 'medium':\n          return cx(styles.rootMedium(theme));\n        case 'small':\n        default:\n          return cx(styles.rootSmall(theme));\n      }\n    };\n\n    const getMenuMessageSizeMobileClassName = (): string => {\n      if (!themeGTE6_1) {\n        return cx(styles.rootMobile(theme));\n      }\n      switch (size) {\n        case 'large':\n          return cx(styles.rootMobileLarge(theme));\n        case 'medium':\n          return cx(styles.rootMobileMedium(theme));\n        case 'small':\n        default:\n          return cx(styles.rootMobileSmall(theme));\n      }\n    };\n\n    return (\n      <Tag\n        ref={ref}\n        data-tid={MenuMessageDataTids.root}\n        className={cx(\n          getMenuMessageSizeClassName(),\n          {\n            [styles.root(theme)]: true,\n            [getMenuMessageSizeMobileClassName()]: isMobile,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    );\n  },\n);\n"]}

package/internal/MenuMessage/MenuMessage.styles.d.ts

@@ -2,6 +2,9 @@ import type { Theme } from '../../lib/theming/Theme.js';
 export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
     rootMobile(t: Theme): string;
+    rootMobileLarge(t: Theme): string;
+    rootMobileMedium(t: Theme): string;
+    rootMobileSmall(t: Theme): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;

package/internal/MenuMessage/MenuMessage.styles.js

@@ -17,16 +17,25 @@ export var getStyles = memoizeGetStyles(function (_a) {
         rootMobile: function (t) {
             return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuMessageFontSizeMobile, t.menuMessageLineHeightMobile, t.menuMessagePaddingMobile);
         },
+        rootMobileLarge: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileMenuMessageFontSizeLarge, t.mobileMenuMessageLineHeightLarge, t.mobileMenuMessagePaddingLarge);
+        },
+        rootMobileMedium: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileMenuMessageFontSizeMedium, t.mobileMenuMessageLineHeightMedium, t.mobileMenuMessagePaddingMedium);
+        },
+        rootMobileSmall: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileMenuMessageFontSizeSmall, t.mobileMenuMessageLineHeightSmall, t.mobileMenuMessagePaddingSmall);
+        },
         rootSmall: function (t) {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeSmall, t.menuMessageLineHeightSmall);
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeSmall, t.menuMessageLineHeightSmall);
         },
         rootMedium: function (t) {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeMedium, t.menuMessageLineHeightMedium);
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeMedium, t.menuMessageLineHeightMedium);
         },
         rootLarge: function (t) {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeLarge, t.menuMessageLineHeightLarge);
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.menuMessageFontSizeLarge, t.menuMessageLineHeightLarge);
         },
     });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=MenuMessage.styles.js.map

package/internal/MenuMessage/MenuMessage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuMessage.styles.js","sourceRoot":"","sources":["../../../internal/MenuMessage/MenuMessage.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACL,IAAA,KAAyB,mBAAmB,CAAC;gBACjD,gBAAgB,EAAE,CAAC,CAAC,mBAAmB;gBACvC,gBAAgB,EAAE,CAAC,CAAC,mBAAmB;aACxC,CAAC,EAHM,QAAQ,cAAA,EAAE,QAAQ,cAGxB,CAAC;YAEH,OAAO,GAAG,qMAAA,qCAEG,EAAoB,oBACpB,EAAqB,GAAI,EAAQ,GAAI,EAAQ,GAAI,EAAqB,kBACxE,EAAsB,uBACjB,EAAe,SAC9B,KAJY,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,mBAAmB,EAAI,QAAQ,EAAI,QAAQ,EAAI,CAAC,CAAC,mBAAmB,EACxE,CAAC,CAAC,oBAAoB,EACjB,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,mJAAA,qBACK,EAA2B,wBACzB,EAA6B,oBACjC,EAA0B,SACtC,KAHc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EACjC,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,6HAAA,qBACK,EAA0B,wBACxB,EAA4B,SAC5C,KAFc,CAAC,CAAC,wBAAwB,EACxB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;QACD,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,6HAAA,qBACK,EAA2B,wBACzB,EAA6B,SAC7C,KAFc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,6HAAA,qBACK,EAA0B,wBACxB,EAA4B,SAC5C,KAFc,CAAC,CAAC,wBAAwB,EACxB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;KACF,CAAC;AA1C8D,CA0C9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getMenuItemPaddings } from '../../components/MenuItem/MenuItem.styles.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemPaddingX: t.menuMessagePaddingX,\n      menuItemPaddingY: t.menuMessagePaddingY,\n    });\n\n    return css`\n      margin: 0;\n      display: ${t.menuMessageDisplay};\n      padding: ${t.menuMessagePaddingY} ${paddingX} ${paddingY} ${t.menuMessagePaddingX};\n      color: ${t.menuMessageTextColor};\n      background: ${t.menuMessageBg};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeMobile};\n      line-height: ${t.menuMessageLineHeightMobile};\n      padding: ${t.menuMessagePaddingMobile};\n    `;\n  },\n\n  rootSmall(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeSmall};\n      line-height: ${t.menuMessageLineHeightSmall};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeMedium};\n      line-height: ${t.menuMessageLineHeightMedium};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeLarge};\n      line-height: ${t.menuMessageLineHeightLarge};\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"MenuMessage.styles.js","sourceRoot":"","sources":["../../../internal/MenuMessage/MenuMessage.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI,YAAC,CAAQ;YACL,IAAA,KAAyB,mBAAmB,CAAC;gBACjD,gBAAgB,EAAE,CAAC,CAAC,mBAAmB;gBACvC,gBAAgB,EAAE,CAAC,CAAC,mBAAmB;aACxC,CAAC,EAHM,QAAQ,cAAA,EAAE,QAAQ,cAGxB,CAAC;YAEH,OAAO,GAAG,qMAAA,qCAEG,EAAoB,oBACpB,EAAqB,GAAI,EAAQ,GAAI,EAAQ,GAAI,EAAqB,kBACxE,EAAsB,uBACjB,EAAe,SAC9B,KAJY,CAAC,CAAC,kBAAkB,EACpB,CAAC,CAAC,mBAAmB,EAAI,QAAQ,EAAI,QAAQ,EAAI,CAAC,CAAC,mBAAmB,EACxE,CAAC,CAAC,oBAAoB,EACjB,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,mJAAA,qBACK,EAA2B,wBACzB,EAA6B,oBACjC,EAA0B,SACtC,KAHc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EACjC,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mJAAA,qBACK,EAAgC,wBAC9B,EAAkC,oBACtC,EAA+B,SAC3C,KAHc,CAAC,CAAC,8BAA8B,EAC9B,CAAC,CAAC,gCAAgC,EACtC,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,mJAAA,qBACK,EAAiC,wBAC/B,EAAmC,oBACvC,EAAgC,SAC5C,KAHc,CAAC,CAAC,+BAA+B,EAC/B,CAAC,CAAC,iCAAiC,EACvC,CAAC,CAAC,8BAA8B,EAC3C;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mJAAA,qBACK,EAAgC,wBAC9B,EAAkC,oBACtC,EAA+B,SAC3C,KAHc,CAAC,CAAC,8BAA8B,EAC9B,CAAC,CAAC,gCAAgC,EACtC,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,6HAAA,qBACK,EAA0B,wBACxB,EAA4B,SAC5C,KAFc,CAAC,CAAC,wBAAwB,EACxB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;QACD,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,6HAAA,qBACK,EAA2B,wBACzB,EAA6B,SAC7C,KAFc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,6HAAA,qBACK,EAA0B,wBACxB,EAA4B,SAC5C,KAFc,CAAC,CAAC,wBAAwB,EACxB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;KACF,CAAC;AAlE8D,CAkE9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { getMenuItemPaddings } from '../../components/MenuItem/MenuItem.styles.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemPaddingX: t.menuMessagePaddingX,\n      menuItemPaddingY: t.menuMessagePaddingY,\n    });\n\n    return css`\n      margin: 0;\n      display: ${t.menuMessageDisplay};\n      padding: ${t.menuMessagePaddingY} ${paddingX} ${paddingY} ${t.menuMessagePaddingX};\n      color: ${t.menuMessageTextColor};\n      background: ${t.menuMessageBg};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeMobile};\n      line-height: ${t.menuMessageLineHeightMobile};\n      padding: ${t.menuMessagePaddingMobile};\n    `;\n  },\n\n  rootMobileLarge(t: Theme) {\n    return css`\n      font-size: ${t.mobileMenuMessageFontSizeLarge};\n      line-height: ${t.mobileMenuMessageLineHeightLarge};\n      padding: ${t.mobileMenuMessagePaddingLarge};\n    `;\n  },\n\n  rootMobileMedium(t: Theme) {\n    return css`\n      font-size: ${t.mobileMenuMessageFontSizeMedium};\n      line-height: ${t.mobileMenuMessageLineHeightMedium};\n      padding: ${t.mobileMenuMessagePaddingMedium};\n    `;\n  },\n\n  rootMobileSmall(t: Theme) {\n    return css`\n      font-size: ${t.mobileMenuMessageFontSizeSmall};\n      line-height: ${t.mobileMenuMessageLineHeightSmall};\n      padding: ${t.mobileMenuMessagePaddingSmall};\n    `;\n  },\n\n  rootSmall(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeSmall};\n      line-height: ${t.menuMessageLineHeightSmall};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeMedium};\n      line-height: ${t.menuMessageLineHeightMedium};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeLarge};\n      line-height: ${t.menuMessageLineHeightLarge};\n    `;\n  },\n}));\n"]}

package/internal/MobilePopup/MobilePopup.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'react';
 import React from 'react';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
 interface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     /**
      * Функция, вызываемая при закрытии всплывающего окна
@@ -30,6 +31,11 @@ interface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
      * Позволяет контролировать текущее состояние всплывающего окна
      */
     opened: boolean;
+    /**
+     * Позволяет отрисовать попап по центру экрана
+     */
+    verticalAlign?: 'center' | 'bottom';
+    size?: SizeProp;
     children?: React.ReactNode;
 }
 export declare const MobilePopupDataTids: {
@@ -43,6 +49,7 @@ export declare class MobilePopup extends React.Component<MobilePopupProps> {
     private refForTransition;
     static readonly defaultRootNode: null;
     private emotion;
+    private cx;
     private jsStyles;
     private theme;
     getRootNode: TGetRootNode;
@@ -56,5 +63,6 @@ export declare class MobilePopup extends React.Component<MobilePopupProps> {
      */
     private backdropStopPropagation;
     private backdropClick;
+    private getContentClassName6_1;
 }
 export {};

package/internal/MobilePopup/MobilePopup.js

@@ -24,6 +24,7 @@ import { Transition } from 'react-transition-group';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
 import { HideBodyVerticalScroll } from '../HideBodyVerticalScroll/index.js';
 import { RenderContainer } from '../RenderContainer/index.js';
 import { RenderLayer } from '../RenderLayer/index.js';
@@ -58,6 +59,18 @@ var MobilePopup = /** @class */ (function (_super) {
             _this.backdropStopPropagation(event);
             _this.close();
         };
+        _this.getContentClassName6_1 = function () {
+            switch (_this.props.size) {
+                case 'small':
+                    return _this.jsStyles.contentSmall6_1(_this.theme);
+                case 'medium':
+                    return _this.jsStyles.contentMedium6_1(_this.theme);
+                case 'large':
+                    return _this.jsStyles.contentLarge6_1(_this.theme);
+                default:
+                    return _this.jsStyles.contentSmall6_1(_this.theme);
+            }
+        };
         return _this;
     }
     MobilePopup.prototype.render = function () {
@@ -69,18 +82,28 @@ var MobilePopup = /** @class */ (function (_super) {
         }));
     };
     MobilePopup.prototype.renderMain = function () {
+        var _a;
+        var themeGTE6_1 = isThemeGTE(this.theme, '6.1');
+        var align = (_a = this.props.verticalAlign) !== null && _a !== void 0 ? _a : 'bottom';
         var content = (React.createElement(ZIndex, { id: this.props.id, className: this.jsStyles.zIndex(), priority: 'MobilePopup' },
-            React.createElement(Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0, nodeRef: this.refForTransition },
-                React.createElement("div", { className: this.jsStyles.wrapper(), ref: this.refForTransition },
-                    React.createElement(RenderLayer, { onClickOutside: this.close },
-                        React.createElement("div", { ref: this.setRootNode, "data-tid": MobilePopupDataTids.container, className: this.jsStyles.container(this.theme) },
-                            React.createElement("div", { "data-tid": MobilePopupDataTids.root, className: this.jsStyles.root(this.theme) },
-                                React.createElement(MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent),
-                                React.createElement("div", { className: this.jsStyles.content(this.theme) }, this.props.children),
-                                React.createElement(MobilePopupFooter, null, this.props.footerChildComponent)),
-                            React.createElement("div", { onClick: this.close, className: this.jsStyles.bottomIndent() }))),
-                    React.createElement("div", { "data-tid": MobilePopupDataTids.backdrop, className: this.jsStyles.bg(), onClick: this.backdropClick, onMouseDown: this.backdropStopPropagation, onPointerDownCapture: this.backdropStopPropagation, onPointerUpCapture: this.backdropStopPropagation }),
-                    React.createElement(HideBodyVerticalScroll, null)))));
+            React.createElement(Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0, nodeRef: this.refForTransition }, themeGTE6_1 ? (React.createElement("div", { className: this.jsStyles.wrapper6_1(this.theme), ref: this.refForTransition },
+                React.createElement(RenderLayer, { onClickOutside: this.close },
+                    React.createElement("div", { ref: this.setRootNode, "data-tid": MobilePopupDataTids.container, className: this.cx(this.jsStyles.containerBase6_1(this.theme), align === 'bottom' && this.jsStyles.containerBottom6_1(this.theme)) },
+                        React.createElement("div", { "data-tid": MobilePopupDataTids.root, className: this.jsStyles.root6_1(this.theme) },
+                            React.createElement(MobilePopupHeader, { size: this.props.size, caption: this.props.caption }, this.props.headerChildComponent),
+                            React.createElement("div", { className: this.getContentClassName6_1() }, this.props.children),
+                            React.createElement(MobilePopupFooter, { size: this.props.size }, this.props.footerChildComponent)))),
+                React.createElement("div", { "data-tid": MobilePopupDataTids.backdrop, className: this.jsStyles.bg(), onClick: this.backdropClick, onMouseDown: this.backdropStopPropagation, onPointerDownCapture: this.backdropStopPropagation, onPointerUpCapture: this.backdropStopPropagation }),
+                React.createElement(HideBodyVerticalScroll, null))) : (React.createElement("div", { className: this.jsStyles.wrapper(), ref: this.refForTransition },
+                React.createElement(RenderLayer, { onClickOutside: this.close },
+                    React.createElement("div", { ref: this.setRootNode, "data-tid": MobilePopupDataTids.container, className: this.jsStyles.container(this.theme) },
+                        React.createElement("div", { "data-tid": MobilePopupDataTids.root, className: this.jsStyles.root(this.theme) },
+                            React.createElement(MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent),
+                            React.createElement("div", { className: this.jsStyles.content(this.theme) }, this.props.children),
+                            React.createElement(MobilePopupFooter, null, this.props.footerChildComponent)),
+                        React.createElement("div", { onClick: this.close, className: this.jsStyles.bottomIndent() }))),
+                React.createElement("div", { "data-tid": MobilePopupDataTids.backdrop, className: this.jsStyles.bg(), onClick: this.backdropClick, onMouseDown: this.backdropStopPropagation, onPointerDownCapture: this.backdropStopPropagation, onPointerUpCapture: this.backdropStopPropagation }),
+                React.createElement(HideBodyVerticalScroll, null))))));
         if (this.props.withoutRenderContainer) {
             return content;
         }

package/internal/MobilePopup/MobilePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobilePopup.js","sourceRoot":"","sources":["../../../internal/MobilePopup/MobilePopup.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll/index.js';\nimport { RenderContainer } from '../RenderContainer/index.js';\nimport { RenderLayer } from '../RenderLayer/index.js';\nimport { ZIndex } from '../ZIndex/index.js';\nimport { getJsStyles } from './MobilePopup.styles.js';\nimport { MobilePopupFooter } from './MobilePopupFooter/index.js';\nimport { MobilePopupHeader } from './MobilePopupHeader/index.js';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@withRenderEnvironment\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n  private refForTransition = React.createRef<HTMLDivElement>();\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private emotion!: Emotion;\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\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() {\n    const content = (\n      <ZIndex id={this.props.id} className={this.jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition\n          in={this.props.opened}\n          onExited={this.props.onClose}\n          mountOnEnter\n          unmountOnExit\n          timeout={0}\n          nodeRef={this.refForTransition}\n        >\n          <div className={this.jsStyles.wrapper()} ref={this.refForTransition}>\n            <RenderLayer onClickOutside={this.close}>\n              <div\n                ref={this.setRootNode}\n                data-tid={MobilePopupDataTids.container}\n                className={this.jsStyles.container(this.theme)}\n              >\n                <div data-tid={MobilePopupDataTids.root} className={this.jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={this.jsStyles.content(this.theme)}>{this.props.children}</div>\n                  <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                </div>\n                <div onClick={this.close} className={this.jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div\n              data-tid={MobilePopupDataTids.backdrop}\n              className={this.jsStyles.bg()}\n              onClick={this.backdropClick}\n              onMouseDown={this.backdropStopPropagation}\n              onPointerDownCapture={this.backdropStopPropagation}\n              onPointerUpCapture={this.backdropStopPropagation}\n            />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = (): void => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).\n   *  В мобильных браузерах pointerup может породить click по нижележащему элементу.\n   *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.\n   */\n  private backdropStopPropagation = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private backdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    this.backdropStopPropagation(event);\n    this.close();\n  };\n}\n"]}
+{"version":3,"file":"MobilePopup.js","sourceRoot":"","sources":["../../../internal/MobilePopup/MobilePopup.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll/index.js';\nimport { RenderContainer } from '../RenderContainer/index.js';\nimport { RenderLayer } from '../RenderLayer/index.js';\nimport { ZIndex } from '../ZIndex/index.js';\nimport { getJsStyles } from './MobilePopup.styles.js';\nimport { MobilePopupFooter } from './MobilePopupFooter/index.js';\nimport { MobilePopupHeader } from './MobilePopupHeader/index.js';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  /**\n   * Позволяет отрисовать попап по центру экрана\n   */\n  verticalAlign?: 'center' | 'bottom';\n  size?: SizeProp;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@withRenderEnvironment\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n  private refForTransition = React.createRef<HTMLDivElement>();\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\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() {\n    const themeGTE6_1 = isThemeGTE(this.theme, '6.1');\n    const align = this.props.verticalAlign ?? 'bottom';\n    const content = (\n      <ZIndex id={this.props.id} className={this.jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition\n          in={this.props.opened}\n          onExited={this.props.onClose}\n          mountOnEnter\n          unmountOnExit\n          timeout={0}\n          nodeRef={this.refForTransition}\n        >\n          {themeGTE6_1 ? (\n            <div className={this.jsStyles.wrapper6_1(this.theme)} ref={this.refForTransition}>\n              <RenderLayer onClickOutside={this.close}>\n                <div\n                  ref={this.setRootNode}\n                  data-tid={MobilePopupDataTids.container}\n                  className={this.cx(\n                    this.jsStyles.containerBase6_1(this.theme),\n                    align === 'bottom' && this.jsStyles.containerBottom6_1(this.theme),\n                  )}\n                >\n                  <div data-tid={MobilePopupDataTids.root} className={this.jsStyles.root6_1(this.theme)}>\n                    <MobilePopupHeader size={this.props.size} caption={this.props.caption}>\n                      {this.props.headerChildComponent}\n                    </MobilePopupHeader>\n                    <div className={this.getContentClassName6_1()}>{this.props.children}</div>\n                    <MobilePopupFooter size={this.props.size}>{this.props.footerChildComponent}</MobilePopupFooter>\n                  </div>\n                </div>\n              </RenderLayer>\n              <div\n                data-tid={MobilePopupDataTids.backdrop}\n                className={this.jsStyles.bg()}\n                onClick={this.backdropClick}\n                onMouseDown={this.backdropStopPropagation}\n                onPointerDownCapture={this.backdropStopPropagation}\n                onPointerUpCapture={this.backdropStopPropagation}\n              />\n              <HideBodyVerticalScroll />\n            </div>\n          ) : (\n            <div className={this.jsStyles.wrapper()} ref={this.refForTransition}>\n              <RenderLayer onClickOutside={this.close}>\n                <div\n                  ref={this.setRootNode}\n                  data-tid={MobilePopupDataTids.container}\n                  className={this.jsStyles.container(this.theme)}\n                >\n                  <div data-tid={MobilePopupDataTids.root} className={this.jsStyles.root(this.theme)}>\n                    <MobilePopupHeader caption={this.props.caption}>\n                      {this.props.headerChildComponent}\n                    </MobilePopupHeader>\n                    <div className={this.jsStyles.content(this.theme)}>{this.props.children}</div>\n                    <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                  </div>\n                  <div onClick={this.close} className={this.jsStyles.bottomIndent()} />\n                </div>\n              </RenderLayer>\n              <div\n                data-tid={MobilePopupDataTids.backdrop}\n                className={this.jsStyles.bg()}\n                onClick={this.backdropClick}\n                onMouseDown={this.backdropStopPropagation}\n                onPointerDownCapture={this.backdropStopPropagation}\n                onPointerUpCapture={this.backdropStopPropagation}\n              />\n              <HideBodyVerticalScroll />\n            </div>\n          )}\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = (): void => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).\n   *  В мобильных браузерах pointerup может породить click по нижележащему элементу.\n   *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.\n   */\n  private backdropStopPropagation = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private backdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    this.backdropStopPropagation(event);\n    this.close();\n  };\n\n  private getContentClassName6_1 = (): string => {\n    switch (this.props.size) {\n      case 'small':\n        return this.jsStyles.contentSmall6_1(this.theme);\n      case 'medium':\n        return this.jsStyles.contentMedium6_1(this.theme);\n      case 'large':\n        return this.jsStyles.contentLarge6_1(this.theme);\n      default:\n        return this.jsStyles.contentSmall6_1(this.theme);\n    }\n  };\n}\n"]}

package/internal/MobilePopup/MobilePopup.styles.d.ts

@@ -4,6 +4,13 @@ export declare const getJsStyles: import("../../lib/theming/Emotion.js").StylesG
     wrapper(): string;
     content(t: Theme): string;
     container(t: Theme): string;
+    root6_1(t: Theme): string;
+    wrapper6_1(t: Theme): string;
+    contentSmall6_1(t: Theme): string;
+    contentMedium6_1(t: Theme): string;
+    contentLarge6_1(t: Theme): string;
+    containerBase6_1(t: Theme): string;
+    containerBottom6_1(t: Theme): string;
     bg(): string;
     bottomIndent(): string;
     zIndex(): string;

package/internal/MobilePopup/MobilePopup.styles.js

@@ -5,29 +5,53 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
 export var getJsStyles = memoizeGetStyles(function (_a) {
     var css = _a.css;
-    return ({
+    var content6_1 = function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      overflow-y: scroll;\n      &::-webkit-scrollbar {\n        width: 0;\n      }\n    "], ["\n      background-color: ", ";\n      overflow-y: scroll;\n      &::-webkit-scrollbar {\n        width: 0;\n      }\n    "])), t.bgDefault);
+    };
+    return {
         root: function (t) {
-            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ", ";\n      overflow: hidden;\n      padding-bottom: ", ";\n      background: ", ";\n    "], ["\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ", ";\n      overflow: hidden;\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.mobilePopupContainerBorderRadius, t.mobilePopupContainerBottomPadding, t.menuBgDefault);
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ", ";\n        overflow: hidden;\n        padding-bottom: ", ";\n        background: ", ";\n      "], ["\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ", ";\n        overflow: hidden;\n        padding-bottom: ", ";\n        background: ", ";\n      "])), t.mobilePopupContainerBorderRadius, t.mobilePopupContainerBottomPadding, t.menuBgDefault);
         },
         wrapper: function () {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    "], ["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    "])));
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        overflow: auto;\n      "], ["\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        overflow: auto;\n      "])));
         },
         content: function (t) {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), t.bgDefault);
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        background-color: ", ";\n      "], ["\n        background-color: ", ";\n      "])), t.bgDefault);
         },
         container: function (t) {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      right: ", ";\n      z-index: 100000;\n    "], ["\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      right: ", ";\n      z-index: 100000;\n    "])), t.mobilePopupTopPadding, t.mobilePopupOuterIndentY, t.mobilePopupOuterIndentY);
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        right: ", ";\n        z-index: 100000;\n      "], ["\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        right: ", ";\n        z-index: 100000;\n      "])), t.mobilePopupTopPadding, t.mobilePopupOuterIndentY, t.mobilePopupOuterIndentY);
+        },
+        root6_1: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ", ";\n        overflow: hidden;\n        background: ", ";\n\n        max-height: calc(100vh - (2 * ", "));\n        max-height: calc(100dvh - (2 * ", "));\n      "], ["\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ", ";\n        overflow: hidden;\n        background: ", ";\n\n        max-height: calc(100vh - (2 * ", "));\n        max-height: calc(100dvh - (2 * ", "));\n      "])), t.mobilePopupContainerBorderRadius, t.menuBgDefault, t.mobilePopupPositionY, t.mobilePopupPositionY);
+        },
+        wrapper6_1: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        position: fixed;\n        top: ", ";\n        bottom: ", ";\n        right: ", ";\n        left: ", ";\n        display: flex;\n        align-items: center;\n      "], ["\n        position: fixed;\n        top: ", ";\n        bottom: ", ";\n        right: ", ";\n        left: ", ";\n        display: flex;\n        align-items: center;\n      "])), t.mobilePopupPositionY, t.mobilePopupPositionY, t.mobilePopupPositionX, t.mobilePopupPositionX);
+        },
+        contentSmall6_1: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", "\n        padding: ", ";\n      "], ["\n        ", "\n        padding: ", ";\n      "])), content6_1(t), t.mobilePopupPaddingSmall);
+        },
+        contentMedium6_1: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", "\n        padding: ", ";\n      "], ["\n        ", "\n        padding: ", ";\n      "])), content6_1(t), t.mobilePopupPaddingMedium);
+        },
+        contentLarge6_1: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        ", "\n        padding: ", ";\n      "], ["\n        ", "\n        padding: ", ";\n      "])), content6_1(t), t.mobilePopupPaddingLarge);
+        },
+        containerBase6_1: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        position: absolute;\n        z-index: 100000;\n        min-width: calc(100vw - (2 * ", "));\n      "], ["\n        position: absolute;\n        z-index: 100000;\n        min-width: calc(100vw - (2 * ", "));\n      "])), t.mobilePopupPositionX);
+        },
+        containerBottom6_1: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        bottom: 0;\n        max-height: calc(100vh - (2 * ", "));\n      "], ["\n        bottom: 0;\n        max-height: calc(100vh - (2 * ", "));\n      "])), t.mobilePopupPositionY);
         },
         bg: function () {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    "], ["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    "])));
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        z-index: 9999;\n        touch-action: none;\n        background: #333333;\n        opacity: 50%;\n      "], ["\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        z-index: 9999;\n        touch-action: none;\n        background: #333333;\n        opacity: 50%;\n      "])));
         },
         bottomIndent: function () {
-            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      height: 80px;\n    "], ["\n      height: 80px;\n    "])));
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n        height: 80px;\n      "], ["\n        height: 80px;\n      "])));
         },
         zIndex: function () {
-            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n        position: relative;\n      "], ["\n        position: relative;\n      "])));
         },
-    });
+    };
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+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;
 //# sourceMappingURL=MobilePopup.styles.js.map

package/internal/MobilePopup/MobilePopup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobilePopup.styles.js","sourceRoot":"","sources":["../../../internal/MobilePopup/MobilePopup.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QACjE,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,sTAAA,yJAMS,EAAkC,oDAEjC,EAAmC,uBACvC,EAAe,SAC9B,KAJkB,CAAC,CAAC,gCAAgC,EAEjC,CAAC,CAAC,iCAAiC,EACvC,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,4LAAA,yHAOT,KAAC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,0GAAA,4BACY,EAAW,SAChC,KADqB,CAAC,CAAC,SAAS,EAC/B;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,uLAAA,0CAED,EAAuB,iBACtB,EAAyB,kBACxB,EAAyB,iCAEnC,KAJQ,CAAC,CAAC,qBAAqB,EACtB,CAAC,CAAC,uBAAuB,EACxB,CAAC,CAAC,uBAAuB,EAElC;QACJ,CAAC;QAED,EAAE;YACA,OAAO,GAAG,uQAAA,oMAUT,KAAC;QACJ,CAAC;QAED,YAAY;YACV,OAAO,GAAG,gGAAA,6BAET,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;KACF,CAAC;AAnEgE,CAmEhE,CAAC,CAAC","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';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"MobilePopup.styles.js","sourceRoot":"","sources":["../../../internal/MobilePopup/MobilePopup.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAChD,IAAM,UAAU,GAAG,UAAC,CAAQ;QAC1B,OAAO,GAAG,+LAAA,4BACY,EAAW,8FAKhC,KALqB,CAAC,CAAC,SAAS,EAK/B;IACJ,CAAC,CAAC;IACF,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,0UAAA,qKAMS,EAAkC,wDAEjC,EAAmC,yBACvC,EAAe,WAC9B,KAJkB,CAAC,CAAC,gCAAgC,EAEjC,CAAC,CAAC,iCAAiC,EACvC,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,0MAAA,uIAOT,KAAC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,8GAAA,8BACY,EAAW,WAChC,KADqB,CAAC,CAAC,SAAS,EAC/B;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,mMAAA,8CAED,EAAuB,mBACtB,EAAyB,oBACxB,EAAyB,qCAEnC,KAJQ,CAAC,CAAC,qBAAqB,EACtB,CAAC,CAAC,uBAAuB,EACxB,CAAC,CAAC,uBAAuB,EAElC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,4YAAA,qKAMS,EAAkC,oDAErC,EAAe,6CAEG,EAAsB,8CACrB,EAAsB,aACxD,KANkB,CAAC,CAAC,gCAAgC,EAErC,CAAC,CAAC,aAAa,EAEG,CAAC,CAAC,oBAAoB,EACrB,CAAC,CAAC,oBAAoB,EACvD;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,mPAAA,2CAED,EAAsB,qBACnB,EAAsB,oBACvB,EAAsB,mBACvB,EAAsB,iEAG/B,KANQ,CAAC,CAAC,oBAAoB,EACnB,CAAC,CAAC,oBAAoB,EACvB,CAAC,CAAC,oBAAoB,EACvB,CAAC,CAAC,oBAAoB,EAG9B;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,mHAAA,YACN,EAAa,qBACJ,EAAyB,WACrC,KAFG,UAAU,CAAC,CAAC,CAAC,EACJ,CAAC,CAAC,uBAAuB,EACpC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,mHAAA,YACN,EAAa,qBACJ,EAA0B,WACtC,KAFG,UAAU,CAAC,CAAC,CAAC,EACJ,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,qHAAA,YACN,EAAa,qBACJ,EAAyB,WACrC,KAFG,UAAU,CAAC,CAAC,CAAC,EACJ,CAAC,CAAC,uBAAuB,EACpC;QACJ,CAAC;QAED,gBAAgB,YAAC,CAAQ;YACvB,OAAO,GAAG,oLAAA,gGAGuB,EAAsB,aACtD,KADgC,CAAC,CAAC,oBAAoB,EACrD;QACJ,CAAC;QAED,kBAAkB,YAAC,CAAQ;YACzB,OAAO,GAAG,kJAAA,8DAEwB,EAAsB,aACvD,KADiC,CAAC,CAAC,oBAAoB,EACtD;QACJ,CAAC;QAED,EAAE;YACA,OAAO,GAAG,6RAAA,wNAUT,KAAC;QACJ,CAAC;QAED,YAAY;YACV,OAAO,GAAG,sGAAA,iCAET,KAAC;QACJ,CAAC;QAED,MAAM;YACJ,OAAO,GAAG,4GAAA,uCAET,KAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","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';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => {\n  const content6_1 = (t: Theme) => {\n    return css`\n      background-color: ${t.bgDefault};\n      overflow-y: scroll;\n      &::-webkit-scrollbar {\n        width: 0;\n      }\n    `;\n  };\n  return {\n    root(t: Theme) {\n      return css`\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ${t.mobilePopupContainerBorderRadius};\n        overflow: hidden;\n        padding-bottom: ${t.mobilePopupContainerBottomPadding};\n        background: ${t.menuBgDefault};\n      `;\n    },\n\n    wrapper() {\n      return css`\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        overflow: auto;\n      `;\n    },\n\n    content(t: Theme) {\n      return css`\n        background-color: ${t.bgDefault};\n      `;\n    },\n\n    container(t: Theme) {\n      return css`\n        position: absolute;\n        top: ${t.mobilePopupTopPadding};\n        left: ${t.mobilePopupOuterIndentY};\n        right: ${t.mobilePopupOuterIndentY};\n        z-index: 100000;\n      `;\n    },\n\n    root6_1(t: Theme) {\n      return css`\n        width: 100%;\n        height: 100%;\n        flex-direction: column;\n        display: flex;\n        justify-content: flex-end;\n        border-radius: ${t.mobilePopupContainerBorderRadius};\n        overflow: hidden;\n        background: ${t.menuBgDefault};\n\n        max-height: calc(100vh - (2 * ${t.mobilePopupPositionY}));\n        max-height: calc(100dvh - (2 * ${t.mobilePopupPositionY}));\n      `;\n    },\n\n    wrapper6_1(t: Theme) {\n      return css`\n        position: fixed;\n        top: ${t.mobilePopupPositionY};\n        bottom: ${t.mobilePopupPositionY};\n        right: ${t.mobilePopupPositionX};\n        left: ${t.mobilePopupPositionX};\n        display: flex;\n        align-items: center;\n      `;\n    },\n\n    contentSmall6_1(t: Theme) {\n      return css`\n        ${content6_1(t)}\n        padding: ${t.mobilePopupPaddingSmall};\n      `;\n    },\n\n    contentMedium6_1(t: Theme) {\n      return css`\n        ${content6_1(t)}\n        padding: ${t.mobilePopupPaddingMedium};\n      `;\n    },\n\n    contentLarge6_1(t: Theme) {\n      return css`\n        ${content6_1(t)}\n        padding: ${t.mobilePopupPaddingLarge};\n      `;\n    },\n\n    containerBase6_1(t: Theme) {\n      return css`\n        position: absolute;\n        z-index: 100000;\n        min-width: calc(100vw - (2 * ${t.mobilePopupPositionX}));\n      `;\n    },\n\n    containerBottom6_1(t: Theme) {\n      return css`\n        bottom: 0;\n        max-height: calc(100vh - (2 * ${t.mobilePopupPositionY}));\n      `;\n    },\n\n    bg() {\n      return css`\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        left: 0;\n        z-index: 9999;\n        touch-action: none;\n        background: #333333;\n        opacity: 50%;\n      `;\n    },\n\n    bottomIndent() {\n      return css`\n        height: 80px;\n      `;\n    },\n\n    zIndex() {\n      return css`\n        position: relative;\n      `;\n    },\n  };\n});\n"]}

package/internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.d.ts

@@ -1,9 +1,16 @@
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-export declare class MobilePopupFooter extends React.Component<React.PropsWithChildren> {
+import type { SizeProp } from '../../../lib/types/props.js';
+interface Props extends PropsWithChildren {
+    size?: SizeProp;
+}
+export declare class MobilePopupFooter extends React.Component<Props> {
     static __KONTUR_REACT_UI__: string;
     private jsStyles;
     private emotion;
     private theme;
     render(): React.JSX.Element;
     private renderMain;
+    private getRootSizeClassName6_1;
 }
+export {};

package/internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.js

@@ -22,11 +22,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';
 import { getJsStyles } from './MobilePopupFooter.styles.js';
 var MobilePopupFooter = /** @class */ (function (_super) {
     __extends(MobilePopupFooter, _super);
     function MobilePopupFooter() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getRootSizeClassName6_1 = function () {
+            switch (_this.props.size) {
+                case 'large':
+                    return _this.jsStyles.rootLarge6_1(_this.theme);
+                case 'medium':
+                    return _this.jsStyles.rootMedium6_1(_this.theme);
+                case 'small':
+                default:
+                    return _this.jsStyles.rootSmall6_1(_this.theme);
+            }
+        };
+        return _this;
     }
     MobilePopupFooter.prototype.render = function () {
         var _this = this;
@@ -37,10 +50,14 @@ var MobilePopupFooter = /** @class */ (function (_super) {
         }));
     };
     MobilePopupFooter.prototype.renderMain = function () {
+        var themeGTE6_1 = isThemeGTE(this.theme, '6.1');
         var children = this.props.children;
         if (!children || !React.isValidElement(children)) {
             return null;
         }
+        if (themeGTE6_1) {
+            return React.createElement("div", { className: this.getRootSizeClassName6_1() }, children);
+        }
         return React.createElement("div", { className: this.jsStyles.root(this.theme) }, children);
     };
     MobilePopupFooter.__KONTUR_REACT_UI__ = 'MobileMenuFooter';

package/internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobilePopupFooter.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;IAAuC,qCAAwC;IAA/E;;IA6BA,CAAC;IAtBQ,kCAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,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;IAEO,sCAAU,GAAlB;QACU,IAAA,QAAQ,GAAK,IAAI,CAAC,KAAK,SAAf,CAAgB;QAEhC,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAO,CAAC;IAC1E,CAAC;IA3Ba,qCAAmB,GAAG,kBAAkB,AAArB,CAAsB;IAD5C,iBAAiB;QAD7B,qBAAqB;OACT,iBAAiB,CA6B7B;IAAD,wBAAC;CAAA,AA7BD,CAAuC,KAAK,CAAC,SAAS,GA6BrD;SA7BY,iBAAiB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { getJsStyles } from './MobilePopupFooter.styles.js';\n\n@withRenderEnvironment\nexport class MobilePopupFooter extends React.Component<React.PropsWithChildren> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuFooter';\n\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private emotion!: Emotion;\n  private theme!: Theme;\n\n  public render() {\n    this.jsStyles = getJsStyles(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  private renderMain() {\n    const { children } = this.props;\n\n    if (!children || !React.isValidElement(children)) {\n      return null;\n    }\n\n    return <div className={this.jsStyles.root(this.theme)}>{children}</div>;\n  }\n}\n"]}
+{"version":3,"file":"MobilePopupFooter.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAO5D;IAAuC,qCAAsB;IAA7D;;QAmCU,6BAAuB,GAAG;YAChC,QAAQ,KAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACxB,KAAK,OAAO;oBACV,OAAO,KAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;gBAChD,KAAK,QAAQ;oBACX,OAAO,KAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;gBACjD,KAAK,OAAO,CAAC;gBACb;oBACE,OAAO,KAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC;;IACJ,CAAC;IAvCQ,kCAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,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;IAEO,sCAAU,GAAlB;QACE,IAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC1C,IAAA,QAAQ,GAAK,IAAI,CAAC,KAAK,SAAf,CAAgB;QAEhC,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjD,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,IAAG,QAAQ,CAAO,CAAC;QAC1E,CAAC;QAED,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,QAAQ,CAAO,CAAC;IAC1E,CAAC;IAhCa,qCAAmB,GAAG,kBAAkB,AAArB,CAAsB;IAD5C,iBAAiB;QAD7B,qBAAqB;OACT,iBAAiB,CA8C7B;IAAD,wBAAC;CAAA,AA9CD,CAAuC,KAAK,CAAC,SAAS,GA8CrD;SA9CY,iBAAiB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { PropsWithChildren } from 'react';\nimport React from 'react';\n\nimport { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { getJsStyles } from './MobilePopupFooter.styles.js';\n\ninterface Props extends PropsWithChildren {\n  size?: SizeProp;\n}\n\n@withRenderEnvironment\nexport class MobilePopupFooter extends React.Component<Props> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuFooter';\n\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private emotion!: Emotion;\n  private theme!: Theme;\n\n  public render() {\n    this.jsStyles = getJsStyles(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  private renderMain() {\n    const themeGTE6_1 = isThemeGTE(this.theme, '6.1');\n    const { children } = this.props;\n\n    if (!children || !React.isValidElement(children)) {\n      return null;\n    }\n\n    if (themeGTE6_1) {\n      return <div className={this.getRootSizeClassName6_1()}>{children}</div>;\n    }\n\n    return <div className={this.jsStyles.root(this.theme)}>{children}</div>;\n  }\n\n  private getRootSizeClassName6_1 = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return this.jsStyles.rootLarge6_1(this.theme);\n      case 'medium':\n        return this.jsStyles.rootMedium6_1(this.theme);\n      case 'small':\n      default:\n        return this.jsStyles.rootSmall6_1(this.theme);\n    }\n  };\n}\n"]}

package/internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.styles.d.ts

@@ -1,4 +1,7 @@
 import type { Theme } from '../../../lib/theming/Theme.js';
 export declare const getJsStyles: import("../../../lib/theming/Emotion.js").StylesGetter<{
     root(t: Theme): string;
+    rootSmall6_1(t: Theme): string;
+    rootMedium6_1(t: Theme): string;
+    rootLarge6_1(t: Theme): string;
 }>;