@skbkontur/react-ui 0.0.0-50f666af0e → 0.0.0-52df310f7c

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js

@@ -1,138 +1,68 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      left: 15px;\n      top: 5px;\n    "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: #fff;\n      opacity: 0.6;\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: #a0a0a0;\n      white-space: normal;\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      & {\n        padding-left: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", " !important;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: 18px;\n      padding: 6px 18px 7px 8px;\n      position: relative;\n      text-decoration: none;\n\n      button& {\n        min-width: 100%;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-var styles = {
-  root: function root() {
-    return css(_templateObject(), resetButton());
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,
+      menuItemPaddingX: t.menuItemPaddingX,
+      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,
+      menuItemPaddingY: t.menuItemPaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemDisplay, t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
   },
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
-    return css(_templateObject2(), t.dropdownMenuHoverBg, t.textColorInvert);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
   },
   selected: function selected(t) {
-    return css(_templateObject3(), t.dropdownMenuSelectedBg);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject4(), t.textColorDisabled);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
   link: function link(t) {
-    return css(_templateObject5(), t.linkColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
   },
   loose: function loose() {
-    return css(_templateObject6());
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
   },
   withIcon: function withIcon(t) {
-    return css(_templateObject7(), t.menuItemPaddingForIcon);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
   },
-  comment: function comment() {
-    return css(_templateObject8());
+  comment: function comment(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor);
   },
-  commentHover: function commentHover() {
-    return css(_templateObject9());
+  commentHover: function commentHover(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
-  icon: function icon() {
-    return css(_templateObject10());
+  icon: function icon(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemIconLegacyShift);
+  },
+  mobileContentWithIcon: function mobileContentWithIcon() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","hover","t","dropdownMenuHoverBg","textColorInvert","selected","dropdownMenuSelectedBg","disabled","textColorDisabled","link","linkColor","loose","withIcon","menuItemPaddingForIcon","comment","commentHover","icon","jsStyles"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOJ,GAAP;AACIE,IAAAA,WAAW,EADf;;;;;;;;;;;;;AAcD,GAhBY;AAiBbG,EAAAA,KAjBa,iBAiBPC,CAjBO,EAiBG;AACd;AACA,WAAON,GAAP;AACgBM,IAAAA,CAAC,CAACC,mBADlB;AAEWD,IAAAA,CAAC,CAACE,eAFb;;AAID,GAvBY;AAwBbC,EAAAA,QAxBa,oBAwBJH,CAxBI,EAwBM;AACjB,WAAON,GAAP;AACgBM,IAAAA,CAAC,CAACI,sBADlB;;AAGD,GA5BY;AA6BbC,EAAAA,QA7Ba,oBA6BJL,CA7BI,EA6BM;AACjB,WAAON,GAAP;;AAEWM,IAAAA,CAAC,CAACM,iBAFb;;;AAKD,GAnCY;AAoCbC,EAAAA,IApCa,gBAoCRP,CApCQ,EAoCE;AACb,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACQ,SADb;;AAGD,GAxCY;AAyCbC,EAAAA,KAzCa,mBAyCL;AACN,WAAOf,GAAP;;;AAGD,GA7CY;AA8CbgB,EAAAA,QA9Ca,oBA8CJV,CA9CI,EA8CM;AACjB,WAAON,GAAP;;AAEoBM,IAAAA,CAAC,CAACW,sBAFtB;;;AAKD,GApDY;AAqDbC,EAAAA,OArDa,qBAqDH;AACR,WAAOlB,GAAP;;;;AAID,GA1DY;AA2DbmB,EAAAA,YA3Da,0BA2DE;AACb,WAAOnB,GAAP;;;;AAID,GAhEY;AAiEboB,EAAAA,IAjEa,kBAiEN;AACL,WAAOpB,GAAP;;;;;;AAMD,GAxEY,EAAf;;;AA2EA,OAAO,IAAMqB,QAAQ,GAAGpB,YAAY,CAACE,MAAD,CAA7B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      cursor: pointer;\r\n      display: block;\r\n      line-height: 18px;\r\n      padding: 6px 18px 7px 8px;\r\n      position: relative;\r\n      text-decoration: none;\r\n\r\n      button& {\r\n        min-width: 100%;\r\n      }\r\n    `;\r\n  },\r\n  hover(t: Theme) {\r\n    // Color with !important in purpose to override `a:hover`\r\n    return css`\r\n      background: ${t.dropdownMenuHoverBg};\r\n      color: ${t.textColorInvert} !important;\r\n    `;\r\n  },\r\n  selected(t: Theme) {\r\n    return css`\r\n      background: ${t.dropdownMenuSelectedBg};\r\n    `;\r\n  },\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: transparent;\r\n      color: ${t.textColorDisabled};\r\n      cursor: default;\r\n    `;\r\n  },\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.linkColor};\r\n    `;\r\n  },\r\n  loose() {\r\n    return css`\r\n      padding-left: 15px;\r\n    `;\r\n  },\r\n  withIcon(t: Theme) {\r\n    return css`\r\n      & {\r\n        padding-left: ${t.menuItemPaddingForIcon};\r\n      }\r\n    `;\r\n  },\r\n  comment() {\r\n    return css`\r\n      color: #a0a0a0;\r\n      white-space: normal;\r\n    `;\r\n  },\r\n  commentHover() {\r\n    return css`\r\n      color: #fff;\r\n      opacity: 0.6;\r\n    `;\r\n  },\r\n  icon() {\r\n    return css`\r\n      display: inline-block;\r\n      position: absolute;\r\n      left: 15px;\r\n      top: 5px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","menuItemDisplay","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","mobileContentWithIcon"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemLegacyPaddingX,\n  menuItemPaddingX,\n  menuItemLegacyPaddingY,\n  menuItemPaddingY,\n}: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {\n  const legacyPaddingX = parseFloat(menuItemLegacyPaddingX);\n  const legacyPaddingY = parseFloat(menuItemLegacyPaddingY);\n\n  const paddingX = legacyPaddingX !== 0 ? `${parseFloat(menuItemPaddingX) + legacyPaddingX}px` : menuItemPaddingX;\n  const paddingY = legacyPaddingY !== 0 ? `${parseFloat(menuItemPaddingY) + legacyPaddingY}px` : menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,\n      menuItemPaddingX: t.menuItemPaddingX,\n      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,\n      menuItemPaddingY: t.menuItemPaddingY,\n    });\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuItemFontSizeMobile};\n      line-height: ${t.menuItemLineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: ${t.menuItemDisabledBg};\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"]}

package/components/MenuItem/MenuItem.styles.d.ts

@@ -1,12 +1,19 @@
-export declare const jsStyles: {
-    root(): string;
-    hover(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    selected(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    rootMobile(t: Theme): string;
+    hover(t: Theme): string;
+    selected(t: Theme): string;
+    disabled(t: Theme): string;
+    link(t: Theme): string;
     loose(): string;
-    withIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    comment(): string;
-    commentHover(): string;
-    icon(): string;
+    withIcon(t: Theme): string;
+    comment(t: Theme): string;
+    commentHover(t: Theme): string;
+    icon(t: Theme): string;
+    mobileContentWithIcon(): string;
 };

package/components/MenuItem/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './MenuItem';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './MenuItem';\n"]}

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,15 +1,29 @@
 import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../MenuSeparator.styles";
-/**
-                                                    * Разделитель в меню.
-                                                    */
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../MenuSeparator.styles";
+export var MenuSeparatorDataTids = {
+  root: 'MenuSeparator__root'
+};
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
+ */
 
-function MenuSeparator() {
+function MenuSeparator(props) {
   var theme = useContext(ThemeContext);
-  return React.createElement("div", {
-    className: jsStyles.root(theme)
-  });
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx))
+    });
+  }));
 }
 
 MenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","jsStyles","MenuSeparator","theme","root","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,QAAT,QAAyB,wBAAzB;;AAEA;;;AAGA,SAASC,aAAT,GAAyB;AACvB,MAAMC,KAAK,GAAGJ,UAAU,CAACC,YAAD,CAAxB;;AAEA,SAAO,6BAAK,SAAS,EAAEC,QAAQ,CAACG,IAAT,CAAcD,KAAd,CAAhB,GAAP;AACD;;AAEDD,aAAa,CAACG,mBAAd,GAAoC,eAApC;;AAEA,SAASH,aAAT","sourcesContent":["import React, { useContext } from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './MenuSeparator.styles';\r\n\r\n/**\r\n * Разделитель в меню.\r\n */\r\nfunction MenuSeparator() {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return <div className={jsStyles.root(theme)} />;\r\n}\r\n\r\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\r\n\r\nexport { MenuSeparator };\r\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","cx","ThemeContext","CommonWrapper","ResponsiveLayout","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","isMobile","rootMobile","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,aAAfE,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUL,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEN,EAAE,gBAAII,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAJ,IAAyB,IAAzB,MAAgCL,MAAM,CAACO,UAAP,CAAkBF,KAAlB,CAAhC,IAA2DC,QAA3D,OAFf,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDH,aAAa,CAACK,mBAAd,GAAoC,eAApC;;AAEA,SAASL,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <ResponsiveLayout>\n        {({ isMobile }) => {\n          return (\n            <div\n              data-tid={MenuSeparatorDataTids.root}\n              className={cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n            />\n          );\n        }}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,8 +1,14 @@
-/// <reference types="react" />
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type MenuSeparatorProps = CommonProps;
+export declare const MenuSeparatorDataTids: {
+    readonly root: "MenuSeparator__root";
+};
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
-declare function MenuSeparator(): JSX.Element;
+declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {
     var __KONTUR_REACT_UI__: string;
 }

package/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

@@ -1,19 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin: 5px 0;\n      border-top: 1px solid ", ";\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject(), t.menuSeparatorBorderColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: ", " 0;\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorBorderColor","jsStyles"],"mappings":"iTAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;AAE0BI,IAAAA,CAAC,CAACC,wBAF5B;;AAID,GANY,EAAf;;;AASA,OAAO,IAAMC,QAAQ,GAAGL,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      margin: 5px 0;\r\n      border-top: 1px solid ${t.menuSeparatorBorderColor};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBJ,CARsB,EAQZ;AACnB,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,0BADd,EAC4CL,CAAC,CAACM,0BAD9C;;;AAID,GAbgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n      border-radius: 1px;\n    `;\n  },\n});\n"]}

package/components/MenuSeparator/MenuSeparator.styles.d.ts

@@ -1,3 +1,5 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

package/components/MenuSeparator/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './MenuSeparator';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './MenuSeparator';\n"]}